/* Incy Гид — дизайн-система.
   Основа: Fluxora (тёмное видео-hero, стекло, пилюля-навигация),
   Visor (текст «за» персонажем, белые карточки поверх hero),
   Selene (моно-телеметрия, линия-маршрут при скролле, плавные появления).
   Палитра снята с иконки Incy: тёмно-зелёный фон, градиент зелёный → лайм. */

:root {
  --bg: #050b07;
  --bg-2: #08130c;
  --bg-3: #0c1b11;
  --ink: #f1f7ef;
  --ink-soft: rgba(241, 247, 239, 0.74);
  --ink-faint: rgba(241, 247, 239, 0.5);
  --ink-ghost: rgba(241, 247, 239, 0.16);

  --g1: #22d160;
  --g2: #c2e84e;
  --grad: linear-gradient(100deg, var(--g1), var(--g2));

  --paper: #eef5ea;
  --paper-ink: #0b1a10;
  --paper-soft: #4d5e52;

  --glass: rgba(8, 28, 14, 0.46);
  --glass-strong: rgba(6, 20, 10, 0.7);
  --hair: rgba(255, 255, 255, 0.13);
  --hair-soft: rgba(255, 255, 255, 0.07);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 3vw, 44px);
  --max: 1240px;

  --f-display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-italic: 'Playfair Display', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-giant: 'Inter Tight', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--g2); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--g1); color: #04130a; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--g2); color: #04130a; padding: 10px 14px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

em { font-family: var(--f-italic); font-style: italic; font-weight: 500; }

.dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--g2); box-shadow: 0 0 0 4px rgba(194, 232, 78, 0.18), 0 0 14px var(--g2);
  animation: pulse 2.4s ease-in-out infinite;
}
.dot--dark { background: var(--g1); box-shadow: 0 0 0 4px rgba(34, 209, 96, 0.2); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(194, 232, 78, 0.05), 0 0 18px var(--g2); } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 15px/1 var(--f-display); letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn--flame {
  background: var(--grad); color: #04130a;
  box-shadow: 0 10px 30px -8px rgba(34, 209, 96, 0.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--flame:hover { box-shadow: 0 16px 40px -8px rgba(160, 230, 70, 0.6), inset 0 1px 0 rgba(255,255,255,.4); }
.btn--light { background: var(--ink); color: #04130a; }
.btn--glass {
  background: rgba(255,255,255,.06); border: 1px solid var(--hair);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover { background: rgba(255,255,255,.12); }
.btn__dot {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: -14px;
  border-radius: 50%; background: #04130a; color: var(--g2);
}
.btn__dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- nav (Fluxora) ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  transition: background .3s, backdrop-filter .3s, padding .3s;
}
.nav.is-scrolled {
  background: rgba(5, 11, 7, 0.72);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--hair-soft);
  padding-top: 10px; padding-bottom: 10px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__mark { width: 36px; height: 36px; }
.nav__name { font: 700 19px/1 var(--f-display); letter-spacing: -0.03em; }
.nav__name b {
  font-weight: 700; margin-left: 2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav__tag {
  font: 500 10px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); border-left: 1px solid var(--hair); padding-left: 10px; max-width: 110px;
}
.nav__pill {
  background: var(--glass); border: 1px solid var(--hair); border-radius: 999px; padding: 5px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav__pill ul { display: flex; gap: 2px; }
.nav__pill a {
  display: block; padding: 9px 16px; border-radius: 999px;
  font: 500 14px/1 var(--f-display); color: var(--ink-soft); transition: background .2s, color .2s;
}
.nav__pill a:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); background: var(--glass); position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.nav__sheet {
  position: fixed; inset: 72px 12px auto 12px; padding: 14px;
  background: var(--glass-strong); border: 1px solid var(--hair); border-radius: 22px;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: grid; gap: 12px;
}
.nav__sheet[hidden] { display: none; }
.nav__sheet a:not(.btn) { display: block; padding: 13px 12px; border-radius: 12px; font: 600 17px/1 var(--f-display); }
.nav__sheet a:not(.btn):hover { background: rgba(255,255,255,.06); }

/* ---------- hero (Fluxora + Visor) ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px var(--gutter) 150px; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: #031006 url(hero-poster.jpg) center/cover; }
.hero__bg, .hero__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,12,6,.92) 0%, rgba(3,12,6,.62) 34%, rgba(3,12,6,0) 62%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5,11,7,.55) 22%, rgba(5,11,7,0) 46%),
    linear-gradient(180deg, rgba(3,10,5,.6) 0%, rgba(3,10,5,0) 22%);
}
/* Visor trick: huge word sits between the two video layers */
.hero__word {
  position: absolute; z-index: 2; left: 0; right: 0; top: clamp(70px, 9.5vh, 110px);
  text-align: center; white-space: nowrap; pointer-events: none;
  font: 900 clamp(110px, min(22vw, 40vh), 360px)/0.8 var(--f-giant); letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(235, 255, 205, 0.96) 0%, rgba(170, 236, 100, 0.7) 55%, rgba(34, 209, 96, 0.08) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translate3d(0, var(--wy, 0px), 0);
  will-change: transform;
}
.hero__fg {
  z-index: 3; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 17% 40% at 55% 32%, #000 60%, rgba(0,0,0,.8) 74%, transparent 94%);
          mask-image: radial-gradient(ellipse 17% 40% at 55% 32%, #000 60%, rgba(0,0,0,.8) 74%, transparent 94%);
}
.hero__fg::after { content: none; }
.hero__rules { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: space-evenly; pointer-events: none; }
.hero__rules span { width: 1px; background: linear-gradient(180deg, transparent, var(--hair-soft) 30%, var(--hair-soft) 70%, transparent); }

.hero__inner {
  position: relative; z-index: 5; width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.hero__lead { max-width: 760px; }
.hero__note {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 12px/1.2 var(--f-mono); letter-spacing: .02em; color: var(--ink-soft);
}
.hero__title {
  font: 700 clamp(34px, 4.4vw, 62px)/1.02 var(--f-display); letter-spacing: -0.045em;
  text-wrap: balance; text-shadow: 0 4px 40px rgba(0,0,0,.4);
}
.hero__title em {
  font-weight: 500; letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.hero__sub { margin-top: 20px; max-width: 480px; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-soft); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.ghost {
  width: 300px; flex: none; padding: 22px; border-radius: 24px;
  background: var(--glass); border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.ghost__kicker { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--g2); }
.ghost__steps { margin: 16px 0; display: grid; gap: 10px; counter-reset: s; }
.ghost__steps li { display: flex; gap: 12px; align-items: baseline; font: 500 15px/1.35 var(--f-display); }
.ghost__steps b { font: 500 11px/1 var(--f-mono); color: var(--ink-faint); }
.ghost__time { padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-faint); }
.ghost__time strong { display: block; font: 700 28px/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }

.hero__hud {
  position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: 96px;
  display: flex; justify-content: space-between; gap: 20px;
  font: 400 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-faint);
  pointer-events: none;
}

/* ---------- floating cards (Visor) ---------- */
.float { position: relative; z-index: 10; max-width: var(--max); margin: -84px auto 0; padding: 0 var(--gutter); }
.float__pill {
  position: relative; z-index: 2; display: flex; width: max-content; max-width: 100%; margin: 0 auto -20px;
  align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: #06120a; color: var(--ink); border: 1px solid rgba(194,232,78,.35);
  font: 600 14px/1 var(--f-display); box-shadow: 0 14px 30px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), border-color .3s;
}
.float__pill:hover { transform: translateY(-2px) scale(1.02); border-color: var(--g2); }
.float__grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; }
.fcard {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 230px; padding: 28px; border-radius: 26px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.6);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.fcard:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -18px rgba(0,0,0,.7); }
.fcard--center { align-items: center; justify-content: center; text-align: center; background: #fff; }
.fcard__icons { display: flex; align-items: center; gap: 12px; }
.ico-pill { display: flex; gap: 5px; align-items: center; padding: 0 8px; height: 24px; border: 1.5px solid var(--paper-ink); border-radius: 99px; }
.ico-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-ink); }
.ico { width: 22px; height: 22px; fill: none; stroke: var(--paper-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fcard__text { font: 500 19px/1.32 var(--f-display); letter-spacing: -0.02em; }
.fcard__text b { font-weight: 700; }
.fcard__link { font: 700 13px/1 var(--f-display); text-decoration: underline; text-underline-offset: 4px; }
.fcard__link:hover { color: #138a3e; }
.fcard__kicker { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #138a3e; }
.fcard__title { font: 700 clamp(22px, 2vw, 27px)/1.15 var(--f-display); letter-spacing: -0.035em; max-width: 340px; }
.fcard__muted { font-size: 13.5px; color: var(--paper-soft); max-width: 300px; }
.fcard__big { font: 800 44px/1 var(--f-display); letter-spacing: -0.05em; }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(70px, 9vw, 120px) 0; }
.sec--tint { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 18%, var(--bg-2) 82%, var(--bg) 100%); }
.sec__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.eyebrow { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--g2); margin-bottom: 18px; }
h2 { font: 700 clamp(32px, 4.4vw, 56px)/1.04 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; }
.lede { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18.5px); color: var(--ink-soft); max-width: 620px; }
h3 { font: 700 20px/1.25 var(--f-display); letter-spacing: -0.025em; }

.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.split--rev { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.prose h2 { margin-bottom: 26px; }
.prose p { color: var(--ink-soft); margin-bottom: 18px; font-size: 17px; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose a, .faq a, .warn a { color: var(--g2); text-decoration: underline; text-decoration-color: rgba(194,232,78,.4); text-underline-offset: 3px; }
.prose a:hover, .faq a:hover, .warn a:hover { text-decoration-color: var(--g2); }
.prose code { font: 500 .9em var(--f-mono); padding: 2px 7px; border-radius: 6px; background: rgba(194,232,78,.1); color: var(--g2); }
.note {
  padding: 16px 18px; border-left: 2px solid var(--g1); border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(34,209,96,.09), transparent);
  font-size: 15px !important;
}

/* spec sheet (Selene telemetry) */
.spec {
  position: sticky; top: 100px;
  border: 1px solid var(--hair); border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(12,27,17,.9), rgba(8,19,12,.9));
  box-shadow: 0 40px 80px -40px rgba(34,209,96,.25);
}
.spec__head {
  display: flex; justify-content: space-between; gap: 10px; padding: 16px 20px;
  font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--ink-faint);
  border-bottom: 1px solid var(--hair);
}
.spec__live { display: inline-flex; align-items: center; gap: 7px; color: var(--g2); letter-spacing: .04em; text-transform: none; }
.spec__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 8px var(--g2); }
.spec dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--hair-soft); }
.spec dl > div:last-child { border-bottom: 0; }
.spec dt { font: 400 11.5px/1.5 var(--f-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.spec dd { font: 500 14.5px/1.45 var(--f-display); }
.spec dd small { color: var(--ink-faint); font-size: 12.5px; }
.spec dd.hl { color: var(--g2); font-weight: 700; }

/* platforms (Selene missions) */
.plats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plat a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 26px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--hair);
  transition: border-color .35s, transform .45s var(--ease), background .35s;
}
.plat a::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(194,232,78,.65), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s;
}
.plat a:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(34,209,96,.09), rgba(255,255,255,.015)); }
.plat a:hover::before { opacity: 1; }
.plat__tag { font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); }
.plat__ico { width: 44px; height: 44px; margin: 26px 0 18px; padding: 10px; border-radius: 14px; background: rgba(194,232,78,.1); fill: none; stroke: var(--g2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plat h3 { font-size: 24px; }
.plat p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; flex: 1; }
.plat__go { margin-top: 22px; font: 600 14px/1 var(--f-display); color: var(--g2); }

/* route (Selene trajectory) */
.route { position: relative; max-width: 980px; margin: 0 auto; }
.route__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__track, .route__draw { fill: none; vector-effect: non-scaling-stroke; }
.route__track { stroke: var(--hair); stroke-width: 1.5; stroke-dasharray: 3 6; }
.route__draw { stroke: url(#none); stroke: var(--g2); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(194,232,78,.7)); }
.route__steps { position: relative; display: grid; gap: clamp(60px, 9vw, 120px); padding: 20px 0; }
.step {
  display: flex; gap: 22px; align-items: flex-start; width: min(520px, 100%);
  padding: 26px; border-radius: 24px; background: rgba(8,19,12,.86); border: 1px solid var(--hair);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.step:nth-child(1) { margin-left: 12%; }
.step:nth-child(2) { margin-left: auto; margin-right: 0; }
.step:nth-child(3) { margin-left: 22%; }
.step__n {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  font: 700 18px/1 var(--f-mono); color: #04130a; background: var(--grad);
  box-shadow: 0 10px 30px -8px rgba(34,209,96,.6);
}
.step__tag { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--g2); text-transform: uppercase; margin-bottom: 10px; }
.step h3 { font-size: 22px; }
.step p { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; }
.step__link { display: inline-block; margin-top: 14px; font: 600 14px/1 var(--f-display); color: var(--g2); }

/* sources */
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.src {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px;
  background: var(--bg-3); border: 1px solid var(--hair);
  transition: border-color .3s, transform .45s var(--ease);
}
.src:hover { border-color: rgba(194,232,78,.5); transform: translateY(-3px); }
.src__k { font: 800 28px/1 var(--f-display); letter-spacing: -0.04em; }
.src__p { font: 500 12px/1.3 var(--f-mono); color: var(--g2); letter-spacing: .04em; }
.src__d { color: var(--ink-soft); font-size: 14.5px; flex: 1; }
.src__go { font: 600 14px/1 var(--f-display); color: var(--ink); }
.warn {
  display: flex; gap: 18px; margin-top: 18px; padding: 24px 26px; border-radius: 24px;
  background: linear-gradient(100deg, rgba(232, 180, 60, .12), rgba(232,180,60,.03)); border: 1px solid rgba(232,180,60,.28);
}
.warn svg { flex: none; width: 28px; height: 28px; fill: none; stroke: #f0c35a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.warn h3 { font-size: 18px; margin-bottom: 6px; }
.warn p { color: var(--ink-soft); font-size: 15px; }

/* key + offer (Selene reserve) */
.ways { display: grid; gap: 12px; margin: 6px 0 22px; }
.ways li {
  position: relative; padding: 16px 18px 16px 46px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--hair-soft);
  color: var(--ink-soft); font-size: 15.5px;
}
.ways li::before { content: ''; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 3px; background: var(--grad); }
.ways b { color: var(--ink); font-weight: 600; }
.offer {
  contain: paint;
  position: sticky; top: 100px; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 3vw, 38px); border-radius: 30px;
  background: linear-gradient(165deg, #0f2a17 0%, #07150c 70%);
  border: 1px solid rgba(194,232,78,.28);
  box-shadow: 0 50px 100px -40px rgba(34,209,96,.45);
}
.offer__glow {
  position: absolute; z-index: -1; width: 420px; height: 420px; right: -160px; top: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,232,78,.35), transparent 65%); filter: blur(10px);
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-60px, 50px) scale(1.15); } }
.offer__eyebrow { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--g2); }
.offer__title { margin-top: 14px; font: 700 clamp(28px, 3vw, 36px)/1.08 var(--f-display); letter-spacing: -0.04em; }
.offer__title em { color: var(--g2); }
.offer__price { margin: 22px 0 18px; display: flex; align-items: baseline; gap: 8px; }
.offer__price strong { font: 800 58px/1 var(--f-display); letter-spacing: -0.05em; }
.offer__price span { color: var(--ink-faint); }
.offer__list { display: grid; gap: 11px; padding-top: 20px; border-top: 1px solid var(--hair); }
.offer__list li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-soft); }
.offer__list li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(194,232,78,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2e84e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.offer__btns { display: grid; gap: 10px; margin-top: 26px; }
.offer__btns .btn { width: 100%; }
.offer__fine { margin-top: 14px; font-size: 12px; color: var(--ink-faint); text-align: center; }

/* problems */
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prob {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px;
  background: rgba(255,255,255,.03); border: 1px solid var(--hair);
  transition: background .3s, border-color .3s, transform .45s var(--ease);
}
.prob:hover { background: rgba(34,209,96,.07); border-color: rgba(34,209,96,.4); transform: translateY(-3px); }
.prob__code { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-faint); }
.prob p { color: var(--ink-soft); font-size: 15px; }
.prob--all { background: var(--grad); color: #04130a; border: 0; }
.prob--all .prob__code, .prob--all p { color: rgba(4,19,10,.72); }
.prob--all:hover { background: var(--grad); filter: brightness(1.06); }
.prob__go { margin-top: auto; font: 700 14px/1 var(--f-display); }

/* faq */
.faq-wrap { max-width: 900px; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--hair); border-radius: 20px; background: rgba(255,255,255,.025); transition: background .3s, border-color .3s; }
.faq details[open] { background: rgba(34,209,96,.06); border-color: rgba(34,209,96,.3); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 24px; font: 600 clamp(17px, 1.6vw, 19px)/1.3 var(--f-display); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2e84e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--ink-soft); max-width: 720px; }

/* final */
.final { padding: clamp(60px, 9vw, 120px) 0; }
.final__in {
  position: relative; overflow: hidden; text-align: center; padding: clamp(50px, 7vw, 90px) var(--gutter);
  border-radius: 36px; border: 1px solid var(--hair);
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(34,209,96,.45), transparent 70%),
    radial-gradient(40% 60% at 85% -10%, rgba(194,232,78,.2), transparent 70%),
    var(--bg-2);
}
.final__title { max-width: 820px; margin: 0 auto; font: 700 clamp(34px, 5vw, 64px)/1.02 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; }
.final__title em { color: var(--g2); }
.final__cta { justify-content: center; }

/* footer */
.foot { padding: 70px 0 30px; border-top: 1px solid var(--hair-soft); overflow: hidden; }
.foot__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot__about p { margin-top: 16px; font-size: 14px; color: var(--ink-faint); max-width: 380px; }
.foot__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.foot__h { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 16px; }
.foot ul { display: grid; gap: 10px; }
.foot ul a { font-size: 15px; color: var(--ink-soft); transition: color .2s; }
.foot ul a:hover { color: var(--g2); }
.foot__mark {
  margin: 50px 0 10px; text-align: center; line-height: .78; white-space: nowrap;
  font: 900 clamp(110px, 31vw, 440px)/0.78 var(--f-giant); letter-spacing: -0.06em;
  background: linear-gradient(180deg, rgba(194,232,78,.2), rgba(194,232,78,0)); -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.foot__copy { font-size: 13px; color: var(--ink-faint); display: flex; justify-content: space-between; }

/* reveals (Selene) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__tag { display: none; }
  .ghost { display: none; }
  .plats, .sources, .probs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav__pill, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .spec, .offer { position: static; }
  .float__grid { grid-template-columns: 1fr; }
  .fcard { min-height: 0; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__about { grid-column: 1 / -1; }
  .step:nth-child(n) { margin-left: 0; margin-right: 0; width: 100%; }
  .route__line { display: none; }
  .route__steps { gap: 16px; }
}
@media (max-width: 640px) {
  .hero { padding-bottom: 118px; padding-top: 100px; }
  .hero__bg, .hero__fg { object-position: 54% 50%; }
  .hero__scrim {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(5,11,7,.9) 36%, rgba(5,11,7,.15) 64%, rgba(5,11,7,.4) 100%);
  }
  .hero__word { top: 118px; font-size: 33vw; }
  .hero__fg {
    -webkit-mask-image: radial-gradient(ellipse 34% 20% at 50% 27%, #000 60%, rgba(0,0,0,.75) 75%, transparent 94%);
            mask-image: radial-gradient(ellipse 34% 20% at 50% 27%, #000 60%, rgba(0,0,0,.75) 75%, transparent 94%);
  }
  .hero__note { font-size: 11px; margin-bottom: 16px; }
  .hero__note .opt { display: none; }
  .hero__sub { margin-top: 14px; font-size: 15px; }
  .hero__cta { margin-top: 22px; }
  .hero__cta .btn { flex: 1 1 0; padding: 0 14px; font-size: 14.5px; }
  .hero__cta .btn__dot { display: none; }
  .hero__hud { display: none; }
  .plats, .sources, .probs { grid-template-columns: 1fr; }
  .step { flex-direction: column; gap: 16px; padding: 22px; }
  .spec dl > div { grid-template-columns: 1fr; gap: 2px; }
  .foot__copy { flex-direction: column; gap: 8px; }
  .offer__price strong { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   v2 · MOTION LAYER
   ===================================================================== */

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- preloader ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #030805;
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1) .1s, visibility 0s 1.3s;
  clip-path: inset(0 0 0 0);
}
.js.is-loaded .loader { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader__in { width: min(360px, 80vw); display: grid; gap: 18px; }
.loader__mark { font: 900 56px/1 var(--f-giant); letter-spacing: -0.05em; }
.loader__mark b { font: 600 italic 40px/1 var(--f-italic); color: var(--g2); margin-left: 6px; letter-spacing: -0.02em; }
.loader__bar { height: 2px; background: var(--hair); overflow: hidden; border-radius: 2px; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--lp, 0)); box-shadow: 0 0 12px var(--g2); }
.loader__row { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-faint); }
.loader__pct { color: var(--g2); }

/* ---------- scroll progress + cursor glow ---------- */
.progress { position: fixed; z-index: 60; inset: 0 0 auto 0; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--sp, 0)); box-shadow: 0 0 10px var(--g2); }
.glow-cursor {
  position: fixed; z-index: 1; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(34,209,96,.16), rgba(194,232,78,.05) 40%, transparent 68%);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  transition: opacity .6s;
}
.has-cursor .glow-cursor { opacity: 1; }
main, .foot { position: relative; z-index: 2; }
.hero { z-index: 2; }

/* ---------- hero entrance ---------- */
.hero__motes { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.hero__word span {
  display: inline-block;
  background: linear-gradient(180deg, rgba(235, 255, 205, 0.96) 0%, rgba(170, 236, 100, 0.7) 55%, rgba(34, 209, 96, 0.08) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform 1.4s var(--ease), opacity 1.4s var(--ease), filter 1.4s var(--ease);
  transition-delay: calc(.55s + var(--i, 0) * .09s);
}
.hero__word { background: none; transform: translate3d(var(--mx2, 0px), calc(var(--wy, 0px) + var(--my2, 0px)), 0); }
.js:not(.is-loaded) .hero__word span { transform: translateY(70%) rotate(4deg); opacity: 0; filter: blur(14px); }

.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .wi { display: inline-block; transition: transform 1.1s var(--ease); transition-delay: calc(.75s + var(--i, 0) * .06s); }
.js:not(.is-loaded) .hero__title .wi { transform: translateY(110%); }
.hero__note, .hero__sub, .hero__cta, .ghost, .hero__hud, .float__pill {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.hero__note { transition-delay: .65s; }
.hero__sub { transition-delay: 1.15s; }
.hero__cta { transition-delay: 1.3s; }
.ghost { transition-delay: 1.4s; }
.hero__hud { transition-delay: 1.6s; }
.js:not(.is-loaded) .hero__note,
.js:not(.is-loaded) .hero__sub,
.js:not(.is-loaded) .hero__cta,
.js:not(.is-loaded) .hero__hud { opacity: 0; transform: translateY(24px); }
.js:not(.is-loaded) .ghost { opacity: 0; transform: translateX(40px) rotateY(-14deg); }
.hero__media video { transition: transform 2.4s var(--ease), filter 2.4s var(--ease); }
.js:not(.is-loaded) .hero__media video { transform: scale(1.12); filter: brightness(.3) saturate(.6); }
.hero__inner { transform: translate3d(0, var(--hy, 0px), 0); opacity: var(--ho, 1); }
.ghost { transform-style: preserve-3d; }

/* ---------- tilt ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .5s var(--ease); }
.tilt:hover { --ty: -4px; transition: transform .12s linear; }

/* ---------- marquee ---------- */
.marquee { position: relative; z-index: 2; padding: clamp(50px, 7vw, 90px) 0 10px; overflow: hidden; display: grid; gap: 6px; }
.marquee__row { overflow: hidden; transform: rotate(-2deg); margin: 0 -2vw; }
.marquee__row--rev { transform: rotate(-2deg); }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: mq 38s linear infinite; padding-right: 28px; }
.marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 46s; }
.marquee span { font: 800 clamp(44px, 7vw, 104px)/1.05 var(--f-display); letter-spacing: -0.05em; white-space: nowrap; }
.marquee__row:first-child span { color: transparent; -webkit-text-stroke: 1.5px rgba(194,232,78,.55); }
.marquee__row:first-child span:hover { color: var(--g2); }
.marquee__row--rev span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee i { font-style: normal; font-size: clamp(22px, 3vw, 40px); color: var(--ink-ghost); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- earthrise (Selene) ---------- */
.rise { position: relative; z-index: 2; height: 420svh; margin-top: 40px; }
.rise__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #020503; }
.rise__layer { position: absolute; inset: 0; will-change: transform; }
.rise__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.rise__layer--ground::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 120vh; background: var(--bg); }
.rise__title { position: absolute; inset: 27% 0 auto 0; text-align: center; pointer-events: none; opacity: 0; padding: 0 16px; }
.rise__big {
  font: 900 clamp(34px, 6.2vw, 104px)/1 var(--f-giant); letter-spacing: .14em; margin-right: -.14em; white-space: nowrap;
  color: #fff; text-shadow: 0 6px 50px rgba(0,0,0,.55);
}
.rise__kicker { margin-top: 18px; font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .2em; color: rgba(220,240,210,.8); }
.rise__tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 60% 62%, rgba(34,209,96,.18), transparent 70%); mix-blend-mode: screen; }
.rise__hud { position: absolute; inset: 16px; pointer-events: none; opacity: 0; font: 500 10.5px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(220,240,210,.8); }
.rise__hud b { color: var(--g2); font-weight: 500; }
.rise__hud .mut { color: rgba(220,240,210,.45); }
.rise__br { position: absolute; inset: 0;
  background:
    linear-gradient(var(--g2),var(--g2)) left top/22px 1px, linear-gradient(var(--g2),var(--g2)) left top/1px 22px,
    linear-gradient(var(--g2),var(--g2)) right top/22px 1px, linear-gradient(var(--g2),var(--g2)) right top/1px 22px,
    linear-gradient(var(--g2),var(--g2)) left bottom/22px 1px, linear-gradient(var(--g2),var(--g2)) left bottom/1px 22px,
    linear-gradient(var(--g2),var(--g2)) right bottom/22px 1px, linear-gradient(var(--g2),var(--g2)) right bottom/1px 22px;
  background-repeat: no-repeat; opacity: .6; }
.rise__tl { position: absolute; top: 74px; left: 14px; }
.rise__tr { position: absolute; top: 74px; right: 14px; text-align: right; }
.rise__bl { position: absolute; bottom: 12px; left: 14px; }
.rise__brr { position: absolute; bottom: 12px; right: 14px; }
.bounce { display: inline-block; animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.rise__outro {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 20px;
  font: 700 clamp(32px, 5vw, 72px)/1.05 var(--f-display); letter-spacing: -0.045em; opacity: 0; pointer-events: none;
}
.rise__outro em { color: var(--g2); }

/* ---------- route comet ---------- */
.route__comet {
  position: absolute; z-index: 1; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(194,232,78,.25), 0 0 24px 6px var(--g2), 0 0 60px 12px rgba(34,209,96,.5);
  transform: translate3d(var(--px, 0), var(--py, 0), 0); opacity: 0; transition: opacity .4s;
}
.route.is-on .route__comet { opacity: 1; }
.step { position: relative; z-index: 2; transition: border-color .5s, box-shadow .5s, background .5s; }
.step.is-lit { border-color: rgba(194,232,78,.45); box-shadow: 0 30px 70px -30px rgba(34,209,96,.55); background: rgba(12,30,17,.92); }
.step .step__n { transition: transform .6s var(--ease), filter .6s; filter: grayscale(1) brightness(.6); }
.step.is-lit .step__n { filter: none; transform: scale(1.08) rotate(-4deg); }

/* ---------- h2 word reveal ---------- */
h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
h2 .wi { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * .05s + .1s); }
.is-in h2 .wi, h2.is-in .wi { transform: none; }
.no-split h2 .wi { transform: none; }

/* ---------- key demo phone ---------- */
.demo { display: grid; justify-items: center; gap: 16px; position: sticky; top: 90px; }
.demo__phone {
  position: relative; width: min(320px, 82vw); aspect-ratio: 9 / 18.5; border-radius: 46px; padding: 12px;
  background: linear-gradient(145deg, #1d2a20, #070d09); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 60px 120px -40px rgba(34,209,96,.45), inset 0 0 0 2px #0b120d, 0 0 0 1px rgba(0,0,0,.6);
  transform: perspective(1100px) rotateY(-10deg) rotateX(4deg);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(-12px); } }
.demo__island { position: absolute; z-index: 3; top: 22px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.demo__screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden; padding: 58px 18px 20px;
  background: radial-gradient(120% 60% at 50% 100%, rgba(34,209,96,.22), transparent 60%), #06100a;
  display: flex; flex-direction: column; gap: 12px;
}
.demo__top { display: flex; justify-content: space-between; align-items: center; }
.demo__app { font: 900 18px/1 var(--f-giant); letter-spacing: -0.04em; }
.demo__plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.08); font: 500 20px/1 var(--f-display); transition: background .3s, transform .3s; }
.demo__clip { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px dashed rgba(194,232,78,.35); min-height: 58px; }
.demo__label { display: block; font: 500 9px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.demo__key { display: block; font: 500 10.5px/1.45 var(--f-mono); color: var(--g2); word-break: break-all; }
.demo__key::after { content: '▍'; animation: blink 1s steps(1) infinite; color: var(--g2); }
@keyframes blink { 50% { opacity: 0; } }
.demo__toast {
  padding: 9px 12px; border-radius: 12px; background: var(--grad); color: #04130a; font: 700 12px/1.2 var(--f-display);
  opacity: 0; transform: translateY(-8px) scale(.96); transition: all .5s var(--ease);
}
.demo__list { display: grid; gap: 7px; }
.demo__list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid transparent;
  font: 500 13px/1 var(--f-display); opacity: 0; transform: translateX(-16px); transition: all .5s var(--ease);
}
.demo__list li:nth-child(2) { transition-delay: .12s; }
.demo__list li:nth-child(3) { transition-delay: .24s; }
.demo__list b { display: grid; place-items: center; width: 26px; height: 18px; border-radius: 5px; background: rgba(194,232,78,.14); color: var(--g2); font: 600 9.5px/1 var(--f-mono); }
.demo__list i { margin-left: auto; font: 500 10.5px/1 var(--f-mono); font-style: normal; color: var(--ink-faint); }
.demo__power { position: relative; margin: auto auto 0; width: 104px; height: 104px; display: grid; place-items: center; }
.demo__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--hair); transition: border-color .5s; }
.demo__btn {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--hair);
  transition: background .5s, box-shadow .5s, transform .3s;
}
.demo__btn svg { width: 30px; height: 30px; fill: none; stroke: var(--ink-faint); stroke-width: 2.2; stroke-linecap: round; transition: stroke .5s; }
.demo__status { text-align: center; font: 600 13px/1.2 var(--f-display); min-height: 16px; }
.demo__status .on { display: none; color: var(--g2); }
.demo__cap { font-size: 12px; color: var(--ink-faint); text-align: center; max-width: 300px; }
/* demo stages */
.demo[data-s="1"] .demo__plus, .demo[data-s="2"] .demo__plus { background: var(--g2); color: #04130a; transform: scale(1.1); }
.demo[data-s="2"] .demo__toast, .demo[data-s="3"] .demo__toast, .demo[data-s="4"] .demo__toast { opacity: 1; transform: none; }
.demo[data-s="2"] .demo__list li, .demo[data-s="3"] .demo__list li, .demo[data-s="4"] .demo__list li { opacity: 1; transform: none; }
.demo[data-s="3"] .demo__list li:first-child, .demo[data-s="4"] .demo__list li:first-child { border-color: rgba(194,232,78,.5); background: rgba(34,209,96,.1); }
.demo[data-s="3"] .demo__btn { transform: scale(.92); }
.demo[data-s="4"] .demo__btn { background: var(--grad); box-shadow: 0 0 40px rgba(34,209,96,.7); }
.demo[data-s="4"] .demo__btn svg { stroke: #04130a; }
.demo[data-s="4"] .demo__ring { border-color: var(--g2); animation: ripple 1.6s ease-out infinite; }
@keyframes ripple { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.demo[data-s="4"] .demo__status .off { display: none; }
.demo[data-s="4"] .demo__status .on { display: inline; }

/* ---------- wide offer ---------- */
.sec--offer { padding-top: 0; }
.offer--wide {
  position: relative; top: auto;
  display: grid; grid-template-columns: 1fr 1.25fr .9fr; column-gap: clamp(24px, 4vw, 56px);
  grid-template-areas: "eb list btns" "title list btns" "price list fine";
  align-items: start;
}
.offer--wide .offer__eyebrow { grid-area: eb; }
.offer--wide .offer__title { grid-area: title; }
.offer--wide .offer__price { grid-area: price; margin-bottom: 0; }
.offer--wide .offer__list { grid-area: list; border-top: 0; padding-top: 0; align-self: center; }
.offer--wide .offer__btns { grid-area: btns; margin-top: 0; align-self: end; }
.offer--wide .offer__fine { grid-area: fine; text-align: left; }
.offer--wide::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--g2) 82%, var(--g1) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }

/* ---------- final ticker ---------- */
.final { position: relative; overflow: hidden; }
.final__ticker { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(-3deg); opacity: .07; pointer-events: none; }
.final__ttrack { display: flex; width: max-content; animation: mq 30s linear infinite; }
.final__ttrack span { font: 900 clamp(90px, 15vw, 240px)/1 var(--f-giant); letter-spacing: -0.05em; white-space: nowrap; padding-right: .3em; }
.final__in { z-index: 1; }
.btn { will-change: transform; }

@media (max-width: 900px) {
  .demo { position: static; }
  .offer--wide { grid-template-columns: 1fr; grid-template-areas: "eb" "title" "price" "list" "btns" "fine"; row-gap: 0; }
  .offer--wide .offer__list { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); }
  .offer--wide .offer__btns { margin-top: 24px; }
  .offer--wide .offer__fine { text-align: center; }
  .route__comet { display: none; }
  .rise { height: 360svh; }
}
@media (max-width: 640px) {
  .rise__big { letter-spacing: .04em; margin-right: 0; font-size: 12vw; white-space: normal; line-height: 1.02; }
  .rise__title { top: 22%; }
  .rise__tr { display: none; }
  .demo__phone { transform: none; animation: none; }
}
@media (hover: none) { .glow-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
  .marquee__track, .final__ttrack { animation: none !important; }
  h2 .wi, .hero__title .wi { transform: none !important; }
}
.tilt.reveal { transition: opacity .9s var(--ease), transform .5s var(--ease); }
.reveal.tilt:not(.is-in) { transform: translateY(28px); }

/* =====================================================================
   v3 · ДОБРАНО ИЗ ШАБЛОНОВ
   ===================================================================== */

/* ---- Fluxora: счётчики со звёздочкой ---- */
.hero__stats { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 34px; transition: opacity 1s var(--ease) 1.45s, transform 1s var(--ease) 1.45s; }
.js:not(.is-loaded) .hero__stats { opacity: 0; transform: translateY(24px); }
.hero__stats li { position: relative; display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: start; padding-bottom: 12px; }
.st__mark { font: 600 18px/1 var(--f-display); color: var(--g2); }
.st__v { font: 700 clamp(26px, 2.6vw, 36px)/1 var(--f-display); letter-spacing: -0.04em; }
.st__l { grid-column: 2; margin-top: 6px; font-size: 13px; color: var(--ink-faint); }
.hero__stats li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--g2), transparent); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease) 1.8s; }
.is-loaded .hero__stats li::after { transform: scaleX(1); }

/* ---- Visor: точка на шлеме ---- */
.spot { position: absolute; z-index: 6; left: 53%; top: 27.5%; width: 0; height: 0; }
.spot__dot {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  opacity: 0; transition: opacity .6s 2s;
}
.is-loaded .spot__dot { opacity: 1; }
.spot__dot::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.spot__dot i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(255,255,255,.25); box-shadow: 0 0 12px rgba(255,255,255,.9); display: grid; place-items: center; }
.spot__dot i::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.spot__line { position: absolute; left: 0; top: -54px; width: 120px; height: 60px; overflow: visible; pointer-events: none; }
.spot__line path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.2; stroke-dasharray: 2 3; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); }
.spot__card {
  position: absolute; left: 122px; top: -78px; width: 236px; padding: 13px 14px; border-radius: 14px; pointer-events: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 34px rgba(0,0,0,.4);
  opacity: 0; transform: translateX(14px) scale(.94); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.spot.is-open .spot__line path { clip-path: inset(0 0 0 0); }
.spot.is-open .spot__card { opacity: 1; transform: none; transition-delay: .18s; }
.spot__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 9.5px/1 var(--f-mono); letter-spacing: .12em; }
.spot__head span { display: flex; align-items: center; gap: 6px; }
.spot__head i { width: 6px; height: 6px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 8px var(--g2); }
.spot__head b { padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.2); font-weight: 600; font-size: 8.5px; }
.spot__title { margin: 8px 0; font: 700 14px/1.2 var(--f-display); }
.spot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2); font-size: 10.5px; color: rgba(255,255,255,.85); }
.spot__grid span::before { content: '◆ '; color: var(--g2); font-size: 8px; }

/* ---- Visor: управление видео ---- */
.hero__play {
  position: absolute; z-index: 6; right: var(--gutter); top: 50%; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--glass); border: 1px solid var(--hair);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, opacity 1s 2s;
}
.js:not(.is-loaded) .hero__play { opacity: 0; }
.hero__play:hover { background: rgba(255,255,255,.14); }
.hero__play svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero__play .i-play { display: none; fill: var(--ink); }
.hero__play[aria-pressed="true"] .i-play { display: block; }
.hero__play[aria-pressed="true"] .i-pause { display: none; }

/* ---- Visor: модальное окно ---- */
.float__pill { cursor: pointer; font-family: var(--f-display); }
.modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; width: 100%; height: 100%; }
.modal::backdrop { background: rgba(2,8,4,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[open] { display: grid; place-items: center; }
.modal__box {
  position: relative; width: min(520px, calc(100% - 32px)); padding: clamp(26px, 4vw, 38px); border-radius: 30px;
  background: linear-gradient(165deg, #10301a, #06130b 70%); border: 1px solid rgba(194,232,78,.3);
  box-shadow: 0 60px 120px -30px rgba(34,209,96,.45);
  animation: pop .5s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.modal__x { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); font-size: 22px; line-height: 1; }
.modal__x:hover { background: rgba(255,255,255,.08); }
.modal__t { font: 700 clamp(28px, 4vw, 38px)/1.05 var(--f-display); letter-spacing: -0.04em; padding-right: 40px; }
.modal__t em { color: var(--g2); }
.modal__steps { display: grid; gap: 12px; margin: 26px 0; }
.modal__steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; color: var(--ink-soft); }
.modal__steps b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #04130a; font: 700 14px/1 var(--f-mono); }
.modal__steps li { opacity: 0; transform: translateX(-12px); animation: stepIn .5s var(--ease) forwards; }
.modal__steps li:nth-child(2) { animation-delay: .1s; } .modal__steps li:nth-child(3) { animation-delay: .2s; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
.modal__btns { display: grid; gap: 10px; }
.modal__fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

/* ---- Selene: туман перед Землёй ---- */
.rise__veil {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(120,200,140,.4), transparent 70%),
    radial-gradient(50% 60% at 75% 60%, rgba(90,170,110,.38), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(10,30,16,.86), rgba(3,9,5,.97));
}
.rise__veil-k { font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(220,240,210,.7); }
.rise__veil-t { margin: 14px 0 20px; font: 600 13px/1 var(--f-display); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; }
.rise__veil .bounce { color: var(--g2); }
.rise__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- Selene: горизонтальная лента платформ ---- */
.reel { position: relative; z-index: 2; height: 320svh; background: linear-gradient(180deg, var(--bg), var(--bg-2) 20%, var(--bg-2) 80%, var(--bg)); }
.reel__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; gap: clamp(30px, 4vw, 60px); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.reel__side { flex: none; width: min(30vw, 400px); }
.reel__side .lede { font-size: 16px; }
.reel__meter { display: flex; align-items: center; gap: 16px; margin-top: 30px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--ink-faint); }
.reel__meter b { color: var(--ink); font-weight: 500; }
.reel__bar { position: relative; width: 130px; height: 1px; background: var(--hair); }
.reel__bar i { position: absolute; inset: 0; background: var(--g2); transform-origin: left; transform: scaleX(var(--rk, 0)); box-shadow: 0 0 8px var(--g2); }
.reel__track { display: flex !important; gap: 24px; will-change: transform; grid-template-columns: none !important; }
.reel__track .plat { flex: none; width: clamp(270px, 25vw, 350px); transform-origin: 50% 100%; will-change: transform, opacity; }
.reel__track .plat a { min-height: min(470px, 62vh); padding: 30px; }
.plat__num { position: absolute; right: 26px; top: 22px; font: 800 64px/1 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(194,232,78,.35); }
.reel__track .plat__ico { width: 64px; height: 64px; padding: 14px; margin-top: auto; border-radius: 18px; }
.reel__track .plat p { flex: none; }
.reel__track .plat h3 { font-size: 30px; }
.plat.is-focus a { border-color: rgba(194,232,78,.5); background: linear-gradient(160deg, rgba(34,209,96,.14), rgba(255,255,255,.02)); box-shadow: 0 40px 90px -40px rgba(34,209,96,.6); }

/* ---- Selene: тарифы ---- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.plan {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 30px; border-radius: 26px;
  background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s;
}
.plan:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.25); }
.plan--hot { border-color: rgba(194,232,78,.55); background: linear-gradient(170deg, rgba(34,209,96,.12), rgba(255,255,255,.02)); }
.plan--hot:hover { box-shadow: 0 40px 90px -36px rgba(34,209,96,.6); border-color: var(--g2); }
.plan__orbit { position: absolute; right: -40px; top: -40px; width: 190px; height: 190px; fill: none; stroke: rgba(255,255,255,.12); transition: transform 1.4s var(--ease); }
.plan__orbit circle { fill: rgba(194,232,78,.5); stroke: none; }
.plan:hover .plan__orbit { transform: rotate(45deg); }
.plan__badge { align-self: flex-start; margin-bottom: 16px; padding: 5px 9px; border-radius: 6px; background: var(--g2); color: #04130a; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.plan__name { font: 600 15px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.plan__price span { font: 800 60px/1 var(--f-display); letter-spacing: -0.05em; }
.plan__price small { font: 500 12px/1 var(--f-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.plan ul { display: grid; gap: 10px; margin: 26px 0 30px; padding-top: 22px; border-top: 1px solid var(--hair); flex: 1; }
.plan ul li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.plan ul li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--g2); }

@media (max-width: 900px) {
  .reel { height: auto; padding: 80px 0; }
  .reel__sticky { position: static; height: auto; display: block; padding: 0; overflow: visible; }
  .reel__side { width: auto; padding: 0 var(--gutter); margin-bottom: 30px; }
  .reel__meter { display: none; }
  .reel__track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 10px; scrollbar-width: none; transform: none !important; }
  .reel__track::-webkit-scrollbar { display: none; }
  .reel__track .plat { width: 78vw; scroll-snap-align: start; opacity: 1 !important; transform: none !important; }
  .reel__track .plat a { min-height: 380px; }
  .plans { grid-template-columns: 1fr; }
  .hero__play { top: auto; bottom: 150px; }
}
@media (max-width: 640px) {
  .spot { left: 50%; top: 26%; }
  .spot__line, .spot__card { display: none; }
  .hero__stats { margin-top: 24px; gap: 22px; }
  .st__v { font-size: 24px; }
  .hero__play { bottom: auto; top: 90px; width: 38px; height: 38px; }
}

.reel__view { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px); mask-image: linear-gradient(90deg, transparent 0, #000 70px); padding-left: 40px; }
@media (max-width: 900px) { .reel__view { display: block; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-left: 0; } }
@media (max-width: 640px) {
  .hero__stats { display: none; }
  .rise__veil-t { letter-spacing: .22em; margin-right: -.22em; font-size: 11px; padding: 0 16px; line-height: 1.6; }
}

/* =====================================================================
   v4 · ПЕРВЫЙ ЭКРАН ГРОМЧЕ + СТЫК СЦЕН
   ===================================================================== */
.hero__media { transform: scale(var(--vs, 1)); transform-origin: 55% 40%; }
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(194,232,78,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(194,232,78,.16) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(240px circle at var(--hx, 30%) var(--hy, 60%), #000, transparent 75%);
          mask-image: radial-gradient(240px circle at var(--hx, 30%) var(--hy, 60%), #000, transparent 75%);
  opacity: .9;
}
.hero__rules span { position: relative; overflow: hidden; }
.hero__rules span::after {
  content: ''; position: absolute; left: 0; width: 1px; height: 22%; top: -22%;
  background: linear-gradient(180deg, transparent, var(--g2), transparent); box-shadow: 0 0 8px var(--g2);
  animation: rule 5.5s cubic-bezier(.6,0,.4,1) infinite;
}
.hero__rules span:nth-child(2)::after { animation-delay: 1.8s; }
.hero__rules span:nth-child(3)::after { animation-delay: 3.4s; }
@keyframes rule { 0% { top: -22%; } 60%, 100% { top: 110%; } }
.hero__grain {
  position: absolute; inset: -50%; z-index: 7; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-6%,-2%)} 80%{transform:translate(5%,4%)} 100%{transform:translate(0,0)} }

/* блик по буквам INCY */
.hero__word { transform: translate3d(var(--mx2, 0px), calc(var(--wy, 0px) + var(--my2, 0px)), 0) scale(var(--ws, 1)); opacity: var(--wo, 1); transform-origin: 50% 40%; }
.hero__word span {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(220,255,160,.9) 52%, transparent 62%) ,
    linear-gradient(180deg, rgba(235, 255, 205, 0.96) 0%, rgba(170, 236, 100, 0.7) 55%, rgba(34, 209, 96, 0.08) 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: shine 6s ease-in-out infinite;
  animation-delay: calc(3s + var(--i, 0) * .12s);
}
@keyframes shine { 0%, 70% { background-position: 160% 0, 0 0; } 90%, 100% { background-position: -60% 0, 0 0; } }
.hero__word span:hover { animation: glitch .35s steps(2) 2; }
@keyframes glitch { 0% { transform: translate(3px,-2px); text-shadow: -4px 0 rgba(34,209,96,.6); } 50% { transform: translate(-3px,2px); } 100% { transform: none; } }

/* метеоры рисуются на том же canvas, что и частицы */
.spot { opacity: var(--so, 1); transition: opacity .3s; }

/* scramble */
[data-scramble] { font-variant-ligatures: none; }

/* ---- стык Земля → платформы ---- */
.rise { height: 360svh; }
.rise__layer--ground::after { background: radial-gradient(60% 40% at 50% 30%, rgba(34,209,96,.22), transparent 70%), var(--bg); }
.reel { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 30%, var(--bg-2) 80%, var(--bg)); }
.reel__side h2 .wi { transition-delay: calc(var(--i, 0) * .06s); }

@media (prefers-reduced-motion: reduce) { .hero__grain, .hero__rules span::after, .hero__word span { animation: none !important; } }
@media (hover: none) { .hero__grid { display: none; } }

/* ---- v5: карточки выезжают поверх сцены с Землёй ---- */
.rise { height: 460svh; }
.rise__dim { position: absolute; inset: 0; pointer-events: none; opacity: var(--dim, 0);
  background: linear-gradient(180deg, rgba(4,10,6,.35) 0%, rgba(4,10,6,.7) 45%, rgba(4,10,6,.92) 100%); }
.rise__outro { top: 15%; transform: none; }
.reel { margin-top: -100svh;
  background: linear-gradient(180deg, transparent 0, transparent 100svh, var(--bg-2) 100svh, var(--bg-2) calc(100% - 20svh), var(--bg) 100%); }
@media (max-width: 900px) {
  .rise { height: 440svh; }
  .reel { padding-top: 40svh; }
}

.rise__outro { text-shadow: 0 4px 30px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.6); }

/* =====================================================================
   v6 · ИСТОРИЯ НА ПЛАНЕТЕ + ПЕРЕКЛЮЧАТЕЛЬ УСТРОЙСТВ
   ===================================================================== */
.rise__outro { top: 50%; transform: translateY(-50%); }
.rise__outro-t { font: 700 clamp(32px, 5vw, 72px)/1.04 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; max-width: 980px; margin: 0 auto; }
.rise__outro-t em { color: var(--g2); }
.rise__outro-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; text-shadow: none; }
.rise__outro.is-live { pointer-events: auto; }

.story { position: absolute; z-index: 5; left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: 13%; width: min(460px, calc(100vw - 2 * var(--gutter))); height: 230px; pointer-events: none; }
.story__card {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px; border-radius: 24px;
  background: rgba(5, 14, 8, .78); border: 1px solid rgba(194,232,78,.28);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(40px);
}
.story__n { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--g2); margin-bottom: 12px; }
.story__card h3 { font: 700 clamp(22px, 2.2vw, 30px)/1.12 var(--f-display); letter-spacing: -0.035em; }
.story__card p:last-child { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.story__dots { position: absolute; left: 0; top: -26px; display: flex; gap: 6px; opacity: var(--sdo, 0); }
.story__dots i { width: 26px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; position: relative; }
.story__dots i::after { content: ''; position: absolute; inset: 0; background: var(--g2); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* убираем наложение старой ленты */
.reel { margin-top: 0; }

/* ---- переключатель устройств ---- */
.devs { padding-top: clamp(80px, 9vw, 120px); }
.devs__ui {
  display: grid; grid-template-columns: 270px minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  border: 1px solid var(--hair); border-radius: 32px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: 0 60px 120px -60px rgba(34,209,96,.35);
}
.devs__tabs { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid var(--hair); background: rgba(0,0,0,.18); }
.devs__tab {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 16px; text-align: left;
  color: var(--ink-soft); transition: background .3s, color .3s; overflow: hidden;
}
.devs__tab:hover { background: rgba(255,255,255,.04); color: var(--ink); }
.devs__tab[aria-selected="true"] { background: rgba(34,209,96,.1); color: var(--ink); }
.devs__tab svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.05); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: background .3s, stroke .3s; }
.devs__tab[aria-selected="true"] svg { background: var(--grad); stroke: #04130a; }
.devs__tname { display: grid; font: 600 16px/1.2 var(--f-display); letter-spacing: -0.02em; }
.devs__tname small { font: 400 12.5px/1.3 var(--f-body); color: var(--ink-faint); letter-spacing: 0; margin-top: 2px; }
.devs__tbar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.06); opacity: 0; }
.devs__tab[aria-selected="true"] .devs__tbar { opacity: 1; }
.devs__tbar i { display: block; height: 100%; background: var(--g2); transform-origin: left; transform: scaleX(0); }
.devs__ui.is-auto .devs__tab[aria-selected="true"] .devs__tbar i { animation: tbar var(--dur, 6s) linear forwards; }
.devs__ui.is-paused .devs__tab[aria-selected="true"] .devs__tbar i { animation-play-state: paused; }
@keyframes tbar { to { transform: scaleX(1); } }

.devs__stage { position: relative; display: grid; place-items: center; min-height: 520px; padding: 40px 20px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, rgba(34,209,96,.16), transparent 70%); }
.devs__glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.25), transparent 65%); filter: blur(20px); animation: drift 8s ease-in-out infinite alternate; pointer-events: none; }
.devs__stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(194,232,78,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(194,232,78,.07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%); }

/* морфинг устройства */
.mock { position: relative; z-index: 1; display: grid; justify-items: center; transition: transform .8s var(--ease); }
.mock__screen {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  width: 360px; height: 230px; padding: 16px; border-radius: 14px;
  background: radial-gradient(120% 70% at 50% 110%, rgba(34,209,96,.3), transparent 60%), #06100a;
  border: 10px solid #121c15; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.8), 0 0 60px -10px rgba(34,209,96,.35);
  transition: width .8s var(--ease), height .8s var(--ease), border-radius .8s var(--ease), border-width .8s var(--ease), padding .8s var(--ease);
}
.mock__bar { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.mock__bar b { font: 900 14px/1 var(--f-giant); letter-spacing: -0.03em; }
.mock__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; background: rgba(194,232,78,.14); color: var(--g2); font: 600 10.5px/1 var(--f-display); }
.mock__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 8px var(--g2); animation: pulse 2s infinite; }
.mock__ring { position: relative; width: 74px; height: 74px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--grad); box-shadow: 0 0 40px rgba(34,209,96,.7); transition: width .8s var(--ease), height .8s var(--ease); }
.mock__ring svg { width: 30px; height: 30px; fill: none; stroke: #04130a; stroke-width: 2.4; stroke-linecap: round; }
.mock__ring span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--g2); animation: ripple 2s ease-out infinite; }
.mock__ring span + span { animation-delay: 1s; }
.mock__rows { width: 100%; display: grid; gap: 6px; transition: opacity .4s; }
.mock__rows span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.05); font: 500 11.5px/1 var(--f-display); }
.mock__rows span:first-child { background: rgba(34,209,96,.12); box-shadow: inset 0 0 0 1px rgba(194,232,78,.35); }
.mock__rows b { padding: 3px 4px; border-radius: 4px; background: rgba(194,232,78,.14); color: var(--g2); font: 600 9px/1 var(--f-mono); }
.mock__rows i { margin-left: auto; font: 500 10px/1 var(--f-mono); font-style: normal; color: var(--ink-faint); }
.mock__base { transition: all .8s var(--ease); background: linear-gradient(180deg, #1a261d, #0c140f); }

.mock[data-dev="pc"] .mock__base { width: 120px; height: 46px; clip-path: polygon(38% 0, 62% 0, 70% 82%, 100% 86%, 100% 100%, 0 100%, 0 86%, 30% 82%); }
.mock[data-dev="laptop"] .mock__screen { border-radius: 14px 14px 4px 4px; }
.mock[data-dev="laptop"] .mock__base { width: 440px; height: 16px; border-radius: 2px 2px 18px 18px; margin-top: -2px; }
.mock[data-dev="tv"] .mock__screen { width: 420px; height: 240px; border-radius: 6px; border-width: 7px; }
.mock[data-dev="tv"] .mock__base { width: 300px; height: 18px; clip-path: polygon(0 0, 8% 0, 12% 100%, 4% 100%, 92% 0, 100% 0, 96% 100%, 88% 100%); background: #1a261d; }
.mock[data-dev="phone"] .mock__screen { width: 190px; height: 380px; border-radius: 34px; border-width: 9px; padding: 34px 14px 18px; }
.mock[data-dev="tablet"] .mock__screen { width: 290px; height: 380px; border-radius: 26px; border-width: 12px; padding: 22px 18px; }
.mock[data-dev="phone"] .mock__base, .mock[data-dev="tablet"] .mock__base { width: 0; height: 0; }
.mock[data-dev="phone"] .mock__ring { width: 92px; height: 92px; }
.mock[data-dev="term"] .mock__screen { background: #030805; font-family: var(--f-mono); }
.mock[data-dev="term"] .mock__base { width: 120px; height: 46px; clip-path: polygon(38% 0, 62% 0, 70% 82%, 100% 86%, 100% 100%, 0 100%, 0 86%, 30% 82%); }
.mock.is-swap { transform: scale(.94); }

.devs__panels { padding: clamp(26px, 3vw, 42px); display: flex; align-items: center; border-left: 1px solid var(--hair-soft); }
.devs__panel { width: 100%; animation: panIn .6s var(--ease); }
.devs__panel[hidden] { display: none; }
@keyframes panIn { from { opacity: 0; transform: translateY(16px); } }
.devs__kicker { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g2); }
.devs__panel h3 { margin-top: 14px; font: 700 clamp(26px, 2.6vw, 36px)/1.08 var(--f-display); letter-spacing: -0.04em; }
.devs__desc { margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; }
.devs__spec { margin-top: 22px; border-top: 1px solid var(--hair); }
.devs__spec > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.devs__spec dt { font: 400 11px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.devs__spec dd { font: 500 14.5px/1.45 var(--f-display); }
.devs__steps { display: grid; gap: 8px; margin-top: 20px; }
.devs__steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
.devs__steps b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(194,232,78,.14); color: var(--g2); font: 600 11px/1 var(--f-mono); }
.devs__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

@media (max-width: 1180px) {
  .devs__ui { grid-template-columns: 1fr 1fr; }
  .devs__tabs { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hair); scrollbar-width: none; }
  .devs__tabs::-webkit-scrollbar { display: none; }
  .devs__tab { width: auto; flex: none; padding: 10px 14px 14px; }
  .devs__tab svg { width: 34px; height: 34px; padding: 7px; }
  .devs__tname small { display: none; }
  .devs__stage { min-height: 460px; }
  .mock { transform: scale(.85); }
}
@media (max-width: 760px) {
  .devs__ui { grid-template-columns: 1fr; border-radius: 26px; }
  .devs__stage { min-height: 330px; padding: 20px 10px; }
  .mock { transform: scale(.68); }
  .mock.is-swap { transform: scale(.64); }
  .devs__panels { border-left: 0; border-top: 1px solid var(--hair-soft); }
  .story { bottom: 9%; height: 250px; }
  .story__card { padding: 22px; }
  .story__card h3 { font-size: 22px; }
  .story__card p:last-child { font-size: 14.5px; }
  .rise__outro-cta .btn { flex: 1 1 100%; }
}

/* =====================================================================
   v7 · КАРТОЧКИ ПЛАТФОРМ + ОПТИМИЗАЦИЯ СЦЕНЫ
   ===================================================================== */
.dcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dcard a {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--hair);
  transition: border-color .35s, background .35s, box-shadow .45s var(--ease);
}
.dcard a::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(194,232,78,.7), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.dcard a::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,209,96,.22), transparent 65%); opacity: 0; transition: opacity .4s; pointer-events: none;
}
.dcard a:hover { border-color: rgba(194,232,78,.4); background: linear-gradient(165deg, rgba(34,209,96,.1), rgba(255,255,255,.015)); box-shadow: 0 40px 80px -40px rgba(34,209,96,.55); }
.dcard a:hover::before, .dcard a:hover::after { opacity: 1; }
.dcard__top { display: flex; justify-content: space-between; align-items: flex-start; }
.dcard__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(194,232,78,.1); border: 1px solid rgba(194,232,78,.18); transition: background .35s, transform .5s var(--ease); }
.dcard__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--g2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.dcard a:hover .dcard__ico { background: var(--grad); transform: rotate(-6deg) scale(1.06); }
.dcard a:hover .dcard__ico svg { stroke: #04130a; }
.dcard__num { font: 800 46px/1 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(194,232,78,.3); }
.dcard h3 { margin-top: 22px; font-size: 26px; letter-spacing: -0.035em; }
.dcard__sub { margin-top: 4px; font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--g2); }
.dcard__desc { margin-top: 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.dcard__spec { margin: 18px 0 22px; border-top: 1px solid var(--hair); flex: 1; }
.dcard__spec > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); }
.dcard__spec dt { font: 400 10.5px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.dcard__spec dd { font: 500 14px/1.4 var(--f-display); }
.dcard__go { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,.05); font: 600 14px/1 var(--f-display); transition: background .3s, color .3s; }
.dcard__go i { font-style: normal; transition: transform .4s var(--ease); }
.dcard a:hover .dcard__go { background: var(--grad); color: #04130a; }
.dcard a:hover .dcard__go i { transform: translateX(5px); }
@media (max-width: 1080px) { .dcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dcards { grid-template-columns: 1fr; } .dcard h3 { font-size: 23px; } }

/* --- сцена с планетой: облегчаем отрисовку --- */
.rise__stage { contain: strict; }
.rise__layer { backface-visibility: hidden; transform: translateZ(0); }
.rise__tint { mix-blend-mode: normal; opacity: .55; }
.story__card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 14, 8, .9); }
.rise__big { will-change: opacity, letter-spacing; }

/* =====================================================================
   v8 · СЦЕНА «ПУТЬ СОЕДИНЕНИЯ»
   ===================================================================== */
.flow { position: relative; z-index: 2; height: 440svh; }
.flow__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding-top: 92px; background: var(--bg); contain: strict; }
.flow__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 45% at 50% 62%, rgba(34,209,96,.12), transparent 70%),
    radial-gradient(circle, rgba(194,232,78,.13) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 60%, #000 40%, transparent 85%); mask-image: radial-gradient(85% 75% at 50% 60%, #000 40%, transparent 85%);
  opacity: var(--bgo, 1); }
.flow__head { position: relative; z-index: 3; }
.flow__caps { position: relative; height: 150px; max-width: 760px; }
.flow__c { position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.flow__c.is-on { opacity: 1; transform: none; }
.flow__n { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-faint); }
.flow__tag { padding: 5px 9px; border-radius: 6px; background: rgba(194,232,78,.15); color: var(--g2); text-transform: uppercase; }
.flow__tag--red { background: rgba(255,90,80,.14); color: #ff7a6e; }
.flow__tag--white { background: rgba(255,255,255,.1); color: #fff; }
.flow__c h3 { margin-top: 14px; font: 700 clamp(26px, 3.4vw, 46px)/1.04 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; }
.flow__c p:last-child { margin-top: 12px; color: var(--ink-soft); font-size: clamp(15px, 1.3vw, 17px); max-width: 560px; }
.flow__prog { display: flex; gap: 6px; margin-top: 14px; }
.flow__prog i { position: relative; width: 44px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.flow__prog i::after { content: ''; position: absolute; inset: 0; background: var(--g2); transform-origin: left; transform: scaleX(var(--f, 0)); }

.flow__map { position: relative; z-index: 2; margin: 0 var(--gutter) 30px; opacity: var(--mo, 1); transition: opacity .3s; }
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl--track { stroke: rgba(255,255,255,.1); stroke-width: 1.5; stroke-dasharray: 3 7; }
.fl--block { stroke: #ff5a50; stroke-width: 2.5; stroke-dasharray: 7 7; filter: drop-shadow(0 0 6px rgba(255,90,80,.7)); opacity: var(--bo, 1); }
.fl--tunnel { stroke: url(#fg-tun); stroke-width: 4; }
.fl--glow { stroke-width: 16; opacity: .22; filter: blur(6px); }
.fl--exit { stroke: var(--g2); stroke-width: 3; }
.fl--direct { stroke: rgba(255,255,255,.85); stroke-width: 2.5; }
.fl__packets circle { fill: #fff; filter: drop-shadow(0 0 6px #c2e84e); }
.fl__packets rect { fill: #04130a; stroke: #c2e84e; stroke-width: 1.2; }

.fnode { position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: center; gap: 12px; transform: translate(-28px, -28px); transition: opacity .5s; }
.fnode__ico { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
  background: #0b1a10; border: 1px solid var(--hair); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); transition: background .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.fnode__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.fnode__txt { display: grid; gap: 3px; white-space: nowrap; }
.fnode__txt b { font: 600 15px/1.1 var(--f-display); }
.fnode__txt small { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; }
.fnode.is-on .fnode__ico { background: var(--grad); border-color: transparent; box-shadow: 0 0 40px rgba(34,209,96,.55); transform: scale(1.06); }
.fnode.is-on .fnode__ico svg { stroke: #04130a; }
.fnode.is-on .fnode__txt small { color: var(--g2); }
.fnode[data-n="bank"].is-on .fnode__ico { background: #fff; box-shadow: 0 0 40px rgba(255,255,255,.35); }
.fnode[data-n="bank"].is-on .fnode__txt small { color: #fff; }
.fnode[data-n="phone"] .fnode__ico::after { content: ''; position: absolute; inset: -6px; border-radius: 22px; border: 1px solid rgba(194,232,78,.5); animation: ripple 2.2s ease-out infinite; }
/* label positions */
.fnode--lt { flex-direction: row-reverse; text-align: right; transform: translate(calc(-100% + 28px), -28px); }
.fnode--b { flex-direction: column; text-align: center; transform: translate(-50%, -28px); }
.fnode--b .fnode__txt { justify-items: center; }

.fnode .st { display: none; }
.fnode[data-st="check"] .st--check, .fnode[data-st="block"] .st--block, .fnode[data-st="ok"] .st--ok { display: inline; }
.fnode[data-st="block"] .fnode__ico { border-color: rgba(255,90,80,.7); box-shadow: 0 0 40px rgba(255,90,80,.45); }
.fnode[data-st="block"] .st--block { color: #ff7a6e; }
.fnode[data-st="ok"] .fnode__ico { border-color: rgba(194,232,78,.5); }
.fnode[data-st="ok"] .st--ok { color: var(--g2); }
.fnode__x { position: absolute; left: 28px; top: 28px; width: 0; height: 0; display: grid; place-items: center; font: 800 34px/1 var(--f-display); color: #ff5a50; text-shadow: 0 0 20px rgba(255,90,80,.9); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.fnode[data-st="block"] .fnode__x { opacity: 1; transform: scale(1); }
.fnode__x::before { content: ''; position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; left: 0; top: 0; border-radius: 50%; border: 2px solid rgba(255,90,80,.6); animation: ripple 1.2s ease-out infinite; }

.flow__lock { position: absolute; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; transform: translate(-50%, -50%);
  background: #06120a; border: 1px solid rgba(194,232,78,.5); font: 600 11px/1 var(--f-mono); color: var(--g2); letter-spacing: .06em; opacity: 0; transition: opacity .4s; box-shadow: 0 0 24px rgba(34,209,96,.35); }
.flow__lock svg { width: 13px; height: 13px; fill: none; stroke: var(--g2); stroke-width: 2; stroke-linecap: round; }
.flow__lock.is-on { opacity: 1; }

.flow__outro { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 0 20px; opacity: 0; pointer-events: none; }
.flow__outro.is-live { pointer-events: auto; }
.flow__outro-t { font: 700 clamp(34px, 5.4vw, 78px)/1.03 var(--f-display); letter-spacing: -0.05em; text-wrap: balance; max-width: 1000px; margin: 0 auto; }
.flow__outro-t em { color: var(--g2); }
.flow__outro-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

@media (max-width: 760px) {
  .flow { height: 460svh; }
  .flow__stage { padding-top: 78px; }
  .flow__caps { height: 168px; }
  .flow__c h3 { font-size: 24px; }
  .flow__c p:last-child { font-size: 14.5px; }
  .flow__map { margin: 6px 16px 20px; }
  .fnode__ico { width: 46px; height: 46px; border-radius: 15px; }
  .fnode { transform: translate(-23px, -23px); gap: 9px; }
  .fnode--lt { transform: translate(calc(-100% + 23px), -23px); }
  .fnode--b { transform: translate(-50%, -23px); }
  .fnode__x { left: 23px; top: 23px; }
  .fnode__txt b { font-size: 13.5px; }
  .fnode__txt small { font-size: 9.5px; }
  .flow__outro-cta .btn { flex: 1 1 100%; }
}
.flow__caps { height: 190px; }
@media (min-width: 1100px) {
  .fnode__ico { width: 66px; height: 66px; border-radius: 20px; }
  .fnode__ico svg { width: 30px; height: 30px; }
  .fnode { transform: translate(-33px, -33px); }
  .fnode--b { transform: translate(-50%, -33px); }
  .fnode__x { left: 33px; top: 33px; }
  .fnode__txt b { font-size: 17px; }
  .fnode__txt small { font-size: 11px; }
}
@media (max-width: 760px) { .flow__caps { height: 200px; } .flow__c h3 { font-size: 23px; } }

/* =====================================================================
   v9 · НАСТОЯЩАЯ ИНСТРУКЦИЯ НА iPHONE
   ===================================================================== */
.howto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.howto__stage { position: relative; display: grid; justify-items: center; gap: 16px; }
.howto__glow { position: absolute; top: 8%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(34,209,96,.32), transparent 62%); filter: blur(30px); pointer-events: none; animation: drift 9s ease-in-out infinite alternate; }
.howto__phone {
  position: relative; width: clamp(250px, 24vw, 320px); padding: 11px; border-radius: 54px;
  background: linear-gradient(145deg, #3a463d, #121a14 40%, #0a0f0b 60%, #2c362f);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 2px #050806, 0 60px 120px -40px rgba(0,0,0,.9), 0 30px 90px -30px rgba(34,209,96,.45);
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); transition: transform .8s var(--ease);
  animation: float 8s ease-in-out infinite;
}
.howto__phone:hover { animation-play-state: paused; transform: perspective(1400px) rotateY(0) rotateX(0); }
.howto__screen { position: relative; aspect-ratio: 472 / 1042; border-radius: 44px; overflow: hidden; background: #000; isolation: isolate; }
.howto__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.howto__video.is-swap { opacity: 0; }
.howto__screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.1), transparent 30%); }
.howto__play { position: absolute; z-index: 2; right: 14px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.howto__screen:hover .howto__play, .howto__play[aria-pressed="true"] { opacity: 1; }
.howto__play svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.howto__play .i-play { display: none; fill: #fff; }
.howto__play[aria-pressed="true"] .i-play { display: block; }
.howto__play[aria-pressed="true"] .i-pause { display: none; }
.howto__bar { position: absolute; z-index: 2; left: 18%; right: 18%; bottom: 10px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.howto__bar i { display: block; height: 100%; background: var(--g2); transform-origin: left; transform: scaleX(var(--vp, 0)); }
.howto__btn { position: absolute; width: 4px; border-radius: 3px; background: #2b352e; }
.howto__btn--a { left: -3px; top: 20%; height: 7%; }
.howto__btn--b { left: -3px; top: 30%; height: 11%; }
.howto__btn--c { right: -3px; top: 26%; height: 14%; }
.howto__cap { position: relative; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

.howto__side { display: grid; gap: 12px; }
.hcard { border: 1px solid var(--hair); border-radius: 22px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .35s, background .35s, box-shadow .5s; }
.hcard.is-open { border-color: rgba(194,232,78,.42); background: linear-gradient(165deg, rgba(34,209,96,.1), rgba(255,255,255,.02)); box-shadow: 0 30px 70px -40px rgba(34,209,96,.55); }
.hcard__head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; text-align: left; }
.hcard__n { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font: 800 20px/1 var(--f-display); background: rgba(255,255,255,.06); transition: background .35s, color .35s; }
.hcard.is-open .hcard__n { background: var(--grad); color: #04130a; }
.hcard__t { display: grid; gap: 4px; flex: 1; }
.hcard__t b { font: 700 19px/1.15 var(--f-display); letter-spacing: -0.025em; }
.hcard__t small { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hcard__badge { padding: 5px 9px; border-radius: 6px; background: var(--g2); color: #04130a; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.hcard__steps { display: grid; gap: 2px; padding: 0 12px; max-height: 0; overflow: hidden; transition: max-height .6s var(--ease), padding .4s; }
.hcard.is-open .hcard__steps { max-height: 600px; padding: 0 12px 14px; }
.hcard__steps li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; cursor: pointer; color: var(--ink-faint); transition: background .3s, color .3s; }
.hcard__steps li:hover { background: rgba(255,255,255,.04); color: var(--ink-soft); }
.hcard__steps li b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.06); font: 600 11px/1 var(--f-mono); transition: background .3s, color .3s; }
.hcard__steps li span { display: grid; gap: 2px; font: 500 15px/1.35 var(--f-display); }
.hcard__steps li small { font: 400 12.5px/1.35 var(--f-body); color: var(--ink-faint); }
.hcard__steps li.is-done { color: var(--ink-soft); }
.hcard__steps li.is-done b { background: rgba(194,232,78,.16); color: var(--g2); }
.hcard__steps li.is-on { background: rgba(34,209,96,.12); color: var(--ink); }
.hcard__steps li.is-on b { background: var(--grad); color: #04130a; box-shadow: 0 0 18px rgba(34,209,96,.6); }
.hcard__steps li.is-on::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--g2); box-shadow: 0 0 8px var(--g2); }
.howto__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.howto__text { margin-top: clamp(50px, 6vw, 80px); max-width: 860px; }

@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; }
  .howto__phone { width: min(270px, 70vw); transform: none; animation: none; }
  .howto__cta .btn { flex: 1 1 100%; }
}

/* ---- запасной показ: чёткие кадры с плавной сменой ---- */
.howto__video img.st { animation: stIn .45s ease both, stZoom 7s ease-out both; transform-origin: 60% 30%; }
@keyframes stIn { from { opacity: 0; } }
@keyframes stZoom { from { transform: scale(1.015); } to { transform: scale(1); } }
.hero__media img.hero__bg, .hero__media img.hero__fg { animation: heroKB 16s ease-in-out infinite alternate; transform-origin: 56% 40%; }
@keyframes heroKB { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1.2%, -1%, 0); } }

/* =====================================================================
   v14 · ВЕДУЩИЙ В ШАПКЕ + ВИДЕО-ИНСТРУКЦИЯ
   ===================================================================== */
.hero .hero__media { background: var(--bg); }
.hero__ambient { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 70% at 72% 38%, rgba(34,209,96,.22), transparent 70%),
    radial-gradient(40% 50% at 20% 85%, rgba(194,232,78,.08), transparent 70%); }
.hero__box { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1280 / 1440; max-width: 66%; overflow: hidden; container-type: size; }
.hero .hero__box .hero__bg, .hero .hero__box .hero__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hero .hero__box .hero__bg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero .hero__box .hero__fg {
  -webkit-mask-image: radial-gradient(ellipse 18% 20% at 51% 25%, #000 62%, rgba(0,0,0,.8) 76%, transparent 96%);
          mask-image: radial-gradient(ellipse 18% 20% at 51% 25%, #000 62%, rgba(0,0,0,.8) 76%, transparent 96%); }
.hero .hero__box .hero__word { top: 8.5%; left: 0; right: 0; font-size: clamp(90px, 33cqw, 520px); letter-spacing: -0.06em; }
.hero__boxfade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5,11,7,.55) 14%, transparent 34%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5,11,7,.4) 16%, transparent 34%),
    linear-gradient(180deg, rgba(5,11,7,.55) 0%, transparent 16%); }
.hero .hero__scrim { background: linear-gradient(90deg, rgba(3,10,5,.9) 0%, rgba(3,10,5,.55) 30%, transparent 55%), linear-gradient(0deg, var(--bg) 0%, transparent 25%); }
.hero__tag { position: absolute; z-index: 6; left: 26%; top: 94px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px;
  background: rgba(4,12,7,.55); border: 1px solid var(--hair); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hero__tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: pulse 1.6s infinite; }

/* точка-подсказка на ноутбуке */
.hero .hero__box .spot { left: 88%; top: 66%; z-index: 7; }
.hero__inner { pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__media { pointer-events: none; }
.hero__media .spot__dot { pointer-events: auto; }
.spot--left .spot__line { left: -120px; }
.spot--left .spot__card { left: auto; right: 122px; transform: translateX(-14px) scale(.94); }
.spot--left.is-open .spot__card { transform: none; }
.hero .hero__play { top: auto; bottom: 130px; right: var(--gutter); }
.hero__media { z-index: 0; }
.hero__inner { z-index: 5; }

/* кнопка видео */
.btn--video { gap: 12px; padding-left: 10px; }
.btn--video small { font: 500 11px/1 var(--f-mono); color: var(--ink-faint); letter-spacing: .06em; }
.pbtn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); position: relative; }
.pbtn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(194,232,78,.6); animation: ripple 1.8s ease-out infinite; }
.pbtn svg { width: 15px; height: 15px; fill: #04130a; margin-left: 2px; }

/* окно с роликом */
.modal--video .pvbox {
  position: relative; width: min(1100px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: 14px; border-radius: 30px;
  background: linear-gradient(165deg, #0f2a17, #050d08 70%); border: 1px solid rgba(194,232,78,.3);
  box-shadow: 0 60px 140px -30px rgba(34,209,96,.45); animation: pop .5s var(--ease);
}
.modal--video .modal__x { z-index: 3; right: 24px; top: 24px; background: rgba(0,0,0,.5); color: #fff; }
.pv { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; }
.pv__v { width: 100%; height: 100%; display: block; background: #000; }
.pv__fb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px;
  background: linear-gradient(0deg, rgba(3,10,5,.92), rgba(3,10,5,.75)), center / cover no-repeat var(--pvbg, none); }
.pv__fb[hidden] { display: none; }
.pv__fb-t { font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--f-display); }
.pv__fb p:not(.pv__fb-t) { color: var(--ink-soft); max-width: 420px; }
.pv__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 10px 14px; }
.pv__meta .eyebrow { margin-bottom: 10px; }
.pv__t { font: 700 clamp(22px, 2.6vw, 32px)/1.1 var(--f-display); letter-spacing: -0.035em; }
.pv__t em { color: var(--g2); }
.pv__ch { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px; }
.pv__ch button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font: 500 13px/1 var(--f-display); color: var(--ink-soft); transition: background .2s, color .2s, border-color .2s; }
.pv__ch button:hover { background: rgba(34,209,96,.12); color: var(--ink); border-color: rgba(194,232,78,.35); }
.pv__ch button.is-on { background: var(--grad); color: #04130a; border-color: transparent; }
.pv__ch button.is-on b { color: #04130a; }
.pv__ch b { font: 600 11px/1 var(--f-mono); color: var(--g2); }

@media (max-width: 1080px) { .hero__box { max-width: 72%; } }
@media (max-width: 640px) {
  .hero .hero__box { left: 0; right: 0; width: 100%; height: auto; max-width: none; }
  .hero .hero__box .hero__bg { -webkit-mask-image: none; mask-image: none; }
  .hero .hero__box .hero__bg, .hero .hero__box .hero__fg { object-position: 50% 28%; }
  .hero .hero__box .hero__fg {
    -webkit-mask-image: radial-gradient(ellipse 18% 20% at 51% 25%, #000 62%, rgba(0,0,0,.8) 76%, transparent 96%);
            mask-image: radial-gradient(ellipse 18% 20% at 51% 25%, #000 62%, rgba(0,0,0,.8) 76%, transparent 96%); }
  .hero .hero__box .hero__word { top: 8.5%; font-size: 33cqw; }
  .hero__boxfade { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,11,7,.7) 22%, transparent 48%), linear-gradient(180deg, rgba(5,11,7,.5) 0%, transparent 18%); }
  .hero .hero__scrim { background: linear-gradient(0deg, var(--bg) 0%, rgba(5,11,7,.6) 40%, transparent 60%); }
  .hero .hero__box .spot { left: 88%; top: 66%; }
  .hero__tag { left: 16px; top: 76px; }
  .hero .hero__play { top: 76px; bottom: auto; right: 16px; }
  .btn--video small { display: none; }
  .pv__meta { flex-direction: column; align-items: stretch; }
  .modal--video .pvbox { padding: 8px; border-radius: 22px; }
}

@media (max-width: 640px) { .hero__cta .btn--video { flex: 1 1 100%; } }
.hero__tag { top: auto; bottom: 36%; left: 24%; }
@media (max-width: 640px) { .hero__tag { top: auto; bottom: 30%; left: 16px; } }

.hero__tag { bottom: 15%; left: 26%; }
@media (max-width: 640px) { .hero__tag { bottom: 30%; left: 16px; } }

/* =====================================================================
   v15 · «КАК ЭТО РАБОТАЕТ» БЕЗ СКРОЛЛА — АВТОИСТОРИЯ
   ===================================================================== */
.flow { height: auto; padding: 40px 0; }
.flow__stage { position: relative; top: auto; height: min(100svh, 860px); min-height: 680px; margin: 0 var(--gutter); border-radius: 36px; border: 1px solid var(--hair);
  box-shadow: 0 60px 140px -60px rgba(34,209,96,.4); padding-top: 44px; }
.flow__prog { gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.flow__prog button { display: grid; gap: 8px; min-width: 120px; padding: 0; text-align: left; cursor: pointer; }
.flow__prog button i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.flow__prog button i::after { content: ''; position: absolute; inset: 0; background: var(--g2); transform-origin: left; transform: scaleX(var(--f, 0)); box-shadow: 0 0 8px var(--g2); }
.flow__prog button span { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); transition: color .3s; }
.flow__prog button:hover span, .flow__prog button.is-on span { color: var(--ink); }
.flow__prog button.is-on span { color: var(--g2); }
.flow__stage::after { content: 'пауза'; position: absolute; right: 22px; top: 20px; z-index: 6; padding: 6px 10px; border-radius: 99px; background: rgba(0,0,0,.5); border: 1px solid var(--hair);
  font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; transition: opacity .3s; }
.flow__stage.is-hold::after { opacity: 1; }
.flow__head .eyebrow { margin-bottom: 14px; }
@media (max-width: 760px) {
  .flow { padding: 20px 0; }
  .flow__stage { height: auto; min-height: 860px; margin: 0 10px; border-radius: 26px; padding-top: 28px; }
  .flow__prog button { min-width: 0; flex: 1 1 40%; }
  .flow__map { height: 520px; }
}

.flow__stage { contain: paint; }

/* =====================================================================
   v16 · АВТОЗАПУСК ОТРЫВКА ПРО INCY В ШАПКЕ
   ===================================================================== */
.hero__media .hero__sound, .hero__media .hero__end, .hero__media .hero__end * { pointer-events: auto; }
.hero__sound {
  position: absolute; z-index: 8; left: 24%; top: 92px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 99px;
  background: rgba(4,12,7,.62); border: 1px solid rgba(194,232,78,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 600 14px/1 var(--f-display); color: var(--ink); box-shadow: 0 0 0 0 rgba(194,232,78,.5); animation: sndPulse 2s ease-out infinite; transition: background .3s, opacity .4s;
}
.js:not(.is-loaded) .hero__sound { opacity: 0; }
.hero__sound:hover { background: rgba(34,209,96,.25); }
.hero__sound[aria-pressed="true"] { animation: none; border-color: var(--hair); }
@keyframes sndPulse { 0% { box-shadow: 0 0 0 0 rgba(194,232,78,.45); } 100% { box-shadow: 0 0 0 16px rgba(194,232,78,0); } }
.eqz { display: inline-flex; align-items: flex-end; gap: 2px; width: 18px; height: 16px; }
.eqz i { flex: 1; height: 30%; border-radius: 2px; background: var(--g2); }
.hero__sound[aria-pressed="true"] .eqz i { animation: eq .9s ease-in-out infinite alternate; }
.hero__sound[aria-pressed="true"] .eqz i:nth-child(2) { animation-delay: -.3s; } .hero__sound[aria-pressed="true"] .eqz i:nth-child(3) { animation-delay: -.6s; } .hero__sound[aria-pressed="true"] .eqz i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }

.hero__chips { position: absolute; z-index: 8; left: 22%; bottom: 17%; display: grid; justify-items: start; gap: 8px; pointer-events: none; }
.hero__chips span {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 12px;
  background: rgba(4,12,7,.78); border: 1px solid rgba(194,232,78,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 14px/1.2 var(--f-display); color: var(--ink); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(-18px); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.hero__chips span::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 6px;
  background: var(--grad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304130a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.hero__chips span.is-on { opacity: 1; transform: none; }
.hero__chips.is-out span { opacity: 0; transform: translateY(8px); }

.hero__prog { position: absolute; z-index: 8; left: 24%; right: 6%; bottom: 9%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; transition: opacity .4s; }
.hero__prog i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--hp, 0)); box-shadow: 0 0 10px var(--g2); }
.hero__prog.is-out { opacity: 0; }

.hero__end { position: absolute; z-index: 9; left: 20%; right: 4%; bottom: 12%; padding: 24px 26px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(14,40,22,.92), rgba(4,12,7,.92)); border: 1px solid rgba(194,232,78,.4);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(34,209,96,.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: endIn .7s var(--ease) both; }
.hero__end[hidden] { display: none; }
@keyframes endIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.hero__end-k { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g2); }
.hero__end-t { margin-top: 10px; font: 700 clamp(24px, 2.4vw, 34px)/1.08 var(--f-display); letter-spacing: -0.04em; }
.hero__end-t em { color: var(--g2); }
.hero__end-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero__end-go .arr { display: inline-block; animation: arrNudge 1.2s ease-in-out infinite; }
@keyframes arrNudge { 50% { transform: translateX(6px); } }
.hero__end ~ .hero__chips { }
.hero__tag { display: none; }

@media (max-width: 640px) {
  .hero__sound { left: 16px; top: 72px; padding: 8px 13px 8px 10px; font-size: 13px; }
  .hero__chips { left: 16px; bottom: 26%; gap: 6px; }
  .hero__chips span { font-size: 12.5px; padding: 7px 11px 7px 8px; }
  .hero__prog { left: 16px; right: 16px; bottom: 20%; }
  .hero__end { left: 12px; right: 12px; bottom: 18%; padding: 18px; }
  .hero__end-btns .btn { flex: 1 1 100%; }
}
.hero__chips span::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304130a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center/12px no-repeat, var(--grad); }
.hero__sound { top: 44%; left: 22%; }
@media (max-width: 640px) { .hero__sound { top: 72px; left: 16px; } }

/* =====================================================================
   v17 · БЫСТРЕЕ И УДОБНЕЕ НА ТЕЛЕФОНЕ
   ===================================================================== */
.loader { display: none !important; }
/* вход шапки — короче */
.hero__word span { transition-delay: calc(.1s + var(--i, 0) * .07s); transition-duration: 1s; }
.hero__title .wi { transition-delay: calc(.2s + var(--i, 0) * .045s); transition-duration: .9s; }
.hero__note { transition-delay: .1s; } .hero__sub { transition-delay: .45s; } .hero__cta { transition-delay: .55s; } .hero__hud { transition-delay: .8s; }
.hero__stats { transition-delay: .65s; }
.hero__media video { transition-duration: 1.2s; }

/* закреплённая кнопка на телефоне */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: block; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(5,11,7,.96) 55%, rgba(5,11,7,0)); transform: translateY(110%); transition: transform .45s var(--ease); pointer-events: none; }
  .mbar.is-on { transform: none; pointer-events: auto; }
  .mbar__go { width: 100%; min-height: 54px; font-size: 16px; gap: 10px; }
  .foot { padding-bottom: 100px; }
}

/* компактный финал ролика на телефоне */
@media (max-width: 640px) {
  .hero__end { left: 10px; right: 10px; bottom: 6%; padding: 14px 14px 12px; border-radius: 18px; }
  .hero__end-k { display: none; }
  .hero__end-t { margin-top: 0; font-size: 19px; }
  .hero__end-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .hero__end-btns .btn { min-height: 40px; padding: 0 10px; font-size: 13px; flex: none; }
  .hero__end-btns .hero__end-go { grid-column: 1 / -1; min-height: 46px; font-size: 15px; }
}

/* «Как это работает»: только индикатор, без кликов и паузы */
.flow__prog span { display: grid; gap: 8px; min-width: 120px; }
.flow__prog span i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.flow__prog span i::after { content: ''; position: absolute; inset: 0; background: var(--g2); transform-origin: left; transform: scaleX(var(--f, 0)); box-shadow: 0 0 8px var(--g2); }
.flow__prog span b { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); transition: color .3s; }
.flow__prog span.is-on b { color: var(--g2); }
.flow__stage::after { display: none; }
@media (max-width: 760px) { .flow__prog span { min-width: 0; flex: 1 1 40%; } }

/* =====================================================================
   v19 · ПРОДАЮЩИЙ BENTO-БЛОК
   ===================================================================== */
.h2 { font: 700 clamp(32px, 4.4vw, 56px)/1.04 var(--f-display); letter-spacing: -0.045em; text-wrap: balance; }
.bento__title em { color: var(--g2); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); gap: 14px; }
.bc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 26px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); border: 1px solid var(--hair);
  transition: border-color .35s, box-shadow .5s var(--ease); }
.bc:hover { border-color: rgba(194,232,78,.38); box-shadow: 0 40px 80px -40px rgba(34,209,96,.5); }
.bc__k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g2); }
.bc h3 { font: 700 clamp(19px, 1.6vw, 23px)/1.15 var(--f-display); letter-spacing: -0.03em; }
.bc h3 em, .bc__big em { color: var(--g2); }
.bc__p { color: var(--ink-soft); font-size: 14.5px; margin-top: auto; }
.bc--trial { grid-column: span 2; grid-row: span 2; padding: 32px; background: linear-gradient(160deg, rgba(34,209,96,.16), rgba(5,14,8,.6) 60%); border-color: rgba(194,232,78,.35); }
.bc--trial .btn { align-self: flex-start; margin-top: 6px; }
.bc__glow { position: absolute; width: 420px; height: 420px; right: -150px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.3), transparent 65%); animation: drift 9s ease-in-out infinite alternate; pointer-events: none; }
.bc__big { font: 800 clamp(30px, 3.4vw, 48px)/1.02 var(--f-display); letter-spacing: -0.045em; max-width: 460px; }
.trial { display: flex; align-items: center; gap: 20px; margin: 10px 0 4px; }
.trial__ring { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.trial__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.trial__arc { fill: none; stroke: url(#none); stroke: var(--g2); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: var(--ro, 0); filter: drop-shadow(0 0 8px rgba(194,232,78,.7)); transition: stroke-dashoffset 1s linear; }
.trial__time b { display: block; font: 600 clamp(30px, 3vw, 42px)/1 var(--f-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trial__time span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-faint); }

.bc--devices { grid-column: span 2; }
.devrow { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin: 8px 0; }
.devrow i { position: relative; aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); transition: background .4s, border-color .4s, box-shadow .4s; }
.devrow i::after { content: ''; position: absolute; inset: 28%; border: 1.6px solid rgba(255,255,255,.25); border-radius: 3px; transition: border-color .4s; }
.devrow i[data-d="phone"]::after { inset: 22% 34%; border-radius: 3px; }
.devrow i[data-d="tv"]::after { inset: 30% 18% 34%; }
.devrow i[data-d="tablet"]::after { inset: 24% 28%; }
.devrow i.is-on { background: rgba(34,209,96,.18); border-color: rgba(194,232,78,.55); box-shadow: 0 0 18px -4px rgba(34,209,96,.7); }
.devrow i.is-on::after { border-color: var(--g2); }

.toggle { display: grid; gap: 8px; margin-top: auto; }
.toggle__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.04); font-size: 14px; }
.toggle__row em { font-style: normal; font: 600 12px/1 var(--f-mono); color: var(--g2); }
.sw { position: relative; width: 44px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.15); animation: swBg 4s ease-in-out infinite; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; animation: swKnob 4s ease-in-out infinite; }
@keyframes swBg { 0%, 20% { background: rgba(255,255,255,.15); } 30%, 100% { background: var(--g1); } }
@keyframes swKnob { 0%, 20% { transform: none; } 30%, 100% { transform: translateX(20px); } }
.toggle__row:last-child em { animation: fadeLate 4s ease-in-out infinite; }
@keyframes fadeLate { 0%, 32% { opacity: 0; } 42%, 100% { opacity: 1; } }

.sig { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: auto; }
.sig i { width: 14px; border-radius: 4px; background: rgba(255,255,255,.1); animation: sigUp 3s ease-in-out infinite; }
.sig i:nth-child(1) { height: 25%; animation-delay: 0s; } .sig i:nth-child(2) { height: 50%; animation-delay: .2s; } .sig i:nth-child(3) { height: 75%; animation-delay: .4s; } .sig i:nth-child(4) { height: 100%; animation-delay: .6s; }
@keyframes sigUp { 0%, 15% { background: rgba(255,255,255,.1); box-shadow: none; } 35%, 100% { background: var(--g2); box-shadow: 0 0 12px rgba(194,232,78,.6); } }
.sig span { margin-left: 8px; font: 700 13px/1 var(--f-mono); color: var(--g2); }

.bc--vs { grid-column: span 2; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.vs__col { padding: 14px; border-radius: 16px; }
.vs__col--bad { background: rgba(255,90,80,.06); border: 1px solid rgba(255,90,80,.2); }
.vs__col--good { background: rgba(34,209,96,.09); border: 1px solid rgba(194,232,78,.35); }
.vs__h { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.vs__col--bad .vs__h { color: #ff8a80; } .vs__col--good .vs__h { color: var(--g2); }
.vs ul { display: grid; gap: 8px; }
.vs li { display: flex; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.vs__col--bad li::before { content: '✕'; color: #ff7a6e; font-weight: 700; }
.vs__col--good li::before { content: '✓'; color: var(--g2); font-weight: 700; }

.bc--apps { grid-column: span 2; }
.apps { position: relative; display: flex; gap: 10px; margin: 6px 0; }
.apps span { padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); font: 800 16px/1 var(--f-display); animation: appGlow 4.5s ease-in-out infinite; }
.apps span:nth-child(2) { animation-delay: 1.5s; } .apps span:nth-child(3) { animation-delay: 3s; }
@keyframes appGlow { 0%, 30%, 100% { border-color: var(--hair); background: rgba(255,255,255,.05); color: var(--ink); } 10%, 20% { border-color: rgba(194,232,78,.7); background: rgba(34,209,96,.18); color: var(--g2); } }

.paychips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.paychips span { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font-size: 13.5px; animation: bob2 3s ease-in-out infinite; }
.paychips span:nth-child(2) { animation-delay: .4s; } .paychips span:nth-child(3) { animation-delay: .8s; }
@keyframes bob2 { 50% { transform: translateY(-4px); } }

.chat { display: grid; gap: 8px; margin-top: auto; font-size: 13.5px; }
.chat__me { justify-self: end; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: rgba(255,255,255,.08); }
.chat__them { justify-self: start; max-width: 92%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: rgba(34,209,96,.16); border: 1px solid rgba(194,232,78,.3); min-height: 36px; }
.chat__typing { display: inline-flex; gap: 4px; animation: typeHide 6s infinite; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g2); animation: blinkDot 1s infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blinkDot { 50% { opacity: .25; } }
.chat__msg { display: none; animation: typeShow 6s infinite; }
@keyframes typeHide { 0%, 40% { display: inline-flex; } 41%, 100% { display: none; } }
@keyframes typeShow { 0%, 40% { display: none; } 41%, 100% { display: inline; } }

.bc--cta { grid-column: span 2; justify-content: center; background: var(--grad); color: #04130a; border: 0; }
.bc--cta .bc__k { color: rgba(4,19,10,.65); }
.bc__price { display: flex; align-items: baseline; gap: 10px; }
.bc__price b { font: 800 clamp(40px, 4vw, 56px)/1 var(--f-display); letter-spacing: -0.05em; }
.bc__price > span { font-weight: 600; opacity: .7; }
.bc__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bc--cta .btn--flame { background: #04130a; color: var(--g2); box-shadow: none; }
.bc--cta .btn--glass { background: rgba(4,19,10,.08); border-color: rgba(4,19,10,.25); color: #04130a; }

@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, 1fr); } .bc--trial { grid-row: span 1; } }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bc { padding: 18px; border-radius: 20px; }
  .bc--trial, .bc--devices, .bc--vs, .bc--apps, .bc--cta { grid-column: 1 / -1; }
  .bc--trial { padding: 22px; }
  .trial__ring { width: 90px; height: 90px; }
  .devrow { gap: 5px; }
  .vs { grid-template-columns: 1fr; }
  .bc h3 { font-size: 17px; }
  .bc--split, .bc--wl, .bc--pay, .bc--support { grid-column: span 1; }
  .bc--pay, .bc--support { grid-column: 1 / -1; }
  .bc__btns .btn { flex: 1 1 100%; }
}
.chat__them { position: relative; }
.chat__typing { position: absolute; left: 12px; top: 14px; display: inline-flex; animation: typeHide2 6s infinite; }
.chat__msg { display: inline; animation: typeShow2 6s infinite; }
@keyframes typeHide2 { 0%, 38% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes typeShow2 { 0%, 40% { opacity: 0; } 46%, 94% { opacity: 1; } 100% { opacity: 0; } }
.bc .bc__big { font: 800 clamp(32px, 3.6vw, 52px)/1.02 var(--f-display); letter-spacing: -0.045em; max-width: 480px; }
.trial__arc { filter: none; }
.trial__ring { filter: drop-shadow(0 0 10px rgba(194,232,78,.45)); }
.devrow i.is-on { background: linear-gradient(160deg, rgba(34,209,96,.4), rgba(194,232,78,.18)); border-color: var(--g2); box-shadow: 0 0 22px -2px rgba(34,209,96,.8); }
.devrow i.is-on::after { border-color: #eaffc2; }

/* =====================================================================
   v20 · ИНСТРУКЦИЯ: ПОНЯТНО, ЧТО НАЖИМАТЬ
   ===================================================================== */
.howto__hint { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--f-display); color: var(--ink-soft); margin-bottom: 2px; }
.howto__tap { display: inline-block; font-size: 18px; animation: tapIt 1.6s ease-in-out infinite; }
@keyframes tapIt { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(4px) scale(.9); } }
.hcard__head { cursor: pointer; transition: background .25s; border-radius: 22px; }
.hcard:not(.is-open) .hcard__head:hover { background: rgba(34,209,96,.07); }
.hcard__state { margin-left: auto; flex: none; }
.hcard__watch, .hcard__now { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; font: 600 13px/1 var(--f-display); white-space: nowrap; }
.hcard__watch { background: var(--grad); color: #04130a; box-shadow: 0 8px 22px -8px rgba(34,209,96,.7); transition: transform .3s var(--ease); }
.hcard__head:hover .hcard__watch { transform: translateX(-3px) scale(1.04); }
.hcard__now { display: none; background: rgba(34,209,96,.14); border: 1px solid rgba(194,232,78,.4); color: var(--g2); }
.hcard__now .eqz i { animation: eq .9s ease-in-out infinite alternate; }
.hcard__now .eqz i:nth-child(2) { animation-delay: -.3s; } .hcard__now .eqz i:nth-child(3) { animation-delay: -.6s; } .hcard__now .eqz i:nth-child(4) { animation-delay: -.15s; }
.hcard.is-open .hcard__watch { display: none; }
.hcard.is-open .hcard__now { display: inline-flex; }
.hcard.is-open .hcard__badge { display: none; }
.hcard__steps li::before { content: '▶ перемотать'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--f-mono); color: var(--g2); opacity: 0; transition: opacity .2s; letter-spacing: .04em; }
.hcard__steps li:hover::before { opacity: 1; }
.hcard__steps li.is-on::before { content: 'сейчас'; opacity: 1; padding: 4px 7px; border-radius: 6px; background: rgba(194,232,78,.16); }
.hcard__steps li span { padding-right: 96px; }
.howto__label { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; border-radius: 99px;
  background: rgba(0,0,0,.65); border: 1px solid rgba(194,232,78,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 500 11.5px/1 var(--f-display); color: rgba(255,255,255,.8); }
.howto__label b { color: var(--g2); font-weight: 700; }
@media (max-width: 640px) {
  .hcard__watch, .hcard__now { padding: 8px 11px; font-size: 12px; }
  .hcard__head { gap: 12px; padding: 14px; }
  .hcard__steps li span { padding-right: 0; }
  .hcard__steps li::before { display: none; }
  .hcard__t small { display: none; }
}
@media (min-width: 641px) and (max-width: 1180px) { .hero__sound { left: auto; right: 7%; top: 30%; } }
@media (max-width: 640px) { .hero__title { font-size: 30px; } }

/* =====================================================================
   СТРАНИЦА /skachat/
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav__pill a[aria-current="page"] { background: rgba(34,209,96,.14); color: var(--ink); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-faint); }
.crumbs a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--g2); }
.crumbs [aria-current] { color: var(--g2); }

.dlhero { position: relative; overflow: hidden; padding: 120px 0 80px; min-height: 100svh; display: flex; align-items: center; }
.dlhero__bg { position: absolute; inset: 0; pointer-events: none; }
.dlhero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(194,232,78,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(194,232,78,.07) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); }
.dlhero__orb { position: absolute; width: 760px; height: 760px; right: -180px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(34,209,96,.28), rgba(194,232,78,.06) 45%, transparent 68%); filter: blur(10px); animation: drift 10s ease-in-out infinite alternate; }
.dlhero__rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.dlhero__in { position: relative; z-index: 2; }
.dlhero__grid2 { display: grid; grid-template-columns: 1fr minmax(0, 540px); gap: clamp(30px, 5vw, 70px); align-items: center; }
.dlhero__title { font: 800 clamp(38px, 5vw, 70px)/1.0 var(--f-display); letter-spacing: -0.05em; text-wrap: balance; }
.dlhero__title em { font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dlhero__sub { margin-top: 20px; max-width: 520px; color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 18px); }
.dlhero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.dlhero__facts li { padding: 8px 13px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); font: 500 13px/1 var(--f-display); color: var(--ink-soft); }
.dlhero__facts li::before { content: '✓ '; color: var(--g2); font-weight: 700; }

.dlcard { position: relative; padding: 26px; border-radius: 32px; background: linear-gradient(165deg, rgba(15,42,23,.92), rgba(5,13,8,.94) 70%); border: 1px solid rgba(194,232,78,.35);
  box-shadow: 0 60px 120px -40px rgba(34,209,96,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.dlcard::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--g2) 82%, var(--g1) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.dlcard__detect { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--g2); }
.dlcard__scan { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(194,232,78,.3); border-top-color: var(--g2); animation: spinA 0.9s linear infinite; }
.dlcard.is-ready .dlcard__scan { animation: none; border-color: var(--g2); background: var(--g2); box-shadow: 0 0 12px var(--g2); }
@keyframes spinA { to { transform: rotate(360deg); } }
.dlcard__stage { position: relative; display: grid; place-items: center; height: 250px; margin: 14px 0 6px; }
.dlcard__stage .mock { transform: scale(.68); }
.dlcard__stage .mock.is-swap { transform: scale(.62); }
.dl-ring { animation: dlPulse 1.8s ease-in-out infinite; }
@keyframes dlPulse { 50% { transform: translateY(4px); } }
.dlcard__k { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.dlcard__t { margin-top: 8px; font: 800 clamp(26px, 2.6vw, 34px)/1.05 var(--f-display); letter-spacing: -0.04em; }
.dlcard__s { margin-top: 6px; color: var(--ink-soft); font-size: 14.5px; }
.dlcard__spec { margin-top: 14px; border-top: 1px solid var(--hair); }
.dlcard__spec > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); }
.dlcard__spec dt { font: 400 10.5px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.dlcard__spec dd { font: 500 14px/1.4 var(--f-display); }
.dlcard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dlcard__go { position: relative; overflow: hidden; flex: 1 1 auto; }
.dlcard__go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 2.8s ease-in-out infinite; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
.dlcard__go-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #04130a; }
.dlcard__go-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--g2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: dlPulse 1.4s ease-in-out infinite; }
.dlcard__alt { display: contents; }
.dlcard__guide { display: inline-block; margin-top: 14px; font: 600 14px/1 var(--f-display); color: var(--g2); }
.dlp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.dlp-row__k { font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.dlp { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font: 500 13px/1 var(--f-display); color: var(--ink-soft); transition: background .2s, color .2s, border-color .2s; }
.dlp svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dlp:hover { color: var(--ink); border-color: rgba(194,232,78,.35); }
.dlp[aria-pressed="true"] { background: var(--grad); color: #04130a; border-color: transparent; }
.dlnext { margin-top: 16px; padding: 16px; border-radius: 18px; background: rgba(34,209,96,.12); border: 1px solid rgba(194,232,78,.4); animation: endIn .6s var(--ease) both; }
.dlnext[hidden] { display: none; }
.dlnext__t { font: 700 16px/1.3 var(--f-display); }
.dlnext__s { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.dlnext__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* таблица */
.tbl { overflow-x: auto; border: 1px solid var(--hair); border-radius: 24px; background: rgba(255,255,255,.02); }
.tbl table { width: 100%; border-collapse: collapse; min-width: 760px; }
.tbl th, .tbl td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--hair-soft); font-size: 14.5px; }
.tbl thead th { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: rgba(0,0,0,.2); }
.tbl tbody tr { transition: background .2s; }
.tbl tbody tr:hover { background: rgba(34,209,96,.06); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody th a { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--f-display); }
.tbl tbody th svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgba(194,232,78,.1); fill: none; stroke: var(--g2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tbl td { color: var(--ink-soft); }
.tbl__go { display: inline-block; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font: 600 13px/1 var(--f-display); color: var(--ink); white-space: nowrap; }
.tbl__go:hover { background: var(--grad); color: #04130a; }
.tbl__note { margin-top: 14px; font-size: 14px; color: var(--ink-faint); }
.tbl__note b { color: var(--ink); }
.tbl__note a { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; }

/* ряды платформ */
.plat-rows { display: grid; gap: clamp(60px, 8vw, 110px); padding-top: 20px; padding-bottom: clamp(60px, 8vw, 110px); }
.plat-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; scroll-margin-top: 90px; }
.plat-row--rev .plat-row__vis { order: 2; }
.plat-row__vis { position: relative; display: grid; place-items: center; min-height: 380px; border-radius: 32px; border: 1px solid var(--hair); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, rgba(34,209,96,.16), transparent 70%), rgba(255,255,255,.015); }
.plat-row__vis::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(194,232,78,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(194,232,78,.06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle, #000, transparent 70%); mask-image: radial-gradient(circle, #000, transparent 70%); }
.plat-row__glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.22), transparent 65%); filter: blur(20px); animation: drift 8s ease-in-out infinite alternate; }
.plat-row__vis .mock { transform: scale(.8); animation: float 8s ease-in-out infinite; }
.plat-row__ico { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); box-shadow: 0 10px 30px -8px rgba(34,209,96,.7); }
.plat-row__ico svg { width: 26px; height: 26px; fill: none; stroke: #04130a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plat-row__txt h2 { font-size: clamp(28px, 3.2vw, 42px); }
.plat-row__spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.plat-row__spec > div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); }
.plat-row__spec dt { font: 400 10px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.plat-row__spec dd { margin-top: 4px; font: 600 14px/1.3 var(--f-display); }
.plat-row__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.plat-row__more { display: inline-block; margin-top: 16px; font: 600 15px/1 var(--f-display); color: var(--g2); }
.plat-row__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* веб-версия */
.nochips { display: grid; gap: 10px; align-content: center; }
.nochip { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; font: 600 16px/1.2 var(--f-display); }
.nochip b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.nochip--no { background: rgba(255,90,80,.06); border: 1px solid rgba(255,90,80,.22); color: var(--ink-soft); }
.nochip--no b { background: rgba(255,90,80,.16); color: #ff7a6e; }
.nochip--no span { text-decoration: line-through; text-decoration-color: rgba(255,122,110,.6); }
.nochip--yes { background: rgba(34,209,96,.12); border: 1px solid rgba(194,232,78,.45); }
.nochip--yes b { background: var(--grad); color: #04130a; }

/* подделки */
.fake { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 14px; }
.fake__col, .fake__check { padding: 24px; border-radius: 24px; }
.fake__col--bad { background: rgba(255,90,80,.06); border: 1px solid rgba(255,90,80,.22); }
.fake__col--good { background: rgba(34,209,96,.09); border: 1px solid rgba(194,232,78,.4); }
.fake__check { background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.fake__h { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.fake__col--bad .fake__h { color: #ff8a80; } .fake__col--good .fake__h { color: var(--g2); } .fake__check .fake__h { color: var(--ink-soft); }
.fake ul { display: grid; gap: 12px; }
.fake li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.fake__col--bad li::before { content: '✕'; color: #ff7a6e; font-weight: 700; }
.fake__col--good li::before { content: '✓'; color: var(--g2); font-weight: 700; }
.fake__check ol { display: grid; gap: 12px; }
.fake__check li b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--grad); color: #04130a; font: 700 12px/1 var(--f-mono); }

/* следующий шаг */
.nextstep { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr auto; gap: 30px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 32px;
  background: linear-gradient(160deg, #10301a, #06130b 70%); border: 1px solid rgba(194,232,78,.35); }
.nextstep__glow { position: absolute; width: 500px; height: 500px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.3), transparent 65%); animation: drift 9s ease-in-out infinite alternate; }
.nextstep__t { position: relative; margin-top: 10px; font: 700 clamp(26px, 3vw, 40px)/1.08 var(--f-display); letter-spacing: -0.04em; max-width: 720px; }
.nextstep__t em { color: var(--g2); }
.nextstep__s { position: relative; margin-top: 12px; color: var(--ink-soft); }
.nextstep__btns { position: relative; display: grid; gap: 10px; }

/* дальше по шагам */
.nextlinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nl { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: border-color .3s, background .3s, transform .4s var(--ease); }
.nl:hover { border-color: rgba(194,232,78,.45); background: rgba(34,209,96,.08); transform: translateY(-3px); }
.nl__n { font: 500 11px/1 var(--f-mono); color: var(--g2); letter-spacing: .1em; }
.nl b { font: 700 19px/1.2 var(--f-display); letter-spacing: -0.02em; }
.nl span:last-child { color: var(--ink-soft); font-size: 14.5px; }
.nl--home { background: var(--grad); border: 0; color: #04130a; }
.nl--home .nl__n, .nl--home span:last-child { color: rgba(4,19,10,.7); }
.nl--home:hover { background: var(--grad); filter: brightness(1.05); }

@media (max-width: 1080px) {
  .dlhero__grid2 { grid-template-columns: 1fr; }
  .dlcard { max-width: 620px; }
  .fake { grid-template-columns: 1fr 1fr; } .fake__check { grid-column: 1 / -1; }
  .nextlinks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .dlhero { padding: 92px 0 50px; min-height: 0; }
  .plat-row, .plat-row--rev { grid-template-columns: 1fr; }
  .plat-row--rev .plat-row__vis { order: 0; }
  .plat-row__vis { min-height: 280px; }
  .plat-row__vis .mock { transform: scale(.62); }
  .plat-row__spec { grid-template-columns: 1fr; }
  .plat-row__btns .btn { flex: 1 1 100%; }
  .fake { grid-template-columns: 1fr; }
  .nextstep { grid-template-columns: 1fr; }
  .nextlinks { grid-template-columns: 1fr; }
  .dlcard { padding: 20px; border-radius: 26px; }
  .dlcard__stage { height: 200px; }
  .dlcard__stage .mock { transform: scale(.55); }
  .dlcard__go { flex: 1 1 100%; }
  .tbl table { min-width: 0; }
  .tbl thead { display: none; }
  .tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--hair-soft); }
  .tbl th, .tbl td { padding: 0; border: 0; font-size: 13.5px; }
  .tbl tbody th { grid-column: 1; } .tbl td:last-child { grid-column: 2; grid-row: 1; }
  .tbl td:nth-child(2), .tbl td:nth-child(3), .tbl td:nth-child(4) { grid-column: 1 / -1; }
}

.dcards__more { margin-top: 22px; text-align: center; }
.dcards__more a { display: inline-flex; padding: 14px 22px; border-radius: 99px; border: 1px solid rgba(194,232,78,.4); background: rgba(34,209,96,.08); font: 600 15px/1 var(--f-display); color: var(--g2); transition: background .3s; }
.dcards__more a:hover { background: rgba(34,209,96,.18); }
.lede a { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   РЕАЛИСТИЧНЫЕ УСТРОЙСТВА (.rdev) — реальный скриншот Incy
   ===================================================================== */
.rdev { --w: 236px; position: relative; display: grid; justify-items: center; transition: transform .7s var(--ease); }
.rdev__body { position: relative; width: var(--w); padding: 10px; border-radius: 46px;
  background: linear-gradient(145deg, #5c6660 0%, #2a312d 18%, #141916 50%, #2b322e 82%, #646e68 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 0 0 4px #0b0f0c, 0 50px 90px -30px rgba(0,0,0,.85), 0 30px 80px -30px rgba(34,209,96,.45);
  transition: width .7s var(--ease), padding .7s var(--ease), border-radius .7s var(--ease), background .7s; }
.rdev__screen { position: relative; overflow: hidden; aspect-ratio: 588 / 1280; border-radius: 37px; background: #040805;
  transition: aspect-ratio .7s var(--ease), border-radius .7s var(--ease); }
.rdev__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .4s; }
.rdev__island { position: absolute; z-index: 3; top: 17px; left: 50%; width: 31%; height: 23px; margin-left: -15.5%; border-radius: 20px; background: #000; transition: opacity .3s; }
.rdev__island::after { content: ''; position: absolute; right: 18%; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a5a, #05070c 70%); }
.rdev__glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%); }
.rdev__btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #3a433e, #6b756f); transition: opacity .3s; }
.rdev__btn--a { left: -3px; top: 19%; height: 6%; } .rdev__btn--b { left: -3px; top: 28%; height: 11%; } .rdev__btn--c { right: -3px; top: 25%; height: 14%; }
.rdev__desk { position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(80% 90% at 75% 20%, rgba(34,209,96,.55), transparent 60%), radial-gradient(70% 80% at 10% 100%, rgba(194,232,78,.35), transparent 60%), linear-gradient(160deg, #0d2615, #030805); }
.rdev__win { position: absolute; top: 7%; left: 50%; height: 78%; aspect-ratio: 588 / 1330; transform: translateX(-50%); border-radius: 8px; overflow: hidden; background: #050b07;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -10px rgba(0,0,0,.8); display: flex; flex-direction: column; }
.rdev__bar { flex: none; display: flex; align-items: center; gap: 4px; height: 6.5%; min-height: 9px; padding: 0 6px; background: #121a14; }
.rdev__bar i { width: 5px; height: 5px; border-radius: 50%; background: #ff5f57; } .rdev__bar i:nth-child(2) { background: #febc2e; } .rdev__bar i:nth-child(3) { background: #28c840; }
.rdev__bar b { margin-left: auto; margin-right: auto; font: 700 6px/1 var(--f-display); color: rgba(255,255,255,.6); transform: translateX(-10px); }
.rdev__win img { flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top; }
.rdev__dock { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; gap: 4px; padding: 3px 5px; border-radius: 7px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.rdev__dock i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.35); }
.rdev__dock i.on { background: var(--grad); box-shadow: 0 0 6px var(--g2); }
.rdev__stand { position: relative; height: 0; width: 0; transition: all .7s var(--ease); }
.rdev__stand i { position: absolute; }

/* планшет */
.rdev[data-dev="tablet"] { --w: 300px; }
.rdev[data-dev="tablet"] .rdev__body { border-radius: 30px; padding: 13px; }
.rdev[data-dev="tablet"] .rdev__screen { aspect-ratio: 3 / 4; border-radius: 18px; }
.rdev[data-dev="tablet"] .rdev__island { width: 8px; height: 8px; margin-left: -4px; top: 5px; }
/* ноутбук, монитор, ТВ */
.rdev[data-dev="laptop"], .rdev[data-dev="pc"], .rdev[data-dev="tv"] { --w: 440px; }
.rdev[data-dev="laptop"] .rdev__body, .rdev[data-dev="pc"] .rdev__body, .rdev[data-dev="tv"] .rdev__body { padding: 10px; border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, #1b201d, #0b0e0c); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 50px 90px -30px rgba(0,0,0,.85), 0 30px 80px -30px rgba(34,209,96,.4); }
.rdev[data-dev="laptop"] .rdev__screen, .rdev[data-dev="pc"] .rdev__screen, .rdev[data-dev="tv"] .rdev__screen { aspect-ratio: 16 / 10; border-radius: 4px; }
.rdev[data-dev="pc"] .rdev__screen, .rdev[data-dev="tv"] .rdev__screen { aspect-ratio: 16 / 9; }
.rdev[data-dev="laptop"] .rdev__shot, .rdev[data-dev="pc"] .rdev__shot, .rdev[data-dev="tv"] .rdev__shot { opacity: 0; }
.rdev[data-dev="laptop"] .rdev__desk, .rdev[data-dev="pc"] .rdev__desk, .rdev[data-dev="tv"] .rdev__desk { opacity: 1; }
.rdev[data-dev="laptop"] .rdev__btn, .rdev[data-dev="pc"] .rdev__btn, .rdev[data-dev="tv"] .rdev__btn,
.rdev[data-dev="laptop"] .rdev__island, .rdev[data-dev="pc"] .rdev__island, .rdev[data-dev="tv"] .rdev__island { opacity: 0; }
.rdev[data-dev="laptop"] .rdev__island { opacity: 1; width: 64px; height: 9px; margin-left: -32px; top: 10px; border-radius: 0 0 6px 6px; }
.rdev[data-dev="laptop"] .rdev__island::after { display: none; }
.rdev[data-dev="laptop"] .rdev__stand { width: calc(var(--w) + 70px); height: 14px; border-radius: 2px 2px 14px 14px; margin-top: -1px;
  background: linear-gradient(180deg, #c7cdc9, #7d857f 55%, #4b524d); box-shadow: 0 12px 24px -8px rgba(0,0,0,.7); }
.rdev[data-dev="laptop"] .rdev__stand i { left: 50%; top: 0; width: 70px; height: 5px; margin-left: -35px; border-radius: 0 0 6px 6px; background: #5d6560; }
.rdev[data-dev="pc"] .rdev__stand { width: 60px; height: 62px; background: linear-gradient(90deg, #2b322e, #4c544f, #2b322e); clip-path: polygon(30% 0, 70% 0, 78% 100%, 22% 100%); }
.rdev[data-dev="pc"] .rdev__stand i { left: 50%; bottom: -8px; width: 170px; height: 10px; margin-left: -85px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #4c544f, #232926); }
.rdev[data-dev="tv"] { --w: 470px; }
.rdev[data-dev="tv"] .rdev__body { padding: 6px; border-radius: 6px; }
.rdev[data-dev="tv"] .rdev__stand { width: calc(var(--w) - 80px); height: 22px; }
.rdev[data-dev="tv"] .rdev__stand::before, .rdev[data-dev="tv"] .rdev__stand::after { content: ''; position: absolute; top: 0; width: 8px; height: 22px; background: linear-gradient(180deg, #3a423d, #1a1f1c); }
.rdev[data-dev="tv"] .rdev__stand::before { left: 0; transform: skewX(-18deg); } .rdev[data-dev="tv"] .rdev__stand::after { right: 0; transform: skewX(18deg); }
.rdev[data-dev="tv"] .rdev__dock { display: none; }
.rdev[data-dev="tv"] .rdev__win { height: 88%; top: 6%; }
.rdev.is-swap { transform: scale(.94); opacity: .9; }

/* размеры в контекстах */
.dlcard__stage { height: 330px; }
.dlcard__stage .rdev { transform: scale(.62); }
.dlcard__stage .rdev[data-dev="phone"] { transform: scale(.58); }
.dlcard__stage .rdev.is-swap { transform: scale(.56); }
.plat-row__vis { min-height: 440px; }
.plat-row__vis .rdev { transform: scale(.8); animation: float 8s ease-in-out infinite; }
.plat-row__vis .rdev[data-dev="phone"] { transform: scale(.72); }

/* фигура со скриншотом на главной */
.shotfig { margin: 34px 0 30px; }
.shotfig__stage { position: relative; display: grid; place-items: center; padding: 30px 0; border-radius: 30px; border: 1px solid var(--hair); overflow: hidden;
  background: radial-gradient(60% 60% at 50% 45%, rgba(34,209,96,.2), transparent 70%), rgba(255,255,255,.015); }
.shotfig__stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(194,232,78,.14) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 70%); mask-image: radial-gradient(circle, #000, transparent 70%); }
.shotfig__glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.3), transparent 65%); filter: blur(24px); animation: drift 9s ease-in-out infinite alternate; }
.shotfig .rdev { --w: 250px; animation: float 8s ease-in-out infinite; }
.callout { position: absolute; z-index: 4; top: var(--y); display: grid; gap: 2px; max-width: 150px; padding: 9px 12px; border-radius: 14px;
  background: rgba(5,14,8,.85); border: 1px solid rgba(194,232,78,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 400 12px/1.3 var(--f-body); color: var(--ink-soft); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.callout b { font: 700 14px/1.15 var(--f-display); color: var(--g2); }
.callout--l { right: calc(50% + 140px); transform: translateX(-16px); }
.callout--r { left: calc(50% + 140px); transform: translateX(16px); }
.callout::after { content: ''; position: absolute; top: 50%; width: 26px; height: 1px; background: linear-gradient(90deg, var(--g2), transparent); }
.callout--l::after { left: 100%; } .callout--r::after { right: 100%; transform: scaleX(-1); }
.is-in .callout, .shotfig.is-in .callout { opacity: 1; transform: none; }
.reveal.is-in .callout:nth-of-type(2) { transition-delay: .25s; } .reveal.is-in .callout:nth-of-type(3) { transition-delay: .45s; }
.reveal.is-in .callout:nth-of-type(4) { transition-delay: .65s; } .reveal.is-in .callout:nth-of-type(5) { transition-delay: .85s; }
.shotfig figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-faint); text-align: center; }

@media (max-width: 760px) {
  .dlcard__stage { height: 270px; }
  .dlcard__stage .rdev { transform: scale(.5); } .dlcard__stage .rdev[data-dev="phone"] { transform: scale(.48); }
  .plat-row__vis { min-height: 340px; }
  .plat-row__vis .rdev { transform: scale(.62); } .plat-row__vis .rdev[data-dev="phone"] { transform: scale(.58); }
  .shotfig .rdev { --w: 200px; }
  .callout { max-width: 118px; padding: 7px 9px; font-size: 10.5px; }
  .callout b { font-size: 12px; }
  .callout--l { right: auto; left: 4px; } .callout--r { left: auto; right: 4px; }
  .callout::after { display: none; }
}
.rdev__win { aspect-ratio: 588 / 1250; }
.rdev__win img { object-position: 50% 100%; }

/* ---- кнопки внутри текстовых блоков: не перекрашивать ---- */
.prose a.btn, .faq a.btn, .warn a.btn, .lede a.btn { text-decoration: none; }
.prose a.btn--flame, .lede a.btn--flame { color: #04130a; }
.prose a.btn--glass, .lede a.btn--glass { color: var(--ink); }
.btn--flame { color: #04130a; font-weight: 700; }
.btn--glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: var(--ink); }
.btn--glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }

/* ---- настольный интерфейс Incy внутри ноутбука / монитора / ТВ ---- */
.rdev__screen { container-type: inline-size; }
.rdev__desk { background: #050b07; }
.da { position: absolute; inset: 0; display: flex; font-family: var(--f-display); color: #e9f3e6; background: radial-gradient(70% 60% at 85% 0%, rgba(34,209,96,.16), transparent 60%), #060d08; }
.da__side { flex: none; width: 9cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding: 2.2cqw 0; background: #0a140d; border-right: 1px solid rgba(255,255,255,.07); }
.da__logo { font: 900 1.9cqw/1 var(--f-display); color: var(--g2); letter-spacing: -0.04em; }
.da__nav { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; background: rgba(255,255,255,.07); }
.da__nav.on { background: linear-gradient(135deg, #22d160, #c2e84e); box-shadow: 0 0 2cqw rgba(34,209,96,.5); }
.da__nav--b { margin-top: auto; }
.da__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.2cqw 2.6cqw; }
.da__top { display: flex; align-items: center; justify-content: space-between; }
.da__toast { padding: .9cqw 1.6cqw; border-radius: 1.2cqw; background: rgba(34,209,96,.14); border: 1px solid rgba(194,232,78,.35); font: 600 1.6cqw/1 var(--f-display); color: #dff5cf; }
.da__ver { font: 500 1.4cqw/1 var(--f-mono); color: rgba(255,255,255,.4); }
.da__prov { display: flex; align-items: baseline; gap: 1.6cqw; padding-bottom: 1.2cqw; border-bottom: 1px solid rgba(255,255,255,.07); }
.da__prov b { font: 700 2.4cqw/1 var(--f-display); }
.da__prov span { font: 400 1.4cqw/1 var(--f-body); color: rgba(255,255,255,.5); }
.da__list { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; align-content: start; overflow: hidden; }
.da__list li { display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 1.3cqw; border-radius: 1.3cqw; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.da__list li.on { background: rgba(34,209,96,.12); border-color: rgba(194,232,78,.5); }
.da__fl { font-size: 2.2cqw; line-height: 1; }
.da__nm { flex: 1; min-width: 0; display: grid; gap: .4cqw; }
.da__nm b { font: 600 1.6cqw/1.1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da__nm i { font: 500 1.1cqw/1 var(--f-mono); font-style: normal; color: #b8d94f; }
.da__ms { font: 500 1.35cqw/1 var(--f-mono); color: #9be36a; white-space: nowrap; }
.da__ms::before { content: '● '; font-size: 1cqw; }
.da__ms--y { color: #e8c45a; }
.da__conn { display: flex; align-items: center; gap: 1.6cqw; padding: 1.4cqw 1.8cqw; border-radius: 1.8cqw; background: linear-gradient(100deg, rgba(34,209,96,.22), rgba(194,232,78,.1)); border: 1px solid rgba(194,232,78,.45); }
.da__sw { position: relative; flex: none; width: 6.4cqw; height: 3.4cqw; border-radius: 3cqw; background: linear-gradient(135deg, #22d160, #c2e84e); box-shadow: 0 0 2.4cqw rgba(34,209,96,.6); }
.da__sw i { position: absolute; right: .4cqw; top: .4cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; }
.da__ct { display: grid; gap: .5cqw; }
.da__ct b { font: 700 1.9cqw/1 var(--f-display); color: #eaffc2; }
.da__ct i { font: 400 1.3cqw/1 var(--f-body); font-style: normal; color: rgba(255,255,255,.6); }
.da__sp { margin-left: auto; font: 500 1.3cqw/1 var(--f-mono); color: rgba(255,255,255,.65); }
/* ТВ — крупнее и без бокового меню */
.rdev[data-dev="tv"] .da__side { display: none; }
.rdev[data-dev="tv"] .da__main { padding: 3cqw 3.6cqw; gap: 2cqw; }
.rdev[data-dev="tv"] .da__list li:nth-child(n+5) { display: none; }
.rdev[data-dev="tv"] .da__nm b { font-size: 2cqw; } .rdev[data-dev="tv"] .da__ms { font-size: 1.7cqw; }
.rdev__win, .rdev__dock { display: none !important; }
/* лучше видно на тёмном фоне: светлее рамки у больших устройств */
.rdev[data-dev="pc"] .rdev__body, .rdev[data-dev="tv"] .rdev__body, .rdev[data-dev="laptop"] .rdev__body { background: linear-gradient(180deg, #2a312d, #101411); }
.rdev[data-dev="pc"] .rdev__stand { width: 180px; height: 70px; clip-path: none; background: none; }
.rdev[data-dev="pc"] .rdev__stand::before { content: ''; position: absolute; left: 50%; top: 0; width: 56px; height: 60px; margin-left: -28px; background: linear-gradient(90deg, #2b322e, #555e58, #2b322e); clip-path: polygon(28% 0, 72% 0, 82% 100%, 18% 100%); }
.rdev[data-dev="pc"] .rdev__stand i { left: 0; bottom: 0; width: 180px; height: 10px; margin-left: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #5a635d, #262c28); }

/* =====================================================================
   ВИДЕО-БЛОК НА ВНУТРЕННИХ СТРАНИЦАХ (.pblk)
   ===================================================================== */
.pblk { position: relative; padding: clamp(60px, 8vw, 110px) 0; background: radial-gradient(60% 70% at 25% 50%, rgba(34,209,96,.14), transparent 70%); }
.pblk__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.pblk__frame { position: relative; aspect-ratio: 1280 / 1300; border-radius: 32px; overflow: hidden; background: #030805 center / cover no-repeat;
  border: 1px solid rgba(194,232,78,.35); box-shadow: 0 60px 120px -40px rgba(34,209,96,.5), inset 0 0 0 1px rgba(255,255,255,.05); }
.pblk__frame::before { content: ''; position: absolute; inset: -1px; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--g2) 82%, var(--g1) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
.pblk__v, .pblk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pblk__img { animation: heroKB 16s ease-in-out infinite alternate; }
.pblk__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,9,5,.85) 0%, rgba(3,9,5,0) 45%), linear-gradient(180deg, rgba(3,9,5,.45) 0%, transparent 20%); pointer-events: none; }
.pblk__live { position: absolute; z-index: 6; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px;
  background: rgba(4,12,7,.6); border: 1px solid var(--hair); font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); backdrop-filter: blur(8px); }
.pblk__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: pulse 1.6s infinite; }
.pblk .pblk__sound { position: absolute; z-index: 7; left: auto; right: 18px; top: 16px; opacity: 1; }
.pblk .pblk__chips { position: absolute; z-index: 6; left: 18px; right: auto; bottom: 46px; }
.pblk .pblk__prog { position: absolute; z-index: 6; left: 18px; right: 18px; bottom: 22px; }
.pblk .pblk__end { position: absolute; z-index: 8; left: 14px; right: 14px; bottom: 14px; }
.pblk__txt h2 { font-size: clamp(30px, 3.6vw, 48px); }
.pblk__pts { display: grid; gap: 10px; margin: 26px 0 28px; }
.pblk__pts li { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 50px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); }
.pblk__pts li::before { content: '✓'; position: absolute; left: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center; border-radius: 8px; background: var(--grad); color: #04130a; font-weight: 800; font-size: 13px; }
.pblk__pts b { font: 700 16px/1.25 var(--f-display); }
.pblk__pts span { font-size: 14px; color: var(--ink-soft); }
.pblk__btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .pblk__in { grid-template-columns: 1fr; }
  .pblk__frame { aspect-ratio: 4 / 5; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .pblk .pblk__chips span { font-size: 12px; }
  .pblk__btns .btn { flex: 1 1 100%; }
  .pblk .pblk__end-btns { grid-template-columns: 1fr 1fr; }
}

/* ---- Android-смартфон ---- */
.rdev[data-dev="android"] .rdev__body { padding: 7px; border-radius: 36px;
  background: linear-gradient(145deg, #3d4441 0%, #1b201d 30%, #0d100e 60%, #2c3330 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 3px #050706, 0 50px 90px -30px rgba(0,0,0,.85), 0 30px 80px -30px rgba(34,209,96,.45); }
.rdev[data-dev="android"] .rdev__screen { border-radius: 30px; }
.rdev[data-dev="android"] .rdev__shot { top: -4.4%; height: 104.4%; }
.rdev[data-dev="android"] .rdev__screen::before, .rdev[data-dev="android"] .rdev__screen::after {
  position: absolute; z-index: 2; top: 0; height: 5.2%; display: flex; align-items: center; font: 600 11px/1 var(--f-body); color: #e9f3e6; background: #050b07; }
.rdev[data-dev="android"] .rdev__screen::before { content: '21:22  ✉ ⚙'; left: 0; right: 50%; padding-left: 9%; letter-spacing: .02em; }
.rdev[data-dev="android"] .rdev__screen::after { content: '▼ ◢ ▮ 87%'; right: 0; left: 50%; justify-content: flex-end; padding-right: 8%; font-size: 10px; letter-spacing: .08em; }
.rdev[data-dev="android"] .rdev__island { top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #0b0f0c; }
.rdev[data-dev="android"] .rdev__island::after { right: 2px; width: 6px; height: 6px; margin-top: -3px; }
.rdev[data-dev="android"] .rdev__btn--a, .rdev[data-dev="android"] .rdev__btn--b { opacity: 0; }
.rdev[data-dev="android"] .rdev__btn--c { top: 22%; height: 9%; }
.rdev[data-dev="android"] .rdev__btn--c::after { content: ''; position: absolute; left: 0; top: 140%; width: 4px; height: 70%; border-radius: 2px; background: inherit; }
.plat-row__vis .rdev[data-dev="android"], .dlcard__stage .rdev[data-dev="android"] { }
.plat-row__vis .rdev[data-dev="android"] { transform: scale(.72); }
.dlcard__stage .rdev[data-dev="android"] { transform: scale(.58); }
@media (max-width: 760px) { .plat-row__vis .rdev[data-dev="android"] { transform: scale(.58); } .dlcard__stage .rdev[data-dev="android"] { transform: scale(.48); } }

/* ---- видео-блок: арка вместо квадрата ---- */
.pblk__vid { perspective: 1400px; }
.pblk__frame { aspect-ratio: 4 / 5; max-width: 520px; margin: 0 auto; border-radius: 999px 999px 36px 36px;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .5s var(--ease); }
.pblk__frame::after { content: ''; position: absolute; inset: 10px; z-index: 4; border-radius: inherit; pointer-events: none; border: 1px solid rgba(194,232,78,.18); }
.pblk__vid::before { content: ''; position: absolute; left: 50%; top: 4%; width: 92%; max-width: 560px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(34,209,96,.35), transparent 62%); filter: blur(30px); z-index: -1; animation: drift 9s ease-in-out infinite alternate; }
.pblk__vid { position: relative; isolation: isolate; }
.pblk__v, .pblk__img { object-position: 50% 26%; }
.pblk__live { left: 50%; top: 9%; transform: translateX(-50%); }
.pblk .pblk__sound { right: 50%; top: auto; bottom: 34%; transform: translateX(50%); }
.pblk .pblk__chips { left: 22px; bottom: 54px; }
.pblk .pblk__prog { left: 22px; right: 22px; bottom: 26px; }
.pblk .pblk__end { left: 16px; right: 16px; bottom: 16px; }
.pblk__orbit { position: absolute; z-index: 6; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(5,14,8,.85);
  border: 1px solid rgba(194,232,78,.4); backdrop-filter: blur(8px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); animation: bob2 4s ease-in-out infinite; font: 800 11px/1 var(--f-display); color: var(--g2); }
.pblk__orbit--a { left: -6px; top: 30%; } .pblk__orbit--b { right: -6px; top: 46%; animation-delay: 1.2s; }
@media (max-width: 900px) { .pblk__frame { max-width: 440px; } .pblk__orbit--a { left: 4px; } .pblk__orbit--b { right: 4px; } }
@media (max-width: 640px) { .pblk__frame { border-radius: 999px 999px 28px 28px; } .pblk__live { top: 7%; } .pblk .pblk__sound { bottom: 40%; } .pblk__orbit { width: 44px; height: 44px; border-radius: 13px; font-size: 9px; } }
.pblk .pblk__sound { top: 15.5%; bottom: auto; }
@media (max-width: 640px) { .pblk .pblk__sound { top: 14%; bottom: auto; } }

/* ---- видео-блок без рамки: ведущий растворяется в фоне ---- */
.pblk__frame { border: 0; border-radius: 0; box-shadow: none; background-color: transparent; overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 55%, rgba(0,0,0,.6) 72%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 42%, #000 55%, rgba(0,0,0,.6) 72%, transparent 92%); }
.pblk__frame::before, .pblk__frame::after { display: none; }
.pblk__shade { background: none; }
.pblk__vid { -webkit-mask-image: none; }
.pblk__frame { -webkit-mask-image: none; mask-image: none; }
.pblk__v, .pblk__img { -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 40%, #000 52%, rgba(0,0,0,.55) 72%, transparent 94%);
          mask-image: radial-gradient(ellipse 60% 56% at 50% 40%, #000 52%, rgba(0,0,0,.55) 72%, transparent 94%); }
.pblk__frame { background-image: none !important; }
.pblk__vid::before { top: 0; width: 100%; background: radial-gradient(circle, rgba(34,209,96,.32), transparent 60%); }
.pblk__orbit { display: none; }
.pblk__live { top: 4%; }
.pblk__v, .pblk__img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 96%), linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 96%), linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-composite: intersect; }
.pblk .pblk__sound { top: auto; bottom: 64px; right: 22px; left: auto; transform: none; }
.pblk .pblk__chips { bottom: 112px; }
.pblk__live { top: 8%; }
@media (max-width: 640px) { .pblk .pblk__sound { top: auto; bottom: 56px; right: 12px; } .pblk .pblk__chips { bottom: 100px; left: 12px; } }
.isteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: none; }
.istep { position: relative; padding: 26px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.istep__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #04130a; font: 800 20px/1 var(--f-mono); box-shadow: 0 10px 30px -8px rgba(34,209,96,.6); }
.istep h3 { margin-top: 18px; font-size: 20px; }
.istep p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.istep code { font: 500 .88em var(--f-mono); padding: 2px 6px; border-radius: 6px; background: rgba(194,232,78,.1); color: var(--g2); }
.istep:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 38px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0b1a10; border: 1px solid rgba(194,232,78,.4); color: var(--g2); font-size: 13px; }
.isteps__more { margin-top: 18px; }
.isteps__more a { font: 600 15px/1 var(--f-display); color: var(--g2); }
@media (max-width: 900px) { .isteps { grid-template-columns: 1fr; } .istep:not(:last-child)::after { content: '↓'; right: auto; left: 36px; top: auto; bottom: -14px; } }

/* =====================================================================
   ПОДПИСКА В TELEGRAM
   ===================================================================== */
.tg-sec { position: relative; overflow: hidden; background: radial-gradient(60% 50% at 50% 0%, rgba(42,171,238,.10), transparent 70%); }
.tg__head { position: relative; }
.tg__head .h2 em { color: var(--g2); }
.tg__plane { position: absolute; right: 4%; top: -10px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #2aabee, #229ed9);
  box-shadow: 0 20px 50px -12px rgba(42,171,238,.6); animation: planeFly 6s ease-in-out infinite; }
.tg__plane svg { width: 32px; height: 32px; fill: #fff; margin-left: -3px; }
@keyframes planeFly { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(-18px, -14px) rotate(4deg); } }
.tg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tgc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--hair); transition: border-color .35s, box-shadow .5s var(--ease); }
.tgc:hover { border-color: rgba(194,232,78,.4); box-shadow: 0 40px 80px -40px rgba(34,209,96,.5); }
.tgc--bot { background: linear-gradient(165deg, rgba(34,209,96,.12), rgba(255,255,255,.015) 60%); border-color: rgba(194,232,78,.3); }
.tgc__top { display: flex; align-items: center; gap: 12px; }
.tgc__ava { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; font: 800 16px/1 var(--f-display); }
.tgc__ava--bot { background: var(--grad); color: #04130a; box-shadow: 0 0 0 3px rgba(194,232,78,.18); }
.tgc__ava--news { background: linear-gradient(135deg, #2aabee, #1f8fc4); font-size: 22px; box-shadow: 0 0 0 3px rgba(42,171,238,.2); }
.tgc__name { font: 700 18px/1.2 var(--f-display); }
.tgc__ver { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: #2aabee; color: #fff; font-size: 10px; vertical-align: 2px; }
.tgc__sub { margin-top: 3px; font: 500 12px/1.2 var(--f-mono); color: var(--ink-faint); letter-spacing: .04em; }
.tgc__badge { margin-left: auto; padding: 5px 10px; border-radius: 99px; background: rgba(34,209,96,.15); color: var(--g2); font: 600 11px/1 var(--f-mono); letter-spacing: .06em; }
.tgc__badge::before { content: '● '; font-size: 8px; vertical-align: 1px; animation: blinkDot 1.4s infinite; }
.tgc__badge--new { background: rgba(42,171,238,.16); color: #7cd0ff; }
.tgchat, .tgfeed { height: 210px; border-radius: 20px; padding: 14px; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(194,232,78,.06) 1px, transparent 1.5px) 0 0 / 18px 18px, #07120b; border: 1px solid var(--hair-soft); }
.tgchat { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.tgm { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(10px) scale(.97);
  animation: tgIn 8s var(--ease) infinite; animation-delay: var(--d); }
.tgm--me { align-self: flex-end; background: linear-gradient(135deg, #2c8f4f, #1f6e3c); border-bottom-right-radius: 4px; }
.tgm--bot { align-self: flex-start; position: relative; background: #142219; border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 4px; min-width: 60px; }
.tgm code { font: 500 11.5px/1.4 var(--f-mono); color: var(--g2); }
.tgm__typing { position: absolute; left: 12px; top: 13px; display: inline-flex; gap: 4px; animation: tgType 8s infinite; animation-delay: var(--d); }
.tgm__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--g2); animation: blinkDot 1s infinite; }
.tgm__typing i:nth-child(2) { animation-delay: .15s; } .tgm__typing i:nth-child(3) { animation-delay: .3s; }
.tgm__txt { animation: tgTxt 8s infinite; animation-delay: var(--d); }
.tgm--btns { display: flex; gap: 6px; padding: 0; background: none; border: 0; }
.tgm--btns span { padding: 8px 12px; border-radius: 10px; background: rgba(42,171,238,.16); border: 1px solid rgba(42,171,238,.35); color: #bfe6ff; font: 600 12.5px/1 var(--f-display); }
@keyframes tgIn { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tgType { 0%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes tgTxt { 0%, 12% { opacity: 0; } 15%, 100% { opacity: 1; } }
.tgfeed__track { display: grid; gap: 8px; animation: feedUp 14s linear infinite; }
.tgfeed:hover .tgfeed__track { animation-play-state: paused; }
@keyframes feedUp { to { transform: translateY(-50%); } }
.tgp { display: grid; gap: 4px; padding: 11px 13px; border-radius: 14px; background: #10201a; border: 1px solid rgba(255,255,255,.06); border-left: 3px solid #2aabee; }
.tgp b { font: 700 14px/1.2 var(--f-display); } .tgp span { font-size: 13px; color: var(--ink-soft); } .tgp i { font: 500 11px/1 var(--f-mono); font-style: normal; color: #7cd0ff; }
.tgc__list { display: grid; gap: 8px; }
.tgc__list li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.tgc__list li::before { content: '✓'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(194,232,78,.16); color: var(--g2); font-weight: 800; font-size: 11px; }
.tgc__go { margin-top: auto; gap: 10px; animation: tgPulse 2.4s ease-out infinite; }
.tgc__go svg { width: 18px; height: 18px; fill: #04130a; }
@keyframes tgPulse { 0% { box-shadow: 0 0 0 0 rgba(194,232,78,.45), 0 10px 30px -8px rgba(34,209,96,.55); } 100% { box-shadow: 0 0 0 16px rgba(194,232,78,0), 0 10px 30px -8px rgba(34,209,96,.55); } }
.tgsup { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.tgsup__ico { font-size: 26px; }
.tgsup p { flex: 1; color: var(--ink-soft); font-size: 15px; } .tgsup b { color: var(--ink); }

/* всплывашка */
.tgtoast { position: fixed; z-index: 80; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 24px)); display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center;
  padding: 16px 16px 16px 16px; border-radius: 22px; background: linear-gradient(160deg, #10301a, #06130b 75%); border: 1px solid rgba(194,232,78,.4);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8), 0 0 50px -15px rgba(34,209,96,.5); animation: toastIn .6s var(--ease) both; }
.tgtoast[hidden] { display: none; }
@keyframes toastIn { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.tgtoast__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #2aabee, #229ed9); animation: planeFly 5s ease-in-out infinite; }
.tgtoast__ico svg { width: 22px; height: 22px; fill: #fff; margin-left: -2px; }
.tgtoast__t { font: 700 15px/1.25 var(--f-display); padding-right: 22px; } .tgtoast__s { margin-top: 3px; font-size: 13px; color: var(--ink-soft); }
.tgtoast__go { grid-column: 1 / -1; width: 100%; }
.tgtoast__x { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-faint); font-size: 18px; }
.tgtoast__x:hover { background: rgba(255,255,255,.08); color: var(--ink); }

@media (max-width: 900px) { .tg { grid-template-columns: 1fr; } .tg__plane { width: 50px; height: 50px; right: 2%; } .tg__plane svg { width: 24px; height: 24px; } }
@media (max-width: 640px) {
  .tgsup { flex-direction: column; align-items: stretch; text-align: left; } .tgsup .btn { width: 100%; }
  .tgtoast { left: 12px; right: 12px; bottom: 84px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .tgm, .tgm__txt { opacity: 1 !important; transform: none !important; } .tgm__typing { display: none; } }

@media (max-width: 640px) { .tgtoast { left: 12px; right: 12px; bottom: 12px; width: auto; } }

.dlhero__grid2 > * { min-width: 0; }
.dlcard__stage { overflow: hidden; }
.dlhero { overflow-x: clip; }

/* =====================================================================
   СТРАНИЦА /skachat/windows/
   ===================================================================== */
.whero { position: relative; overflow: hidden; padding: 110px 0 70px; }
.whero__in { position: relative; z-index: 2; }
.whero__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: 34px; }
.whero__top > * { min-width: 0; }
.wdet { padding: 22px; border-radius: 26px; background: linear-gradient(165deg, rgba(15,42,23,.92), rgba(5,13,8,.94) 70%); border: 1px solid rgba(194,232,78,.35); box-shadow: 0 40px 90px -40px rgba(34,209,96,.5); }
.wdet__k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--g2); }
.wdet.is-ready .dlcard__scan { animation: none; border-color: var(--g2); background: var(--g2); box-shadow: 0 0 12px var(--g2); }
.wdet__os { margin-top: 12px; font: 800 30px/1 var(--f-display); letter-spacing: -0.04em; }
.wdet__spec { margin: 14px 0 16px; border-top: 1px solid var(--hair); }
.wdet__spec > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); }
.wdet__spec dt { font: 400 10.5px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.wdet__spec dd { font: 600 14px/1.4 var(--f-mono); color: var(--ink); word-break: break-all; }
.wdet__go { width: 100%; }
.wdet__alt { display: block; margin-top: 12px; text-align: center; font: 600 14px/1 var(--f-display); color: var(--g2); }
.wdet__note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13.5px; color: var(--ink-soft); }
.wdet__note a { color: var(--g2); text-decoration: underline; }

/* ---- симулятор Windows 11 ---- */
.wsim { position: relative; }
.wsim__screen { position: relative; aspect-ratio: 16 / 9; max-height: 640px; width: 100%; border-radius: 22px; overflow: hidden; container-type: inline-size;
  border: 10px solid #121815; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 120px -40px rgba(0,0,0,.9), 0 40px 100px -40px rgba(34,209,96,.45); font-family: 'Segoe UI', var(--f-body); }
.wsim__wall { position: absolute; inset: 0; background:
  radial-gradient(60% 80% at 70% 40%, rgba(34,209,96,.55), transparent 60%), radial-gradient(50% 60% at 30% 70%, rgba(194,232,78,.35), transparent 65%),
  radial-gradient(40% 50% at 85% 85%, rgba(0,120,215,.35), transparent 70%), linear-gradient(160deg, #0b1f12, #03080a); }
.wsim__wall::after { content: ''; position: absolute; left: 50%; top: 46%; width: 32cqw; height: 32cqw; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 30% 70% 60% 40%;
  background: conic-gradient(from 200deg, rgba(194,232,78,.0), rgba(194,232,78,.35), rgba(34,209,96,.5), rgba(0,120,215,.25), rgba(194,232,78,0)); filter: blur(2.4cqw); animation: drift 12s ease-in-out infinite alternate; }
.wsim__step { position: absolute; inset: 0 0 6.2cqw 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: scale(.97); transition: opacity .45s, transform .5s var(--ease); }
.wsim[data-step="1"] [data-s="1"], .wsim[data-step="2"] [data-s="2"], .wsim[data-step="3"] [data-s="3"], .wsim[data-step="4"] [data-s="4"], .wsim[data-step="5"] [data-s="4"], .wsim[data-step="6"] [data-s="4"] { opacity: 1; pointer-events: auto; transform: none; }
.wsim__btn { padding: .9cqw 1.8cqw; border-radius: .7cqw; background: linear-gradient(135deg, #22d160, #c2e84e); color: #04130a; font: 700 1.25cqw/1 var(--f-display); border: 0; cursor: pointer; transition: filter .2s, transform .2s; }
.wsim__btn:hover:not([disabled]) { filter: brightness(1.08); transform: translateY(-1px); }
.wsim__btn[disabled] { opacity: .35; cursor: default; }
.wsim__btn--blue { background: #0067c0; color: #fff; }
.wsim__btn--ghost { background: rgba(255,255,255,.12); color: #fff; }
.wsim__browser { width: 62cqw; border-radius: .9cqw; overflow: hidden; background: #202124; box-shadow: 0 2cqw 4cqw rgba(0,0,0,.5); }
.wsim__tabs { padding: .7cqw 1cqw 0; background: #1a1b1e; } .wsim__tab { display: inline-block; padding: .6cqw 1.2cqw; border-radius: .6cqw .6cqw 0 0; background: #2b2c30; font-size: 1cqw; color: #ddd; }
.wsim__addr { margin: .7cqw 1cqw; padding: .55cqw 1cqw; border-radius: 2cqw; background: #2b2c30; font-size: 1cqw; color: #aaa; }
.wsim__page { display: grid; gap: .6cqw; padding: 1.4cqw 2cqw 2cqw; background: #0d1117; color: #e6edf3; font-size: 1.15cqw; }
.wsim__page b { font-size: 1.6cqw; } .wsim__asset { padding: .7cqw 1cqw; border-radius: .5cqw; border: 1px solid #30363d; color: #58a6ff; }
.wsim__asset:first-of-type { border-color: #2ea043; box-shadow: 0 0 0 1px rgba(46,160,67,.4); }
.wsim__dlbar { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.4cqw; background: #2b2c30; color: #eee; font-size: 1.1cqw; }
.wsim__file { font-weight: 600; } .wsim__pbar { position: relative; flex: 1; height: .5cqw; border-radius: 1cqw; background: rgba(255,255,255,.15); overflow: hidden; }
.wsim__pbar i { position: absolute; inset: 0; background: #22d160; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.wsim__ssbox, .wsim__uacbox { width: 44cqw; padding: 2.4cqw; border-radius: .6cqw; background: #0067c0; color: #fff; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.6); }
.wsim__ss-t { font: 600 2cqw/1.2 'Segoe UI', var(--f-display); } .wsim__ss-p { margin-top: 1cqw; font-size: 1.2cqw; opacity: .9; }
.wsim__link { margin-top: 1cqw; padding: 0; background: none; border: 0; color: #fff; text-decoration: underline; font-size: 1.2cqw; cursor: pointer; }
.wsim__ss-more { max-height: 0; overflow: hidden; margin-top: 0; font-size: 1.1cqw; opacity: .9; transition: max-height .4s, margin .4s; }
.wsim.is-more .wsim__ss-more { max-height: 6cqw; margin-top: 1cqw; }
.wsim__ss-btns { display: flex; justify-content: flex-end; gap: .8cqw; margin-top: 2cqw; }
.wsim [data-run] { display: none; } .wsim.is-more [data-run] { display: inline-block; }
.wsim__win { width: 40cqw; border-radius: .8cqw; overflow: hidden; background: #f3f3f3; color: #111; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.55); }
.wsim__wbar { display: flex; justify-content: space-between; padding: .8cqw 1.2cqw; background: #e8e8e8; font-size: 1.05cqw; } .wsim__wbar span { color: #555; letter-spacing: .4cqw; }
.wsim__ibody { display: grid; justify-items: start; gap: 1cqw; padding: 2cqw 2.4cqw; }
.wsim__ilogo { padding: .8cqw 1.2cqw; border-radius: .7cqw; background: #06120a; color: #c2e84e; font: 900 1.6cqw/1 var(--f-display); }
.wsim__ip { font: 600 1.5cqw/1.2 'Segoe UI', var(--f-display); } .wsim__pbar--i { width: 100%; flex: none; height: .6cqw; background: #ddd; } .wsim__pbar--i i { background: #0067c0; }
.wsim__ifile { font-size: 1cqw; color: #666; }
.wsim__win--app { width: 74cqw; background: #050b07; color: #e9f3e6; }
.wsim__win--app .wsim__wbar { background: #0c1610; color: #cfe; } .wsim__win--app .wsim__wbar span { color: #8a9; }
.wsim__appbody { position: relative; height: 31cqw; container-type: inline-size; }
.wsim__appbody .da { position: absolute; inset: 0; }
.wsim__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1cqw; text-align: center; }
.wsim__empty p { font: 700 2.4cqw/1 var(--f-display); } .wsim__empty > span { font-size: 1.5cqw; color: rgba(255,255,255,.55); }
.wsim__empty .wsim__btn { font-size: 1.7cqw; padding: 1.2cqw 2.4cqw; border-radius: 1cqw; }
.wsim__clip { padding: .7cqw 1.2cqw; border-radius: .8cqw; background: rgba(255,255,255,.06); font: 500 1.3cqw/1 var(--f-mono); color: #c2e84e !important; }
.wsim__list, .wsim__toast { display: none; }
.wsim[data-step="5"] .wsim__empty, .wsim[data-step="6"] .wsim__empty { display: none; }
.wsim[data-step="5"] .wsim__list, .wsim[data-step="6"] .wsim__list { display: flex; flex-direction: column; gap: 1.4cqw; flex: 1; min-height: 0; animation: panIn .5s var(--ease); }
.wsim[data-step="5"] .wsim__toast, .wsim[data-step="6"] .wsim__toast { display: inline-block; }
.wsim__conn { opacity: .35; pointer-events: none; transition: opacity .3s; }
.wsim[data-step="5"] .wsim__conn, .wsim[data-step="6"] .wsim__conn { opacity: 1; pointer-events: auto; }
.wsim__sw { position: relative; flex: none; width: 6.4cqw; height: 3.4cqw; border-radius: 3cqw; background: rgba(255,255,255,.18); border: 0; cursor: pointer; transition: background .3s, box-shadow .3s; }
.wsim__sw i { position: absolute; left: .4cqw; top: .4cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.wsim[data-step="6"] .wsim__sw { background: linear-gradient(135deg, #22d160, #c2e84e); box-shadow: 0 0 2.4cqw rgba(34,209,96,.6); }
.wsim[data-step="6"] .wsim__sw i { transform: translateX(3cqw); }
.wsim__uac { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.wsim.is-uac .wsim__uac { opacity: 1; pointer-events: auto; }
.wsim__uacbox { background: #1f1f1f; border-top: .5cqw solid #ffb900; }
.wsim__uac-k { font-size: 1.1cqw; opacity: .7; } .wsim__uac-t { margin-top: .8cqw; font: 600 1.7cqw/1.25 'Segoe UI', var(--f-display); } .wsim__uac-a { margin-top: 1cqw; font-size: 1.2cqw; opacity: .85; }
.wsim__done { position: absolute; z-index: 5; left: 50%; top: 5%; transform: translate(-50%, -20px); display: grid; justify-items: center; gap: .4cqw; padding: 1.2cqw 2.4cqw; border-radius: 1.4cqw;
  background: linear-gradient(135deg, #22d160, #c2e84e); color: #04130a; opacity: 0; transition: opacity .4s, transform .5s var(--ease); box-shadow: 0 2cqw 5cqw -1cqw rgba(34,209,96,.7); }
.wsim__done b { font: 800 2cqw/1 var(--f-display); } .wsim__done span { font-size: 1.2cqw; font-weight: 600; }
.wsim[data-step="6"] .wsim__done { opacity: 1; transform: translate(-50%, 0); }
.wsim__task { position: absolute; left: 0; right: 0; bottom: 0; height: 6.2cqw; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; background: rgba(20,24,22,.82); backdrop-filter: blur(1.5cqw); border-top: 1px solid rgba(255,255,255,.08); }
.wsim__start { display: grid; grid-template-columns: 1fr 1fr; gap: .25cqw; width: 2.6cqw; height: 2.6cqw; } .wsim__start i { background: #4cc2ff; border-radius: .2cqw; }
.wsim__ti { width: 3cqw; height: 3cqw; border-radius: .7cqw; background: rgba(255,255,255,.14); } .wsim__ti--edge { background: linear-gradient(135deg, #3bc6f3, #1e8a3f); }
.wsim__ti--incy { display: none; background: linear-gradient(135deg, #22d160, #c2e84e); box-shadow: 0 0 1.4cqw rgba(34,209,96,.6); }
.wsim[data-step="4"] .wsim__ti--incy, .wsim[data-step="5"] .wsim__ti--incy, .wsim[data-step="6"] .wsim__ti--incy { display: block; }
.wsim__tray { position: absolute; right: 1.6cqw; display: flex; align-items: center; gap: 1cqw; color: #eee; font-size: 1.1cqw; }
.wsim__trayicon { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255,255,255,.3); }
.wsim[data-step="6"] .wsim__trayicon { background: #c2e84e; box-shadow: 0 0 .8cqw #c2e84e; }
.wsim__hint { position: absolute; z-index: 9; left: 0; top: 0; padding: .6cqw 1cqw; border-radius: 1cqw; background: #fff; color: #04130a; font: 700 1.1cqw/1 var(--f-display); pointer-events: none;
  transform: translate(var(--hx, -999px), var(--hy, -999px)); transition: transform .45s var(--ease), opacity .3s; box-shadow: 0 0 0 .4cqw rgba(194,232,78,.5); }
.wsim__hint::before { content: ''; position: absolute; left: 50%; bottom: -.5cqw; width: 1cqw; height: 1cqw; margin-left: -.5cqw; background: #fff; transform: rotate(45deg); }
.wsim__hint { animation: bob 1.3s ease-in-out infinite; }
.wsim.is-auto .wsim__hint, .wsim[data-step="6"] .wsim__hint { opacity: 0; }
.wsim__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.wsim__steps { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.wsim__steps li { padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font: 500 12.5px/1 var(--f-display); color: var(--ink-faint); counter-increment: ws; }
.wsim__steps li::before { content: counter(ws) ' · '; color: var(--ink-faint); }
.wsim__steps { counter-reset: ws; }
.wsim__steps li.is-on { background: var(--grad); color: #04130a; border-color: transparent; } .wsim__steps li.is-on::before { color: #04130a; }
.wsim__steps li.is-done { color: var(--g2); border-color: rgba(194,232,78,.35); }
.wsim__auto, .wsim__reset { padding: 9px 14px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid var(--hair); font: 600 13px/1 var(--f-display); color: var(--ink); }
.wsim__auto:hover, .wsim__reset:hover { background: rgba(255,255,255,.14); }

/* блоки страницы */
.reqs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.req { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.req__ico { font-size: 26px; } .req b { font: 700 18px/1.2 var(--f-display); } .req span:last-child { color: var(--ink-soft); font-size: 14px; }
.req__text { margin-top: 26px; max-width: 860px; }
.files, .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .modes { grid-template-columns: 1.1fr 1fr 1fr; }
.filec, .mode { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.filec--rec, .mode--rec { background: linear-gradient(165deg, rgba(34,209,96,.13), rgba(255,255,255,.02) 60%); border-color: rgba(194,232,78,.4); }
.filec__badge { position: absolute; right: 20px; top: 20px; padding: 5px 9px; border-radius: 6px; background: var(--g2); color: #04130a; font: 600 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.filec__ext { align-self: flex-start; padding: 10px 14px; border-radius: 14px; background: #0067c0; color: #fff; font: 800 18px/1 var(--f-mono); }
.filec__ext--zip { background: #a0791b; }
.filec h3, .mode h3 { font: 700 22px/1.2 var(--f-mono); letter-spacing: -0.02em; } .mode h3 { font-family: var(--f-display); font-size: 24px; }
.filec p, .mode p { color: var(--ink-soft); font-size: 15px; }
.filec ul, .mode ul { display: grid; gap: 8px; flex: 1; }
.filec li, .mode li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.filec li::before, .mode li::before { content: '✓'; color: var(--g2); font-weight: 800; }
.filec .btn { align-self: flex-start; }
.wsteps { display: grid; gap: 12px; max-width: 900px; }
.wstep { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.wstep h3 { font-size: 20px; } .wstep p { margin-top: 6px; color: var(--ink-soft); font-size: 15.5px; }
.wstep a { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; } .wstep code { font: 500 .88em var(--f-mono); padding: 2px 6px; border-radius: 6px; background: rgba(194,232,78,.1); color: var(--g2); }
.wcta { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 900px; margin-top: 16px; padding: 22px 26px; border-radius: 24px; background: linear-gradient(110deg, rgba(34,209,96,.18), rgba(194,232,78,.06)); border: 1px solid rgba(194,232,78,.45); }
.wcta b { display: block; font: 700 19px/1.2 var(--f-display); } .wcta span { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 1080px) { .reqs { grid-template-columns: 1fr 1fr; } .modes { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .whero__top { grid-template-columns: 1fr; } .wdet { max-width: 520px; } }
@media (max-width: 760px) {
  .whero { padding: 92px 0 40px; }
  .wsim__screen { aspect-ratio: 4 / 3.6; border-width: 6px; border-radius: 16px; }
  .wsim__browser { width: 88cqw; } .wsim__ssbox, .wsim__uacbox { width: 80cqw; } .wsim__win { width: 74cqw; } .wsim__win--app { width: 94cqw; } .wsim__appbody { height: 58cqw; }
  .wsim__btn { font-size: 2.6cqw; padding: 1.6cqw 3cqw; border-radius: 1.4cqw; } .wsim__ss-t { font-size: 3.6cqw; } .wsim__ss-p, .wsim__link, .wsim__ss-more, .wsim__uac-a { font-size: 2.4cqw; }
  .wsim__uac-t { font-size: 3cqw; } .wsim__page, .wsim__dlbar { font-size: 2.2cqw; } .wsim__page b { font-size: 3cqw; } .wsim__tab, .wsim__addr { font-size: 2cqw; }
  .wsim__ip { font-size: 3cqw; } .wsim__ifile, .wsim__wbar { font-size: 2cqw; } .wsim__ilogo { font-size: 3cqw; }
  .wsim__task { height: 9cqw; } .wsim__step { bottom: 9cqw; } .wsim__hint { font-size: 2.4cqw; padding: 1.2cqw 2cqw; }
  .wsim__done b { font-size: 3.6cqw; } .wsim__done span { font-size: 2.2cqw; }
  .reqs, .files { grid-template-columns: 1fr; }
  .wcta { flex-direction: column; align-items: stretch; } .wcta .btn { width: 100%; }
  .wstep { flex-direction: column; gap: 12px; }
}
.wsim__hint { transform: none; left: var(--hx, -999px); top: var(--hy, -999px); transition: left .45s var(--ease), top .45s var(--ease), opacity .3s; }
.toc { margin: 0 0 22px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.toc__k { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g2); margin-bottom: 12px; }
.toc ol { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: tc; }
.toc li { counter-increment: tc; }
.toc a { display: inline-flex; gap: 6px; padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font: 500 13.5px/1 var(--f-display); color: var(--ink-soft); transition: background .2s, color .2s; }
.toc a::before { content: counter(tc, decimal-leading-zero); font: 500 11px/1.25 var(--f-mono); color: var(--g2); }
.toc a:hover { background: rgba(34,209,96,.12); color: var(--ink); }

/* =====================================================================
   СТРАНИЦА /skachat/android/ + симулятор телефона
   ===================================================================== */
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(24px, 4vw, 60px); align-items: start; }
.ahero__grid > * { min-width: 0; }
.adet { margin-top: 26px; }
.adet__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.adet.is-ready .dlcard__scan { animation: none; border-color: var(--g2); background: var(--g2); box-shadow: 0 0 12px var(--g2); }
.ahero .toc { margin-top: 26px; }
.asim { display: grid; justify-items: center; gap: 14px; }
.asim__brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.asim__brands button { padding: 8px 12px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); font: 600 13px/1 var(--f-display); color: var(--ink-soft); }
.asim__brands button[aria-pressed="true"] { background: var(--grad); color: #04130a; border-color: transparent; }
.asim__stage { position: relative; }
.asim__dev { --w: 300px; }
.asim .rdev__screen { container-type: inline-size; }
.asim__scr { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s; background: #050b07; color: #e9f3e6; font-family: var(--f-body); }
.asim[data-step="1"] [data-s="1"], .asim[data-step="2"] [data-s="2"], .asim[data-step="3"] [data-s="3"], .asim[data-step="4"] [data-s="4"], .asim[data-step="5"] [data-s="4"], .asim[data-step="6"] [data-s="4"] { opacity: 1; pointer-events: auto; }
.asim__scr--shot img { position: absolute; top: -4.4%; left: 0; width: 100%; height: 104.4%; object-fit: cover; object-position: top; }
.ap-bar { display: flex; align-items: center; justify-content: space-between; padding: 14cqw 6cqw 4cqw; font-size: 5cqw; color: rgba(255,255,255,.7); }
.ap-bar b { font: 600 5.4cqw/1 var(--f-display); color: #fff; } .ap-incy { color: #c2e84e !important; font-weight: 900 !important; }
.ap-store { height: 100%; background: #101411; }
.ap-app { display: flex; gap: 4cqw; align-items: center; padding: 3cqw 6cqw; }
.ap-ico { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 4.5cqw; background: #06120a; border: 1px solid rgba(194,232,78,.4); color: #c2e84e; font: 900 4cqw/1 var(--f-display); }
.ap-app b { display: block; font: 700 6.4cqw/1.1 var(--f-display); } .ap-app i { font-style: normal; font-size: 4cqw; color: #4cdb7a; }
.ap-stats { display: flex; justify-content: space-between; margin: 5cqw 6cqw; padding: 3cqw 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.ap-stats span { display: grid; justify-items: center; gap: 1cqw; font-size: 3.2cqw; color: rgba(255,255,255,.55); } .ap-stats b { font-size: 4.2cqw; color: #fff; }
.ap-btn { display: block; width: calc(100% - 12cqw); margin: 2cqw 6cqw; padding: 3.6cqw; border-radius: 99px; border: 0; background: #4cdb7a; color: #04130a; font: 700 4.4cqw/1 var(--f-display); cursor: pointer; }
.ap-btn[disabled] { opacity: .35; cursor: default; }
.ap-prog { display: block; height: 1.2cqw; margin: 3cqw 6cqw; border-radius: 1cqw; background: rgba(255,255,255,.1); overflow: hidden; opacity: 0; transition: opacity .3s; }
.ap-prog i { display: block; height: 100%; background: #4cdb7a; transform-origin: left; transform: scaleX(var(--p, 0)); }
.asim.is-installing .ap-prog { opacity: 1; } .asim.is-installing .ap-install { opacity: .4; pointer-events: none; }
.ap-note--hw, .ap-apk { display: none; }
.asim[data-brand="huawei"] .ap-install, .asim[data-brand="huawei"] .ap-stats { display: none; }
.asim[data-brand="huawei"] .ap-note--hw, .asim[data-brand="huawei"] .ap-apk { display: block; }
.ap-note { margin: 4cqw 6cqw 2cqw; font-size: 4cqw; line-height: 1.4; color: rgba(255,255,255,.75); }

.ap-sheet { position: absolute; left: 3cqw; right: 3cqw; bottom: 3cqw; display: grid; gap: 3cqw; padding: 6cqw 5cqw; border-radius: 6cqw; background: #1b221e; }
.ap-sheet b { font: 700 5.4cqw/1.2 var(--f-display); } .ap-sheet > span { font-size: 3.8cqw; line-height: 1.45; color: rgba(255,255,255,.7); }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 3cqw 0; font-size: 4cqw; }
.ap-sw { position: relative; flex: none; width: 13cqw; height: 7cqw; border-radius: 7cqw; border: 0; background: rgba(255,255,255,.2); cursor: pointer; transition: background .3s; }
.ap-sw i { position: absolute; left: 1cqw; top: 1cqw; width: 5cqw; height: 5cqw; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.asim.is-src .ap-sw { background: #4cdb7a; } .asim.is-src .ap-sw i { transform: translateX(6cqw); }
.ap-sheet .ap-btn { width: 100%; margin: 0; }
.ap-app2 { height: 100%; display: flex; flex-direction: column; background: #050b07; }
.ap-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 3cqw; padding: 0 6cqw; text-align: center; }
.ap-empty p { font: 700 7cqw/1.1 var(--f-display); } .ap-empty > span { font-size: 4.2cqw; color: rgba(255,255,255,.55); }
.ap-empty .ap-btn { width: 100%; margin: 3cqw 0 0; background: linear-gradient(135deg, #22d160, #c2e84e); }
.ap-clip { font: 500 3.4cqw/1 var(--f-mono); color: #c2e84e !important; }
.ap-connect { position: absolute; left: 4%; right: 4%; bottom: 13.5%; height: 7%; border: 0; border-radius: 4cqw; background: transparent; cursor: pointer; }
.asim__dlg { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 6cqw; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
.asim.is-dlg .asim__dlg { opacity: 1; pointer-events: auto; }
.ap-dlgbox { display: grid; gap: 4cqw; padding: 7cqw 6cqw 4cqw; border-radius: 6cqw; background: #222a25; color: #fff; }
.ap-dlgbox b { font: 700 5.6cqw/1.2 var(--f-display); } .ap-dlgbox span { font-size: 3.8cqw; line-height: 1.45; color: rgba(255,255,255,.75); }
.ap-dlgbtn { display: flex; justify-content: flex-end; gap: 4cqw; } .ap-dlgbtn button { padding: 3cqw 2cqw; border: 0; background: none; color: #4cdb7a; font: 700 4.4cqw/1 var(--f-display); cursor: pointer; }
.asim__ok { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; top: 13cqw; display: grid; justify-items: center; gap: 1.5cqw; padding: 4cqw; border-radius: 5cqw; background: linear-gradient(135deg, #22d160, #c2e84e); color: #04130a; opacity: 0; transform: translateY(-4cqw); transition: opacity .4s, transform .5s var(--ease); box-shadow: 0 4cqw 10cqw -2cqw rgba(34,209,96,.7); }
.asim__ok b { font: 800 6.4cqw/1 var(--f-display); } .asim__ok i { font-style: normal; font-size: 3.6cqw; font-weight: 600; } .ap-key { font-size: 6cqw; }
.asim[data-step="5"] .asim__ok, .asim[data-step="6"] .asim__ok { opacity: 1; transform: none; }
.asim__tip { position: absolute; z-index: 3; left: 4cqw; right: 4cqw; bottom: 4cqw; display: grid; gap: 2cqw; padding: 5cqw; border-radius: 5cqw; background: rgba(10,22,14,.96); border: 1px solid rgba(194,232,78,.5); opacity: 0; transform: translateY(6cqw); transition: opacity .4s, transform .5s var(--ease); }
.asim__tip-t { font: 700 4.6cqw/1.2 var(--f-display); color: #c2e84e; } .asim__tip-s { font-size: 3.9cqw; line-height: 1.45; color: rgba(255,255,255,.85); }
.asim__tip, .asim__ok { pointer-events: none; }
.asim[data-step="6"] .asim__tip { opacity: 1; transform: none; }
.asim .rdev__screen::before, .asim .rdev__screen::after { z-index: 5; }
.asim .asim__scr[data-s="1"], .asim .asim__scr[data-s="2"], .asim .asim__scr[data-s="3"] { }
.asim__hint { position: absolute; }
.asim.is-auto .asim__hint, .asim[data-step="6"] .asim__hint { opacity: 0; }
.asim__ctl { justify-content: center; }
.asim__ctl .wsim__steps { flex: none; justify-content: center; }

/* блоки страницы */
.filec__ext--gp { background: #01875f; } .filec__ext--apk { background: #3ddc84; color: #04130a; }
.brcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brc { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.brc__logo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font: 900 18px/1 var(--f-display); color: #fff; }
.brc--xi .brc__logo { background: #ff6900; } .brc--hw .brc__logo { background: #cf0a2c; } .brc--sm .brc__logo { background: #1428a0; }
.brc h3 { font-size: 22px; } .brc p { color: var(--ink-soft); font-size: 15px; }
.brc ol { display: grid; gap: 8px; counter-reset: bs; }
.brc li { counter-increment: bs; display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.brc li::before { content: counter(bs); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(194,232,78,.16); color: var(--g2); font: 700 11px/1 var(--f-mono); }
.shotfig--side { margin: 0; } .shotfig--side .rdev { --w: 240px; }
#klyuch .wcta { margin: 30px auto 0; }

@media (max-width: 1080px) { .brcs { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ahero__grid { grid-template-columns: 1fr; } .asim { margin-top: 10px; } }
@media (max-width: 640px) { .asim__dev { --w: 260px; } .adet__btns .btn { flex: 1 1 100%; } }
.asim__hint { font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.asim__hint::before { width: 10px; height: 10px; margin-left: -5px; bottom: -4px; }
.asim__ctl { width: 100%; max-width: 470px; margin-top: 4px; }
.asim__ctl .wsim__steps { flex: 1 1 100%; justify-content: center; }
.asim__ctl .wsim__steps li { padding: 7px 10px; font-size: 12px; }
.asim__ctl .wsim__auto, .asim__ctl .wsim__reset { flex: 1; }
.ap-about { display: grid; gap: 2.4cqw; margin: 6cqw 6cqw 0; padding-top: 5cqw; border-top: 1px solid rgba(255,255,255,.08); }
.ap-about b { font: 700 5cqw/1 var(--f-display); } .ap-about > span { font-size: 3.9cqw; line-height: 1.5; color: rgba(255,255,255,.65); }
.ap-tags { display: flex; flex-wrap: wrap; gap: 2cqw; } .ap-tags i { font-style: normal; padding: 1.6cqw 3cqw; border-radius: 99px; border: 1px solid rgba(255,255,255,.15); font-size: 3.4cqw; color: rgba(255,255,255,.75); }
.whero { overflow-x: clip; } html, body { overflow-x: clip; }

/* ---------- Android: настройки, проверка APK, передача на ТВ ---------- */
.sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.set { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); overflow: hidden; transition: transform .5s var(--ease), border-color .4s, background .4s; }
.set:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.45); background: rgba(194,232,78,.05); }
.set h3 { font-size: 20px; } .set p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.set a { margin-top: auto; color: var(--g2); font-weight: 600; font-size: 14.5px; }
.set__ico { position: relative; width: 52px; height: 52px; border-radius: 16px; background: rgba(194,232,78,.1); border: 1px solid rgba(194,232,78,.3); }
.set__ico i { position: absolute; left: 12px; height: 4px; border-radius: 4px; background: var(--g2); animation: setbar 2.4s var(--ease) infinite; }
.set__ico i:nth-child(1) { top: 15px; width: 28px; } .set__ico i:nth-child(2) { top: 24px; width: 18px; animation-delay: .3s; opacity: .6; } .set__ico i:nth-child(3) { top: 33px; width: 24px; animation-delay: .6s; }
@keyframes setbar { 50% { transform: scaleX(.45); transform-origin: left; } }
.set__ico--ks::before { content: ''; position: absolute; inset: 14px 16px; border-radius: 6px 6px 12px 12px; border: 3px solid var(--g2); }
.set__ico--ks::after { content: ''; position: absolute; left: 50%; top: 21px; width: 3px; height: 9px; margin-left: -1.5px; background: var(--g2); border-radius: 2px; animation: blink 1.6s steps(2) infinite; }
.set__ico--ao::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; border: 3px solid var(--g2); border-right-color: transparent; animation: spin 2.2s linear infinite; }
.set__ico--up::before { content: '↻'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--g2); font: 700 24px/1 var(--f-display); animation: spin 4s linear infinite; }
.set__ico--st { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 13px; }
.set__ico--st i { position: static; width: 5px; height: 20px; animation: eqbar 1.2s ease-in-out infinite; transform-origin: bottom; }
.set__ico--st i:nth-child(2) { animation-delay: .2s; } .set__ico--st i:nth-child(3) { animation-delay: .4s; } .set__ico--st i:nth-child(4) { animation-delay: .6s; }
@keyframes eqbar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.set__ico--qr::before { content: ''; position: absolute; inset: 13px; background:
  linear-gradient(var(--g2), var(--g2)) 0 0 / 9px 9px no-repeat, linear-gradient(var(--g2), var(--g2)) 100% 0 / 9px 9px no-repeat,
  linear-gradient(var(--g2), var(--g2)) 0 100% / 9px 9px no-repeat, linear-gradient(var(--g2), var(--g2)) 60% 60% / 6px 6px no-repeat; }
.set__ico--qr::after { content: ''; position: absolute; left: 9px; right: 9px; top: 12px; height: 2px; background: #fff; box-shadow: 0 0 10px var(--g2); animation: qrscan 2s ease-in-out infinite alternate; }
@keyframes qrscan { to { top: 38px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }

.apkc { display: grid; gap: 12px; padding: 20px; border-radius: 26px; background: linear-gradient(160deg, rgba(194,232,78,.07), rgba(255,255,255,.02)); border: 1px solid var(--hair); }
.apkc__file { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.3); border: 1px solid var(--hair-soft); }
.apkc__ico { display: grid; place-items: center; width: 48px; height: 56px; border-radius: 10px 18px 10px 10px; background: #3ddc84; color: #04130a; font: 800 13px/1 var(--f-mono); }
.apkc__file b { display: block; font: 700 17px/1.2 var(--f-display); } .apkc__file div span { font-size: 13px; color: var(--ink-faint); }
.apkc__ok { margin-left: auto; padding: 6px 10px; border-radius: 99px; background: var(--grad); color: #04130a; font: 700 12px/1 var(--f-display); opacity: 0; transform: scale(.7); transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
.apkc.is-ok .apkc__ok { opacity: 1; transform: none; }
.apkc__term { border-radius: 16px; background: #050806; border: 1px solid var(--hair-soft); overflow: hidden; }
.apkc__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(255,255,255,.04); font-size: 12px; color: var(--ink-faint); }
.apkc__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); } .apkc__bar span { margin-left: 6px; }
.apkc pre { margin: 0; padding: 14px; min-height: 128px; font: 500 12.5px/1.6 var(--f-mono); color: #d8e6d2; white-space: pre-wrap; word-break: break-all; }
.apkc__p { color: var(--g2); } .apkc__cur { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--g2); animation: blink 1s steps(2) infinite; }
.apkc__out { display: block; margin-top: 6px; opacity: 0; transition: opacity .4s; color: var(--ink-faint); } .apkc__out b { color: var(--g2); font-weight: 600; }
.apkc.is-out .apkc__out { opacity: 1; } .apkc.is-out .apkc__cur { display: none; }
.apkc__cmp { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(194,232,78,.35); font: 500 12px/1.5 var(--f-mono); word-break: break-all; }
.apkc__cmp span { color: var(--ink-faint); } .apkc__cmp b { color: var(--ink-soft); font-weight: 500; transition: color .4s; } .apkc.is-ok .apkc__cmp b { color: var(--g2); }
.apkc__note { font-size: 12.5px; color: var(--ink-faint); }
.prose code { padding: 2px 6px; border-radius: 6px; background: rgba(194,232,78,.12); color: var(--g2); font: 500 .88em/1 var(--f-mono); }

.tvx { position: relative; display: grid; grid-template-columns: 1fr auto 140px; align-items: center; gap: 14px; padding: 30px 24px; border-radius: 28px; background: radial-gradient(120% 90% at 30% 20%, rgba(34,209,96,.14), transparent 60%), rgba(255,255,255,.02); border: 1px solid var(--hair); }
.tvx__tv { position: relative; }
.tvx__scr { position: relative; aspect-ratio: 16 / 10; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: #060b08; border: 6px solid #121714; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8), inset 0 0 40px rgba(34,209,96,.08); overflow: hidden; }
.tvx__leg { display: block; width: 40%; height: 8px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #121714; }
.tvx__k { font: 600 12px/1 var(--f-display); color: var(--ink-faint); }
.tvx__code { display: flex; gap: 4px; }
.tvx__code b, .tvx__in b { display: grid; place-items: center; width: 22px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--hair-soft); font: 700 15px/1 var(--f-mono); color: #fff; }
.tvx__code b:nth-child(4) { margin-right: 6px; }
.tvx__qr { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; opacity: .55; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 7.5px 7.5px; border-radius: 3px; }
.tvx__t { font-size: 11px; color: var(--ink-faint); }
.tvx__ok { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #22d160, #c2e84e); color: #04130a; font: 800 16px/1 var(--f-display); opacity: 0; transition: opacity .5s; }
.tvx.is-done .tvx__ok { opacity: 1; }
.tvx__beam { display: flex; flex-direction: row-reverse; gap: 6px; }
.tvx__beam i { width: 8px; height: 8px; border-radius: 50%; background: var(--g2); opacity: .15; }
.tvx.is-send .tvx__beam i { animation: beam .9s ease-in-out infinite; } .tvx.is-send .tvx__beam i:nth-child(2) { animation-delay: .15s; } .tvx.is-send .tvx__beam i:nth-child(3) { animation-delay: .3s; }
@keyframes beam { 50% { opacity: 1; box-shadow: 0 0 10px var(--g2); } }
.tvx__ph { padding: 6px; border-radius: 22px; background: #121714; border: 1px solid rgba(255,255,255,.08); }
.tvx__phs { display: grid; gap: 10px; justify-items: center; padding: 22px 8px; border-radius: 17px; background: #060b08; }
.tvx__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.tvx__in b { width: 20px; height: 26px; font-size: 13px; }
.tvx__in b:empty { border-color: rgba(194,232,78,.15); }
.tvx__btn { padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.08); font: 700 11px/1 var(--f-display); color: var(--ink-faint); transition: background .3s, color .3s; }
.tvx.is-send .tvx__btn, .tvx.is-done .tvx__btn { background: var(--grad); color: #04130a; }

@media (max-width: 1080px) { .sets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .sets { grid-template-columns: 1fr; }
  .tvx { grid-template-columns: 1fr; justify-items: center; padding: 20px 14px; }
  .tvx__tv { width: 100%; } .tvx__beam { flex-direction: column; } .tvx__ph { width: 150px; }
  .tvx__code b { width: 20px; height: 28px; font-size: 13px; }
}

/* =====================================================================
   /nastroyka/ — хаб настройки
   ===================================================================== */
.nhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(24px, 4vw, 70px); align-items: center; }
.nhero__grid > * { min-width: 0; }
.nhero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.nhero .toc { margin-top: 26px; }

/* большая кнопка подключения */
.cbtn { --s: min(360px, 78vw); position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 460px; margin: 0 auto; }
.cbtn__ring { position: absolute; width: var(--s); height: var(--s); transform: rotate(-90deg); }
.cbtn__track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 3; }
.cbtn__arc { fill: none; stroke: url(#lg); stroke: var(--g2); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; transition: stroke-dashoffset .3s; filter: drop-shadow(0 0 8px rgba(194,232,78,.7)); }
.cbtn.is-wait .cbtn__arc { stroke-dashoffset: 430; animation: cspin 1s linear infinite; transform-origin: 100px 100px; }
.cbtn.is-on .cbtn__arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease); }
@keyframes cspin { to { transform: rotate(360deg); } }
.cbtn__b { position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: 8px; width: calc(var(--s) * .62); height: calc(var(--s) * .62); border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #1d2a21, #070d09 70%); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 -12px 30px rgba(0,0,0,.6), 0 30px 70px -20px rgba(0,0,0,.9), 0 0 0 10px rgba(255,255,255,.02);
  transition: background .6s, box-shadow .6s, transform .25s var(--ease); }
.cbtn__b:hover { transform: scale(1.03); } .cbtn__b:active { transform: scale(.96); }
.cbtn__pw { position: relative; width: 54px; height: 54px; border: 5px solid currentColor; border-top-color: transparent; border-radius: 50%; color: rgba(255,255,255,.55); transition: color .5s; }
.cbtn__pw::before { content: ''; position: absolute; left: 50%; top: -12px; width: 5px; height: 28px; margin-left: -2.5px; border-radius: 3px; background: currentColor; }
.cbtn__st { font: 800 20px/1 var(--f-display); letter-spacing: -.01em; }
.cbtn__tm { font: 500 13px/1 var(--f-mono); color: var(--ink-faint); opacity: 0; transition: opacity .4s; }
.cbtn.is-on .cbtn__b { background: radial-gradient(circle at 35% 30%, #c2e84e, #22d160 75%); color: #04130a; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), 0 30px 90px -10px rgba(34,209,96,.75), 0 0 0 10px rgba(194,232,78,.1); }
.cbtn.is-on .cbtn__pw { color: #04130a; } .cbtn.is-on .cbtn__tm { opacity: 1; color: rgba(4,19,10,.7); }
.cbtn__waves { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cbtn__waves i { position: absolute; width: calc(var(--s) * .62); height: calc(var(--s) * .62); border-radius: 50%; border: 2px solid var(--g2); opacity: 0; }
.cbtn.is-on .cbtn__waves i { animation: cwave 2.8s ease-out infinite; } .cbtn.is-on .cbtn__waves i:nth-child(2) { animation-delay: .93s; } .cbtn.is-on .cbtn__waves i:nth-child(3) { animation-delay: 1.86s; }
@keyframes cwave { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.75); opacity: 0; } }
.cbtn__orbit { position: absolute; inset: 0; pointer-events: none; }
.cbtn__chip { --r: calc(var(--s) * .6); position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; white-space: nowrap;
  background: rgba(10,18,13,.85); border: 1px solid var(--hair); backdrop-filter: blur(8px); font: 600 13px/1 var(--f-display); color: var(--ink-soft);
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)) scale(.6); opacity: 0; transition: opacity .5s, transform .8s var(--ease), border-color .5s; }
.cbtn__chip i { font-style: normal; } .cbtn__chip b { color: var(--g2); }
.cbtn.is-on .cbtn__chip { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); border-color: rgba(194,232,78,.35); }
.cbtn.is-on .cbtn__chip:nth-child(2) { transition-delay: .12s; } .cbtn.is-on .cbtn__chip:nth-child(3) { transition-delay: .24s; } .cbtn.is-on .cbtn__chip:nth-child(4) { transition-delay: .36s; }
.cbtn__chip { animation: cfloat 5s ease-in-out infinite; } .cbtn__chip:nth-child(2) { animation-delay: -1.2s; } .cbtn__chip:nth-child(3) { animation-delay: -2.4s; } .cbtn__chip:nth-child(4) { animation-delay: -3.6s; }
@keyframes cfloat { 50% { margin-top: -8px; } }
.cbtn__cap { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: 500 12.5px/1.3 var(--f-mono); color: var(--ink-faint); }

/* что понадобится */
.need { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: nd; }
.need__i { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.need__i::after { content: ''; position: absolute; top: 50%; right: -17px; width: 18px; height: 2px; background: linear-gradient(90deg, var(--hair), var(--g2)); }
.need__i:last-child::after { display: none; }
.need__i--key { background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.04)); border-color: rgba(194,232,78,.4); }
.need__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--grad); color: #04130a; font: 800 18px/1 var(--f-display); }
.need__i h3 { font-size: 21px; } .need__i p { color: var(--ink-soft); font-size: 15px; }
.need__i a { margin-top: auto; color: var(--g2); font-weight: 600; }

/* табы устройств + шаги */
.dvt { border-radius: 30px; background: rgba(0,0,0,.25); border: 1px solid var(--hair); padding: clamp(14px, 2.4vw, 28px); }
.dvt__tabs { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 20px; background: rgba(255,255,255,.04); overflow-x: auto; scrollbar-width: none; }
.dvt__tabs button { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; padding: 13px 14px; border: 0; border-radius: 15px; background: none; color: var(--ink-soft); font: 700 15px/1 var(--f-display); cursor: pointer; transition: color .4s; }
.dvt__tabs button[aria-selected="true"] { color: #04130a; }
.dvt__ink { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--l, 5px); width: var(--w, 0); border-radius: 15px; background: var(--grad); box-shadow: 0 8px 24px -8px rgba(34,209,96,.7); transition: left .55s var(--ease), width .55s var(--ease); }
.dvt__ico { width: 14px; height: 18px; border-radius: 4px; border: 2px solid currentColor; }
.dvt__ico--windows, .dvt__ico--mac { width: 20px; height: 14px; border-radius: 3px; } .dvt__ico--tv { width: 22px; height: 14px; border-radius: 2px; border-bottom-width: 4px; }
.dvp { padding: 26px 6px 6px; }
.dvp.is-anim .stp { animation: stpin .6s var(--ease) both; } .dvp.is-anim .stp:nth-child(2) { animation-delay: .07s; } .dvp.is-anim .stp:nth-child(3) { animation-delay: .14s; } .dvp.is-anim .stp:nth-child(4) { animation-delay: .21s; }
@keyframes stpin { from { opacity: 0; transform: translateY(16px); } }
.dvp__k { margin-bottom: 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g2); }
.stps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stps::before { content: ''; position: absolute; top: 24px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--g1), var(--g2)); opacity: .35; }
.stp { position: relative; display: flex; flex-direction: column; gap: 14px; }
.stp__n { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #0a120d; border: 2px solid var(--g2); color: var(--g2); font: 800 19px/1 var(--f-display); box-shadow: 0 0 0 6px rgba(194,232,78,.07); }
.stp h3 { font-size: 18px; margin-bottom: 6px; } .stp p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.stp p a { color: var(--g2); } .stp code { padding: 1px 5px; border-radius: 5px; background: rgba(194,232,78,.12); color: var(--g2); font: 500 .85em var(--f-mono); }
.stp__cta { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(194,232,78,.08); border: 1px dashed rgba(194,232,78,.4); }
.stp__cta span { font-size: 13px; color: var(--ink-soft); } .stp__cta .btn { justify-content: center; padding: 11px 14px; font-size: 14px; }

/* живая схема маршрутизации */
.rflow { border-radius: 30px; background: radial-gradient(90% 70% at 50% 40%, rgba(34,209,96,.08), transparent 70%), rgba(0,0,0,.28); border: 1px solid var(--hair); padding: clamp(14px, 2.4vw, 26px); }
.rflow__modes { display: flex; flex-wrap: wrap; gap: 8px; }
.rflow__modes button { padding: 11px 16px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 14px/1 var(--f-display); cursor: pointer; transition: all .3s; }
.rflow__modes button:hover { border-color: rgba(194,232,78,.5); color: var(--ink); }
.rflow__modes button[aria-pressed="true"] { background: var(--grad); color: #04130a; border-color: transparent; box-shadow: 0 8px 24px -10px rgba(34,209,96,.8); }
.rflow__stage { position: relative; margin-top: 16px; height: clamp(420px, 44vw, 560px); }
.rflow__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.rflow__info { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; margin-top: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.rflow__t { font: 700 16px/1.2 var(--f-display); color: var(--g2); } .rflow__d { font-size: 14.5px; color: var(--ink-soft); }
.rflow__rule { padding: 6px 10px; border-radius: 8px; background: rgba(194,232,78,.1); color: var(--g2); font: 500 12px/1.4 var(--f-mono); white-space: nowrap; }
.rnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.rnotes p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; } .rnotes b { color: var(--ink); } .rnotes a { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; }
.rnotes code, .rflow code { font-family: var(--f-mono); } .rnotes code { padding: 1px 6px; border-radius: 6px; background: rgba(194,232,78,.12); color: var(--g2); font-size: .88em; }

/* лучшие настройки */
.best { border-radius: 30px; background: rgba(0,0,0,.25); border: 1px solid var(--hair); padding: clamp(14px, 2.4vw, 26px); }
.best__goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.best__goals button { display: grid; gap: 5px; padding: 15px 16px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); text-align: left; cursor: pointer; color: var(--ink); transition: all .35s; }
.best__goals b { font: 700 17px/1 var(--f-display); } .best__goals span { font-size: 13px; color: var(--ink-faint); }
.best__goals button[aria-pressed="true"] { background: linear-gradient(140deg, rgba(194,232,78,.18), rgba(34,209,96,.06)); border-color: rgba(194,232,78,.55); box-shadow: inset 0 0 0 1px rgba(194,232,78,.2); }
.best__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bst { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid var(--hair-soft); transition: background .4s, border-color .4s; }
.bst.is-on { background: rgba(194,232,78,.06); border-color: rgba(194,232,78,.22); }
.bst h3 { font-size: 16px; margin-bottom: 4px; } .bst p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; }
.bst__rec { padding: 6px 9px; border-radius: 99px; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bst__rec--on { background: rgba(34,209,96,.16); color: #5ee38c; } .bst__rec--mid { background: rgba(240,195,90,.14); color: #f0c35a; } .bst__rec--no { background: rgba(255,255,255,.07); color: var(--ink-faint); }
.bst__sw { position: relative; width: 46px; height: 26px; border-radius: 26px; background: rgba(255,255,255,.14); transition: background .45s; }
.bst__sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .45s var(--ease); }
.bst.is-on .bst__sw { background: var(--grad); } .bst.is-on .bst__sw i { transform: translateX(20px); }

/* интерфейс */
.ifc { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.ifc__dev .rdev { --w: 300px; }
.ifc .rdev__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ifc .rdev__screen { container-type: inline-size; }
.ifc__dot { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 7.5cqw; height: 7.5cqw; margin: -3.75cqw 0 0 -3.75cqw; padding: 0; border: 0; border-radius: 50%; background: rgba(194,232,78,.92); color: #04130a; font: 800 4.4cqw/1 var(--f-display); cursor: pointer; box-shadow: 0 0 0 0 rgba(194,232,78,.6); transition: transform .35s var(--ease), background .3s; }
.ifc__dot span { display: grid; place-items: center; height: 100%; }
.ifc__dot::after { content: ''; position: absolute; inset: -1.6cqw; border-radius: 50%; border: 2px solid var(--g2); opacity: 0; }
.ifc__dot.is-on { transform: scale(1.25); background: #fff; } .ifc__dot.is-on::after { animation: dotp 1.4s ease-out infinite; }
@keyframes dotp { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.ifc__leg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ifc__leg button { display: flex; gap: 12px; width: 100%; height: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--hair-soft); background: rgba(255,255,255,.025); text-align: left; color: var(--ink-soft); font-size: 14px; line-height: 1.5; cursor: pointer; transition: all .35s; }
.ifc__leg b { display: block; margin-bottom: 3px; color: var(--ink); font: 700 15.5px/1.25 var(--f-display); }
.ifc__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(194,232,78,.14); color: var(--g2); font: 800 13px/1 var(--f-display); transition: all .35s; }
.ifc__leg li.is-on button { background: linear-gradient(140deg, rgba(194,232,78,.14), rgba(34,209,96,.04)); border-color: rgba(194,232,78,.45); }
.ifc__leg li.is-on .ifc__n { background: var(--grad); color: #04130a; }
.warn--info { margin-top: 26px; background: linear-gradient(100deg, rgba(34,209,96,.1), rgba(34,209,96,.02)); border-color: rgba(34,209,96,.28); }
.warn--info svg { stroke: var(--g2); }

/* режимы ПК */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mode { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.mode--rec { background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.45); }
.mode__badge { position: absolute; top: 22px; right: 22px; padding: 5px 9px; border-radius: 99px; background: var(--grad); color: #04130a; font: 700 11px/1 var(--f-mono); text-transform: uppercase; }
.mode h3 { font-size: 24px; } .mode p { font-size: 15px; color: var(--ink-soft); }
.mode ul { display: grid; gap: 6px; margin-top: auto; } .mode li { font-size: 14px; color: var(--ink-faint); padding-left: 16px; position: relative; } .mode li::before { content: '•'; position: absolute; left: 2px; color: var(--g2); }
.mode__viz { position: relative; display: flex; gap: 6px; height: 54px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.35); overflow: hidden; }
.mode__viz i { flex: 1; border-radius: 8px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
.mode__viz i::after { content: ''; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(194,232,78,.85), transparent); animation: mflow 1.8s linear infinite; }
.mode__viz i:nth-child(2)::after { animation-delay: .3s; } .mode__viz i:nth-child(3)::after { animation-delay: .6s; } .mode__viz i:nth-child(4)::after { animation-delay: .9s; } .mode__viz i:nth-child(5)::after { animation-delay: 1.2s; }
.mode__viz--half i:nth-child(n+3)::after, .mode__viz--one i:nth-child(n+2)::after { display: none; }
@keyframes mflow { to { left: 110%; } }

/* хаб разделов */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hubc { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); overflow: hidden; transition: transform .5s var(--ease), border-color .4s; }
.hubc::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(194,232,78,.22), transparent 65%); opacity: 0; transition: opacity .5s; }
.hubc:hover { transform: translateY(-6px); border-color: rgba(194,232,78,.5); } .hubc:hover::before { opacity: 1; }
.hubc h3 { font-size: 21px; } .hubc p { color: var(--ink-soft); font-size: 15px; }
.hubc__lvl { position: absolute; top: 26px; right: 26px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hubc__go { margin-top: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair); color: var(--g2); font-size: 18px; transition: all .4s var(--ease); }
.hubc:hover .hubc__go { background: var(--grad); color: #04130a; transform: translateX(6px); }
.hubc__ico { position: relative; width: 50px; height: 50px; border-radius: 15px; background: rgba(194,232,78,.1); border: 1px solid rgba(194,232,78,.3); }
.hubc__ico::before { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.hubc__ico--key::before { content: '🔑'; } .hubc__ico--srv::before { content: '🗄'; } .hubc__ico--route::before { content: '🧭'; }
.hubc__ico--split::before { content: '🔀'; } .hubc__ico--dev::before { content: '📱'; } .hubc__ico--proto::before { content: '⚙️'; }

/* чек-лист */
.chkl { padding: 22px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.chkl__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .chkl__top b { font: 700 15px/1 var(--f-display); white-space: nowrap; }
.chkl__bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; } .chkl__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--grad); transition: width .5s var(--ease); }
.chkl ul { display: grid; gap: 8px; }
.chk { display: flex; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid var(--hair-soft); cursor: pointer; transition: all .3s; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk__box { flex: none; position: relative; width: 24px; height: 24px; border-radius: 8px; border: 2px solid rgba(255,255,255,.25); transition: all .3s; }
.chk__box::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #04130a; font: 900 14px/1 var(--f-display); transform: scale(0); transition: transform .35s var(--ease); }
.chk input:checked + .chk__box { background: var(--grad); border-color: transparent; } .chk input:checked + .chk__box::after { transform: none; }
.chk input:focus-visible + .chk__box { outline: 2px solid var(--g2); outline-offset: 2px; }
.chk span:last-child { font-size: 14px; color: var(--ink-soft); line-height: 1.5; } .chk b { display: block; color: var(--ink); font: 700 15.5px/1.3 var(--f-display); margin-bottom: 2px; }
.chk a { color: var(--g2); }
.chk:has(input:checked) { border-color: rgba(194,232,78,.35); background: rgba(194,232,78,.05); }
.chkl__done { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(194,232,78,.1); color: var(--g2); font-size: 14px; display: none; }
.chkl.is-done .chkl__done { display: block; animation: stpin .5s var(--ease); }

@media (max-width: 1080px) {
  .stps { grid-template-columns: 1fr 1fr; row-gap: 26px; } .stps::before { display: none; }
  .best__list, .ifc__leg { grid-template-columns: 1fr; } .hub, .modes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nhero__grid { grid-template-columns: 1fr; } .cbtn { max-width: 380px; margin-top: 10px; }
  .need { grid-template-columns: 1fr; } .need__i::after { display: none; }
  .ifc { grid-template-columns: 1fr; justify-items: center; } .rnotes { grid-template-columns: 1fr; }
  .rflow__info { grid-template-columns: 1fr; } .rflow__rule { white-space: normal; justify-self: start; }
}
@media (max-width: 640px) {
  .stps, .hub, .modes { grid-template-columns: 1fr; } .best__goals { grid-template-columns: 1fr 1fr 1fr; }
  .best__goals button { padding: 12px 10px; } .best__goals b { font-size: 15px; } .best__goals span { font-size: 11.5px; }
  .bst { grid-template-columns: 1fr auto; } .bst__rec { grid-column: 1; justify-self: start; grid-row: 2; }
  .bst__sw { grid-row: 1 / 3; grid-column: 2; }
  .dvt__tabs button { min-width: 0; padding: 12px 8px; font-size: 13.5px; } .dvt__ico { display: none; }
  .rflow__stage { height: 560px; } .rflow__modes button { flex: 1 1 calc(50% - 8px); padding: 11px 8px; font-size: 13px; }
  .cbtn__chip { font-size: 11.5px; padding: 6px 9px; } .ifc__dev .rdev { --w: 260px; }
  .nhero__btns .btn { flex: 1 1 100%; }
}

/* =====================================================================
   /nastroyka/klyuch-podpiska/
   ===================================================================== */
.khero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.khero__grid > * { min-width: 0; }
.khero .dlhero__facts { margin-top: 16px; }
.khero .toc { margin-top: 24px; }

/* сканер */
.kscan { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: linear-gradient(160deg, rgba(194,232,78,.08), rgba(0,0,0,.35) 40%); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.5); }
.kscan__top { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f-display); }
.kscan__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); animation: blink 1.6s steps(2) infinite; }
.kscan__lock { margin-left: auto; font: 500 12px/1 var(--f-mono); color: var(--ink-faint); }
.kscan__lbl { font-size: 13.5px; color: var(--ink-soft); }
.kscan__field { position: relative; border-radius: 18px; overflow: hidden; }
.kscan textarea { display: block; width: 100%; min-height: 92px; padding: 14px 16px; resize: vertical; border-radius: 18px; border: 1px solid var(--hair); background: #050906; color: #d8f5c8; font: 500 13px/1.55 var(--f-mono); word-break: break-all; outline: none; transition: border-color .3s, box-shadow .3s; }
.kscan textarea:focus { border-color: rgba(194,232,78,.6); box-shadow: 0 0 0 4px rgba(194,232,78,.12); }
.kscan__beam { position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(194,232,78,.22), transparent); opacity: 0; }
.kscan.is-scan .kscan__beam { animation: kbeam .9s ease-in-out; }
@keyframes kbeam { 0% { top: -30%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.kscan__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-faint); }
.kscan__ex button { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 12.5px/1 var(--f-display); cursor: pointer; }
.kscan__ex button:hover { border-color: rgba(194,232,78,.5); color: var(--ink); }
.kscan__res { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(0,0,0,.35); border: 1px solid var(--hair-soft); min-height: 180px; align-content: start; }
.kscan__badge { display: flex; align-items: center; gap: 12px; }
.kscan__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(194,232,78,.12); font-size: 20px; transition: transform .5s var(--ease); }
.kscan.is-scan .kscan__ico { transform: scale(1.15) rotate(-8deg); }
.kscan__badge b { display: block; font: 700 17px/1.2 var(--f-display); } .kscan__badge span { font-size: 13px; color: var(--ink-faint); }
.kscan__ok { margin-left: auto; flex: none; padding: 6px 10px; border-radius: 99px; font: 700 11.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.kscan__ok:empty { display: none; }
.kscan__ok.is-y { background: rgba(34,209,96,.18); color: #5ee38c; } .kscan__ok.is-n { background: rgba(255,93,108,.15); color: #ff8a95; } .kscan__ok.is-m { background: rgba(240,195,90,.15); color: #f0c35a; }
.kscan__det { display: flex; flex-wrap: wrap; gap: 6px; }
.kscan__det li { padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); font: 500 12px/1.3 var(--f-mono); color: var(--ink-soft); animation: stpin .45s var(--ease) both; }
.kscan__det li b { color: var(--g2); font-weight: 600; margin-right: 4px; }
.kscan__det li:nth-child(2) { animation-delay: .05s; } .kscan__det li:nth-child(3) { animation-delay: .1s; } .kscan__det li:nth-child(4) { animation-delay: .15s; } .kscan__det li:nth-child(5) { animation-delay: .2s; } .kscan__det li:nth-child(6) { animation-delay: .25s; }
.kscan__how { font-size: 14px; color: var(--ink-soft); line-height: 1.5; } .kscan__how:empty { display: none; } .kscan__how a { color: var(--g2); }
.kscan__note { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

/* типы */
.ktypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ktype { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: transform .5s var(--ease), border-color .4s; }
.ktype:hover { transform: translateY(-5px); border-color: rgba(194,232,78,.45); }
.ktype[data-kt="sub"] { background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.45); }
.ktype__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(194,232,78,.12); font-size: 22px; color: var(--g2); }
.ktype h3 { font-size: 20px; } .ktype p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.ktype__f code, .kway code, .kerr code, .prose code { padding: 1px 6px; border-radius: 6px; background: rgba(194,232,78,.12); color: var(--g2); font: 500 .85em var(--f-mono); }
.ktype dl { display: grid; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair-soft); }
.ktype dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .ktype dt { color: var(--ink-faint); } .ktype dd { color: var(--ink); text-align: right; }

/* анатомия */
.kanat { display: grid; gap: 18px; padding: clamp(18px, 3vw, 34px); border-radius: 30px; background: #050906; border: 1px solid var(--hair); }
.kanat__line { font: 500 clamp(14px, 1.6vw, 21px)/1.75 var(--f-mono); word-break: break-all; color: rgba(233,243,230,.35); }
.kanat__line span[data-p] { padding: 2px 1px; border-radius: 6px; cursor: pointer; transition: color .3s, background .3s, box-shadow .3s; }
.kanat__line span[data-p]:hover, .kanat__line span.is-on { color: #04130a; background: var(--g2); box-shadow: 0 0 18px rgba(194,232,78,.5); }
.kanat__s { color: rgba(233,243,230,.25); }
.kanat__card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 18px 20px; border-radius: 20px; background: linear-gradient(120deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border: 1px solid rgba(194,232,78,.35); }
.kanat__k { grid-row: 1 / 3; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.4); color: var(--g2); font: 600 14px/1.2 var(--f-mono); max-width: 260px; word-break: break-all; }
.kanat__card b { font: 700 18px/1.2 var(--f-display); } .kanat__card p { font-size: 14.5px; color: var(--ink-soft); }
.kanat__card.is-swap { animation: stpin .45s var(--ease); }

/* где взять */
.ksrc { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; }
.ksrc__i { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.ksrc__i--best { background: linear-gradient(160deg, rgba(194,232,78,.14), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.5); }
.ksrc__tag { align-self: flex-start; padding: 5px 10px; border-radius: 99px; background: var(--grad); color: #04130a; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.ksrc__tag--warn { background: rgba(240,195,90,.16); color: #f0c35a; } .ksrc__tag--pro { background: rgba(255,255,255,.08); color: var(--ink-soft); }
.ksrc__i h3 { font-size: 22px; } .ksrc__i p { font-size: 15px; color: var(--ink-soft); }
.ksrc__i ul { display: grid; gap: 6px; } .ksrc__i li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-soft); } .ksrc__i li::before { content: '•'; position: absolute; left: 3px; color: var(--g2); }
.ksrc__offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(194,232,78,.25); }
.ksrc__offer p { flex: 1 1 100%; font-size: 14px; } .ksrc__offer b { color: var(--g2); }
.ksrc__more { margin-top: auto; color: var(--g2); font-weight: 600; }

/* способы */
.kways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.kway { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.kway__i { font-size: 22px; } .kway h3 { font-size: 17px; } .kway p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; } .kway a { color: var(--g2); }

/* deep links */
.dlks { display: grid; gap: 10px; }
.dlk { display: grid; gap: 8px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); transition: border-color .4s, transform .4s var(--ease); }
.dlk:hover { border-color: rgba(194,232,78,.45); transform: translateX(4px); }
.dlk__c { justify-self: start; padding: 7px 11px; border-radius: 10px; background: #050906; border: 1px solid rgba(194,232,78,.3); color: var(--g2); font: 600 13.5px/1.2 var(--f-mono); }
.dlk__c i { font-style: normal; color: var(--ink-faint); }
.dlk b { font: 700 16px/1.25 var(--f-display); } .dlk p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; } .dlk p code { color: var(--g2); font-family: var(--f-mono); }

/* бесплатные */
.kfree { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.kfree__vs { align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--hair); font: 800 16px/1 var(--f-display); color: var(--ink-faint); }
.kfc { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: border-color .5s, background .5s; }
.kfc__k { font: 700 18px/1.2 var(--f-display); }
.kfc__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14.5px; color: var(--ink-soft); }
.kfc__row b { font: 600 15px/1 var(--f-mono); color: var(--ink); transition: color .4s; }
.kfc__meter { height: 10px; border-radius: 10px; background: rgba(255,255,255,.06); overflow: hidden; }
.kfc__meter i { display: block; height: 100%; width: calc(var(--m, .1) * 100%); background: linear-gradient(90deg, #22d160, #c2e84e 50%, #f0c35a 75%, #ff5d6c); background-size: calc(100% / var(--m, .1)) 100%; transition: width .9s var(--ease); }
.kfc--good .kfc__meter i { background: var(--grad); background-size: auto; }
.kfc__st { justify-self: start; padding: 7px 12px; border-radius: 99px; background: rgba(34,209,96,.15); color: #5ee38c; font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; transition: all .4s; }
.kfc__st.is-warn { background: rgba(240,195,90,.15); color: #f0c35a; } .kfc__st.is-dead { background: rgba(255,93,108,.16); color: #ff8a95; }
.kfc--bad.is-dead { border-color: rgba(255,93,108,.4); background: rgba(255,93,108,.05); } .kfc--bad.is-dead b[data-fp] { color: #ff8a95; }
.kfc--good { background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.45); }
.kfc--good .btn { justify-self: start; margin-top: 4px; }
.kwhy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.kwhy h3 { font-size: 18px; margin-bottom: 6px; } .kwhy p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }

/* ошибки */
.kerrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kerr { display: flex; gap: 16px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.kerr__i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,93,108,.1); border: 1px solid rgba(255,93,108,.25); font-size: 20px; color: #ff8a95; }
.kerr h3 { font-size: 17px; margin-bottom: 4px; } .kerr p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* управление */
.kman { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kman__i { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.kman__n { font-size: 24px; color: var(--g2); } .kman__i h3 { font-size: 18px; } .kman__i p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .kman__i a { color: var(--g2); }

@media (max-width: 1080px) { .ktypes, .kman { grid-template-columns: 1fr 1fr; } .ksrc { grid-template-columns: 1fr; } .kways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .khero__grid { grid-template-columns: 1fr; } .kfree { grid-template-columns: 1fr; } .kfree__vs { justify-self: center; } .kwhy, .kerrs { grid-template-columns: 1fr; } .kanat__card { grid-template-columns: 1fr; } .kanat__k { grid-row: auto; justify-self: start; } }
@media (max-width: 640px) { .ktypes, .kman, .kways { grid-template-columns: 1fr; } .kscan { padding: 16px; border-radius: 24px; } }
.ktype__aka { font-size: 12.5px !important; color: var(--ink-faint) !important; font-style: italic; }

/* =====================================================================
   /podpiska/
   ===================================================================== */
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.phero__grid > * { min-width: 0; }
.phero .dlhero__facts { margin-top: 16px; } .phero .toc { margin-top: 24px; }

.pcalc { display: grid; gap: 22px; perspective: 1200px; }
.hcard3 { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 1.42; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); }
.hcard3.is-move { transition: transform .08s linear; }
.hcard3__in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(18px, 3vw, 28px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #1f4a2a 0%, #0b1a10 45%, #050b07 100%); border: 1px solid rgba(194,232,78,.35);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.9), 0 30px 80px -30px rgba(34,209,96,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.hcard3__holo { position: absolute; inset: -40%; pointer-events: none; opacity: .32; mix-blend-mode: color-dodge;
  background: conic-gradient(from 0deg at var(--mx) var(--my), #22d160, #c2e84e, #6fe3b4, #e8f78a, #22d160); filter: blur(34px); animation: holo 12s linear infinite; }
@keyframes holo { to { transform: rotate(360deg); } }
.hcard3__shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at var(--mx) var(--my), rgba(255,255,255,.28), transparent 70%); }
.hcard3__top { position: relative; display: flex; align-items: center; gap: 10px; }
.hcard3__top b { font: 800 18px/1 var(--f-display); }
.hcard3__logo { width: 34px; height: 34px; border-radius: 11px; background: var(--grad); box-shadow: 0 0 18px rgba(194,232,78,.6); position: relative; }
.hcard3__logo::after { content: ''; position: absolute; inset: 9px; border: 3px solid #04130a; border-bottom-color: transparent; border-radius: 50%; }
.hcard3__chip { margin-left: auto; padding: 6px 10px; border-radius: 99px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15); font: 600 12px/1 var(--f-mono); color: var(--g2); }
.hcard3__k { position: relative; margin-top: auto; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(233,243,230,.6); }
.hcard3__price { position: relative; display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.hcard3__price b { font: 900 clamp(56px, 7vw, 84px)/.9 var(--f-display); letter-spacing: -.04em; background: linear-gradient(180deg, #fff, #c2e84e); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hcard3__price span { font: 600 17px/1 var(--f-display); color: var(--ink-soft); }
.hcard3__day { position: relative; margin-top: 8px; font-size: 14px; color: var(--ink-soft); } .hcard3__day b { color: var(--ink); }
.hcard3__bot { position: relative; display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.15); font: 500 12px/1 var(--f-mono); color: rgba(233,243,230,.55); }
.pcalc__devs { position: absolute; top: 72px; right: clamp(16px, 3vw, 26px); display: grid; grid-template-columns: repeat(5, 18px); gap: 6px; }
.pcalc__dv { width: 18px; height: 18px; border-radius: 5px; border: 2px solid rgba(255,255,255,.14); transform: scale(.7); opacity: .4; transition: all .45s var(--ease); transition-delay: calc(var(--i) * 25ms); }
.pcalc__dv[data-d="laptop"], .pcalc__dv[data-d="tv"] { border-radius: 3px; height: 14px; margin-top: 2px; }
.pcalc__dv.is-on { opacity: 1; transform: none; border-color: transparent; background: var(--grad); box-shadow: 0 0 10px rgba(194,232,78,.6); }
.pcalc__ctl { display: grid; gap: 10px; padding: 18px 20px; border-radius: 22px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.pcalc__ctl label { font: 700 15px/1.2 var(--f-display); }
.pcalc__row { display: flex; align-items: center; gap: 12px; }
.pcalc__row button { flex: none; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--ink); font: 700 22px/1 var(--f-display); cursor: pointer; transition: all .25s; }
.pcalc__row button:hover { border-color: var(--g2); color: var(--g2); }
.pcalc input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--g1), var(--g2)) 0 / var(--fill, 0%) 100% no-repeat, rgba(255,255,255,.1); outline: none; }
.pcalc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--g2); box-shadow: 0 0 0 6px rgba(194,232,78,.18), 0 4px 12px rgba(0,0,0,.5); cursor: grab; }
.pcalc input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--g2); cursor: grab; }
.pcalc__ticks { display: flex; justify-content: space-between; padding: 0 62px; font: 500 11px/1 var(--f-mono); color: var(--ink-faint); }
.pcalc__f { font: 500 13px/1.4 var(--f-mono); color: var(--g2); min-height: 18px; }
.hcard3__price b.is-bump { animation: pbump .45s var(--ease); }
@keyframes pbump { 40% { transform: translateY(-4px) scale(1.04); } }

/* уравнение */
.peq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.peq__i { display: grid; gap: 8px; justify-items: start; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); min-height: 100%; }
.peq__i--sub { background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.45); }
.peq__i--res { background: radial-gradient(100% 100% at 50% 0%, rgba(34,209,96,.2), rgba(255,255,255,.02)); border-color: rgba(34,209,96,.4); }
.peq__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(194,232,78,.12); font-size: 24px; }
.peq__ico--app { background: #06120a; border: 1px solid rgba(194,232,78,.4); color: var(--g2); font: 900 13px/1 var(--f-display); }
.peq__i b { font: 700 19px/1.2 var(--f-display); } .peq__p { font: 800 26px/1 var(--f-display); color: var(--g2); } .peq__i p { font-size: 14.5px; color: var(--ink-soft); }
.peq__op { font: 900 40px/1 var(--f-display); color: var(--ink-faint); }
.peq.is-in .peq__op { animation: pop .6s var(--ease) both; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* тарифы */
.plans { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 28px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.plan--main { background: linear-gradient(165deg, rgba(194,232,78,.18), rgba(34,209,96,.04) 60%); border-color: rgba(194,232,78,.6); box-shadow: 0 40px 90px -40px rgba(34,209,96,.7); transform: translateY(-10px); }
.plan__badge { position: absolute; top: -12px; left: 30px; padding: 6px 12px; border-radius: 99px; background: var(--grad); color: #04130a; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.plan__k { font: 600 14px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.plan__p { display: grid; gap: 6px; } .plan__p b { font: 900 48px/1 var(--f-display); letter-spacing: -.03em; } .plan__p span { font-size: 14px; color: var(--ink-soft); }
.plan--main .plan__p b { background: linear-gradient(180deg, #fff, #c2e84e); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 62px; }
.plan ul { display: grid; gap: 8px; margin-bottom: auto; } .plan li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink-soft); }
.plan li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--g2); font-weight: 800; }
.plan .btn { justify-content: center; } .plan__alt { text-align: center; font-size: 14px; color: var(--g2); }
.ptbl { margin-top: 26px; overflow-x: auto; border-radius: 22px; border: 1px solid var(--hair); background: rgba(0,0,0,.25); }
.ptbl table, .pcmp table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptbl caption { padding: 16px 20px 6px; text-align: left; font: 700 16px/1.3 var(--f-display); }
.ptbl th, .ptbl td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--hair-soft); }
.ptbl th { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.ptbl td:nth-child(2) b { color: var(--g2); } .ptbl td:nth-child(3) { color: var(--ink-faint); }
.ptbl tr.is-hl td { background: rgba(194,232,78,.05); } .ptbl tbody tr:last-child td { border-bottom: 0; }
.ptbl tr.is-cur td { background: rgba(194,232,78,.14); }

/* что входит */
.pincs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pinc { display: flex; gap: 16px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: transform .5s var(--ease), border-color .4s; }
.pinc:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.45); }
.pinc__i { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(194,232,78,.12); font-size: 22px; }
.pinc h3 { font-size: 18px; margin-bottom: 4px; } .pinc p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* как купить */
.pbuy { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: pb; }
.pbuy::before { content: ''; position: absolute; top: 27px; left: 8%; right: 8%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); }
.pbuy::after { content: ''; position: absolute; top: 27px; left: 8%; height: 3px; border-radius: 3px; width: calc(84% * var(--pb, 0)); background: var(--grad); box-shadow: 0 0 12px rgba(194,232,78,.6); transition: width 1.2s var(--ease); }
.pbuy__s { position: relative; display: grid; gap: 10px; justify-items: start; }
.pbuy__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #0a120d; border: 2px solid rgba(255,255,255,.15); font: 800 20px/1 var(--f-display); color: var(--ink-faint); transition: all .5s var(--ease); }
.pbuy__s.is-on .pbuy__n { background: var(--grad); border-color: transparent; color: #04130a; box-shadow: 0 0 0 8px rgba(194,232,78,.12); }
.pbuy__s h3 { font-size: 19px; } .pbuy__s p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.pbuy__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.pbuy__cta p { flex: 1 1 320px; font-size: 14.5px; color: var(--ink-soft); } .pbuy__cta a:not(.btn) { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; }

/* сравнение */
.pcmp { overflow-x: auto; border-radius: 24px; border: 1px solid var(--hair); background: rgba(0,0,0,.25); }
.pcmp th, .pcmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--hair-soft); vertical-align: top; }
.pcmp thead th { font: 700 15px/1.2 var(--f-display); } .pcmp tbody th { font: 600 14px/1.3 var(--f-display); color: var(--ink-faint); white-space: nowrap; }
.pcmp td { color: var(--ink-soft); } .pcmp .is-us { background: rgba(194,232,78,.08); color: var(--ink); } .pcmp thead .is-us { color: var(--g2); }
.pcmp tbody tr:last-child th, .pcmp tbody tr:last-child td { border-bottom: 0; }

/* мифы */
.pmyth { display: grid; gap: 10px; }
.pmyth li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.pmyth b { font: 700 17px/1.2 var(--f-display); } .pmyth p { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }
.pmyth__v { padding: 5px 9px; border-radius: 99px; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; align-self: center; }
.pmyth__v--no { background: rgba(255,93,108,.14); color: #ff8a95; } .pmyth__v--mid { background: rgba(240,195,90,.14); color: #f0c35a; } .pmyth__v--yes { background: rgba(34,209,96,.16); color: #5ee38c; }

@media (max-width: 1080px) { .pincs { grid-template-columns: 1fr 1fr; } .plans { grid-template-columns: 1fr; } .plan--main { transform: none; } .peq { grid-template-columns: 1fr; } .peq__op { justify-self: center; } }
@media (max-width: 900px) { .phero__grid { grid-template-columns: 1fr; } .pbuy { grid-template-columns: 1fr 1fr; row-gap: 26px; } .pbuy::before, .pbuy::after { display: none; } }
@media (max-width: 640px) { .pincs, .pbuy { grid-template-columns: 1fr; } .pcalc__ticks { padding: 0 60px; font-size: 10px; } .pcalc__devs { top: 64px; grid-template-columns: repeat(5, 14px); gap: 4px; } .pcalc__dv { width: 14px; height: 14px; } .hcard3 { aspect-ratio: 1.25; } }
.offer__fine a { color: var(--g2); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   /probnyy-period/
   ===================================================================== */
.thero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.thero__grid > * { min-width: 0; }
.thero .dlhero__facts { margin-top: 16px; } .thero .toc { margin-top: 24px; }

/* билет */
.tkt { display: grid; gap: 14px; justify-items: center; perspective: 1200px; }
.tkt__card { position: relative; display: grid; grid-template-columns: 1fr 22px 110px; width: 100%; max-width: 480px; color: inherit; text-decoration: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)) drop-shadow(0 20px 50px rgba(34,209,96,.35)); transform: rotate(-3deg); transition: transform .7s var(--ease); animation: tktfl 6s ease-in-out infinite; }
@keyframes tktfl { 50% { transform: rotate(-1deg) translateY(-8px); } }
.tkt__card:hover { animation-play-state: paused; transform: rotate(0deg) scale(1.02); }
.tkt__main { position: relative; display: grid; gap: 12px; padding: 24px 22px 20px; border-radius: 26px 0 0 26px; overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #2a6b3a, #0d2615 50%, #071209); border: 1px solid rgba(194,232,78,.4); border-right: 0;
  -webkit-mask: radial-gradient(circle 12px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tkt__shine { position: absolute; inset: -50% auto -50% -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: tkts 4.5s ease-in-out infinite; }
@keyframes tkts { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.tkt__k { position: relative; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(233,243,230,.7); }
.tkt__big { position: relative; display: flex; align-items: baseline; gap: 8px; font: 900 clamp(70px, 9vw, 104px)/.85 var(--f-display); letter-spacing: -.05em; background: linear-gradient(180deg, #fff, #c2e84e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tkt__big small { font: 700 20px/1 var(--f-display); letter-spacing: 0; -webkit-text-fill-color: var(--ink-soft); }
.tkt__ring { position: absolute; top: 20px; right: 18px; width: 108px; height: 108px; display: grid; place-items: center; }
.tkt__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tkt__trk { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; } .tkt__arc { fill: none; stroke: var(--g2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: var(--off, 0); filter: drop-shadow(0 0 6px rgba(194,232,78,.7)); transition: stroke-dashoffset 1s linear; }
.tkt__ring b { position: relative; font: 600 13px/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tkt__rows { position: relative; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.18); }
.tkt__rows span { display: grid; gap: 4px; } .tkt__rows i { font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: rgba(233,243,230,.55); } .tkt__rows b { font: 700 15px/1 var(--f-display); }
.tkt__bar { position: relative; height: 26px; background: repeating-linear-gradient(90deg, rgba(233,243,230,.75) 0 2px, transparent 2px 4px, rgba(233,243,230,.75) 4px 7px, transparent 7px 9px, rgba(233,243,230,.75) 9px 10px, transparent 10px 13px); opacity: .5; border-radius: 3px; }
.tkt__perf { background: #0b1a10; border-top: 1px solid rgba(194,232,78,.4); border-bottom: 1px solid rgba(194,232,78,.4); position: relative; }
.tkt__perf::before { content: ''; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 0; border-left: 2px dashed rgba(194,232,78,.45); }
.tkt__stub { display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px 10px; border-radius: 0 26px 26px 0; background: var(--grad); color: #04130a; text-align: center; transform-origin: left center; transition: transform .6s var(--ease);
  -webkit-mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.tkt__stub-t { font: 800 16px/1.15 var(--f-display); }
.tkt__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #04130a; color: var(--g2); font-size: 18px; transition: transform .4s var(--ease); }
.tkt__card:hover .tkt__stub { transform: translate(14px, 6px) rotate(9deg); }
.tkt__card:hover .tkt__arrow { transform: translateX(4px); }
.tkt.is-torn .tkt__stub { animation: tear 1.1s var(--ease) forwards; }
@keyframes tear { 30% { transform: translate(10px, 4px) rotate(10deg); } 100% { transform: translate(60px, 120px) rotate(38deg); opacity: 0; } }
.tkt__cap { font: 500 12.5px/1.3 var(--f-mono); color: var(--ink-faint); text-align: center; }

/* бесплатно / платно */
.tfree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tfree__col { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.tfree__col--y { border-color: rgba(34,209,96,.35); } .tfree__col--t { background: linear-gradient(160deg, rgba(194,232,78,.14), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.5); }
.tfree__h { display: grid; gap: 8px; font: 700 20px/1.2 var(--f-display); } .tfree__h span { font: 900 32px/1 var(--f-display); color: var(--g2); }
.tfree ul { display: grid; gap: 9px; } .tfree li { position: relative; padding-left: 24px; font-size: 15px; color: var(--ink-soft); } .tfree li::before { content: '✓'; position: absolute; left: 0; color: var(--g2); font-weight: 800; }
.tfree a { color: var(--g2); }

/* циферблат */
.dial { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.dial__face { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; cursor: grab; }
.dial__face:active { cursor: grabbing; }
.dial__face svg { width: 100%; height: 100%; overflow: visible; }
.dial__bg { fill: rgba(0,0,0,.35); stroke: var(--hair); }
.dial__trk { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 14; }
.dial__arc { fill: none; stroke: url(#dialg); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 741.4; stroke-dashoffset: calc(741.4 - 741.4 * var(--k, 0)); filter: drop-shadow(0 0 10px rgba(194,232,78,.5)); }
.dial__tk { stroke: rgba(255,255,255,.18); stroke-width: 2; } .dial__tk--b { stroke: rgba(255,255,255,.45); stroke-width: 3; }
.dial__num { fill: rgba(233,243,230,.45); font: 500 11px var(--f-mono); text-anchor: middle; }
.dial__ev { fill: #0b1a10; stroke: var(--g2); stroke-width: 2.5; transition: fill .3s, r .3s; } .dial__ev.is-on { fill: var(--g2); r: 8; }
.dial__hand { transform-origin: 150px 150px; transform: rotate(var(--a, 0deg)); }
.dial__hand line { stroke: var(--g2); stroke-width: 3; stroke-linecap: round; }
.dial__knob { fill: #fff; stroke: var(--g2); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(194,232,78,.8)); }
.dial__pin { fill: var(--g2); }
.dial__mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; }
.dial__mid b { font: 900 clamp(38px, 5vw, 56px)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.dial__mid span { font: 500 12.5px/1 var(--f-mono); color: var(--ink-faint); }
.dial__card { display: grid; gap: 8px; align-content: start; }
.dial__card > .dial__ico { font-size: 40px; } .dial__card > time { font: 600 13px/1 var(--f-mono); color: var(--g2); }
.dial__card > b { font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--f-display); } .dial__card > p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.dial__card.is-swap > :not(.dial__list) { animation: stpin .45s var(--ease) both; }
.dial__list { display: grid; gap: 6px; margin-top: 16px; }
.dial__list li { display: grid; grid-template-columns: 52px 26px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: all .3s; opacity: .55; }
.dial__list li:hover { opacity: .85; } .dial__list li.is-on { opacity: 1; background: rgba(194,232,78,.08); border-color: rgba(194,232,78,.3); }
.dial__list time { font: 600 12.5px/1 var(--f-mono); color: var(--g2); } .dial__list b { font: 700 14.5px/1.3 var(--f-display); } .dial__list p { display: none; }

/* шаги получения + чат */
.tsteps { display: grid; gap: 10px; margin: 18px 0 22px; counter-reset: ts; list-style: none; padding: 0 !important; }
.tsteps li { counter-increment: ts; position: relative; display: grid; gap: 3px; padding: 14px 16px 14px 58px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.tsteps li::before { content: counter(ts); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #04130a; font: 800 15px/1 var(--f-display); }
.tsteps b { font: 700 16px/1.3 var(--f-display); color: var(--ink); } .tsteps span { font-size: 14.5px; color: var(--ink-soft); }
.tchat { align-self: center; border-radius: 30px; overflow: hidden; background: #0e1611; border: 1px solid var(--hair); box-shadow: 0 40px 90px -40px rgba(34,209,96,.6); }
.tchat__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--hair-soft); }
.tchat__ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #04130a; font: 800 13px/1 var(--f-display); }
.tchat__top b { display: block; font: 700 15px/1.2 var(--f-display); } .tchat__top span { font-size: 12.5px; color: var(--ink-faint); }
.tchat__body { display: grid; gap: 10px; align-content: start; min-height: 320px; padding: 20px; background: radial-gradient(80% 60% at 50% 0%, rgba(34,209,96,.08), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 10px, transparent 10px 20px); }
.tm { max-width: 82%; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .5s var(--ease); }
.tm.is-on { opacity: 1; transform: none; }
.tm--me { justify-self: end; background: var(--grad); color: #04130a; font-weight: 700; border-bottom-right-radius: 6px; }
.tm--bot { justify-self: start; background: rgba(255,255,255,.07); border-bottom-left-radius: 6px; }
.tm--bot code { font: 500 12.5px var(--f-mono); color: var(--g2); }
.tm__typing { display: none; gap: 4px; } .tm__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: tmty 1s infinite; } .tm__typing i:nth-child(2) { animation-delay: .15s; } .tm__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tmty { 50% { transform: translateY(-4px); opacity: .5; } }
.tm--bot.is-typing .tm__typing { display: inline-flex; } .tm--bot.is-typing .tm__txt { display: none; }
.tm--btns { display: flex; gap: 8px; padding: 0; max-width: 100%; justify-self: start; }
.tm--btns span { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--hair); font-size: 13.5px; font-weight: 600; }
.tm--btns .is-hot { border-color: var(--g2); color: var(--g2); }
.tm--btns.is-press .is-hot { background: var(--g2); color: #04130a; transform: scale(.95); transition: all .2s; }
.tm--sys { justify-self: center; max-width: 100%; background: rgba(34,209,96,.14); color: #5ee38c; font: 600 12.5px/1.3 var(--f-mono); text-align: center; }

/* условия */
.tconds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tcond { display: grid; gap: 6px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: transform .5s var(--ease), border-color .4s; }
.tcond:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.45); }
.tcond span { font-size: 28px; } .tcond b { font: 800 22px/1.15 var(--f-display); } .tcond p { font-size: 14.5px; color: var(--ink-soft); }

/* ловушки */
.traps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.trap { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); overflow: hidden; }
.trap::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #ff5d6c, #f0c35a); }
.trap__tag { justify-self: start; padding: 5px 10px; border-radius: 99px; background: rgba(255,93,108,.14); color: #ff8a95; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.trap h3 { font-size: 20px; } .trap p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; } .trap a { color: var(--g2); }
.trap__ok { margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(34,209,96,.1); color: #5ee38c !important; font-weight: 600; font-size: 14px !important; }

/* что дальше */
.tafter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tafter__i { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.tafter__i--go { background: linear-gradient(160deg, rgba(194,232,78,.14), rgba(34,209,96,.03)); border-color: rgba(194,232,78,.5); }
.tafter__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.06); font: 900 18px/1 var(--f-display); color: var(--g2); }
.tafter__i--go .tafter__n { background: var(--grad); color: #04130a; }
.tafter__i h3 { font-size: 21px; } .tafter__i p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; } .tafter__i .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1080px) { .tconds { grid-template-columns: 1fr 1fr; } .tafter, .tfree { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .thero__grid { grid-template-columns: 1fr; } .dial { grid-template-columns: 1fr; justify-items: center; } .dial__face { max-width: 360px; } .traps { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tconds { grid-template-columns: 1fr; } .tkt__card { grid-template-columns: 1fr 16px 82px; } .tkt__ring { width: 84px; height: 84px; top: 16px; right: 12px; } .tkt__ring b { font-size: 10.5px; } .tkt__rows { gap: 10px; } .tkt__stub-t { font-size: 13px; } .tkt__big small { font-size: 15px; } }
.tkt__k { max-width: 58%; }
.bc__more { position: relative; display: inline-block; margin-top: 12px; color: var(--g2); font-weight: 600; font-size: 14.5px; }

/* =====================================================================
   /skachat/iphone/ — симулятор iOS
   ===================================================================== */
.idet { margin-top: 24px; }
.idet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 16px; }
.ias-ico { width: 22px; height: 22px; border-radius: 6px; background: #04130a; position: relative; }
.ias-ico::before { content: 'A'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--g2); font: 900 13px/1 var(--f-display); }
.idet__qr { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); font-size: 13px; color: var(--ink-soft); max-width: 300px; }
.idet__qrc { flex: none; width: 74px; height: 74px; padding: 0; border-radius: 10px; overflow: hidden; background: #fff; }
.idet__qrc svg { display: block; width: 100%; height: 100%; } .idet__qrc path { fill: #04130a; }
.idet.is-ios .idet__qr { display: none; }

.isim { display: grid; justify-items: center; gap: 14px; }
.isim__stage { position: relative; }
.isim__dev { --w: 300px; }
.isim .rdev__screen { container-type: inline-size; }
.isim .rdev__island { opacity: 0; }
.isim__scr { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s; background: #000; color: #f2f2f7; font-family: -apple-system, 'SF Pro Text', var(--f-body); }
.isim[data-step="1"] [data-s="1"], .isim[data-step="2"] [data-s="2"], .isim[data-step="3"] [data-s="3"], .isim[data-step="4"] [data-s="3"], .isim[data-step="5"] [data-s="3"] { opacity: 1; pointer-events: auto; }
.isim__scr--shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* App Store */
.ip-as { height: 100%; background: #000; padding-top: 15cqw; }
.ip-as__bar { padding: 0 5cqw 3cqw; font-size: 4.6cqw; color: #0a84ff; }
.ip-as__head { display: flex; gap: 4cqw; padding: 2cqw 5cqw 4cqw; }
.ip-as__ico { flex: none; display: grid; place-items: center; width: 27cqw; height: 27cqw; border-radius: 6.5cqw; background: radial-gradient(circle at 30% 25%, #1b3a22, #050b07); border: 1px solid rgba(255,255,255,.12); color: #c2e84e; font: 900 5.6cqw/1 var(--f-display); letter-spacing: .02em; }
.ip-as__head > div { display: flex; flex-direction: column; gap: 1cqw; } .ip-as__head b { font: 700 6.6cqw/1.1 -apple-system, var(--f-display); } .ip-as__head i { font-style: normal; font-size: 4cqw; color: rgba(235,235,245,.6); }
.ip-get { position: relative; margin-top: auto; align-self: flex-start; display: grid; place-items: center; min-width: 25cqw; height: 8cqw; padding: 0 4cqw; border: 0; border-radius: 99px; background: #0a84ff; color: #fff; font: 700 4.2cqw/1 -apple-system, var(--f-display); cursor: pointer; transition: all .35s; }
.ip-get__ring { position: absolute; width: 9cqw; height: 9cqw; opacity: 0; transform: rotate(-90deg); }
.ip-get__ring circle { fill: none; stroke: rgba(10,132,255,.25); stroke-width: 3; } .ip-get__ring .ip-get__p { stroke: #0a84ff; stroke-dasharray: 94.2; stroke-dashoffset: calc(94.2 - 94.2 * var(--p, 0)); }
.ip-get__ring rect { fill: #0a84ff; transform: rotate(90deg); transform-origin: 18px 18px; }
.isim.is-dl .ip-get { min-width: 9cqw; padding: 0; background: transparent; } .isim.is-dl .ip-get__t { opacity: 0; } .isim.is-dl .ip-get__ring { opacity: 1; }
.isim.is-open .ip-get__t::after { content: ''; }
.ip-as__meta { display: flex; justify-content: space-between; margin: 0 5cqw; padding: 3cqw 0; border-top: 1px solid rgba(84,84,88,.6); border-bottom: 1px solid rgba(84,84,88,.6); }
.ip-as__meta span { display: grid; justify-items: center; gap: 1cqw; font-size: 3.1cqw; color: rgba(235,235,245,.5); } .ip-as__meta b { font-size: 4.2cqw; color: rgba(235,235,245,.85); }
.ip-as__shots { display: flex; gap: 2.5cqw; padding: 4cqw 5cqw; overflow: hidden; }
.ip-as__shots i { flex: none; width: 40cqw; aspect-ratio: .5; border-radius: 4cqw; background: linear-gradient(180deg, #102016, #050b07); border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; }
.ip-as__shots i::before { content: ''; position: absolute; left: 12%; right: 12%; top: 18%; height: 7%; border-radius: 2cqw; background: rgba(194,232,78,.25); box-shadow: 0 9cqw 0 rgba(255,255,255,.07), 0 15cqw 0 rgba(255,255,255,.07), 0 21cqw 0 rgba(255,255,255,.07), 0 27cqw 0 rgba(255,255,255,.07); }
.ip-as__d { padding: 0 5cqw; font-size: 3.8cqw; line-height: 1.45; color: rgba(235,235,245,.7); }

/* пустой Incy */
.ip-app { height: 100%; display: flex; flex-direction: column; padding-top: 14cqw; background: #050b07; }
.ip-app__bar { display: flex; justify-content: space-between; padding: 0 6cqw; } .ip-app__bar b { font: 900 7cqw/1 var(--f-display); color: #c2e84e; } .ip-app__bar span { font-size: 6cqw; color: rgba(255,255,255,.5); }
.ip-app__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 3cqw; padding: 0 8cqw; text-align: center; }
.ip-app__ill { width: 24cqw; height: 24cqw; border-radius: 7cqw; border: 2px dashed rgba(194,232,78,.4); position: relative; }
.ip-app__ill::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #c2e84e; font: 300 14cqw/1 var(--f-display); }
.ip-app__empty p { font: 700 6.6cqw/1.1 var(--f-display); } .ip-app__empty > span { font-size: 4cqw; color: rgba(255,255,255,.55); }
.ip-btn { width: 100%; margin-top: 3cqw; padding: 4cqw; border: 0; border-radius: 4cqw; background: linear-gradient(135deg, #22d160, #c2e84e); color: #04130a; font: 700 4.6cqw/1 var(--f-display); cursor: pointer; }
.ip-clip { font: 500 3.3cqw/1 var(--f-mono); color: #c2e84e !important; }

/* iOS-алерты */
.ip-alert { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 0 12cqw; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.ip-alert > * { transform: scale(1.12); transition: transform .35s var(--ease); }
.isim.is-al-paste [data-al="paste"], .isim.is-al-cfg [data-al="cfg"] { opacity: 1; pointer-events: auto; }
.isim.is-al-paste [data-al="paste"] > *, .isim.is-al-cfg [data-al="cfg"] > * { transform: none; }
.ip-alert__b { display: grid; gap: 2cqw; padding: 5cqw 5cqw 4.5cqw; border-radius: 4.5cqw 4.5cqw 0 0; background: rgba(44,44,46,.96); text-align: center; backdrop-filter: blur(20px); }
.ip-alert__b b { font: 600 4.3cqw/1.3 -apple-system, var(--f-display); } .ip-alert__b span { font-size: 3.5cqw; line-height: 1.35; color: rgba(235,235,245,.75); }
.ip-alert__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(84,84,88,.65); border-radius: 0 0 4.5cqw 4.5cqw; overflow: hidden; }
.ip-alert__btns button { padding: 3.6cqw 2cqw; border: 0; background: rgba(44,44,46,.96); color: #0a84ff; font: 400 4.3cqw/1.2 -apple-system, var(--f-body); cursor: pointer; }
.ip-alert__btns button.is-main { font-weight: 600; }
.ip-alert__btns--col { grid-template-columns: 1fr; }
.ip-toast { position: absolute; z-index: 3; left: 8cqw; right: 8cqw; top: 15cqw; padding: 3cqw; border-radius: 99px; background: rgba(34,209,96,.95); color: #04130a; font: 700 3.6cqw/1 var(--f-display); text-align: center; opacity: 0; transform: translateY(-3cqw); transition: all .45s var(--ease); }
.isim[data-step="3"] .ip-toast { opacity: 1; transform: none; transition-delay: .3s; }
.isim.is-al-cfg .ip-toast { opacity: 0; }
.ip-conn { position: absolute; z-index: 4; left: 4%; right: 4%; bottom: 13%; height: 7%; border: 0; background: transparent; cursor: pointer; }
.ip-sw { position: absolute; z-index: 2; left: 7.9%; top: 81.9%; width: 16.1%; height: 3.9%; border-radius: 99px; background: linear-gradient(90deg, #22d160, #c2e84e); opacity: 0; transition: opacity .4s; box-shadow: 0 0 16px rgba(194,232,78,.6); }
.ip-sw i { position: absolute; right: 5%; top: 10%; width: 32%; height: 80%; border-radius: 50%; background: #fff; }
.isim[data-step="5"] .ip-sw { opacity: 1; }
.ip-face { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 5cqw; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.isim[data-step="4"] .ip-face { opacity: 1; }
.ip-face__g { position: relative; width: 26cqw; height: 26cqw; border-radius: 6cqw; background: rgba(40,40,42,.9); }
.ip-face__g i { position: absolute; width: 6cqw; height: 6cqw; border: .9cqw solid #fff; }
.ip-face__g i:nth-child(1) { left: 4cqw; top: 4cqw; border-right: 0; border-bottom: 0; border-radius: 2cqw 0 0 0; } .ip-face__g i:nth-child(2) { right: 4cqw; top: 4cqw; border-left: 0; border-bottom: 0; border-radius: 0 2cqw 0 0; }
.ip-face__g i:nth-child(3) { left: 4cqw; bottom: 4cqw; border-right: 0; border-top: 0; border-radius: 0 0 0 2cqw; } .ip-face__g i:nth-child(4) { right: 4cqw; bottom: 4cqw; border-left: 0; border-top: 0; border-radius: 0 0 2cqw 0; }
.ip-face__g b { position: absolute; left: 50%; top: 50%; width: 9cqw; height: 4.5cqw; margin: -1cqw 0 0 -4.5cqw; border: .9cqw solid #fff; border-top: 0; border-radius: 0 0 9cqw 9cqw; }
.isim[data-step="4"] .ip-face__g { animation: faceid 1.6s var(--ease) forwards; }
@keyframes faceid { 0% { transform: scale(.9); } 30% { transform: scale(1); } 60% { transform: rotateY(25deg); } 75% { transform: rotateY(-25deg); } 100% { transform: none; background: rgba(34,209,96,.9); } }
.ip-face__t { font: 600 4.6cqw/1 -apple-system, var(--f-display); }

/* Dynamic Island live activity */
.isim__island { position: absolute; z-index: 8; top: 17px; left: 50%; width: 31%; height: 23px; transform: translateX(-50%); border-radius: 20px; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; overflow: hidden; transition: width .6s cubic-bezier(.3,1.4,.5,1), height .6s cubic-bezier(.3,1.4,.5,1), border-radius .6s; }
.isim__island > span { opacity: 0; transition: opacity .3s; white-space: nowrap; }
.isim__isl-l { display: flex; align-items: center; gap: 5px; font: 800 10px/1 var(--f-display); color: #c2e84e; } .isim__isl-l i { width: 7px; height: 7px; border-radius: 50%; background: #22d160; box-shadow: 0 0 8px #22d160; animation: blink 1.4s steps(2) infinite; }
.isim__isl-r { font: 600 10px/1 var(--f-mono); color: #fff; }
.isim__isl-big { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 3px; }
.isim__isl-big b { font: 700 15px/1 -apple-system, var(--f-display); color: #fff; } .isim__isl-big span { font-size: 11px; color: rgba(255,255,255,.65); }
.isim[data-step="5"] .isim__island { width: 58%; }
.isim[data-step="5"] .isim__isl-l, .isim[data-step="5"] .isim__isl-r { opacity: 1; transition-delay: .3s; }
.isim.is-big .isim__island { width: 88%; height: 84px; border-radius: 34px; align-items: flex-start; padding-top: 12px; }
.isim.is-big .isim__isl-big { opacity: 1; transition-delay: .25s; }
.isim__hint { position: absolute; font-size: 13px; padding: 7px 11px; border-radius: 9px; }
.isim__hint::before { width: 10px; height: 10px; margin-left: -5px; bottom: -4px; }
.isim.is-auto .isim__hint, .isim[data-step="5"] .isim__hint { opacity: 0; }

/* App Store карточка */
.iascard { display: grid; gap: 14px; padding: 24px; border-radius: 28px; background: #0d0f0e; border: 1px solid var(--hair); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.iascard__top { display: flex; align-items: center; gap: 14px; }
.iascard__ico { width: 72px; height: 72px; border-radius: 18px; font-size: 15px; }
.iascard__top b { display: block; font: 800 22px/1.1 var(--f-display); } .iascard__top div span { font-size: 13.5px; color: var(--ink-faint); }
.iascard__get { margin-left: auto; padding: 9px 18px; border-radius: 99px; background: #0a84ff; color: #fff; font: 700 14px/1 var(--f-display); }
.iascard__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 18px; overflow: hidden; background: var(--hair-soft); }
.iascard__dl div { display: grid; gap: 4px; padding: 12px 14px; background: #0d0f0e; } .iascard__dl dt { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .iascard__dl dd { font: 700 15px/1.2 var(--f-display); }
.iascard__n { font-size: 12px; color: var(--ink-faint); }

/* буфер */
.ibuf { display: grid; gap: 16px; padding: 26px; border-radius: 28px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.ibuf__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ibuf__app { padding: 12px 16px; border-radius: 16px; background: #229ed9; color: #fff; font: 700 14px/1 var(--f-display); } .ibuf__app--incy { background: #06120a; border: 1px solid rgba(194,232,78,.5); color: var(--g2); }
.ibuf__clip { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(194,232,78,.14); font-size: 22px; animation: cfloat 2.4s ease-in-out infinite; }
.ibuf__arr { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--g2), transparent); background-size: 200% 100%; animation: arrfl 1.4s linear infinite; }
@keyframes arrfl { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ibuf__set { padding: 16px; border-radius: 18px; background: #1c1c1e; }
.ibuf__k { font: 500 12px/1 var(--f-mono); color: rgba(235,235,245,.5); margin-bottom: 10px; }
.ibuf__opt { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #2c2c2e; font-size: 14.5px; } .ibuf__opt b { color: #0a84ff; font-weight: 600; white-space: nowrap; }
.ibuf__note { margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }

/* профиль */
.iprof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iprof__i { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.iprof__i > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--grad); color: #04130a; font: 800 16px/1 var(--f-display); }
.iprof__i h3 { font-size: 18px; } .iprof__i p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* платформы Apple */
.iapls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.iapl { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); color: inherit; transition: transform .5s var(--ease), border-color .4s; }
.iapl:hover { transform: translateY(-5px); border-color: rgba(194,232,78,.5); }
.iapl__i { position: relative; height: 54px; margin-bottom: 4px; }
.iapl__i::before { content: ''; position: absolute; left: 0; bottom: 0; border: 3px solid var(--g2); border-radius: 8px; }
.iapl__i--iphone::before { width: 26px; height: 50px; border-radius: 8px; } .iapl__i--ipad::before { width: 40px; height: 52px; border-radius: 6px; }
.iapl__i--mac::before { width: 62px; height: 38px; border-radius: 5px 5px 0 0; bottom: 8px; } .iapl__i--mac::after { content: ''; position: absolute; left: -6px; bottom: 2px; width: 74px; height: 6px; border-radius: 0 0 6px 6px; background: var(--g2); }
.iapl__i--atv::before { width: 56px; height: 18px; border-radius: 6px; bottom: 6px; } .iapl__i--vision::before { width: 60px; height: 26px; border-radius: 16px; bottom: 10px; }
.iapl h3 { font-size: 18px; } .iapl__r { font: 600 12.5px/1.3 var(--f-mono); color: var(--g2) !important; } .iapl p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.iapl__go { margin-top: auto; color: var(--g2); font-weight: 600; font-size: 14px; }

@media (max-width: 1080px) { .iapls { grid-template-columns: repeat(3, 1fr); } .iprof { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .iapls, .iprof { grid-template-columns: 1fr; } .isim__dev { --w: 260px; } .idet__qr { display: none; } .idet__row .btn { flex: 1 1 100%; } .isim__island { top: 15px; } }
.ip-sb { position: absolute; z-index: 4; left: 9cqw; right: 8cqw; top: 4.6cqw; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.ip-sb b { font: 600 4.4cqw/1 -apple-system, var(--f-display); color: #fff; }
.ip-sb i { width: 17cqw; height: 3.6cqw; background:
  linear-gradient(#fff, #fff) 0 100% / 1cqw 40% no-repeat, linear-gradient(#fff, #fff) 1.6cqw 100% / 1cqw 60% no-repeat, linear-gradient(#fff, #fff) 3.2cqw 100% / 1cqw 80% no-repeat, linear-gradient(#fff, #fff) 4.8cqw 100% / 1cqw 100% no-repeat,
  radial-gradient(circle at 50% 100%, #fff 0 1cqw, transparent 1.1cqw) 7.5cqw 0 / 4cqw 100% no-repeat,
  linear-gradient(#34c759, #34c759) 12.4cqw 50% / 4.2cqw 80% no-repeat; border-radius: 1cqw; }

/* =====================================================================
   /github/
   ===================================================================== */
.ghero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(24px, 4vw, 60px); align-items: center; }
.ghero__grid > * { min-width: 0; }
.ghdet { margin-top: 22px; }
.ghdet__file { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; padding: 14px 16px; border-radius: 18px; background: rgba(0,0,0,.35); border: 1px solid rgba(194,232,78,.35); }
.ghdet__ico { flex: none; width: 40px; height: 48px; border-radius: 8px 14px 8px 8px; background: var(--grad); position: relative; }
.ghdet__ico::after { content: '↓'; position: absolute; inset: 0; display: grid; place-items: center; color: #04130a; font: 900 20px/1 var(--f-display); }
.ghdet__file code { display: block; font: 600 15px/1.3 var(--f-mono); color: var(--g2); word-break: break-all; } .ghdet__file span { font-size: 13px; color: var(--ink-faint); }
.ghero .toc { margin-top: 22px; }

/* макет GitHub */
.gh { display: grid; gap: 12px; }
.gh__win { position: relative; border-radius: 18px; overflow: hidden; background: #0d1117; border: 1px solid #30363d; box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 30px 80px -40px rgba(34,209,96,.4); font-family: -apple-system, 'Segoe UI', var(--f-body); color: #e6edf3; }
.gh__top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #010409; border-bottom: 1px solid #30363d; }
.gh__logo { width: 22px; height: 22px; border-radius: 50%; background: #e6edf3; position: relative; }
.gh__logo::after { content: ''; position: absolute; left: 6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #010409; box-shadow: 0 7px 0 -3px #010409; }
.gh__url { flex: 1; padding: 6px 10px; border-radius: 8px; background: #161b22; border: 1px solid #30363d; font: 12px/1.2 var(--f-mono); color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gh__url b { color: #e6edf3; font-weight: 600; } .gh__url span { color: #3fb950; }
.gh__vp { position: relative; height: 360px; overflow: hidden; }
.gh__pg { position: absolute; inset: 0; padding: 18px; opacity: 0; transform: translateX(30px); transition: opacity .45s, transform .55s var(--ease); pointer-events: none; overflow: hidden; }
.gh[data-pg="repo"] [data-pg="repo"], .gh[data-pg="list"] [data-pg="list"], .gh[data-pg="assets"] [data-pg="assets"] { opacity: 1; transform: none; }
.gh__title { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #4493f8; } .gh__title b { color: #4493f8; } .gh__book { width: 14px; height: 16px; border: 2px solid #8b949e; border-radius: 2px; }
.gh__pub { padding: 1px 8px; border-radius: 99px; border: 1px solid #30363d; font-size: 11px; color: #8b949e; }
.gh__stats { display: flex; gap: 8px; margin: 12px 0 14px; } .gh__stats span { padding: 4px 10px; border-radius: 6px; background: #21262d; border: 1px solid #30363d; font-size: 12px; }
.gh__cols { display: grid; grid-template-columns: 1fr 170px; gap: 16px; }
.gh__files { border: 1px solid #30363d; border-radius: 8px; overflow: hidden; } .gh__files > p { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #21262d; font-size: 13px; }
.gh__fi { flex: none; width: 11px; height: 14px; border: 1.5px solid #8b949e; border-radius: 2px; }
.gh__readme { display: grid; gap: 7px; padding: 14px 12px; } .gh__readme b { font-size: 20px; } .gh__readme span { font-size: 12.5px; color: #8b949e; } .gh__readme i { height: 7px; border-radius: 4px; background: #21262d; } .gh__readme i:nth-child(4) { width: 70%; } .gh__readme i:nth-child(5) { width: 45%; }
.gh__sh { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .gh__sd { font-size: 12.5px; color: #8b949e; margin-bottom: 16px; }
.gh__rel { display: inline-flex; gap: 6px; align-items: center; padding: 2px 4px; margin-left: -4px; border-radius: 6px; } .gh__rel span { padding: 0 7px; border-radius: 99px; background: #30363d; font-size: 11px; }
.gh__tag { font-size: 12.5px; } .gh__tag span, .gh__h em, .gh__rl em { margin-left: 6px; padding: 1px 7px; border-radius: 99px; border: 1px solid #238636; color: #3fb950; font: normal 600 11px/1.4 inherit; }
.gh__h { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.gh__rl { display: grid; gap: 3px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid #30363d; border-radius: 8px; } .gh__rl b { font-size: 15px; color: #4493f8; } .gh__rl span { font-size: 12px; color: #8b949e; }
.gh__note { font-size: 13px; color: #8b949e; margin: -6px 0 14px; }
.gh__as { display: inline-block; padding: 4px 6px; margin-left: -6px; border-radius: 6px; font-weight: 600; font-size: 15px; } .gh__as span { padding: 0 7px; border-radius: 99px; background: #30363d; font-size: 11px; }
.gh__al { margin-top: 8px; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; transition: transform .6s var(--ease); }
.gh__al li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #21262d; font-size: 12.5px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .4s var(--ease), background .4s; transition-delay: calc(var(--i, 0) * 40ms); }
.gh__al li b { flex: 1; font-weight: 500; color: #4493f8; font-family: var(--f-mono); font-size: 12px; } .gh__al li i { font-style: normal; color: #8b949e; font-size: 11.5px; }
.gh.is-open .gh__al li { opacity: 1; transform: none; }
.gh__al li.is-me { background: rgba(63,185,80,.16); box-shadow: inset 3px 0 0 #3fb950; } .gh__al li.is-me b { color: #fff; }
.gh__al li.is-me::after { content: 'ваш файл'; padding: 1px 7px; border-radius: 99px; background: #3fb950; color: #04130a; font: 700 10.5px/1.5 var(--f-display); }
.gh [data-click].is-hover { background: rgba(56,139,253,.15); outline: 1px solid rgba(56,139,253,.5); }
.gh__cur { position: absolute; z-index: 5; left: 0; top: 0; width: 20px; height: 20px; transform: translate(var(--cx, 70%), var(--cy, 70%)); transition: transform .9s cubic-bezier(.6,0,.2,1); pointer-events: none; }
.gh__cur::before { content: ''; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 36% 54%, 64% 54%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.gh__cur::after { content: ''; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--g2); opacity: 0; }
.gh__cur.is-click::after { animation: ghclk .5s ease-out; }
@keyframes ghclk { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.gh__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.gh__steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: gs; }
.gh__steps li { counter-increment: gs; padding: 7px 11px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair-soft); font: 500 12px/1 var(--f-display); color: var(--ink-faint); transition: all .3s; }
.gh__steps li::before { content: counter(gs) ' · '; } .gh__steps li.is-on { background: var(--grad); color: #04130a; border-color: transparent; } .gh__steps li.is-done { color: var(--g2); }
.gh__re { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 600 13px/1 var(--f-display); cursor: pointer; }

.ghcard { display: grid; gap: 14px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.ghcard__k { font: 700 18px/1.2 var(--f-display); }
.ghcard ul { display: grid; gap: 10px; } .ghcard li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--hair-soft); }
.ghcard li b { font-size: 15px; } .ghcard li span { font-size: 13px; color: var(--ink-faint); } .ghcard .btn { justify-self: start; }

/* подбор */
.ghpick { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; padding: clamp(16px, 2.4vw, 26px); border-radius: 30px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); }
.ghpick__q > p { margin-bottom: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ghpick__opts { display: grid; gap: 8px; }
.ghpick__opts button { padding: 13px 16px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 600 15px/1.2 var(--f-display); text-align: left; cursor: pointer; transition: all .3s; }
.ghpick__opts button small { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--f-body); color: var(--ink-faint); }
.ghpick__opts button:hover { border-color: rgba(194,232,78,.5); }
.ghpick__opts button[aria-pressed="true"] { background: linear-gradient(140deg, rgba(194,232,78,.2), rgba(34,209,96,.06)); border-color: rgba(194,232,78,.6); }
.ghpick__res { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(194,232,78,.12), rgba(34,209,96,.03)); border: 1px solid rgba(194,232,78,.45); }
.ghpick__file { display: flex; align-items: center; gap: 14px; }
.ghpick__ext { flex: none; display: grid; place-items: center; width: 60px; height: 72px; border-radius: 10px 20px 10px 10px; background: var(--grad); color: #04130a; font: 800 13px/1 var(--f-mono); }
.ghpick__file code { display: block; font: 600 15px/1.35 var(--f-mono); color: var(--ink); word-break: break-all; } .ghpick__file span { font-size: 13px; color: var(--ink-soft); }
.ghpick__res.is-swap .ghpick__file, .ghpick__res.is-swap .ghpick__how { animation: stpin .45s var(--ease); }
.ghpick__how { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .ghpick__how code { padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.35); color: var(--g2); font: 500 .88em var(--f-mono); }
.ghpick__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ghtbl code { font: 500 13px var(--f-mono); color: var(--g2); } .ghtbl tr.is-cur td { background: rgba(194,232,78,.14); }

/* таймлайн */
.ghtl { position: relative; height: 150px; margin-bottom: 26px; }
.ghtl__line { position: absolute; left: 0; right: 0; top: 56px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ghtl__line i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 1.6s var(--ease); } .ghtl.is-in .ghtl__line i { width: 100%; }
.ghtl__i { position: absolute; left: var(--x); top: 0; display: grid; gap: 4px; justify-items: start; width: 22%; opacity: 0; transform: translateY(10px); transition: all .6s var(--ease); }
.ghtl.is-in .ghtl__i { opacity: 1; transform: none; } .ghtl.is-in .ghtl__i:nth-child(3) { transition-delay: .3s; } .ghtl.is-in .ghtl__i:nth-child(4) { transition-delay: .6s; } .ghtl.is-in .ghtl__i:nth-child(5) { transition-delay: .9s; }
.ghtl__d { font: 600 12px/1 var(--f-mono); color: var(--ink-faint); margin-bottom: 28px; }
.ghtl__i::before { content: ''; position: absolute; left: 0; top: 50px; width: 16px; height: 16px; border-radius: 50%; background: #0b1a10; border: 3px solid var(--g2); }
.ghtl__i b { font: 700 16px/1.2 var(--f-display); } .ghtl__i span:not(.ghtl__d) { font-size: 13px; color: var(--ink-faint); }
.ghtl__i--hot::before { background: var(--g2); box-shadow: 0 0 0 6px rgba(194,232,78,.2); } .ghtl__i--and::before { border-color: #3ddc84; }
.ghtl__lt { padding: 2px 8px; border-radius: 99px; border: 1px solid #238636; color: #3fb950 !important; font: 600 11px/1.4 var(--f-display) !important; }

/* установка */
.ghinst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ghinst__i { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.ghinst__i h3 { font-size: 19px; } .ghinst__i p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .ghinst__i code { padding: 1px 6px; border-radius: 6px; background: rgba(194,232,78,.12); color: var(--g2); font: 500 .85em var(--f-mono); } .ghinst__i a { margin-top: auto; color: var(--g2); font-weight: 600; }
.ghcmd__h { margin: 26px 0 12px; font: 700 17px/1.3 var(--f-display); }
.ghcmds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.ghcmd { padding: 16px; border-radius: 20px; background: #050906; border: 1px solid var(--hair); }
.ghcmd__k { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: 13.5px; color: var(--ink-faint); } .ghcmd__k b { font: 700 14px var(--f-mono); color: var(--g2); }
.ghcmd__line { display: flex; align-items: center; gap: 10px; } .ghcmd__line code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 13.5px/1.5 var(--f-mono); color: #d8f5c8; scrollbar-width: none; }
.ghcmd__line code::before { content: '$ '; color: var(--g2); }
.ghcmd__cp { flex: none; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--ink); font: 600 12px/1 var(--f-display); cursor: pointer; } .ghcmd__cp.is-ok { background: var(--grad); color: #04130a; border-color: transparent; }

@media (max-width: 1080px) { .ghpick { grid-template-columns: 1fr 1fr; } .ghpick__res { grid-column: 1 / -1; } .ghinst { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ghero__grid { grid-template-columns: 1fr; } .ghcmds { grid-template-columns: 1fr; } .ghtl { height: auto; display: grid; gap: 14px; padding-left: 26px; } .ghtl__line { left: 7px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; } .ghtl__line i { width: 100% !important; height: 0; transition: height 1.6s var(--ease); } .ghtl.is-in .ghtl__line i { height: 100%; } .ghtl__i { position: relative; left: 0; width: auto; } .ghtl__d { margin-bottom: 2px; } .ghtl__i::before { left: -26px; top: 2px; } }
@media (max-width: 640px) { .ghpick { grid-template-columns: 1fr; } .gh__vp { height: 330px; } .gh__cols { grid-template-columns: 1fr; } .gh__files { display: none; } }
.gh em { font-family: inherit !important; font-style: normal !important; }
.gh [data-pg="assets"] { overflow-y: auto; scrollbar-width: none; } .gh [data-pg="assets"]::-webkit-scrollbar { display: none; }
@media (min-width: 901px) { .ghtl { height: 170px; } .ghtl__d { margin-bottom: 46px; } }
#repo .prose h3 { margin-top: 22px; font-size: 20px; } #repo .tsteps code { font: 500 .85em var(--f-mono); color: var(--g2); word-break: break-all; }

/* =====================================================================
   /nastroyka/servery/ — пинг-радар
   ===================================================================== */
.rad { display: grid; gap: 14px; padding: 18px; border-radius: 30px; background: radial-gradient(90% 70% at 30% 40%, rgba(34,209,96,.12), transparent 70%), rgba(0,0,0,.35); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.5); }
.rad__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .rad__top b { font: 800 17px/1 var(--f-display); } .rad__top span { font: 500 12px/1 var(--f-mono); color: var(--ink-faint); }
.rad__go { margin-left: auto; padding: 10px 16px; border-radius: 99px; border: 0; background: var(--grad); color: #04130a; font: 800 14px/1 var(--f-display); cursor: pointer; box-shadow: 0 8px 24px -8px rgba(34,209,96,.8); transition: transform .2s; }
.rad__go:active { transform: scale(.95); } .rad.is-run .rad__go { opacity: .6; pointer-events: none; }
.rad__body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; align-items: center; }
.rad__list b, .rad__list i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rad__list > *, .rad__ol > * { min-width: 0; } .rad__s > div, .rad__auto > div { min-width: 0; }
.rad__scope { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(34,209,96,.08), rgba(0,0,0,.4) 70%); overflow: hidden; }
.rad__ring { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--s)); height: calc(100% * var(--s)); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(194,232,78,.18); }
.rad__scope::before, .rad__scope::after { content: ''; position: absolute; background: rgba(194,232,78,.12); } .rad__scope::before { left: 50%; top: 0; bottom: 0; width: 1px; } .rad__scope::after { top: 50%; left: 0; right: 0; height: 1px; }
.rad__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(194,232,78,.45), rgba(194,232,78,0) 60deg, transparent 360deg); animation: radsw 3.2s linear infinite; }
.rad.is-run .rad__sweep { animation-duration: 1.1s; }
@keyframes radsw { to { transform: rotate(360deg); } }
.rad__me { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grad); color: #04130a; font: 800 11px/1 var(--f-display); box-shadow: 0 0 0 6px rgba(194,232,78,.15), 0 0 20px rgba(194,232,78,.6); }
.rad__b { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -50cqw)) rotate(calc(var(--a) * -1)); }
.rad__scope { container-type: inline-size; }
.rad__b i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #0b1a10; border: 2px solid var(--g2); transition: all .4s; }
.rad__b.is-hit i { background: var(--g2); box-shadow: 0 0 0 6px rgba(194,232,78,.2), 0 0 14px var(--g2); }
.rad__b.is-best i { background: #fff; border-color: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 0 22px #fff; animation: radp 1.2s ease-in-out infinite; }
@keyframes radp { 50% { transform: scale(1.25); } }
.rad__beams { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.rad__beams line { stroke: var(--g2); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 4 5; animation: radbm .5s linear infinite; opacity: .8; }
@keyframes radbm { to { stroke-dashoffset: -18; } }
.rad__list { display: grid; gap: 6px; align-content: start; }
.rad__auto, .rad__s { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.rad__auto { border-color: rgba(194,232,78,.45); background: rgba(194,232,78,.08); }
.rad__f { font-size: 17px; } .rad__list b { display: block; font: 600 13.5px/1.2 var(--f-display); } .rad__list i { font-style: normal; font: 500 10.5px/1.2 var(--f-mono); color: #c2e84e; opacity: .7; }
.rad__tag { padding: 4px 8px; border-radius: 99px; background: var(--grad); color: #04130a; font: 700 10.5px/1 var(--f-mono); text-transform: uppercase; }
.rad__ol { position: relative; display: grid; gap: 6px; }
.rad__s { position: relative; transition: transform .6s var(--ease), background .4s, border-color .4s; }
.rad__p { font: 600 12.5px/1 var(--f-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rad__p::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--c, #5ee38c); vertical-align: 1px; }
.rad__s.is-wait .rad__p { color: var(--ink-faint); } .rad__s.is-wait .rad__p::before { background: rgba(255,255,255,.2); animation: blink .6s steps(2) infinite; }
.rad__s.is-best { border-color: rgba(255,255,255,.5); background: rgba(194,232,78,.12); }
.rad__s.is-best i::before { content: '★ быстрее всех · '; color: #fff; font-weight: 700; }
.rad__sort { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); }
.rad__sort button { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 12px/1 var(--f-display); cursor: pointer; } .rad__sort button[aria-pressed="true"] { background: rgba(194,232,78,.18); border-color: rgba(194,232,78,.5); color: var(--ink); }

/* поток провайдер → incy → интернет */
.flowx { display: grid; grid-template-columns: 1fr 1.1fr 1fr 1.1fr 1fr; align-items: center; gap: 8px; }
.flowx__n { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); text-align: center; }
.flowx__n > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(194,232,78,.12); font-size: 26px; }
.flowx__n--incy { border-color: rgba(194,232,78,.5); background: linear-gradient(160deg, rgba(194,232,78,.14), rgba(34,209,96,.03)); } .flowx__n--incy > span { background: #06120a; border: 1px solid rgba(194,232,78,.5); color: var(--g2); font: 900 13px/1 var(--f-display); }
.flowx__n b { font: 700 17px/1.2 var(--f-display); } .flowx__n p { font-size: 13.5px; color: var(--ink-soft); }
.flowx__l { position: relative; display: grid; justify-items: center; gap: 8px; }
.flowx__l i { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.flowx__l i::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--g2), transparent); animation: flowxa 1.6s linear infinite; }
.flowx__l:nth-of-type(4) i::after { animation-delay: .8s; }
@keyframes flowxa { to { left: 100%; } }
.flowx__l em { font: 500 12px/1.2 var(--f-mono); font-style: normal; color: var(--g2); text-align: center; }

/* шкала пинга */
.pscale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.pscale__i { display: grid; gap: 4px; padding: 18px; border-radius: 20px; border: 1px solid var(--hair-soft); border-top: 4px solid var(--c); background: rgba(255,255,255,.03); }
.pscale__i--p1 { --c: #22d160; } .pscale__i--p2 { --c: #c2e84e; } .pscale__i--p3 { --c: #f0c35a; } .pscale__i--p4 { --c: #ff5d6c; }
.pscale__i b { font: 800 18px/1.1 var(--f-display); color: var(--c); } .pscale__i span { font: 700 15px/1.2 var(--f-display); } .pscale__i i { font-style: normal; font-size: 13px; color: var(--ink-faint); }

/* российские */
.sgru { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.sgru__r { display: grid; grid-template-columns: 1fr 60px auto; gap: 10px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); font-size: 14.5px; }
.sgru__r b { font: 700 13px/1 var(--f-mono); color: var(--g2); }
.sgru__a { position: relative; height: 2px; background: linear-gradient(90deg, transparent, var(--g2), transparent); background-size: 200% 100%; animation: arrfl 1.4s linear infinite; }
.sgru__a--d { background-image: linear-gradient(90deg, transparent, #7cc7ff, transparent); } .sgru__r:first-child b { color: #7cc7ff; }

@media (max-width: 1080px) { .flowx { grid-template-columns: 1fr; } .flowx__l i { width: 3px; height: 40px; } .flowx__l i::after { left: 0; top: -30%; width: 100%; height: 30%; background: linear-gradient(180deg, transparent, var(--g2), transparent); animation-name: flowxv; } .pscale { grid-template-columns: 1fr 1fr; } }
@keyframes flowxv { to { top: 100%; } }
@media (max-width: 640px) { .rad__body { grid-template-columns: 1fr; } .rad__scope { max-width: 260px; justify-self: center; width: 100%; } .rad__go { margin-left: 0; width: 100%; }  }
.rad__cap { font: 500 11.5px/1.4 var(--f-mono); color: var(--ink-faint); text-align: center; }

/* =====================================================================
   /obhod-belyh-spiskov/
   ===================================================================== */
.bssim { display: grid; gap: 14px; padding: 20px; border-radius: 30px; background: rgba(0,0,0,.35); border: 1px solid var(--hair); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); transition: border-color .5s, box-shadow .5s; }
.bssim[data-mode="wl"] { border-color: rgba(240,195,90,.45); } .bssim[data-mode="off"] { border-color: rgba(255,93,108,.45); box-shadow: 0 40px 100px -40px rgba(255,93,108,.35); }
.bssim[data-incy="1"][data-mode="wl"] { border-color: rgba(194,232,78,.55); box-shadow: 0 40px 100px -40px rgba(34,209,96,.6); }
.bssim__top { display: flex; align-items: center; justify-content: space-between; } .bssim__top b { font: 800 17px/1 var(--f-display); }
.bssim__sig { display: flex; align-items: flex-end; gap: 3px; height: 16px; } .bssim__sig i { width: 4px; border-radius: 1px; background: var(--g2); transition: background .4s, opacity .4s; }
.bssim__sig i:nth-child(1) { height: 25%; } .bssim__sig i:nth-child(2) { height: 50%; } .bssim__sig i:nth-child(3) { height: 75%; } .bssim__sig i:nth-child(4) { height: 100%; }
.bssim__sig em { margin-left: 6px; font: 700 11px/1 var(--f-mono); font-style: normal; color: var(--ink-soft); }
.bssim[data-mode="wl"] .bssim__sig i:nth-child(n+3) { opacity: .25; } .bssim[data-mode="off"] .bssim__sig i { opacity: .2; background: #ff5d6c; }
.bssim__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.04); }
.bssim__modes button { padding: 10px 6px; border-radius: 12px; border: 0; background: none; color: var(--ink-soft); font: 700 13.5px/1 var(--f-display); cursor: pointer; transition: all .3s; }
.bssim__modes button[aria-pressed="true"] { background: var(--grad); color: #04130a; }
.bssim[data-mode="wl"] .bssim__modes button[aria-pressed="true"] { background: linear-gradient(100deg, #f0c35a, #e8d27a); } .bssim[data-mode="off"] .bssim__modes button[aria-pressed="true"] { background: #ff5d6c; color: #fff; }
.bssim__net { position: relative; height: 54px; border-radius: 14px; background: rgba(255,255,255,.025); overflow: hidden; }
.bssim__wall { position: absolute; left: 62%; top: 0; bottom: 0; width: 14px; display: grid; grid-template-rows: repeat(6, 1fr); gap: 2px; opacity: 0; transform: scaleY(.2); transition: opacity .4s, transform .5s var(--ease); }
.bssim__wall i { background: #f0c35a; border-radius: 2px; } .bssim[data-mode="off"] .bssim__wall i { background: #ff5d6c; }
.bssim[data-mode="wl"] .bssim__wall, .bssim[data-mode="off"] .bssim__wall { opacity: 1; transform: none; }
.bssim__gate { position: absolute; left: 20px; top: 4px; font: 600 9.5px/1 var(--f-mono); color: #f0c35a; white-space: nowrap; opacity: 0; transition: opacity .4s; } .bssim[data-mode="wl"] .bssim__gate { opacity: 1; }
.bssim__pk { position: absolute; left: -12px; width: 10px; height: 10px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); animation: bspk 2s linear infinite; }
.bssim__pk--1 { top: 10px; } .bssim__pk--2 { top: 22px; animation-delay: .5s; } .bssim__pk--3 { top: 34px; animation-delay: 1s; background: #7cc7ff; box-shadow: 0 0 10px #7cc7ff; } .bssim__pk--4 { top: 16px; animation-delay: 1.5s; }
@keyframes bspk { to { left: 105%; } }
.bssim[data-mode="wl"] .bssim__pk { animation-name: bspkb; } .bssim[data-mode="wl"] .bssim__pk--3 { animation-name: bspk; }
.bssim[data-mode="wl"][data-incy="1"] .bssim__pk { animation-name: bspk; }
@keyframes bspkb { 0% { left: -12px; opacity: 1; } 55% { left: 59%; opacity: 1; } 62% { left: 56%; opacity: 0; } 100% { left: 56%; opacity: 0; } }
.bssim[data-mode="off"] .bssim__pk { animation-name: bspkb; background: #ff5d6c; box-shadow: 0 0 10px #ff5d6c; }
.bsapps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bsapp { position: relative; display: grid; justify-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); transition: opacity .4s, filter .4s, border-color .4s, transform .4s var(--ease); }
.bsapp__i { font-size: 22px; } .bsapp b { font: 600 11.5px/1.1 var(--f-display); text-align: center; }
.bsapp__s { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 10px/1 var(--f-display); font-style: normal; }
.bsapp.is-on .bsapp__s { background: #22d160; color: #04130a; } .bsapp.is-on .bsapp__s::before { content: '✓'; }
.bsapp.is-off { opacity: .35; filter: grayscale(1); transform: scale(.95); } .bsapp.is-off .bsapp__s { background: #ff5d6c; color: #fff; } .bsapp.is-off .bsapp__s::before { content: '✕'; }
.bsapp.is-via { border-color: rgba(194,232,78,.55); } .bsapp.is-via .bsapp__s { background: var(--g2); }
.bssim__incy { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(194,232,78,.06); border: 1px solid rgba(194,232,78,.3); cursor: pointer; position: relative; }
.bssim__incy input { position: absolute; opacity: 0; pointer-events: none; }
.bssim__sw { position: relative; flex: none; width: 46px; height: 26px; border-radius: 26px; background: rgba(255,255,255,.15); transition: background .4s; }
.bssim__sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease); }
.bssim__incy input:checked + .bssim__sw { background: var(--grad); } .bssim__incy input:checked + .bssim__sw i { transform: translateX(20px); }
.bssim__incy input:focus-visible + .bssim__sw { outline: 2px solid var(--g2); outline-offset: 2px; }
.bssim__incy b { display: block; font: 700 14.5px/1.2 var(--f-display); } .bssim__incy small { font-size: 12.5px; color: var(--ink-faint); }
.bssim__st { min-height: 40px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.bstl { position: relative; display: grid; gap: 14px; padding-left: 24px; }
.bstl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(194,232,78,.2), var(--g2)); }
.bstl__i { position: relative; display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); }
.bstl__i::before { content: ''; position: absolute; left: -24px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #0b1a10; border: 2px solid var(--g2); }
.bstl__i span { font: 600 12px/1 var(--f-mono); color: var(--g2); } .bstl__i b { font: 700 15px/1.3 var(--f-display); }
.bstl__i--hot { border-color: rgba(240,195,90,.45); background: rgba(240,195,90,.06); } .bstl__i--hot::before { background: #f0c35a; border-color: #f0c35a; } .bstl__i--hot span { color: #f0c35a; }
.bschart { position: relative; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); }
.bschart__t { margin-bottom: 16px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.bsbars { display: grid; gap: 10px; }
.bsbar { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 56px; gap: 14px; align-items: center; padding: 4px 6px; border-radius: 10px; outline: none; cursor: default; }
.bsbar:hover, .bsbar:focus-visible { background: rgba(255,255,255,.04); }
.bsbar__n { font-size: 14px; color: var(--ink-soft); } .bsbar b { font: 700 15px/1 var(--f-mono); color: var(--ink); text-align: right; }
.bsbar__t { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); }
.bsbar__t i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; background: var(--g2); transition: width 1.2s var(--ease); }
.bsbar.is-in .bsbar__t i { width: calc(var(--v) * 100%); }
.bschart__tip { min-height: 22px; margin-top: 12px; font: 500 13px/1.4 var(--f-mono); color: var(--g2); }
.bschart__tbl { margin-top: 8px; } .bschart__tbl summary { cursor: pointer; font-size: 13.5px; color: var(--ink-faint); }
.bschart__tbl table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; } .bschart__tbl td, .bschart__tbl th { padding: 8px 10px; border-bottom: 1px solid var(--hair-soft); text-align: left; } .bschart__tbl th { color: var(--ink-faint); font: 500 12px var(--f-mono); }
.bswhy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bswhy__i { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.bswhy__i span { font-size: 28px; } .bswhy__i h3 { font-size: 18px; } .bswhy__i p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.bsterms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bsterm { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.bsterm dt { margin-bottom: 8px; font: 800 18px/1.2 var(--f-display); color: var(--g2); } .bsterm dd { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 1080px) { .bswhy { grid-template-columns: 1fr 1fr; } .bsterms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bswhy, .bsterms { grid-template-columns: 1fr; } .bsapps { gap: 5px; } .bsapp { padding: 9px 2px 8px; } .bsapp__i { font-size: 18px; } .bsapp b { font-size: 9.5px; } .bsbar { grid-template-columns: 1fr 48px; } .bsbar__n { grid-column: 1 / -1; font-size: 13px; } .bsbar__t { grid-column: 1; } }
.bssim__auto { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(194,232,78,.08); border: 1px solid rgba(194,232,78,.25); font: 600 12.5px/1.35 var(--f-display); color: var(--ink); }
.bssim__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5d6c; box-shadow: 0 0 8px #ff5d6c; animation: blink 1.2s steps(2) infinite; }
.bssim.is-paused .bssim__dot { background: var(--ink-faint); box-shadow: none; animation: none; }
.bssim__bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .bssim__bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.bssim .is-tap { position: relative; animation: bstap .6s var(--ease); }
.bssim .is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; pointer-events: none; }
.bssim__incy.is-tap::after { left: 36px; }
@keyframes bstap { 40% { transform: scale(.94); } }
@keyframes bsring { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* =====================================================================
   /ne-rabotaet/ — доктор Incy
   ===================================================================== */
.ndoc { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 70% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.4); border: 1px solid rgba(194,232,78,.32); box-shadow: 0 40px 100px -40px rgba(34,209,96,.5); min-height: 470px; align-content: start; overflow: hidden; }
.ndoc__top { display: flex; align-items: center; gap: 10px; } .ndoc__top b { font: 800 17px/1 var(--f-display); }
.ndoc__pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--g2); }
.ndoc__pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--g2); animation: cwave 1.6s ease-out infinite; }
.ndoc__auto { margin-left: auto; padding: 5px 10px; border-radius: 99px; background: rgba(255,93,108,.14); color: #ff8a95; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.ndoc.is-user .ndoc__auto { background: rgba(194,232,78,.14); color: var(--g2); }
.ndoc__bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .ndoc__bar i { display: block; height: 100%; width: var(--p, 10%); background: var(--grad); transition: width .6s var(--ease); }
.ndoc__st { display: grid; gap: 12px; animation: stpin .5s var(--ease); }
.ndoc__q { display: grid; gap: 6px; font: 800 clamp(20px, 2vw, 25px)/1.15 var(--f-display); } .ndoc__q span { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g2); }
.ndoc__opts { display: grid; gap: 8px; } .ndoc__opts--1 { grid-template-columns: 1fr 1fr; }
.ndoc__opts button { position: relative; display: flex; align-items: center; gap: 10px; padding: 15px 16px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 600 15px/1.25 var(--f-display); text-align: left; cursor: pointer; transition: all .3s; }
.ndoc__opts--1 button { flex-direction: column; align-items: flex-start; min-height: 96px; } .ndoc__opts button span { font-size: 22px; }
.ndoc__opts button:hover { border-color: rgba(194,232,78,.55); background: rgba(194,232,78,.06); transform: translateY(-2px); }
.ndoc__opts button.is-tap { border-color: var(--g2); background: rgba(194,232,78,.16); animation: bstap .6s var(--ease); }
.ndoc__opts button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.ndoc__back { justify-self: start; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--hair); background: none; color: var(--ink-soft); font: 600 13px/1 var(--f-display); cursor: pointer; }
.ndoc__scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; overflow: hidden; } .ndoc__scan i { position: absolute; left: 0; right: 0; height: 80px; top: -80px; background: linear-gradient(180deg, transparent, rgba(194,232,78,.18), transparent); }
.ndoc__res .ndoc__scan i { animation: ndscan 1s var(--ease) 1; }
@keyframes ndscan { to { top: 100%; } }
.ndoc__rh { display: flex; align-items: center; gap: 14px; }
.ndoc__ri { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--grad); font-size: 26px; box-shadow: 0 10px 30px -10px rgba(34,209,96,.8); }
.ndoc__tag { display: inline-block; margin-bottom: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(194,232,78,.14); color: var(--g2); font: 700 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.ndoc__rt { font: 800 20px/1.2 var(--f-display); }
.ndoc__steps { display: grid; gap: 7px; counter-reset: nds; }
.ndoc__steps li { counter-increment: nds; position: relative; padding: 10px 12px 10px 42px; border-radius: 14px; background: rgba(255,255,255,.035); font-size: 14px; line-height: 1.45; color: var(--ink-soft); animation: stpin .45s var(--ease) both; }
.ndoc__steps li::before { content: counter(nds); position: absolute; left: 10px; top: 9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(194,232,78,.16); color: var(--g2); font: 800 12px/1 var(--f-display); }
.ndoc__steps li:nth-child(2) { animation-delay: .08s; } .ndoc__steps li:nth-child(3) { animation-delay: .16s; } .ndoc__steps li:nth-child(4) { animation-delay: .24s; } .ndoc__steps li:nth-child(5) { animation-delay: .32s; }
.ndoc__links { display: flex; flex-wrap: wrap; gap: 8px; } .ndoc__links a { padding: 8px 12px; border-radius: 99px; border: 1px solid rgba(194,232,78,.35); color: var(--g2); font: 600 13px/1 var(--f-display); }
.ndoc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: linear-gradient(110deg, rgba(34,209,96,.18), rgba(194,232,78,.06)); border: 1px solid rgba(194,232,78,.45); } .ndoc__cta span { font: 700 14px/1.3 var(--f-display); }

.ncauses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ncause { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); transition: transform .5s var(--ease), border-color .4s; }
.ncause:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.45); }
.ncause > span { font-size: 28px; } .ncause h3 { font-size: 20px; } .ncause p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .ncause a { margin-top: auto; color: var(--g2); font-weight: 600; font-size: 14.5px; }

.nplat { padding: clamp(14px, 2.4vw, 24px); border-radius: 28px; background: rgba(0,0,0,.25); border: 1px solid var(--hair); }
.nplat__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.nplat__tabs button { padding: 11px 18px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 14.5px/1 var(--f-display); cursor: pointer; } .nplat__tabs button[aria-selected="true"] { background: var(--grad); color: #04130a; border-color: transparent; }
.nplat__p { animation: stpin .45s var(--ease); } .nplat__p ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.nplat__p li { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--hair-soft); font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .nplat__p a { color: var(--g2); font-weight: 600; }

.nstat { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.nstat__r { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.035); font-size: 14.5px; }
.nstat__r b { font: 700 12.5px/1 var(--f-mono); text-transform: uppercase; } .nstat__r .is-ok { color: #5ee38c; } .nstat__r .is-bad { color: #ff8a95; }
.nstat__v { padding: 14px 16px; border-radius: 14px; background: rgba(240,195,90,.1); border: 1px solid rgba(240,195,90,.35); color: #f0c35a; font: 600 14px/1.4 var(--f-display); }

.nerrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.nerr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); color: inherit; transition: border-color .3s, transform .4s var(--ease); }
.nerr:hover { border-color: rgba(255,93,108,.5); transform: translateY(-3px); }
.nerr code { font: 700 14.5px/1.3 var(--f-mono); color: #ff8a95; } .nerr span { grid-column: 1; font-size: 13.5px; color: var(--ink-faint); } .nerr i { grid-row: 1 / 3; grid-column: 2; font-style: normal; color: var(--g2); font-size: 18px; }

@media (max-width: 1080px) { .ncauses, .nerrs { grid-template-columns: 1fr 1fr; } .nplat__p ul { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ncauses, .nerrs { grid-template-columns: 1fr; } .ndoc__opts--1 { grid-template-columns: 1fr 1fr; } .ndoc__opts--1 button { min-height: 84px; font-size: 13.5px; } .ndoc { min-height: 0; } }
.ndoc__st[hidden], .ndoc__cta[hidden] { display: none !important; }
.nrhero .ghero__grid { align-items: start; } .nrhero .ghero__lead { padding-top: 10px; }
#prilozheniya .kways { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { #prilozheniya .kways { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { #prilozheniya .kways { grid-template-columns: 1fr; } }
@keyframes ndscan { 0% { top: -80px; opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } } .ndoc__scan i { opacity: 0; }
.nplat__h { margin-bottom: 12px; font-size: 19px; }
.nsc summary span { margin-right: 6px; } .nsc ol { display: grid; gap: 6px; margin: 4px 0 10px; padding-left: 20px; list-style: decimal; color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .nsc details p a { color: var(--g2); }

/* ================= /oshibki/ ================= */
.odec { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(255,93,108,.14), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(34,209,96,.12), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); align-content: start; overflow: hidden; min-width: 0; }
.odec__top { display: flex; align-items: center; gap: 10px; } .odec__top b { font: 800 17px/1 var(--f-display); }
.odec__auto { margin-left: auto; padding: 5px 10px; border-radius: 99px; background: rgba(255,93,108,.14); color: #ff8a95; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.is-user .odec__auto, .odec__auto.is-user { background: rgba(194,232,78,.14); color: var(--g2); }
.odec__in { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 58px; border-radius: 18px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(194,232,78,.4); box-shadow: inset 0 0 0 4px rgba(194,232,78,.05); transition: border-color .3s, box-shadow .3s; }
.odec__in:focus-within { border-color: var(--g2); box-shadow: 0 0 0 4px rgba(194,232,78,.15); }
.odec__in > span { font-size: 22px; color: var(--g2); }
.odec__in input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 600 17px/1 var(--f-mono); outline: none; }
.odec__in input::placeholder { color: var(--ink-faint); font-family: var(--f-display); font-weight: 500; }
.odec__caret { position: absolute; top: 50%; width: 2px; height: 24px; margin-top: -12px; background: var(--g2); opacity: 0; pointer-events: none; }
.odec.is-typing .odec__caret { opacity: 1; animation: ocaret 1s steps(1) infinite; }
@keyframes ocaret { 50% { opacity: 0; } }
.odec__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.odec__chips button { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 12.5px/1 var(--f-mono); cursor: pointer; transition: all .25s; }
.odec__chips button:hover, .odec__chips button.is-on { border-color: rgba(255,93,108,.6); color: #ffb3ba; background: rgba(255,93,108,.1); }
.ochain { display: flex; align-items: flex-start; padding: 16px 6px 10px; border-radius: 20px; background: rgba(255,255,255,.025); border: 1px solid var(--hair-soft); }
.ochain__n { flex: none; display: grid; justify-items: center; gap: 6px; width: 52px; transition: opacity .4s; }
.ochain__n b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: rgba(255,255,255,.06); border: 1px solid var(--hair); font-size: 20px; font-weight: 400; transition: all .4s var(--ease); }
.ochain__n small { font: 600 10.5px/1.1 var(--f-display); color: var(--ink-faint); text-align: center; }
.ochain__n.is-ok b { background: rgba(34,209,96,.16); border-color: rgba(34,209,96,.55); }
.ochain__n.is-fail b { background: rgba(255,93,108,.2); border-color: #ff5d6c; box-shadow: 0 0 0 6px rgba(255,93,108,.12), 0 10px 30px -6px rgba(255,93,108,.6); animation: ofail 1.4s ease-in-out infinite; }
.ochain__n.is-fail b::after { content: '✕'; position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #ff5d6c; color: #fff; font: 800 10px/1 var(--f-display); }
.ochain__n.is-fail small { color: #ff8a95; }
.ochain__n.is-off { opacity: .35; }
@keyframes ofail { 50% { box-shadow: 0 0 0 11px rgba(255,93,108,.05), 0 10px 30px -6px rgba(255,93,108,.6); } }
.ochain__l { position: relative; flex: 1; height: 2px; margin-top: 22px; background: rgba(255,255,255,.12); overflow: hidden; min-width: 6px; }
.ochain__l i { position: absolute; top: -2px; left: -30%; width: 30%; height: 6px; border-radius: 6px; background: var(--g2); opacity: 0; }
.ochain__l.is-ok { background: rgba(34,209,96,.5); } .ochain__l.is-ok i { opacity: 1; animation: oflow 1.2s linear infinite; }
.ochain__l.is-br { background: repeating-linear-gradient(90deg, #ff5d6c 0 5px, transparent 5px 9px); overflow: visible; }
.ochain__l.is-br i { left: 50%; top: -9px; width: 14px; height: 20px; margin-left: -7px; border-radius: 0; background: none; opacity: 1; }
.ochain__l.is-br i::before { content: '⚡'; font-size: 14px; position: absolute; left: 0; top: -1px; animation: ozap .8s ease-in-out infinite; }
@keyframes oflow { to { left: 100%; } } @keyframes ozap { 50% { transform: scale(1.35); opacity: .6; } }
.odec__out { display: grid; gap: 10px; min-height: 270px; align-content: start; }
.odec__hint { color: var(--ink-faint); font-size: 14.5px; }
.odec__res { display: grid; gap: 10px; animation: stpin .45s var(--ease); }
.odec__rh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.odec__code { padding: 5px 10px; border-radius: 9px; background: rgba(255,93,108,.14); border: 1px solid rgba(255,93,108,.4); color: #ff8a95; font: 700 13px/1.2 var(--f-mono); }
.odec__who { padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--ink-soft); font: 600 12px/1.2 var(--f-display); } .odec__who b { color: var(--g2); }
.odec__t { font: 800 21px/1.2 var(--f-display); }
.odec__m { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.odec__out .ndoc__steps li { padding-top: 8px; padding-bottom: 8px; font-size: 13.8px; }
.odec__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.odec__f a.odec__more { color: var(--g2); font: 600 14px/1 var(--f-display); }
.odec__f .btn { padding: 11px 16px; font-size: 14px; }
.odec__nf { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .odec__nf a { color: var(--g2); }

.otbl td:first-child { white-space: nowrap; } .otbl td a code { font: 600 13.5px/1.3 var(--f-mono); color: #ff8a95; } .otbl td a:hover code { color: #ffc2c8; }
.otbl td:nth-child(3) { color: var(--g2); font-size: 14px; } .otbl td:nth-child(4) { color: var(--ink-soft); font-size: 14px; }
.otime, .ogeo, .oclock { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.otime__k, .oclock__k { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g2); margin-bottom: 4px; }
.otime__r { display: grid; gap: 4px; padding: 13px 15px; border-radius: 16px; background: rgba(255,255,255,.035); }
.otime__r span { font: 700 15px/1.3 var(--f-display); } .otime__r b { font-weight: 500; font-size: 14px; line-height: 1.4; }
.otime__r b.is-ok { color: var(--g2); } .otime__r b.is-mid { color: #ffd27a; } .otime__r b.is-bad { color: #ff8a95; } .otime__r a { color: inherit; text-decoration: underline; }
.oping { display: grid; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(0,0,0,.35); border: 1px solid var(--hair); }
.oping__top { display: flex; align-items: center; gap: 10px; } .oping__top b { font: 800 16px/1.2 var(--f-display); }
.oping__m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); }
.oping__m button { position: relative; padding: 10px 6px; border-radius: 10px; border: 0; background: none; color: var(--ink-soft); font: 700 13px/1 var(--f-display); cursor: pointer; transition: all .3s; }
.oping__m button[aria-pressed="true"] { background: var(--grad); color: #04140a; }
.oping__m button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.oping__l { display: grid; gap: 6px; }
.oping__l li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); }
.oping__l li span { font-size: 18px; } .oping__l li b { font: 600 15px/1 var(--f-display); }
.oping__l li i { font: 700 15px/1 var(--f-mono); font-style: normal; color: var(--g2); min-width: 64px; text-align: right; }
.oping__l li i.is-na { color: #ff8a95; } .oping__l li.is-flash { animation: oflash .5s var(--ease); }
@keyframes oflash { 40% { background: rgba(194,232,78,.12); } }
.oping__note { min-height: 64px; padding: 12px 14px; border-radius: 14px; background: rgba(194,232,78,.07); color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .oping__note b { color: var(--ink); }
.oping__cap, .owin__cap { color: var(--ink-faint); font: 500 12px/1.4 var(--f-mono); }
.oclock__t { font: 800 clamp(38px, 5vw, 54px)/1 var(--f-mono); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oclock__z { color: var(--ink-soft); font-size: 14px; }
.ochk { display: grid; gap: 6px; margin-top: 6px; } .ochk li { position: relative; padding: 9px 12px 9px 36px; border-radius: 12px; background: rgba(255,255,255,.035); font-size: 14px; color: var(--ink-soft); }
.ochk li::before { content: '✓'; position: absolute; left: 12px; top: 8px; color: var(--g2); font-weight: 800; }
.ohttp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.ohc { position: relative; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); overflow: hidden; scroll-margin-top: 90px; transition: transform .4s var(--ease), border-color .3s; }
.ohc:hover { transform: translateY(-4px); border-color: var(--hair); }
.ohc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--g2)); }
.ohc--r { --c: #ff5d6c; } .ohc--o { --c: #ffb547; } .ohc--b { --c: #6cb8ff; } .ohc--k { --c: var(--g2); background: linear-gradient(140deg, rgba(194,232,78,.1), rgba(255,255,255,.02)); }
.ohc__n { font: 800 46px/1 var(--f-mono); letter-spacing: -.04em; color: var(--c); text-shadow: 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); }
.ohc--k .ohc__n { font-size: 26px; padding: 8px 0; }
.ohc h3 { font: 700 18px/1.25 var(--f-display); } .ohc p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.ohc ul { display: grid; gap: 5px; } .ohc li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-soft); } .ohc li::before { content: '→'; position: absolute; left: 0; color: var(--c); }
.ostage { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 24px 0 18px; }
.ostage span { padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); font: 700 14px/1 var(--f-display); white-space: nowrap; }
.ostage i { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(194,232,78,.6), rgba(194,232,78,.1)); position: relative; overflow: hidden; } .ostage i::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: var(--g2); animation: oflow 1.6s linear infinite; }
.ocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; } .ocards--3 { margin-top: 0; }
.ocard { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); scroll-margin-top: 90px; }
.ocard:target, .ohc:target { border-color: var(--g2); box-shadow: 0 0 0 4px rgba(194,232,78,.15); }
.ocard > code { justify-self: start; padding: 5px 10px; border-radius: 9px; background: rgba(255,93,108,.12); border: 1px solid rgba(255,93,108,.35); color: #ff8a95; font: 700 13px/1.2 var(--f-mono); }
.ocard h3 { font: 700 18px/1.25 var(--f-display); } .ocard p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.ocard ol { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; font-size: 14px; color: var(--ink-soft); line-height: 1.45; } .ocard ol li::marker { color: var(--g2); font-weight: 700; }
.ocard--cta { background: linear-gradient(140deg, rgba(34,209,96,.18), rgba(194,232,78,.05)); border-color: rgba(194,232,78,.45); }
.ocard--cta > code { background: rgba(194,232,78,.14); border-color: rgba(194,232,78,.4); color: var(--g2); } .ocard--cta .btn { justify-self: start; margin-top: 4px; }
.owin { max-width: 420px; justify-self: center; width: 100%; border-radius: 14px; background: #1c1f22; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,93,108,.15); overflow: hidden; animation: owin 4s var(--ease) infinite; }
@keyframes owin { 0%, 100% { transform: translateY(0); } 6% { transform: translateX(-6px); } 9% { transform: translateX(6px); } 12% { transform: translateX(-3px); } 15% { transform: none; } }
.owin__bar { display: flex; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,.04); font: 600 13px/1 var(--f-display); color: var(--ink-soft); } .owin__bar i { font-style: normal; }
.owin__b { display: flex; align-items: center; gap: 14px; padding: 26px 20px; } .owin__b p { font: 600 16px/1.35 var(--f-display); }
.owin__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ff5d6c; color: #fff; font: 800 22px/1 var(--f-display); }
.owin__f { display: flex; justify-content: flex-end; padding: 12px 16px; background: rgba(255,255,255,.03); } .owin__f span { padding: 7px 26px; border-radius: 6px; background: #3a7bd5; font: 600 13px/1 var(--f-display); }
.owin__cap { padding: 0 16px 12px; }
.osteps { display: grid; gap: 8px; margin: 14px 0; counter-reset: ost; }
.osteps li { counter-increment: ost; position: relative; padding: 12px 14px 12px 48px; border-radius: 14px; background: rgba(255,255,255,.035); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.osteps li::before { content: counter(ost); position: absolute; left: 12px; top: 11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); } .osteps b { color: var(--ink); }
.onet { display: grid; gap: 14px; padding: 30px 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.onet__line { position: relative; height: 10px; border-radius: 10px; background: rgba(255,255,255,.06); overflow: hidden; }
.onet__line i { position: absolute; top: 2px; left: 0; width: 18px; height: 6px; border-radius: 6px; background: var(--g2); animation: onet 3s linear infinite; } .onet__line i:nth-child(2) { animation-delay: .5s; } .onet__line i:nth-child(3) { animation-delay: 1s; }
@keyframes onet { 0% { left: 0; opacity: 1; } 55% { left: 52%; opacity: 1; } 58% { opacity: 0; } 100% { left: 52%; opacity: 0; } }
.onet__l { display: flex; justify-content: space-between; align-items: center; font: 700 15px/1 var(--f-display); } .onet__l b { color: #ff8a95; font-size: 22px; animation: ozap 1s ease-in-out infinite; }
.onet p { color: var(--ink-faint); font: 500 13px/1.4 var(--f-mono); text-align: center; }
.ogeo__tl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; margin: 8px 0; }
.ogeo__tl::before { content: ''; position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.ogeo__tl li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.ogeo__tl li b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0b140d; border: 2px solid var(--g2); font: 700 11.5px/1 var(--f-mono); animation: ogeo 5s infinite; }
.ogeo__tl li:nth-child(2) b { animation-delay: 1s; } .ogeo__tl li:nth-child(3) b { animation-delay: 2s; } .ogeo__tl li:nth-child(4) b { animation-delay: 3s; } .ogeo__tl li:nth-child(5) b { animation-delay: 4s; }
@keyframes ogeo { 0%, 18%, 100% { background: #0b140d; color: var(--ink); } 6% { background: var(--g2); color: #04140a; } }
.ogeo__tl li span { font-size: 11px; color: var(--ink-faint); }
.ogeo__n { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.onote { padding: 12px 14px; border-radius: 14px; background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.3); color: #ffd9a0; font-size: 14.5px; line-height: 1.5; }
.orep { display: grid; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(0,0,0,.35); border: 1px solid rgba(194,232,78,.3); min-width: 0; }
.orep label { display: grid; gap: 6px; font: 600 12.5px/1 var(--f-display); color: var(--ink-faint); min-width: 0; }
.orep select, .orep input:not([type="checkbox"]) { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--ink); font: 500 15px/1 var(--f-display); }
.orep select option { background: #0d1510; }
.orep__g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.orep__cs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .orep__cs > span { width: 100%; font: 600 12.5px/1 var(--f-display); color: var(--ink-faint); }
.orep__c { display: inline-flex !important; cursor: pointer; } .orep__c input { position: absolute; opacity: 0; pointer-events: none; }
.orep__c span { padding: 8px 11px; border-radius: 99px; border: 1px solid var(--hair); color: var(--ink-soft); font: 600 13px/1 var(--f-display); transition: all .25s; }
.orep__c input:checked + span { border-color: var(--g2); background: rgba(194,232,78,.14); color: var(--g2); } .orep__c input:focus-visible + span { outline: 2px solid var(--g2); }
.orep__out { margin: 0; padding: 14px 16px; border-radius: 16px; background: #050a06; border: 1px solid var(--hair-soft); color: #d8f5c8; font: 500 13.5px/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word; min-height: 150px; }
.orep .btn { justify-self: start; }
@media (max-width: 1080px) { .ohttp, .ocards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .ohttp, .ocards { grid-template-columns: 1fr; } .orep__g { grid-template-columns: 1fr; }
  .odec { padding: 16px; } .ochain { padding: 14px 2px 8px; } .ochain__n { width: 46px; } .ochain__n b { width: 38px; height: 38px; font-size: 17px; border-radius: 13px; } .ochain__l { margin-top: 19px; }
  .odec__out { min-height: 0; } .ostage span { padding: 8px 10px; font-size: 12.5px; } .ostage { gap: 6px; }
  .otbl table, .otbl tbody, .otbl tr, .otbl td { display: block; width: 100%; } .otbl thead { display: none; }
  .otbl tr { padding: 14px 16px; border-bottom: 1px solid var(--hair-soft); } .otbl td { padding: 2px 0; border: 0; white-space: normal !important; }
  .otbl td:nth-child(2) { font-weight: 600; } .otbl td:nth-child(3)::before { content: 'Где: '; color: var(--ink-faint); } .otbl td:nth-child(4)::before { content: '→ '; color: var(--g2); }
}
.oplat { grid-template-columns: 1fr 1fr !important; } .oplat li b { display: block; margin-bottom: 4px; color: var(--ink); }
.okto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.okto__c { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: 26px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); }
.okto__c--p { background: linear-gradient(140deg, rgba(34,209,96,.14), rgba(0,0,0,.25)); border-color: rgba(194,232,78,.4); }
.okto__k { font: 800 20px/1.2 var(--f-display); } .okto__c ul { display: grid; gap: 8px; } .okto__c li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: 15px; line-height: 1.45; } .okto__c li::before { content: '•'; position: absolute; left: 6px; color: var(--g2); font-weight: 800; }
.okto__c .btn { justify-self: start; }
@media (max-width: 760px) { .okto, .oplat { grid-template-columns: 1fr !important; } }

/* ================= /podpiska/oplata-prodlenie/ ================= */
.opt { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(34,209,96,.16), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.32); box-shadow: 0 40px 100px -40px rgba(34,209,96,.5); min-width: 0; overflow: hidden; }
.opt__top { display: flex; align-items: center; gap: 10px; } .opt__top b { font: 800 17px/1 var(--f-display); }
.opt__m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.05); }
.opt__m button { position: relative; padding: 11px 6px; border-radius: 12px; border: 0; background: none; color: var(--ink-soft); font: 700 14px/1 var(--f-display); cursor: pointer; transition: all .3s; }
.opt__m button[aria-pressed="true"] { background: var(--grad); color: #04140a; }
.opt__m button.is-tap::after, .opt__dev button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.opt__dev { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--f-display); color: var(--ink-soft); }
.opt__dev button { position: relative; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--hair); background: rgba(255,255,255,.05); color: var(--ink); font: 700 18px/1 var(--f-display); cursor: pointer; }
.opt__dev > b { min-width: 18px; text-align: center; font: 800 18px/1 var(--f-display); color: var(--ink); }
.opt__sum { margin-left: auto; } .opt__sum b { font: 800 22px/1 var(--f-display); color: var(--g2); }
.opt__stage { position: relative; height: 200px; border-radius: 22px; background: radial-gradient(60% 80% at 70% 50%, rgba(34,209,96,.1), transparent 70%), rgba(255,255,255,.025); border: 1px solid var(--hair-soft); overflow: hidden; }
.opt__pos { position: absolute; right: 26px; top: 50%; width: 132px; height: 168px; margin-top: -84px; border-radius: 20px; background: linear-gradient(160deg, #26302a, #121814); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -14px rgba(0,0,0,.8); }
.opt__scr { position: absolute; left: 12px; right: 12px; top: 12px; height: 70px; border-radius: 10px; background: #0a1a0f; border: 1px solid rgba(194,232,78,.25); display: grid; align-content: center; justify-items: center; gap: 4px; text-align: center; }
.opt__scr span { font: 600 11px/1.2 var(--f-mono); color: var(--ink-faint); } .opt__scr b { font: 800 20px/1 var(--f-mono); color: var(--g2); } .opt__scr b i { font-style: normal; }
.is-done .opt__scr { background: #0f3a1c; border-color: var(--g2); } .is-done .opt__scr span { color: var(--g2); }
.opt__waves { position: absolute; left: 50%; bottom: 26px; width: 60px; height: 50px; margin-left: -30px; }
.opt__waves i { position: absolute; left: 50%; bottom: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; border: 2px solid rgba(194,232,78,.5); border-color: rgba(194,232,78,.5) transparent transparent; opacity: .35; }
.opt__waves i:nth-child(2) { width: 36px; height: 36px; margin-left: -18px; bottom: -8px; } .opt__waves i:nth-child(3) { width: 52px; height: 52px; margin-left: -26px; bottom: -16px; }
.is-pay .opt__waves i { animation: owave 1s ease-in-out infinite; } .is-pay .opt__waves i:nth-child(2) { animation-delay: .15s; } .is-pay .opt__waves i:nth-child(3) { animation-delay: .3s; }
@keyframes owave { 50% { opacity: 1; border-top-color: var(--g2); } }
.opt__card { position: absolute; left: 22px; top: 50%; width: 150px; height: 94px; margin-top: -47px; border-radius: 14px; background: linear-gradient(135deg, #22d160, #c2e84e 60%, #7bd64a); box-shadow: 0 20px 40px -12px rgba(34,209,96,.6); transform: rotate(-8deg); transition: transform 1s var(--ease), opacity .4s; }
.opt__chip { position: absolute; left: 16px; top: 22px; width: 28px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #f6e7a6, #c9a74a); }
.opt__num { position: absolute; left: 16px; bottom: 14px; font: 700 13px/1 var(--f-mono); color: #07210f; letter-spacing: .08em; }
.is-pay .opt__card { transform: translate(72px, 30px) rotate(-2deg) scale(.88); }
.opt__qr, .opt__coin { position: absolute; left: 22px; top: 50%; width: 150px; margin-top: -78px; display: grid; justify-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.opt__qr p, .opt__coin p { font: 500 11px/1.3 var(--f-mono); color: var(--ink-faint); text-align: center; }
.opt__qrg { position: relative; width: 120px; height: 120px; border-radius: 12px; background-color: #fff; background-image: linear-gradient(90deg, #08140b 50%, transparent 50%), linear-gradient(#08140b 50%, transparent 50%); background-size: 14px 14px, 10px 10px; box-shadow: inset 0 0 0 8px #fff; }
.opt__qrg::before, .opt__qrg::after { content: ''; position: absolute; width: 30px; height: 30px; border: 6px solid #08140b; background: #fff; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 12px #08140b; }
.opt__qrg::before { left: 8px; top: 8px; } .opt__qrg::after { right: 8px; bottom: 8px; }
.opt__scan { position: absolute; left: 10px; right: 10px; top: 0; height: 3px; background: var(--g2); box-shadow: 0 0 14px var(--g2); opacity: 0; }
.is-pay .opt__scan { opacity: 1; animation: oscan 1.2s ease-in-out infinite alternate; } @keyframes oscan { to { top: 118px; } }
.opt__coin > span { display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), linear-gradient(135deg, #c2e84e, #22d160); color: #04140a; font: 800 44px/1 var(--f-display); box-shadow: 0 16px 40px -10px rgba(34,209,96,.7); }
.is-pay .opt__coin > span { animation: ocoin 1.2s ease-in-out infinite; } @keyframes ocoin { 50% { transform: rotateY(180deg); } }
.opt__conf { display: flex; gap: 6px; } .opt__conf i { width: 22px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); }
.is-pay .opt__conf i { animation: oconf 2.4s steps(1) forwards; } .is-pay .opt__conf i:nth-child(2) { animation-delay: .6s; } .is-pay .opt__conf i:nth-child(3) { animation-delay: 1.2s; } .is-done .opt__conf i { background: var(--g2); }
@keyframes oconf { to { background: var(--g2); } }
.opt__stage[data-stage="sbp"] .opt__card, .opt__stage[data-stage="crypto"] .opt__card { opacity: 0; }
.opt__stage[data-stage="sbp"] .opt__qr, .opt__stage[data-stage="crypto"] .opt__coin { opacity: 1; }
.opt__rc { position: relative; display: grid; gap: 0; padding: 16px 18px 14px; border-radius: 6px 6px 16px 16px; background: #f4f6ef; color: #18201a; font: 500 13px/1.2 var(--f-mono); clip-path: inset(0 0 100% 0); transition: clip-path 1.4s steps(12); }
.opt__rc::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: radial-gradient(circle at 5px 0, transparent 5px, #f4f6ef 5px) 0 0 / 10px 6px repeat-x; }
.opt__rc.is-print { clip-path: inset(0 0 0 0); }
.opt__rc p { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,.15); } .opt__rc p span { color: #4b564e; } .opt__rc p i { font-style: normal; }
.opt__rc .opt__rh { justify-content: center; padding-bottom: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b766e; }
.opt__rc p.is-hl b { color: #0d8a3a; }
.opt__rc .opt__rt { border-bottom: 0; padding-top: 10px; font: 800 16px/1 var(--f-mono); } .opt__rc .opt__rt span { color: #18201a; }
.opt__key { margin-top: 6px; padding: 10px 12px !important; border: 0 !important; border-radius: 10px; background: #0b1a10; align-items: center; } .opt__key span { color: var(--g2) !important; font-weight: 700; }
.opt__key a { padding: 7px 12px; border-radius: 99px; background: var(--grad); color: #04140a; font: 800 12.5px/1 var(--f-display); }
.opt__rc.is-print .opt__key a { animation: okey 1.4s ease-in-out 1.4s infinite; } @keyframes okey { 50% { box-shadow: 0 0 0 8px rgba(194,232,78,.25); } }
.opt__cap { color: var(--ink-faint); font: 500 11.5px/1.4 var(--f-mono); }
.oflow { display: flex; align-items: center; gap: 8px; margin: 28px 0 24px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); overflow-x: auto; }
.oflow__n { flex: none; display: grid; justify-items: center; gap: 6px; width: 130px; text-align: center; }
.oflow__n span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid var(--hair); font-size: 26px; }
.oflow__n--hl span { background: var(--grad); border-color: transparent; box-shadow: 0 14px 30px -10px rgba(34,209,96,.7); }
.oflow__n b { font: 700 15px/1 var(--f-display); } .oflow__n small { color: var(--ink-faint); font-size: 12.5px; line-height: 1.3; }
.oflow__a { position: relative; flex: 1; min-width: 40px; height: 2px; margin-bottom: 40px; background: rgba(194,232,78,.3); }
.oflow__a em { position: absolute; top: -11px; left: 0; font-style: normal; font-size: 16px; animation: ofl 2.4s linear infinite; } @keyframes ofl { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 16px); opacity: 0; } }
.ocomp { gap: 30px; }
.opms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.opm { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); transition: transform .4s var(--ease), border-color .3s; }
.opm:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.45); }
.opm__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #04140a; font-size: 24px; font-weight: 800; }
.opm h3 { font: 700 19px/1.2 var(--f-display); } .opm p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.opm ol { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: var(--ink-soft); font-size: 14px; line-height: 1.45; } .opm ol li::marker { color: var(--g2); font-weight: 700; }
.opms__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.olife { display: grid; gap: 12px; padding: 22px; border-radius: 28px; background: rgba(0,0,0,.35); border: 1px solid var(--hair); min-width: 0; }
.olife__top { display: flex; align-items: center; gap: 10px; } .olife__top b { font: 800 16px/1 var(--f-display); }
.olife__ph { display: grid; gap: 8px; padding: 16px; border-radius: 26px; background: #0a0f0b; border: 6px solid #1d231f; }
.olife__card { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,209,96,.22), rgba(194,232,78,.06)); border: 1px solid rgba(194,232,78,.3); transition: filter .4s, opacity .4s; }
.olife__h { display: flex; align-items: center; gap: 10px; } .olife__h b { display: block; font: 700 15px/1.1 var(--f-display); } .olife__h small { color: var(--ink-faint); font-size: 12px; }
.olife__logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #04140a; font: 800 17px/1 var(--f-display); }
.olife__d { margin-left: auto; font: 800 16px/1 var(--f-mono); color: var(--g2); transition: color .3s; }
.olife__bar { height: 5px; margin-top: 12px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; } .olife__bar i { display: block; height: 100%; width: 100%; background: var(--grad); transition: width .2s, background .3s; }
.olife__ban { max-height: 0; overflow: hidden; padding: 0 12px; border-radius: 12px; background: rgba(255,181,71,.14); color: #ffd27a; font: 600 13px/1.3 var(--f-display); transition: max-height .4s var(--ease), padding .4s; }
.olife.is-warn .olife__ban { max-height: 60px; padding: 10px 12px; } .olife.is-warn .olife__d { color: #ffd27a; } .olife.is-warn .olife__bar i { background: #ffb547; }
.olife.is-exp .olife__card { filter: grayscale(1); opacity: .6; } .olife.is-exp .olife__d { color: #ff8a95; }
.olife__sv { display: grid; gap: 5px; } .olife__sv li { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 11px; background: rgba(255,255,255,.04); font: 600 13px/1 var(--f-display); } .olife__sv b { font: 700 13px/1 var(--f-mono); color: var(--g2); }
.olife.is-exp .olife__sv b { color: #ff8a95; }
.olife.is-new .olife__card { animation: onew .8s var(--ease); } @keyframes onew { 30% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(194,232,78,.25); } }
.olife input[type=range] { width: 100%; accent-color: var(--g2); }
.olife__tl { display: grid; grid-template-columns: 27fr 3fr 2fr 2fr; font: 500 10.5px/1.2 var(--f-mono); color: var(--ink-faint); } .olife__tl span:nth-child(2) { color: #ffd27a; } .olife__tl span:nth-child(3) { color: #ff8a95; } .olife__tl span:nth-child(4) { color: var(--g2); }
.olife__note { min-height: 48px; padding: 11px 13px; border-radius: 14px; background: rgba(194,232,78,.07); color: var(--ink-soft); font-size: 14px; line-height: 1.45; } .olife__note b { color: var(--ink); }
.oswap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 30px 24px; border-radius: 28px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.oswap__k { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); text-align: center; }
.oswap__k span { font-size: 32px; } .oswap__k b { font: 700 15px/1.2 var(--f-display); } .oswap__k small { font-size: 12.5px; color: var(--ink-faint); }
.oswap__k--old { animation: oold 4s ease-in-out infinite; } @keyframes oold { 0%, 30% { opacity: 1; filter: none; } 50%, 100% { opacity: .4; filter: grayscale(1); } }
.oswap__k--new { border-color: rgba(194,232,78,.5); background: rgba(194,232,78,.1); animation: onewk 4s ease-in-out infinite; } @keyframes onewk { 0%, 40% { transform: scale(.9); opacity: .5; } 60%, 100% { transform: none; opacity: 1; } }
.oswap__arr { font-size: 26px; color: var(--g2); }
.oswap__ph { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 18px; background: #0a0f0b; border: 1px solid var(--hair); }
.oswap__ph span { padding: 6px 10px; border-radius: 9px; background: var(--grad); color: #04140a; font: 800 13px/1 var(--f-display); } .oswap__ph i { font-style: normal; color: var(--g2); font: 700 14px/1 var(--f-display); animation: onewk 4s ease-in-out infinite; }
.olist { display: grid; gap: 8px; margin-top: 10px; } .olist li { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .olist b { color: var(--ink); }
.osw { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 28px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.osw__k { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--g2); margin-bottom: 4px; }
.osw__r { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); }
.osw__r span { font: 700 15.5px/1.2 var(--f-display); } .osw__r small { grid-column: 1; color: var(--ink-faint); font-size: 13px; }
.osw__t { grid-row: 1 / 3; grid-column: 2; position: relative; width: 52px; height: 30px; border-radius: 30px; background: rgba(255,255,255,.12); }
.osw__t::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #cfd6cf; animation: otog 5s var(--ease) infinite; }
.osw__r:nth-child(3) .osw__t::after { animation-delay: .6s; } .osw__r:nth-child(4) .osw__t::after { animation-delay: 1.2s; }
@keyframes otog { 0%, 10%, 30%, 100% { transform: none; } 18% { transform: translateX(9px); } 22% { transform: translateX(4px); } }
.osw__n { color: var(--ink-faint); font: 500 12.5px/1.4 var(--f-mono); }
.obal { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 34px 24px; border-radius: 28px; background: radial-gradient(70% 70% at 50% 0%, rgba(194,232,78,.12), transparent 70%), rgba(0,0,0,.3); border: 1px solid var(--hair); }
.obal__k { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.obal__v { font: 800 64px/1 var(--f-display); color: var(--ink-faint); letter-spacing: -.04em; } .obal__s { max-width: 260px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; }
.ousl th { width: 42%; font: 600 14px/1.3 var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; } .ousl td { color: var(--ink) !important; font-size: 15px; }
.opbs { margin-bottom: 20px; } .opb { display: grid; gap: 6px; } .opb b { font: 700 17px/1.2 var(--f-display); } .opb p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1080px) { .opms { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .opms, .opbs { grid-template-columns: 1fr; } .opt { padding: 16px; } .opt__stage { height: 180px; }
  .opt__pos { right: 12px; width: 112px; height: 150px; margin-top: -75px; } .opt__card { left: 12px; width: 128px; height: 80px; margin-top: -40px; }
  .is-pay .opt__card { transform: translate(52px, 26px) rotate(-2deg) scale(.82); } .opt__qr, .opt__coin { left: 8px; width: 140px; } .opt__qrg { width: 104px; height: 104px; } @keyframes oscan { to { top: 102px; } }
  .oflow { padding: 18px 12px; } .oflow__n { width: 92px; } .oflow__n span { width: 48px; height: 48px; font-size: 21px; border-radius: 16px; } .oflow__a { min-width: 24px; }
  .oswap { padding: 22px 14px; gap: 8px; } .opt__dev { flex-wrap: wrap; }
}
.opt__rc { clip-path: none; max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transition: max-height 1.4s var(--ease), padding .4s, opacity .3s; }
.opt__rc.is-print { max-height: 460px; padding-top: 16px; padding-bottom: 14px; opacity: 1; overflow: visible; }
.opt__rc p[hidden] { display: none; }
.opt__stage { transition: height .5s var(--ease); }
.olife__d { white-space: nowrap; }
@media (max-width: 640px) { .oflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: visible; } .oflow__a { display: none; } .oflow__n { width: auto; } .oflow__n small { font-size: 11px; } }
.osafe .kway h3 { font-size: 17px; }
@media (max-width: 640px) { #god .ptbl th, #god .ptbl td { padding: 12px 10px; white-space: nowrap; font-size: 14px; } }

/* ================= /lichnyy-kabinet/ ================= */
.ksp { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 70% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; }
.ksp__top { display: flex; align-items: center; gap: 10px; } .ksp__top b { font: 800 17px/1 var(--f-display); }
.ksp__ph { position: relative; justify-self: center; width: min(100%, 300px); aspect-ratio: 9 / 15; border-radius: 38px; padding: 10px; background: #1a1f1c; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); overflow: hidden; --x: 50%; --y: 40%; --r: 70px; }
.ksp__scr { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 10px; border-radius: 30px; background: linear-gradient(180deg, #0c1a10, #070c08); overflow: hidden; }
.ksp__bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0; } .ksp__bar b { font: 800 15px/1 var(--f-display); letter-spacing: .08em; } .ksp__gear { font-size: 17px; color: var(--ink-soft); }
.ksp__sub { display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 16px; background: linear-gradient(135deg, rgba(34,209,96,.25), rgba(194,232,78,.06)); border: 1px solid rgba(194,232,78,.3); }
.ksp__sub b { display: block; font: 700 13px/1.1 var(--f-display); } .ksp__sub small { font-size: 10.5px; color: var(--ink-faint); }
.ksp__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #04140a; font: 800 14px/1 var(--f-display); }
.ksp__btns { display: flex; gap: 5px; margin-left: auto; } .ksp__btns i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255,255,255,.08); font-style: normal; font-size: 12px; }
.ksp__btns i.ksp__tg { background: #2aa3df; color: #fff; }
.ksp__go { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; } .ksp__go span { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--grad); color: #04140a; font-size: 40px; box-shadow: 0 0 0 12px rgba(34,209,96,.12), 0 20px 40px -10px rgba(34,209,96,.6); }
.ksp__go small { color: var(--g2); font: 700 12px/1 var(--f-display); }
.ksp__sv { display: grid; gap: 5px; } .ksp__sv li { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font: 600 11.5px/1 var(--f-display); } .ksp__sv b { color: var(--g2); font: 700 11.5px/1 var(--f-mono); }
.ksp__tabs { display: flex; justify-content: space-around; padding: 8px 0 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: 16px; color: var(--ink-soft); }
.ksp__dark { position: absolute; inset: 0; border-radius: 38px; background: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0, transparent calc(var(--r) - 2px), rgba(2,6,3,.86) var(--r)); pointer-events: none; transition: --x .9s, --y .9s; }
.ksp__ring { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; border: 2px solid rgba(255,255,255,.5); box-shadow: 0 0 30px rgba(194,232,78,.25); pointer-events: none; }
.ksp.is-no .ksp__ring { border-color: #ff8a95; } .ksp.is-yes .ksp__ring { border-color: var(--g2); box-shadow: 0 0 0 6px rgba(194,232,78,.2), 0 0 40px rgba(194,232,78,.5); animation: kspy 1.2s ease-in-out infinite; }
@keyframes kspy { 50% { box-shadow: 0 0 0 12px rgba(194,232,78,.08), 0 0 40px rgba(194,232,78,.5); } }
.ksp.is-done .ksp__dark { opacity: 0; transition: opacity .8s; } .ksp.is-done .ksp__ring { opacity: 0; }
.ksp__cap { display: grid; gap: 4px; min-height: 66px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); }
.ksp__cap b { font: 700 15px/1.2 var(--f-display); } .ksp__cap span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.ksp.is-no .ksp__cap b { color: #ff8a95; } .ksp.is-yes .ksp__cap b { color: var(--g2); }
.ksp__cta { justify-self: start; opacity: .35; pointer-events: none; transition: opacity .4s; } .ksp.is-done .ksp__cta, .ksp.is-user .ksp__cta { opacity: 1; pointer-events: auto; }
.lkpair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 28px; }
.lkpair__c { padding: 26px; border-radius: 26px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); } .lkpair__c--hl { background: linear-gradient(140deg, rgba(34,209,96,.16), rgba(0,0,0,.25)); border-color: rgba(194,232,78,.4); }
.lkpair__k { margin-bottom: 12px; font: 800 20px/1.2 var(--f-display); } .lkpair__c ul { display: grid; gap: 8px; }
.lkpair__c li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: 15px; } .lkpair__c li::before { content: '✓'; position: absolute; left: 0; color: var(--g2); font-weight: 800; }
.lkpair__c li.is-no::before { content: '✕'; color: #ff8a95; }
.lkpair__x { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: #04140a; font: 800 26px/1 var(--f-display); }
.lkanon { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; margin-top: 18px; padding: 26px; border-radius: 26px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); }
.lkanon h3 { margin: 6px 0 8px; font: 800 22px/1.2 var(--f-display); } .lkanon p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.lkanon__b { display: flex; flex-wrap: wrap; gap: 10px; }
.lkof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.lkof__c { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); transition: transform .4s var(--ease), border-color .3s; }
.lkof__c:hover { transform: translateY(-4px); border-color: rgba(194,232,78,.4); }
.lkof__i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(194,232,78,.12); font-size: 22px; }
.lkof__c h3 { font: 700 18px/1.25 var(--f-display); } .lkof__c p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.lkof__c > a:not(.btn) { color: var(--g2); font: 600 14.5px/1 var(--f-display); } .lkof__c .btn { justify-self: start; }
.ofk { display: grid; gap: 12px; padding: 22px; border-radius: 28px; background: rgba(0,0,0,.35); border: 1px solid var(--hair); min-width: 0; }
.ofk__top { display: flex; align-items: center; gap: 10px; } .ofk__top b { font: 800 16px/1 var(--f-display); }
.ofk__card { position: relative; display: grid; align-content: center; gap: 10px; min-height: 150px; padding: 24px; border-radius: 22px; background: linear-gradient(150deg, #18211b, #0d130f); border: 1px solid var(--hair); overflow: hidden; animation: ofkin .5s var(--ease); }
.ofk__card.is-in { animation: ofkin .5s var(--ease); } @keyframes ofkin { from { transform: translateX(30px) rotate(2deg); opacity: 0; } }
.ofk__n { font: 600 11.5px/1 var(--f-mono); color: var(--ink-faint); } .ofk__card p { font: 700 19px/1.3 var(--f-display); }
.ofk__stamp { position: absolute; right: 16px; bottom: 14px; padding: 6px 12px; border: 3px solid; border-radius: 8px; font: 900 15px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg) scale(1.6); opacity: 0; transition: all .35s cubic-bezier(.2,1.6,.4,1); }
.ofk__stamp.is-on { transform: rotate(-12deg) scale(1); opacity: 1; } .ofk__stamp.is-real { color: var(--g2); } .ofk__stamp.is-fake { color: #ff5d6c; } .ofk__stamp.is-warn { color: #ffb547; }
.ofk__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ofk__btns button { position: relative; padding: 14px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 700 15px/1 var(--f-display); cursor: pointer; transition: all .25s; }
.ofk__btns button[data-a="real"]:hover, .ofk__btns button[data-a="real"].is-tap { border-color: var(--g2); background: rgba(194,232,78,.12); }
.ofk__btns button[data-a="fake"]:hover, .ofk__btns button[data-a="fake"].is-tap { border-color: #ff5d6c; background: rgba(255,93,108,.12); }
.ofk__btns button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.ofk__btns button:disabled { cursor: default; opacity: .6; }
.ofk__ex { min-height: 66px; padding: 12px 14px; border-radius: 14px; background: rgba(194,232,78,.07); color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .ofk__ex:empty { background: none; } .ofk__ex b { color: var(--ink); }
.ofk__foot { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--f-mono); color: var(--ink-faint); }
.ofk__next { padding: 9px 14px; border-radius: 99px; border: 1px solid rgba(194,232,78,.4); background: none; color: var(--g2); font: 700 13px/1 var(--f-display); cursor: pointer; }
.orou { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; margin-top: 28px; padding: 22px; border-radius: 28px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); }
.orou__q { display: grid; gap: 6px; align-content: start; }
.orou__q button { position: relative; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--hair-soft); background: rgba(255,255,255,.03); color: var(--ink-soft); font: 600 14.5px/1.3 var(--f-display); text-align: left; cursor: pointer; transition: all .25s; }
.orou__q button:hover { color: var(--ink); border-color: var(--hair); } .orou__q button.is-on { color: var(--ink); border-color: var(--g2); background: rgba(194,232,78,.1); }
.orou__q button.is-on::after { content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--g2); font-weight: 800; }
.orou__d { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.orou__c { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); opacity: .45; transition: all .4s var(--ease); }
.orou__c span { font-size: 24px; } .orou__c b { font: 700 16px/1.2 var(--f-display); } .orou__c p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; } .orou__c p a { color: var(--g2); }
.orou__c .btn { justify-self: start; padding: 9px 14px; font-size: 13px; }
.orou__c.is-on { opacity: 1; border-color: var(--g2); background: linear-gradient(140deg, rgba(34,209,96,.18), rgba(194,232,78,.04)); box-shadow: 0 20px 50px -24px rgba(34,209,96,.7); transform: scale(1.02); }
.orou__d.is-idle .orou__c { opacity: 1; }
@media (max-width: 1080px) { .lkof { grid-template-columns: 1fr 1fr; } .orou { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .lkpair, .lkanon { grid-template-columns: 1fr; } .lkpair__x { justify-self: center; } }
@media (max-width: 640px) { .lkof, .orou__d { grid-template-columns: 1fr; } .ksp { padding: 16px; } .orou { padding: 14px; } .orou__q { grid-template-columns: 1fr; } }
.lksh td:first-child { white-space: nowrap; } .lksh td a { color: var(--g2); } .lksh td:nth-child(2) { color: var(--ink) !important; }
.lktg { grid-template-columns: 1fr !important; margin-top: 0; }
@media (max-width: 640px) { .lksh table, .lksh tbody, .lksh tr, .lksh td { display: block; width: 100%; } .lksh thead { display: none; } .lksh tr { padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); } .lksh td { padding: 2px 0; border: 0; white-space: normal !important; } .lksh td:nth-child(3)::before { content: '→ '; color: var(--g2); } }

/* ================= /oficialnyy-sayt/ ================= */
.odet { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(34,209,96,.15), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; overflow: hidden; }
.odet__top { display: flex; align-items: center; gap: 10px; } .odet__top b { font: 800 17px/1 var(--f-display); }
.odet__bar { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 99px; background: #f2f5ef; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.odet__lock { font-size: 15px; filter: grayscale(1); opacity: .5; transition: all .3s; } .odet.is-ok .odet__lock { filter: none; opacity: 1; }
.odet.is-bad .odet__lock { filter: none; } .odet__bar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #121812; font: 600 16px/1 var(--f-mono); outline: none; }
.odet__bar input::placeholder { color: #8a948b; font-family: var(--f-display); font-weight: 500; }
.odet__bar .odec__caret { background: #0d8a3a; } .odet.is-typing .odec__caret { opacity: 1; animation: ocaret 1s steps(1) infinite; }
.odet.is-ok .odet__bar { box-shadow: 0 0 0 3px rgba(34,209,96,.6), 0 10px 30px -12px rgba(0,0,0,.6); } .odet.is-warn .odet__bar { box-shadow: 0 0 0 3px rgba(255,181,71,.65), 0 10px 30px -12px rgba(0,0,0,.6); } .odet.is-bad .odet__bar { box-shadow: 0 0 0 3px rgba(255,93,108,.75), 0 10px 30px -12px rgba(0,0,0,.6); animation: obad .5s; }
@keyframes obad { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: none; } }
.odet__chips { display: flex; flex-wrap: wrap; gap: 6px; } .odet__chips button { padding: 7px 11px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 12.5px/1 var(--f-mono); cursor: pointer; } .odet__chips button:hover { color: var(--ink); border-color: rgba(194,232,78,.5); }
.odet__anat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; min-height: 64px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); font: 600 15px/1 var(--f-mono); }
.odet__seg { display: grid; gap: 6px; justify-items: center; animation: stpin .4s var(--ease) both; } .odet__seg span { padding: 6px 4px; border-radius: 6px; word-break: break-all; } .odet__seg small { font: 600 9.5px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); white-space: nowrap; }
.odet__seg--p span { color: var(--ink-faint); } .odet__seg--s span { color: #9cc2ff; background: rgba(108,184,255,.1); } .odet__seg--d span { color: #04140a; background: var(--grad); font-weight: 800; } .odet__seg--x span { color: var(--ink-faint); }
.odet.is-bad .odet__seg--d span { background: #ff5d6c; color: #fff; } .odet.is-warn .odet__seg--d span { background: #ffb547; color: #1e1300; }
.odet__seg mark { background: #ff5d6c; color: #fff; border-radius: 3px; padding: 0 1px; animation: omark 1s ease-in-out infinite; } @keyframes omark { 50% { box-shadow: 0 0 0 3px rgba(255,93,108,.4); } }
.odet__res { min-height: 150px; } .odet__v { display: grid; gap: 8px; padding: 16px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(255,255,255,.035); animation: stpin .45s var(--ease); }
.odet__v b { display: flex; align-items: center; gap: 10px; font: 800 19px/1.2 var(--f-display); } .odet__v b i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-style: normal; font-size: 16px; }
.odet__v p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .odet__v p code { font: 600 13px var(--f-mono); color: var(--ink); }
.odet__v--ok { border-color: rgba(34,209,96,.5); background: rgba(34,209,96,.08); } .odet__v--ok b i { background: var(--grad); color: #04140a; }
.odet__v--warn { border-color: rgba(255,181,71,.5); background: rgba(255,181,71,.07); } .odet__v--warn b i { background: #ffb547; color: #1e1300; }
.odet__v--bad { border-color: rgba(255,93,108,.55); background: rgba(255,93,108,.08); } .odet__v--bad b i { background: #ff5d6c; color: #fff; }
.odet__v--na b i { background: rgba(255,255,255,.1); }
.obrow { border-radius: 20px; overflow: hidden; background: #0b100c; border: 1px solid var(--hair); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.obrow__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: rgba(255,255,255,.05); } .obrow__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.obrow__bar span { flex: 1; margin-left: 10px; padding: 7px 14px; border-radius: 99px; background: rgba(0,0,0,.4); color: var(--ink-faint); font: 500 13px/1 var(--f-mono); } .obrow__bar em { font-style: normal; color: var(--g2); font-weight: 700; }
.obrow__b { display: grid; gap: 14px; padding: 30px 24px; text-align: center; justify-items: center; background: radial-gradient(70% 60% at 50% 0%, rgba(34,209,96,.16), transparent 70%); }
.obrow__logo { font: 900 34px/1 var(--f-display); letter-spacing: .12em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.obrow__t { font: 700 17px/1.3 var(--f-display); max-width: 300px; }
.obrow__pl { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .obrow__pl span { padding: 6px 11px; border-radius: 99px; background: rgba(255,255,255,.06); font: 600 12.5px/1 var(--f-display); }
.obrow__l { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 13.5px; color: var(--g2); } .obrow__l .is-no { color: #ff8a95; }
.obrow__cap { padding: 0 16px 12px; text-align: center; color: var(--ink-faint); font: 500 11.5px/1.4 var(--f-mono); }
.ost { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; margin-top: 28px; padding: 30px; border-radius: 30px; background: radial-gradient(60% 70% at 30% 50%, rgba(34,209,96,.12), transparent 70%), #050906; border: 1px solid var(--hair); overflow: hidden; }
.ost__sky { position: absolute; inset: 0; pointer-events: none; } .ost__sky i { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff7, transparent), radial-gradient(1px 1px at 85% 70%, #fff5, transparent), radial-gradient(1px 1px at 10% 85%, #fff6, transparent); animation: otw 4s ease-in-out infinite; } .ost__sky i:nth-child(2) { transform: scale(1.6) rotate(40deg); animation-delay: 1.3s; } .ost__sky i:nth-child(3) { transform: scale(2.3) rotate(110deg); animation-delay: 2.6s; }
@keyframes otw { 50% { opacity: .3; } }
.ost__map { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; --R: 40%; }
.ost__ring { position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(194,232,78,.25); animation: orot 60s linear infinite; } .ost__ring--2 { inset: 26%; border-style: solid; border-color: rgba(194,232,78,.12); animation-duration: 40s; animation-direction: reverse; }
@keyframes orot { to { transform: rotate(360deg); } }
.ost__c { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; gap: 4px; width: 122px; height: 122px; margin: -61px 0 0 -61px; border-radius: 50%; background: var(--grad); color: #04140a; box-shadow: 0 0 0 14px rgba(34,209,96,.12), 0 0 80px rgba(34,209,96,.55); animation: opul 3s ease-in-out infinite; }
.ost__c span { font: 900 20px/1 var(--f-display); letter-spacing: .1em; } .ost__c b { font: 700 13px/1 var(--f-mono); } @keyframes opul { 50% { box-shadow: 0 0 0 22px rgba(34,209,96,.06), 0 0 100px rgba(34,209,96,.6); } }
.ost__orb { position: absolute; inset: 0; animation: orot 90s linear infinite; }
.ost__n { --a: calc(var(--i) * 51.43deg - 90deg); position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 5px; width: 96px; margin: -30px 0 0 -48px; border: 0; background: none; color: var(--ink); cursor: pointer; transform: rotate(var(--a)) translate(calc(min(460px, 100%) * .4)) rotate(calc(var(--a) * -1)); }
.ost__n > * { animation: orot 90s linear infinite reverse; }
.ost__n span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #121a14; border: 1px solid rgba(194,232,78,.35); font-size: 19px; transition: all .3s; box-shadow: 0 0 18px rgba(194,232,78,.15); }
.ost__n b { font: 700 11.5px/1.15 var(--f-display); text-align: center; text-shadow: 0 2px 6px #000; }
.ost__n:hover span, .ost__n.is-on span { background: var(--grad); color: #04140a; border-color: transparent; box-shadow: 0 0 0 8px rgba(194,232,78,.15), 0 0 30px rgba(194,232,78,.6); transform: scale(1.12); }
.ost__card { position: relative; display: grid; gap: 10px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); backdrop-filter: blur(6px); min-height: 200px; align-content: start; }
.ost__k { font: 800 22px/1.2 var(--f-display); } .ost__d { color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .ost__card .btn { justify-self: start; } .ost__card.is-flip { animation: stpin .45s var(--ease); }
.odom tr.is-ok td:nth-child(2) b { color: var(--g2); } .odom tr.is-bad td { background: rgba(255,93,108,.06); } .odom tr.is-bad td:nth-child(2) b { color: #ff8a95; } .odom td code { font: 600 13.5px var(--f-mono); color: var(--ink); } .odom td:nth-child(2) { color: #ffd27a; }
.otraps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
.otrap { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); }
.otrap__n { font: 800 34px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(255,93,108,.7); } .otrap h3 { font: 700 17px/1.2 var(--f-display); }
.otrap code { justify-self: start; padding: 6px 10px; border-radius: 9px; background: rgba(255,93,108,.12); border: 1px solid rgba(255,93,108,.35); color: #ffb3ba; font: 600 12.5px/1.3 var(--f-mono); word-break: break-all; } .otrap p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.ochk2 { display: grid; gap: 8px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .ochk2 .btn { justify-self: start; margin-top: 6px; }
.ochk2__r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); } .ochk2__r span { color: var(--ink-faint); font-size: 14px; } .ochk2__r code { font: 600 13.5px var(--f-mono); color: var(--g2); word-break: break-all; text-align: right; }
.ohon { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 34px; border-radius: 30px; background: linear-gradient(140deg, rgba(255,255,255,.04), rgba(0,0,0,.2)); border: 1px solid var(--hair); }
.ohon__l h2 { margin: 6px 0 14px; } .ohon__l p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.ohon__r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ohon__c { padding: 20px; border-radius: 20px; background: rgba(34,209,96,.08); border: 1px solid rgba(194,232,78,.35); } .ohon__c b { display: block; margin-bottom: 10px; font: 800 18px/1 var(--f-display); }
.ohon__c ul { display: grid; gap: 7px; } .ohon__c li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-soft); } .ohon__c li::before { content: '✓'; position: absolute; left: 0; color: var(--g2); font-weight: 800; }
.ohon__c--no { background: rgba(255,93,108,.06); border-color: rgba(255,93,108,.3); } .ohon__c--no li::before { content: '✕'; color: #ff8a95; }
@media (max-width: 1080px) { .otraps { grid-template-columns: 1fr 1fr; } .ost { grid-template-columns: 1fr; } .ohon { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .otraps, .ohon__r { grid-template-columns: 1fr; } .odet { padding: 16px; } .ost { padding: 16px; } .ost__n { width: 74px; margin-left: -37px; } .ost__n span { width: 38px; height: 38px; font-size: 16px; } .ost__n b { font-size: 10px; } .ost__c { width: 92px; height: 92px; margin: -46px 0 0 -46px; } .ost__c span { font-size: 16px; } .ohon { padding: 22px; } .odet__bar input { font-size: 14px; } }
.ost__n { transform: none; left: auto; top: auto; margin: -24px 0 0 -48px; }
@media (max-width: 640px) { .ost__n { margin: -20px 0 0 -37px; } }
.odet__seg mark { background: #fff; color: #e0002a; box-shadow: 0 0 0 2px #fff; text-decoration: underline wavy #e0002a; }
.odom + .ocomp { margin-top: 24px; }
@media (max-width: 640px) { .odom table, .odom tbody, .odom tr, .odom td { display: block; width: 100%; } .odom thead { display: none; } .odom tr { padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); } .odom td { padding: 2px 0; border: 0; } .odom td:nth-child(3) { color: var(--ink-soft); font-size: 14px; } .odom td:nth-child(3)::before { content: '→ '; color: var(--g2); } }
.oplat3 { grid-template-columns: repeat(3, 1fr) !important; } .oplat3 li { display: flex; gap: 12px; align-items: flex-start; } .oplat3 li b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--grad); color: #04140a; font: 800 13px/1 var(--f-display); }
@media (max-width: 760px) { .oplat3 { grid-template-columns: 1fr !important; } }

/* ================= /skachat/mac/ ================= */
.mhero__top { max-width: 860px; margin-bottom: 26px; } .mhero__top .dlhero__sub { max-width: 760px; }
.msim { display: grid; gap: 14px; max-width: 1120px; margin: 0 auto; }
.msim__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.msim__chip { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--hair); }
.msim__chip button { padding: 10px 14px; border-radius: 10px; border: 0; background: none; color: var(--ink-soft); font: 700 13.5px/1 var(--f-display); cursor: pointer; } .msim__chip button[aria-pressed="true"] { background: var(--grad); color: #04140a; }
.msim__scr { position: relative; container-type: inline-size; aspect-ratio: 16 / 9.4; border-radius: 18px; overflow: hidden; border: 10px solid #1c1f22; border-bottom-width: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 120px -40px rgba(34,209,96,.45), 0 40px 80px -30px rgba(0,0,0,.9); background: #0d1a12; }
.msim__wall { position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 30%, rgba(34,209,96,.55), transparent 60%), radial-gradient(60% 70% at 85% 70%, rgba(194,232,78,.35), transparent 60%), radial-gradient(80% 80% at 60% 10%, rgba(30,90,160,.5), transparent 70%), linear-gradient(160deg, #0a2a18, #07130c 60%, #102a3a); }
.msim__menu { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.6cqw; height: 3.2cqw; padding: 0 1.4cqw; background: rgba(10,16,12,.55); backdrop-filter: blur(10px); font: 500 1.25cqw/1 var(--f-display); color: #e8efe8; }
.msim__menu b { font-weight: 800; } .msim__sp { flex: 1; } .msim__mi { transition: color .3s, text-shadow .3s; } .msim.is-conn .msim__mi { color: var(--g2); text-shadow: 0 0 8px var(--g2); }
.mw { position: absolute; z-index: 2; border-radius: 1.2cqw; background: rgba(30,34,32,.92); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2cqw 5cqw -1cqw rgba(0,0,0,.7); opacity: 0; transform: scale(.94) translateY(1cqw); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; overflow: hidden; backdrop-filter: blur(14px); }
.mw.is-on { opacity: 1; transform: none; } .mw.is-front { z-index: 4; }
.mw__bar { display: flex; align-items: center; gap: .6cqw; height: 2.8cqw; padding: 0 1cqw; background: rgba(255,255,255,.05); font: 500 1.05cqw/1 var(--f-mono); color: #9aa69c; }
.mw__bar i { width: .95cqw; height: .95cqw; border-radius: 50%; background: #ff5f57; } .mw__bar i:nth-child(2) { background: #febc2e; } .mw__bar i:nth-child(3) { background: #28c840; } .mw__bar span { margin-left: 1cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mw--about { left: 6%; top: 13%; width: 27%; } .mw__about { display: grid; justify-items: center; gap: .5cqw; padding: 1.8cqw 1.4cqw 2cqw; text-align: center; color: #e8efe8; }
.mw__mac { width: 8cqw; height: 5cqw; border-radius: .5cqw; background: linear-gradient(160deg, #2b6, #8c4 70%); border: .35cqw solid #c9ced2; border-bottom-width: .8cqw; }
.mw__about b { font: 800 1.7cqw/1.1 var(--f-display); } .mw__about small { font-size: 1.05cqw; color: #9aa69c; }
.mw__about dl { display: grid; grid-template-columns: auto auto; gap: .4cqw 1cqw; margin-top: .6cqw; font-size: 1.15cqw; } .mw__about dt { color: #9aa69c; text-align: right; } .mw__about dd { font-weight: 700; text-align: left; }
.msim.is-chip .mw__about dd:first-of-type { color: var(--g2); text-shadow: 0 0 10px rgba(194,232,78,.5); }
.mw--safari { left: 28%; top: 11%; width: 50%; } .mw__rel { display: grid; gap: .5cqw; padding: 1.4cqw; font: 500 1.15cqw/1 var(--f-mono); color: #d8e2d8; }
.mw__rh { font: 700 1.3cqw/1 var(--f-display); margin-bottom: .3cqw; } .mw__rel p { display: flex; justify-content: space-between; padding: .8cqw 1cqw; border-radius: .6cqw; background: rgba(255,255,255,.04); } .mw__rel small { color: #8b978d; }
.mw__rel p.is-hl { background: rgba(194,232,78,.16); outline: 1px solid rgba(194,232,78,.6); color: #fff; }
.mw__dl { display: flex; align-items: center; gap: 1cqw; margin: 0 1.4cqw 1.4cqw; padding: .8cqw 1cqw; border-radius: .6cqw; background: rgba(0,0,0,.35); font: 500 1.05cqw/1 var(--f-mono); color: #9aa69c; opacity: 0; transition: opacity .3s; }
.mw__dl i { position: relative; flex: none; width: 10cqw; height: .5cqw; border-radius: 1cqw; background: rgba(255,255,255,.12); overflow: hidden; } .mw__dl i::after { content: ''; position: absolute; inset: 0; width: var(--dl, 0%); background: var(--grad); transition: width 1.6s linear; }
.msim.is-dl .mw__dl { opacity: 1; } .msim.is-dl .mw__dl i { --dl: 100%; }
.mw--dmg { left: 22%; top: 20%; width: 44%; } .mw__dmg { position: relative; display: flex; align-items: center; justify-content: space-around; padding: 3cqw 2cqw 3.4cqw; background: radial-gradient(70% 90% at 50% 50%, rgba(194,232,78,.08), transparent 70%); }
.mw__ico { display: grid; justify-items: center; gap: .6cqw; font: 600 1.15cqw/1 var(--f-display); color: #e8efe8; transition: transform 1.3s cubic-bezier(.5,.1,.3,1), opacity .4s; } .mw__ico span { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 1.6cqw; font-size: 3.6cqw; }
.mw__ico--incy span { background: linear-gradient(140deg, #22d160, #c2e84e); color: #04140a; font: 900 1.7cqw/1 var(--f-display); letter-spacing: .08em; box-shadow: 0 1cqw 2.5cqw -.6cqw rgba(34,209,96,.7); }
.mw__ico--apps span { background: linear-gradient(160deg, #4ea8ff, #2a6fd6); }
.mw__arr { font-size: 3cqw; color: rgba(255,255,255,.45); }
.msim.is-drag .mw__ico--incy { transform: translateX(var(--dx, 20cqw)) scale(.8); } .msim.is-dropped .mw__ico--incy { opacity: 0; } .msim.is-dropped .mw__ico--apps span { box-shadow: 0 0 0 .5cqw rgba(194,232,78,.5); }
.mw--gate { left: 35%; top: 24%; width: 30%; } .mw__gate { display: grid; justify-items: center; gap: .9cqw; padding: 2.2cqw 1.8cqw 1.8cqw; text-align: center; color: #e8efe8; }
.mw__shield { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1.2cqw; background: linear-gradient(160deg, #ffcf5a, #f29a1a); color: #3b2300; font-size: 2.6cqw; }
.mw__gate b { font: 800 1.55cqw/1.15 var(--f-display); } .mw__gate p { font-size: 1.1cqw; line-height: 1.4; color: #b4beb5; }
.mw__gb { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; width: 100%; margin-top: .6cqw; } .mw__gb span { padding: .8cqw; border-radius: .6cqw; background: rgba(255,255,255,.1); font: 600 1.1cqw/1 var(--f-display); } .mw__gb .is-pri { background: #2f7bf5; color: #fff; }
.mw--incy { left: 56%; top: 12%; width: 30%; } .mw__incy { display: grid; gap: 1.2cqw; padding: 1.6cqw; color: #e8efe8; }
.mw__sub { display: flex; align-items: center; gap: .9cqw; padding: 1cqw; border-radius: 1cqw; background: linear-gradient(135deg, rgba(34,209,96,.25), rgba(194,232,78,.05)); border: 1px solid rgba(194,232,78,.3); opacity: 0; transform: translateY(1cqw); transition: all .5s var(--ease); }
.msim.is-key .mw__sub { opacity: 1; transform: none; } .mw__sub > span { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: .8cqw; background: var(--grad); color: #04140a; font: 800 1.3cqw/1 var(--f-display); } .mw__sub b { display: block; font: 700 1.3cqw/1.1 var(--f-display); } .mw__sub small { font-size: 1cqw; color: #9aa69c; }
.mw__go { display: grid; justify-items: center; gap: .8cqw; padding: 1.4cqw 0 .6cqw; } .mw__go span { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); font-size: 3.4cqw; color: #9aa69c; transition: all .5s; }
.mw__go small { font: 700 1.15cqw/1 var(--f-display); color: #9aa69c; } .msim.is-conn .mw__go span { background: var(--grad); color: #04140a; border-color: transparent; box-shadow: 0 0 0 1.4cqw rgba(34,209,96,.14), 0 1.4cqw 3cqw -.6cqw rgba(34,209,96,.8); } .msim.is-conn .mw__go small { color: var(--g2); }
.msim__dock { position: absolute; z-index: 5; left: 50%; bottom: 1.2cqw; display: flex; gap: 1cqw; padding: .8cqw 1.2cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); transform: translateX(-50%); }
.msim__dock > span { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 1.1cqw; background: rgba(255,255,255,.12); font-size: 2.4cqw; transition: all .4s var(--ease); }
.msim__dincy { width: 0 !important; margin-left: -1cqw; opacity: 0; background: var(--grad) !important; color: #04140a; font: 900 .9cqw/1 var(--f-display) !important; letter-spacing: .06em; overflow: hidden; }
.msim.is-inst .msim__dincy { width: 4.4cqw !important; margin-left: 0; opacity: 1; } .msim.is-launch .msim__dincy { animation: obounce .6s ease-in-out 2; } @keyframes obounce { 50% { transform: translateY(-1.4cqw); } }
.msim__cur { position: absolute; z-index: 9; left: 0; top: 0; width: 2.2cqw; height: 2.2cqw; transform: translate(var(--cx, 50cqw), var(--cy, 30cqw)); transition: transform .9s cubic-bezier(.45,.05,.25,1); pointer-events: none; }
.msim__cur::before { content: ''; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 37% 55%, 66% 55%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.msim__cur.is-click::after { content: ''; position: absolute; left: -1.2cqw; top: -1.2cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.msim__cap { min-height: 26px; text-align: center; color: var(--ink-soft); font-size: 15.5px; } .msim__cap b { color: var(--g2); }
.msim__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.msim__steps button { position: relative; display: grid; gap: 6px; justify-items: start; padding: 12px; border-radius: 14px; border: 1px solid var(--hair-soft); background: rgba(255,255,255,.03); color: var(--ink-faint); font: 600 13px/1.25 var(--f-display); text-align: left; cursor: pointer; overflow: hidden; transition: all .3s; }
.msim__steps button i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.08); font: 800 12px/1 var(--f-display); font-style: normal; }
.msim__steps button.is-done { color: var(--ink-soft); } .msim__steps button.is-done i { background: rgba(194,232,78,.2); color: var(--g2); }
.msim__steps button.is-on { color: var(--ink); border-color: var(--g2); background: rgba(194,232,78,.08); } .msim__steps button.is-on i { background: var(--grad); color: #04140a; }
.msim__steps button.is-on::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: left; animation: mprog var(--dur, 4s) linear forwards; } .msim.is-user .msim__steps button.is-on::after { animation: none; transform: none; }
@keyframes mprog { from { transform: scaleX(0); } }
.mdet { display: grid; gap: 12px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid rgba(194,232,78,.3); }
.mdet__r { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); } .mdet__i { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #04140a; font-size: 24px; }
.mdet__r b { display: block; font: 800 19px/1.2 var(--f-display); } .mdet__r small { color: var(--ink-faint); font-size: 13px; }
.mdet__a { display: grid; gap: 8px; } .mdet__a .btn { justify-self: start; } .mdet__a p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .mdet__a code { font: 600 13.5px var(--f-mono); color: var(--g2); }
.mdet__n { color: var(--ink-faint); font: 500 12px/1.4 var(--f-mono); }
.mcmp th:first-child, .mcmp tbody th { width: 30%; } .mcmp tbody th { font: 600 14px/1.3 var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; } .mcmp td { color: var(--ink); }
.mpick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.mpick__c { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 16px; align-items: center; padding: 22px; border-radius: 22px; background: linear-gradient(140deg, rgba(34,209,96,.14), rgba(0,0,0,.25)); border: 1px solid rgba(194,232,78,.35); color: inherit; transition: transform .4s var(--ease); }
.mpick__c:hover { transform: translateY(-4px); } .mpick__c > span { grid-row: 1 / 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--grad); color: #04140a; font-size: 24px; }
.mpick__c b { font: 800 19px/1.1 var(--f-display); } .mpick__c small { grid-column: 2; color: var(--ink-soft); font-size: 14px; } .mpick__c i { grid-row: 1 / 3; grid-column: 3; font-style: normal; color: var(--g2); font: 700 14px/1 var(--f-display); }
.msteps { display: grid; gap: 12px; margin-top: 28px; counter-reset: ms; }
.msteps__s { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; padding: 20px 22px; border-radius: 22px; background: rgba(0,0,0,.25); border: 1px solid var(--hair-soft); }
.msteps__t { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; } .msteps__t > span { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #04140a; font: 800 17px/1 var(--f-display); }
.msteps__t h3 { font: 700 18px/1.2 var(--f-display); } .msteps__t p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .msteps__t code { font: 600 13px var(--f-mono); color: var(--g2); }
.mmini { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #1b201d; border: 1px solid rgba(255,255,255,.1); font: 500 13px/1.2 var(--f-mono); color: #d8e2d8; }
.mmini__bar { padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.35); color: #8b978d; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mmini__row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); } .mmini__row small { color: #8b978d; } .mmini__row.is-hl { background: rgba(194,232,78,.14); outline: 1px solid rgba(194,232,78,.5); }
.mmini--drag { grid-auto-flow: column; justify-content: space-around; align-items: center; padding: 22px; } .mmini__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--grad); color: #04140a; font: 900 12px/1 var(--f-display); animation: mdrag 3s var(--ease) infinite; } .mmini__ic--f { background: linear-gradient(160deg, #4ea8ff, #2a6fd6); font-size: 24px; animation: none; } .mmini--drag i { color: #8b978d; font-style: normal; font-size: 22px; }
@keyframes mdrag { 0%, 15% { transform: none; } 55%, 70% { transform: translateX(46px) scale(.8); opacity: .5; } 100% { transform: none; } }
.mmini--gate { justify-items: center; gap: 10px; padding: 18px; } .mmini--gate b { font: 700 14px/1 var(--f-display); } .mmini--gate .is-pri { padding: 8px 14px; border-radius: 8px; background: #2f7bf5; color: #fff; font: 600 12.5px/1 var(--f-display); }
.mperm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.mperm__c { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); }
.mperm__w { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px; border-radius: 14px; background: #20252a; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 30px -18px #000; }
.mperm__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(160deg, #ffcf5a, #f29a1a); color: #3b2300; font-size: 20px; } .mperm__c--bad .mperm__ic { background: #ff5d6c; color: #fff; }
.mperm__w b { font: 700 15px/1.25 var(--f-display); } .mperm__w p { color: #9aa69c; font-size: 13px; }
.mperm__c h3 { font: 700 16px/1.2 var(--f-display); } .mperm__c ol { display: grid; gap: 5px; padding-left: 20px; list-style: decimal; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; } .mperm__c ol li::marker { color: var(--g2); font-weight: 700; }
.mperm__n { color: var(--ink-faint); font-size: 13px; }
.mas { display: grid; gap: 14px; padding: 26px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.mas__card { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 20px; background: #f4f6f4; color: #111; } .mas__ic { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 18px; background: var(--grad); color: #04140a; font: 900 15px/1 var(--f-display); letter-spacing: .08em; }
.mas__card b { display: block; font: 800 20px/1.1 var(--f-display); } .mas__card small { color: #666; font-size: 13px; } .mas__btn { display: inline-block; margin-top: 8px; padding: 7px 16px; border-radius: 99px; background: #0a66e4; color: #fff; font: 700 13px/1 var(--f-display); }
.mas__req { display: grid; gap: 6px; } .mas__req li { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 14px; } .mas__req b { color: var(--ink); margin-right: 6px; }
.mkey { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 26px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.mkey__h { margin-bottom: 8px; font: 600 12px/1 var(--f-mono); color: var(--ink-faint); } .mkey__tg, .mkey__app { padding: 14px; border-radius: 16px; background: #141a16; border: 1px solid rgba(255,255,255,.1); }
.mkey__msg { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #23402c; font: 600 13.5px/1.3 var(--f-display); } .mkey__b { justify-self: start; padding: 7px 12px; border-radius: 9px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); animation: okey 1.6s ease-in-out infinite; }
.mkey__arr { font-size: 24px; color: var(--g2); animation: mdrag2 1.6s ease-in-out infinite; } @keyframes mdrag2 { 50% { transform: translateX(6px); } }
.mkey__sub { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(194,232,78,.1); font: 600 13px/1 var(--f-display); } .mkey__sub span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); }
.mkey__ok { margin-top: 8px; color: var(--g2); font: 700 13px/1 var(--f-display); }
.mtips { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .mperm { grid-template-columns: 1fr; } .mtips { grid-template-columns: 1fr 1fr; } .msteps__s { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .msim__steps { grid-template-columns: repeat(5, 1fr); gap: 4px; } .msim__steps button { padding: 8px 4px; justify-items: center; } .msim__steps button span { display: none; } .msim__scr { border-width: 5px; border-bottom-width: 9px; border-radius: 12px; } .mpick, .mtips { grid-template-columns: 1fr; } .mkey { grid-template-columns: 1fr; } .mkey__arr { transform: rotate(90deg); justify-self: center; } .msim__cap { font-size: 14px; } }
.myear td code { font: 600 13px var(--f-mono); color: var(--g2); } .myear tr.is-hl td { background: rgba(194,232,78,.08); }
.mupd { grid-template-columns: 1fr !important; margin-top: 0; }

/* ================= /skachat/tv/ ================= */
.troom { display: grid; gap: 14px; max-width: 1120px; margin: 0 auto; }
.troom__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.troom__brands { display: flex; flex-wrap: wrap; gap: 6px; }
.troom__brands button { position: relative; padding: 10px 14px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 13.5px/1 var(--f-display); cursor: pointer; transition: all .25s; }
.troom__brands button[aria-pressed="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.troom__brands button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.troom__stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 8.2; border-radius: 26px; overflow: hidden; border: 1px solid var(--hair); background: #0a0f0b; }
.troom__wall { position: absolute; inset: 0; background: radial-gradient(50% 60% at 38% 40%, rgba(34,209,96,.22), transparent 70%), linear-gradient(180deg, #141c17, #0b110d 75%, #1a140f 75%, #120e0a); }
.troom__lamp { position: absolute; left: 4%; top: 0; width: 18cqw; height: 40cqw; background: radial-gradient(50% 60% at 50% 0%, rgba(255,214,140,.18), transparent 70%); }
.troom__tv { position: absolute; left: 14%; top: 7%; width: 48%; }
.troom__scr { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; background: #050806; border: .8cqw solid #1a1d1b; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 3cqw 6cqw -2cqw rgba(34,209,96,.35); overflow: hidden; }
.troom__stand { width: 30%; height: 1.4cqw; margin: 0 auto; border-radius: 0 0 1cqw 1cqw; background: #1a1d1b; }
.troom__s { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 1cqw; text-align: center; color: #e8efe8; opacity: 0; transition: opacity .45s; }
.troom[data-st="code"] .troom__s--code, .troom[data-st="send"] .troom__s--code, .troom[data-st="ok"] .troom__s--ok, .troom[data-st="play"] .troom__s--play, .troom[data-st="no"] .troom__s--no { opacity: 1; }
.troom__s--code { background: radial-gradient(70% 70% at 50% 40%, rgba(34,209,96,.16), transparent 70%); grid-template-columns: auto auto; column-gap: 3cqw; }
.troom__lbl { grid-column: 1 / -1; font: 600 1.4cqw/1 var(--f-display); color: #9aa69c; }
.troom__code { font: 800 3.6cqw/1 var(--f-mono); letter-spacing: .25em; color: var(--g2); text-shadow: 0 0 2cqw rgba(194,232,78,.45); min-width: 26cqw; }
.troom__qr { width: 9cqw; height: 9cqw; border-radius: .6cqw; background-color: #fff; background-image: linear-gradient(90deg, #08140b 50%, transparent 50%), linear-gradient(#08140b 50%, transparent 50%); background-size: 1.1cqw 1.1cqw, .8cqw .8cqw; box-shadow: inset 0 0 0 .6cqw #fff; }
.troom__tm { grid-column: 1 / -1; font: 600 1.2cqw/1 var(--f-mono); color: #8b978d; }
.troom__big { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--grad); color: #04140a; font: 900 3.6cqw/1 var(--f-display); box-shadow: 0 0 0 1.4cqw rgba(34,209,96,.15); }
.troom__s--ok b, .troom__s--no b { font: 800 2.4cqw/1.1 var(--f-display); } .troom__s--ok small, .troom__s--no small { font-size: 1.4cqw; color: #9aa69c; }
.troom__go { margin-top: .6cqw; padding: .8cqw 1.8cqw; border-radius: 99px; background: rgba(194,232,78,.16); color: var(--g2); font: 700 1.4cqw/1 var(--f-display); }
.troom__s--no .troom__big { background: #ff5d6c; color: #fff; box-shadow: 0 0 0 1.4cqw rgba(255,93,108,.15); }
.troom__s--play { background: #07100a; padding: 2cqw; align-content: stretch; }
.troom__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; width: 100%; height: 100%; } .troom__tiles i { border-radius: .8cqw; background: linear-gradient(135deg, #1e5a34, #0e2a19); animation: ttile 3s ease-in-out infinite; } .troom__tiles i:nth-child(2n) { background: linear-gradient(135deg, #3a6a1a, #182c0c); animation-delay: .4s; } .troom__tiles i:nth-child(3n) { background: linear-gradient(135deg, #1a4a6a, #0b2030); animation-delay: .8s; }
@keyframes ttile { 50% { filter: brightness(1.4); } }
.troom__live { position: absolute; left: 3cqw; bottom: 2.4cqw; padding: .7cqw 1.4cqw; border-radius: 99px; background: rgba(0,0,0,.6); color: var(--g2); font: 700 1.3cqw/1 var(--f-display); }
.troom__box { position: absolute; left: 30%; top: 66%; display: grid; justify-items: center; gap: .4cqw; width: 12cqw; padding: 1cqw; border-radius: 1cqw; background: #1b1f1d; border: 1px solid rgba(255,255,255,.14); color: #9aa69c; font: 600 1.1cqw/1 var(--f-display); opacity: 0; transform: translateY(2cqw); transition: all .6s var(--ease); }
.troom__box i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--g2); box-shadow: 0 0 1cqw var(--g2); }
.troom__hdmi { position: absolute; left: 35.5%; top: 61%; width: .5cqw; height: 0; background: var(--g2); box-shadow: 0 0 1cqw var(--g2); transition: height .6s .4s; }
.troom.is-box .troom__box { opacity: 1; transform: none; } .troom.is-box .troom__hdmi { height: 3.2cqw; }
.troom__ph { position: absolute; right: 7%; top: 30%; width: 15cqw; aspect-ratio: 9 / 18; border-radius: 2.2cqw; padding: .7cqw; background: #1a1d1b; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 2cqw 4cqw -1cqw #000; transform: rotate(-6deg); }
.troom__phs { display: grid; align-content: center; justify-items: center; gap: 1.2cqw; height: 100%; border-radius: 1.6cqw; background: linear-gradient(180deg, #0f1f14, #07100a); padding: 1cqw; text-align: center; } .troom__phs .troom__lbl { font-size: 1.05cqw; }
.troom__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35cqw; width: 100%; } .troom__in span { display: grid; place-items: center; height: 2.6cqw; border-radius: .5cqw; background: rgba(255,255,255,.08); font: 800 1.5cqw/1 var(--f-mono); color: var(--g2); }
.troom__send { padding: .8cqw 1.4cqw; border-radius: 99px; background: rgba(255,255,255,.1); color: #9aa69c; font: 700 1.1cqw/1 var(--f-display); transition: all .3s; } .troom.is-ready .troom__send { background: var(--grad); color: #04140a; } .troom.is-sent .troom__send { animation: bstap .6s var(--ease); }
.troom__beam { position: absolute; left: 62%; right: 22%; top: 24%; height: 3cqw; display: flex; justify-content: space-between; align-items: center; opacity: 0; } .troom__beam i { font-style: normal; font-size: 1.5cqw; color: var(--g2); }
.troom.is-sent .troom__beam { opacity: 1; } .troom.is-sent .troom__beam i { animation: tbeam 1.2s linear infinite; } .troom__beam i:nth-child(2) { animation-delay: .2s !important; } .troom__beam i:nth-child(3) { animation-delay: .4s !important; } .troom__beam i:nth-child(4) { animation-delay: .6s !important; } .troom__beam i:nth-child(5) { animation-delay: .8s !important; }
@keyframes tbeam { 0% { opacity: 0; transform: translateX(3cqw); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateX(-3cqw); } }
.troom__relay { position: absolute; left: 63%; top: 6%; display: grid; gap: .4cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; background: rgba(0,0,0,.6); border: 1px dashed rgba(194,232,78,.35); color: #9aa69c; font: 600 1cqw/1.2 var(--f-display); opacity: .25; transition: opacity .4s; }
.troom__relay code { font: 700 1.2cqw/1 var(--f-mono); color: #ffcf7a; } .troom.is-sent .troom__relay { opacity: 1; }
.troom__sofa { position: absolute; left: 6%; right: 30%; bottom: -3cqw; height: 9cqw; border-radius: 3cqw 3cqw 0 0; background: linear-gradient(180deg, #2a2420, #1b1714); box-shadow: inset 0 1cqw 0 rgba(255,255,255,.04); }
.troom[data-brand="samsung"] .troom__ph, .troom[data-brand="lg"] .troom__ph { }
.troom__v { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 18px; align-items: center; padding: 18px 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); animation: stpin .4s var(--ease); }
.troom__v .tv-pill { padding: 6px 12px; border-radius: 99px; font: 800 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tv-pill--ok { background: rgba(194,232,78,.16); color: var(--g2); } .tv-pill--no { background: rgba(255,93,108,.14); color: #ff8a95; } .tv-pill--mid { background: rgba(255,181,71,.14); color: #ffd27a; }
.troom__v b { display: block; font: 800 18px/1.2 var(--f-display); } .troom__v small { color: var(--ink-faint); font-size: 13px; } .troom__v p { grid-column: 2; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.troom__v .tv-btns { grid-row: 1 / 3; grid-column: 3; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .troom__v .tv-btns .btn { padding: 10px 16px; font-size: 14px; }
.tvtbl tr.is-ok td:nth-child(3) { color: var(--g2); font-weight: 700; } .tvtbl tr.is-mid td:nth-child(3) { color: #ffd27a; font-weight: 700; } .tvtbl tr.is-no td:nth-child(3) { color: #ff8a95; font-weight: 700; }
.tvnote { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.3); color: #ffd9a0; font-size: 15px; } .tvnote a { color: var(--g2); }
.tvenc { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.tvenc__r { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); } .tvenc__r span { grid-row: 1 / 3; font: 700 14.5px/1.2 var(--f-display); align-self: center; }
.tvenc__r code { font: 600 13.5px var(--f-mono); color: var(--g2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tvenc__r small { color: var(--ink-faint); font-size: 12.5px; }
.tvenc__r--relay { border: 1px dashed rgba(255,207,122,.4); background: rgba(255,207,122,.05); } .tvenc__r--relay code { color: #ffcf7a; }
.tvenc__n { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.tvusb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 34px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.tvusb__file, .tvusb__tv { display: grid; justify-items: center; gap: 6px; padding: 16px 18px; border-radius: 16px; background: #141a16; border: 1px solid rgba(255,255,255,.1); font: 700 14px/1.2 var(--f-mono); color: var(--g2); text-align: center; } .tvusb__file small, .tvusb__tv small { font: 500 11.5px/1.2 var(--f-display); color: var(--ink-faint); } .tvusb__tv { font-size: 30px; }
.tvusb__stick { display: grid; place-items: center; width: 70px; height: 30px; border-radius: 6px; background: linear-gradient(90deg, #c9ced2 22%, #2b2f2d 22%); color: #9aa69c; font: 700 11px/1 var(--f-display); animation: mdrag2 1.8s ease-in-out infinite; } .tvusb__stick i { display: none; }
.tvusb__arr { color: var(--g2); font-size: 22px; }
.tvat { position: relative; display: grid; place-items: center; gap: 16px; padding: 34px 24px; border-radius: 26px; background: radial-gradient(60% 60% at 50% 30%, rgba(194,232,78,.12), transparent 70%), rgba(0,0,0,.3); border: 1px solid var(--hair); }
.tvat__box { width: 110px; height: 32px; border-radius: 10px; background: linear-gradient(180deg, #2c2f2e, #151716); box-shadow: 0 16px 30px -10px #000; }
.tvat__card { display: grid; justify-items: center; gap: 6px; padding: 20px 26px; border-radius: 20px; background: #f4f6f4; color: #111; } .tvat__ic { display: grid; place-items: center; width: 90px; height: 54px; border-radius: 12px; background: var(--grad); color: #04140a; font: 900 15px/1 var(--f-display); letter-spacing: .08em; }
.tvat__card b { font: 800 18px/1 var(--f-display); } .tvat__card small { color: #666; font-size: 12.5px; } .tvat__card span { margin-top: 4px; padding: 7px 16px; border-radius: 99px; background: #0a66e4; color: #fff; font: 700 13px/1 var(--f-display); }
.tvhis { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; margin-top: 18px; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.03); border: 1px solid var(--hair); scroll-margin-top: 90px; }
.tvhis h3 { margin-bottom: 8px; font: 800 19px/1.2 var(--f-display); } .tvhis p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .tvhis__b { display: grid; gap: 8px; }
.tvhis__b span { padding: 12px 14px; border-radius: 14px; font: 700 14px/1.2 var(--f-display); } .tvhis__b .is-no { background: rgba(255,93,108,.1); color: #ff8a95; } .tvhis__b .is-ok { background: rgba(194,232,78,.12); color: var(--g2); }
@media (max-width: 760px) { .troom__v { grid-template-columns: auto 1fr; } .troom__v .tv-btns { grid-row: auto; grid-column: 1 / -1; justify-content: flex-start; } .troom__v p { grid-column: 1 / -1; } .tvhis { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .troom__stage { aspect-ratio: 16 / 11; } .troom__tv { left: 4%; width: 62%; } .troom__ph { right: 4%; width: 22cqw; top: 26%; } .troom__beam { left: 66%; right: 26%; } .troom__relay { left: 50%; top: 3%; } .troom__brands button { padding: 8px 11px; font-size: 12.5px; } .tvenc__r { grid-template-columns: 1fr; } .tvenc__r span { grid-row: auto; } }
.tvpath { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 28px 0 20px; position: relative; }
.tvpath li { position: relative; display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 22px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); }
.tvpath li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--grad); color: #04140a; font: 800 18px/1 var(--f-display); box-shadow: 0 10px 24px -10px rgba(34,209,96,.8); }
.tvpath li:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 30px; z-index: 2; color: var(--g2); font-weight: 800; }
.tvpath h3 { font: 700 17px/1.2 var(--f-display); margin-bottom: 4px; } .tvpath p { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
@media (max-width: 1080px) { .tvpath { grid-template-columns: 1fr 1fr; } .tvpath li::after { display: none; } }
@media (max-width: 640px) { .tvpath { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tvtbl table, .tvtbl tbody, .tvtbl tr, .tvtbl td { display: block; width: 100%; } .tvtbl thead { display: none; } .tvtbl tr { padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); } .tvtbl td { padding: 2px 0; border: 0; } .tvtbl td:nth-child(2) { color: var(--ink-faint); font-size: 13.5px; } .tvtbl td:nth-child(4)::before { content: '→ '; color: var(--g2); } .tvtbl td:nth-child(4) { color: var(--ink-soft); font-size: 14px; } }
.tvbox { display: grid; justify-items: center; gap: 0; padding: 30px 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.tvbox__tv { display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 16 / 9; border-radius: 10px; background: #050806; border: 8px solid #1a1d1b; color: #9aa69c; font: 700 15px/1 var(--f-display); box-shadow: 0 20px 40px -20px rgba(34,209,96,.4); }
.tvbox__cable { width: 4px; height: 44px; background: rgba(194,232,78,.25); position: relative; overflow: hidden; } .tvbox__cable i { position: absolute; left: 0; width: 100%; height: 14px; background: var(--g2); box-shadow: 0 0 10px var(--g2); animation: tvcab 1.4s linear infinite; } @keyframes tvcab { from { top: 100%; } to { top: -14px; } }
.tvbox__dev { display: grid; justify-items: center; gap: 4px; padding: 14px 22px; border-radius: 14px; background: #1b1f1d; border: 1px solid rgba(194,232,78,.4); } .tvbox__dev b { font: 800 16px/1 var(--f-display); } .tvbox__dev small { color: var(--ink-faint); font-size: 12.5px; } .tvbox__dev span { margin-top: 4px; color: var(--g2); font: 700 13px/1 var(--f-display); }

/* ================= /nastroyka/marshrutizaciya/ ================= */
.rdis { display: grid; gap: 14px; max-width: 1120px; margin: 0 auto; }
.rdis__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rdis__modes { display: flex; flex-wrap: wrap; gap: 6px; } .rdis__modes button { position: relative; padding: 10px 14px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 13.5px/1 var(--f-display); cursor: pointer; }
.rdis__modes button[aria-pressed="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.rdis__modes button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.rdis__stage { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1.3fr; gap: 30px; align-items: center; min-height: 360px; padding: 30px; border-radius: 28px; background: radial-gradient(60% 80% at 50% 50%, rgba(34,209,96,.1), transparent 70%), rgba(0,0,0,.4); border: 1px solid rgba(194,232,78,.25); overflow: hidden; }
.rdis__stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.rdis__src { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 22px 14px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); text-align: center; } .rdis__src span { font-size: 34px; } .rdis__src b { font: 700 14px/1.2 var(--f-display); }
.rdis__eng { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border-radius: 26px; background: linear-gradient(150deg, rgba(34,209,96,.22), rgba(0,0,0,.4)); border: 1px solid rgba(194,232,78,.45); text-align: center; box-shadow: 0 20px 60px -20px rgba(34,209,96,.6); }
.rdis__eng > b { font: 900 24px/1 var(--f-display); letter-spacing: .1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .rdis__eng small { color: var(--ink-faint); font-size: 12.5px; }
.rdis__rule { min-height: 40px; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.4); font: 600 12.5px/1.35 var(--f-mono); color: var(--g2); }
.rdis__eng.is-hit { animation: rhit .5s var(--ease); } @keyframes rhit { 40% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(194,232,78,.15), 0 20px 60px -20px rgba(34,209,96,.8); } }
.rdis__exits { position: relative; z-index: 1; display: grid; gap: 12px; }
.rdis__x { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); transition: all .3s; }
.rdis__x span { font-size: 22px; } .rdis__x b { font: 700 15px/1 var(--f-display); } .rdis__x i { font: 800 18px/1 var(--f-mono); font-style: normal; color: var(--ink-faint); }
.rdis__x--proxy { border-color: rgba(108,184,255,.35); } .rdis__x--direct { border-color: rgba(194,232,78,.35); } .rdis__x--block { border-color: rgba(255,93,108,.35); }
.rdis__x.is-hit { transform: scale(1.03); } .rdis__x--proxy.is-hit { background: rgba(108,184,255,.15); } .rdis__x--direct.is-hit { background: rgba(194,232,78,.15); } .rdis__x--block.is-hit { background: rgba(255,93,108,.15); }
.rdis__lane { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rdis__pk { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 99px; background: #f2f5ef; color: #0b140d; font: 700 12.5px/1 var(--f-mono); white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); transition: transform .9s cubic-bezier(.45,.05,.25,1), opacity .4s; }
.rdis__pk small { margin-left: 6px; font: 600 10.5px/1 var(--f-display); color: #5b665d; }
.rdis__pk.is-proxy { background: #6cb8ff; } .rdis__pk.is-direct { background: var(--g2); } .rdis__pk.is-block { background: #ff5d6c; color: #fff; } .rdis__pk.is-block small { color: #ffe0e3; }
.rdis__desc { padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .rdis__desc b { color: var(--ink); }
.rdis__try { display: grid; gap: 8px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--hair-soft); } .rdis__try label { font: 700 15px/1 var(--f-display); }
.rdis__try > div { display: flex; gap: 8px; } .rdis__try input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(0,0,0,.35); color: var(--ink); font: 600 15px/1 var(--f-mono); }
.rdis__try p { min-height: 22px; color: var(--ink-soft); font-size: 14.5px; } .rdis__try p b.is-proxy { color: #8cc8ff; } .rdis__try p b.is-direct { color: var(--g2); } .rdis__try p b.is-block { color: #ff8a95; }
.rway { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.rway__r { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); } .rway__r span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 19px; }
.rway__r--p span { background: rgba(108,184,255,.18); } .rway__r--d span { background: rgba(194,232,78,.18); } .rway__r--b span { background: rgba(255,93,108,.18); }
.rway__r b { display: block; font: 700 16px/1.2 var(--f-display); } .rway__r small { color: var(--ink-faint); font-size: 13px; }
.rway__g { display: grid; gap: 6px; margin-top: 4px; padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(194,232,78,.35); } .rway__g b { font: 700 14px/1 var(--f-mono); color: var(--g2); } .rway__g span { color: var(--ink-soft); font-size: 14px; } .rway__g code { font: 600 13px var(--f-mono); color: var(--ink); }
.rways4 { grid-template-columns: repeat(4, 1fr); } .rways4 code { font: 600 12.5px var(--f-mono); color: var(--g2); }
.rlinks { margin-top: 18px; } .rlinks td code { font: 600 13.5px var(--f-mono); color: var(--g2); white-space: nowrap; } .rlinks tr.is-hl td { background: rgba(194,232,78,.07); }
.rjs { border-radius: 20px; overflow: hidden; background: #0a0f0b; border: 1px solid var(--hair); box-shadow: 0 30px 60px -30px #000; }
.rjs__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: rgba(255,255,255,.05); font: 500 12.5px/1 var(--f-mono); color: #8b978d; } .rjs__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); } .rjs__bar span { margin-left: 8px; }
.rjs__code { display: grid; padding: 16px 14px; font: 500 13.5px/1.55 var(--f-mono); } .rjs__b { color: #8b978d; padding: 0 8px; }
.rjs__l { display: block; width: 100%; padding: 3px 8px 3px 26px; border: 0; border-radius: 8px; background: none; color: #d8e2d8; font: inherit; text-align: left; cursor: pointer; transition: background .2s; overflow-wrap: anywhere; }
.rjs__l:hover, .rjs__l.is-on { background: rgba(194,232,78,.12); } .rjs__k { color: #8cc8ff; } .rjs__v { color: #ffcf7a; }
.rjs__tip { margin: 0 14px 14px; padding: 14px 16px; border-radius: 14px; background: rgba(194,232,78,.08); border: 1px solid rgba(194,232,78,.25); min-height: 86px; } .rjs__tip b { display: block; margin-bottom: 4px; font: 700 15px/1.2 var(--f-mono); color: var(--g2); } .rjs__tip p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.rpipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 28px 0 24px; }
.rpipe li { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 20px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); transition: all .4s; }
.rpipe li span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255,255,255,.08); font: 800 15px/1 var(--f-display); transition: all .4s; }
.rpipe li b { font: 700 16px/1.2 var(--f-display); } .rpipe li small { color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
.rpipe li.is-on { border-color: var(--g2); background: rgba(194,232,78,.08); } .rpipe li.is-on span { background: var(--grad); color: #04140a; } .rpipe li.is-done span { background: rgba(194,232,78,.2); color: var(--g2); }
.rpipe li:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 26px; z-index: 2; color: var(--g2); font-weight: 800; }
.rgeo2 { gap: 30px; } .rgeo2 h3 { margin-bottom: 8px; font: 700 19px/1.2 var(--f-display); } .rgeo2 code { font: 600 13px var(--f-mono); color: var(--g2); }
.rru { display: grid; gap: 8px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.rru__h { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .rru__h span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--grad); color: #04140a; font: 900 15px/1 var(--f-display); } .rru__h b { font: 800 18px/1.2 var(--f-display); } .rru__h small { margin-left: auto; color: var(--ink-faint); font: 500 11.5px/1 var(--f-mono); }
.rru__r { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); } .rru__r i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-style: normal; }
.rru__r i.is-d { background: rgba(194,232,78,.18); color: var(--g2); } .rru__r i.is-p { background: rgba(108,184,255,.18); } .rru__r i.is-b { background: rgba(255,93,108,.18); } .rru__r span { color: var(--ink-soft); font-size: 14.5px; } .rru__r b { font: 700 13.5px/1 var(--f-display); }
.raut { display: grid; gap: 12px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.raut__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(194,232,78,.08); border: 1px solid rgba(194,232,78,.35); } .raut__row span { font-size: 22px; color: #8cc8ff; animation: ofl2 3s ease-in-out infinite; } @keyframes ofl2 { 50% { transform: translateY(-3px); } } .raut__row b { font: 700 15px/1.2 var(--f-display); } .raut__row i { margin-left: auto; font-style: normal; color: var(--g2); font: 700 12.5px/1 var(--f-display); }
.raut__ed { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #141a16; border: 1px solid rgba(255,255,255,.1); } .raut__k { font: 700 13px/1 var(--f-display); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.raut__ed p { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-soft); } .raut__ed p code { font: 600 12.5px var(--f-mono); color: var(--g2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .raut__ed p b { color: var(--ink); font-weight: 600; }
.raut__b { display: flex; gap: 8px; margin-top: 6px; } .raut__b span { padding: 9px 14px; border-radius: 10px; background: var(--grad); color: #04140a; font: 700 13px/1 var(--f-display); } .raut__b span.is-no { background: rgba(255,93,108,.14); color: #ff8a95; }
@media (max-width: 1080px) { .rways4 { grid-template-columns: 1fr 1fr; } .rpipe { grid-template-columns: 1fr 1fr; } .rpipe li::after { display: none; } }
@media (max-width: 760px) { .rdis__stage { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .rdis__src { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 12px 16px; } .rdis__src span { font-size: 24px; } }
@media (max-width: 640px) { .rways4, .rpipe { grid-template-columns: 1fr; } .rdis__modes button { padding: 9px 11px; font-size: 12.5px; } .rdis__try > div { flex-direction: column; } .rlinks td code { white-space: normal; word-break: break-all; } }
.rgf { display: grid; gap: 12px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.rgf__f { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #141a16; border: 1px solid rgba(255,255,255,.1); } .rgf__f b { font: 700 15px/1 var(--f-mono); color: var(--g2); } .rgf__f small { color: var(--ink-faint); font-size: 13px; }
.rgf__t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .rgf__t span { padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font: 600 12.5px/1 var(--f-mono); color: var(--ink-soft); } .rgf__t span:first-child { background: rgba(194,232,78,.16); color: var(--g2); }
.rgf__n { color: var(--ink-soft); font-size: 14px; line-height: 1.5; } .rgf__n code { font: 600 13px var(--f-mono); color: var(--g2); }
.rdns td code { font: 600 13.5px var(--f-mono); color: var(--g2); } .rdns tr.is-hl td { background: rgba(194,232,78,.07); }
@media (max-width: 640px) { .rdis__try input { flex: none; width: 100%; height: 46px; } }
.rvs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rvs__c { padding: 20px; border-radius: 22px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .rvs__c:first-child { border-color: rgba(194,232,78,.4); }
.rvs__c b { display: block; font: 800 18px/1.1 var(--f-display); } .rvs__c small { color: var(--ink-faint); font-size: 13px; } .rvs__c ul { display: grid; gap: 7px; margin-top: 12px; } .rvs__c li { padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.04); font-size: 13.5px; color: var(--ink-soft); } .rvs__c code { font: 600 12.5px var(--f-mono); color: var(--g2); }
@media (max-width: 640px) { .rvs { grid-template-columns: 1fr; } }

/* ================= /nastroyka/ustroystva/ ================= */
.ucon { display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(80% 60% at 50% 30%, rgba(34,209,96,.14), transparent 70%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; }
.ucon__top { display: flex; align-items: center; gap: 10px; } .ucon__top b { font: 800 17px/1 var(--f-display); }
.ucon__sky { position: relative; aspect-ratio: 1.35; border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(194,232,78,.08), transparent 60%), #050906; border: 1px solid var(--hair-soft); overflow: hidden; }
.ucon__sky::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 15% 20%, #fff7, transparent), radial-gradient(1px 1px at 80% 15%, #fff5, transparent), radial-gradient(1.5px 1.5px at 65% 85%, #fff6, transparent), radial-gradient(1px 1px at 30% 75%, #fff4, transparent); }
.ucon__lines { position: absolute; inset: 0; width: 100%; height: 100%; } .ucon__lines line { stroke: rgba(194,232,78,.55); stroke-width: 1.6; stroke-dasharray: 4 5; animation: ulin 1.2s linear infinite; } @keyframes ulin { to { stroke-dashoffset: -18; } }
.ucon__key { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; align-content: center; gap: 2px; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--grad); color: #04140a; box-shadow: 0 0 0 12px rgba(34,209,96,.12), 0 0 60px rgba(34,209,96,.6); animation: opul 3s ease-in-out infinite; }
.ucon__key span { font-size: 28px; } .ucon__key b { font: 800 12.5px/1 var(--f-display); }
.ucon__orb { position: absolute; inset: 0; z-index: 3; }
.ucon__n { position: absolute; display: grid; justify-items: center; gap: 3px; width: 70px; margin: -26px 0 0 -35px; animation: upop .5s cubic-bezier(.2,1.6,.4,1); transition: left .5s var(--ease), top .5s var(--ease); }
.ucon__n span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #121a14; border: 1px solid rgba(194,232,78,.5); font-size: 18px; box-shadow: 0 0 14px rgba(194,232,78,.25); } .ucon__n small { font: 600 10px/1.1 var(--f-display); color: var(--ink-soft); text-align: center; text-shadow: 0 1px 4px #000; }
@keyframes upop { from { transform: scale(0); opacity: 0; } }
.ucon__meter { display: grid; gap: 6px; } .ucon__bar { position: relative; height: 10px; border-radius: 10px; background: rgba(255,255,255,.08); overflow: hidden; } .ucon__bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--grad); transition: width .5s var(--ease), background .3s; }
.ucon.is-over .ucon__bar i { background: #ff5d6c; } .ucon__lim { position: absolute; right: 6px; top: -1px; font: 700 9px/12px var(--f-mono); color: rgba(255,255,255,.5); }
.ucon__meter p { color: var(--ink-soft); font-size: 14px; } .ucon__meter b { color: var(--ink); } .ucon__p { color: var(--g2) !important; font-size: 17px; }
.ucon__pick { display: flex; flex-wrap: wrap; gap: 5px; }
.ucon__pick button { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 600 12px/1 var(--f-display); cursor: pointer; transition: all .25s; }
.ucon__pick button span { font-size: 14px; } .ucon__pick button.is-on { border-color: var(--g2); background: rgba(194,232,78,.14); color: var(--ink); }
.ucon__pick button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.ucon__msg { min-height: 40px; padding: 10px 12px; border-radius: 12px; background: rgba(194,232,78,.07); color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; } .ucon.is-over .ucon__msg { background: rgba(255,93,108,.1); color: #ffb3ba; }
.ushare { display: grid; gap: 16px; margin-top: 26px; padding: 24px; border-radius: 28px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.ushare__tabs { display: flex; flex-wrap: wrap; gap: 6px; } .ushare__tabs button { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 14px/1 var(--f-display); cursor: pointer; } .ushare__tabs button[aria-selected="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.ushare__stage { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; padding: 14px; }
.ushare__dev { display: grid; justify-items: center; gap: 8px; } .ushare__lbl { font: 600 12px/1 var(--f-mono); color: var(--ink-faint); }
.ushare__scr { display: grid; place-items: center; align-content: center; gap: 8px; width: min(100%, 170px); aspect-ratio: 9 / 16; padding: 14px; border-radius: 26px; background: linear-gradient(180deg, #0f1f14, #07100a); border: 6px solid #1a1d1b; text-align: center; font: 600 12.5px/1.3 var(--f-display); color: var(--ink-soft); animation: stpin .4s var(--ease); }
.ushare__scr b { color: var(--ink); font-size: 14px; } .ushare__scr .pill { padding: 7px 12px; border-radius: 99px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); } .ushare__scr code { font: 700 11px/1.3 var(--f-mono); color: var(--g2); word-break: break-all; }
.ushare__scr .qr { width: 80px; height: 80px; border-radius: 8px; background-color: #fff; background-image: linear-gradient(90deg, #08140b 50%, transparent 50%), linear-gradient(#08140b 50%, transparent 50%); background-size: 10px 10px, 7px 7px; box-shadow: inset 0 0 0 5px #fff; }
.ushare__scr .big { font: 800 18px/1 var(--f-mono); color: var(--g2); letter-spacing: .12em; }
.ushare__beam { display: flex; justify-content: space-between; } .ushare__beam i { width: 10px; height: 10px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); animation: ubeam 1.2s ease-in-out infinite; } .ushare__beam i:nth-child(2) { animation-delay: .2s; } .ushare__beam i:nth-child(3) { animation-delay: .4s; }
@keyframes ubeam { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.ushare__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: us; } .ushare__steps li { counter-increment: us; position: relative; padding: 14px 14px 14px 48px; border-radius: 16px; background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; animation: stpin .45s var(--ease) both; }
.ushare__steps li::before { content: counter(us); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); } .ushare__steps li:nth-child(2) { animation-delay: .08s; } .ushare__steps li:nth-child(3) { animation-delay: .16s; }
.ushs { display: grid; gap: 10px; justify-items: center; } .ushs__card { width: min(100%, 320px); padding: 18px; border-radius: 22px; background: #121a14; border: 1px solid var(--hair); box-shadow: 0 30px 60px -30px #000; }
.ushs__h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft); } .ushs__h span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #04140a; font: 800 15px/1 var(--f-display); } .ushs__h b { font: 700 15px/1 var(--f-display); } .ushs__h small { margin-left: auto; color: var(--ink-faint); font-size: 12px; }
.ushs__menu { display: grid; gap: 4px; margin-top: 10px; } .ushs__menu p { padding: 11px 12px; border-radius: 11px; font-size: 14.5px; color: var(--ink-soft); animation: ushm 6s infinite; } .ushs__menu p:nth-child(2) { animation-delay: 1.5s; } .ushs__menu p:nth-child(3) { animation-delay: 3s; } .ushs__menu p:nth-child(4) { animation-delay: 4.5s; }
@keyframes ushm { 0%, 20% { background: rgba(194,232,78,.14); color: var(--ink); } 25%, 100% { background: transparent; } }
.ushs__n { color: var(--ink-faint); font: 500 11.5px/1.4 var(--f-mono); }
.ufr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.ufr__c { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 26px; background: rgba(0,0,0,.28); border: 1px solid var(--hair); } .ufr__c--hl { background: linear-gradient(140deg, rgba(34,209,96,.16), rgba(0,0,0,.25)); border-color: rgba(194,232,78,.4); }
.ufr__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #04140a; font: 800 18px/1 var(--f-display); } .ufr__c h3 { font: 800 20px/1.2 var(--f-display); } .ufr__c p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.ufr__c ul { display: grid; gap: 6px; } .ufr__c li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-soft); } .ufr__c li::before { position: absolute; left: 0; font-weight: 800; } .ufr__c li.is-ok::before { content: '✓'; color: var(--g2); } .ufr__c li.is-no::before { content: '✕'; color: #ff8a95; } .ufr__c .btn { justify-self: start; }
.ulim { display: grid; gap: 14px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.ulim__g { position: relative; width: min(100%, 260px); justify-self: center; } .ulim__g svg { width: 100%; } .ulim__bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 14; stroke-linecap: round; } .ulim__fg { fill: none; stroke: url(#ug); stroke: var(--g2); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 252; stroke-dashoffset: 252; transition: stroke-dashoffset 1.2s var(--ease); }
.ulim__g p { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; justify-items: center; } .ulim__g p b { font: 900 42px/1 var(--f-display); } .ulim__g p span { color: var(--ink-faint); font-size: 13px; }
.ulim__l { display: grid; gap: 6px; } .ulim__l div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font: 600 13px/1 var(--f-mono); color: var(--ink-soft); } .ulim__l div.is-new { border: 1px dashed rgba(194,232,78,.5); color: var(--g2); animation: ofl2 2s ease-in-out infinite; }
.ulim__n { color: var(--ink-faint); font: 500 12px/1.4 var(--f-mono); text-align: center; }
.uhs { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.uhs__r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); font: 700 15px/1.2 var(--f-display); } .uhs__r i { font-style: normal; font: 700 12.5px/1.2 var(--f-display); text-align: right; } .uhs__r i.is-ok { color: var(--g2); } .uhs__r i.is-no { color: #ff8a95; }
.uhs__r.is-bad { border: 1px dashed rgba(255,93,108,.4); } .uhs__r.is-good { border: 1px solid rgba(194,232,78,.45); background: rgba(194,232,78,.08); } .uhs__arrow { text-align: center; color: var(--ink-faint); font: 600 12.5px/1 var(--f-mono); }
@media (max-width: 760px) { .ufr { grid-template-columns: 1fr; } .ushare__steps { grid-template-columns: 1fr; } .ushare__stage { grid-template-columns: 1fr 50px 1fr; gap: 6px; padding: 0; } .ushare__scr { border-width: 4px; border-radius: 18px; padding: 8px; font-size: 11px; } .ushare__beam i { width: 7px; height: 7px; } }
.usc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.usc__c { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); } .usc__c > span { font-size: 32px; } .usc__c h3 { font: 700 18px/1.2 var(--f-display); } .usc__c p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.usc__c b { justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 99px; background: rgba(194,232,78,.14); color: var(--g2); font: 700 12.5px/1 var(--f-display); }
.usec { display: grid; gap: 8px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.usec__k { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(194,232,78,.1); border: 1px solid rgba(194,232,78,.35); } .usec__k span { font-size: 22px; } .usec__k code { font: 600 13px var(--f-mono); color: var(--g2); }
.usec__r { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font: 600 14px/1 var(--f-display); } .usec__r span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(194,232,78,.18); color: var(--g2); font-weight: 800; }
.usec__r.is-bad { border: 1px dashed rgba(255,93,108,.5); color: #ffb3ba; animation: ofl2 2s ease-in-out infinite; } .usec__r.is-bad span { background: rgba(255,93,108,.2); color: #ff8a95; } .usec p { color: var(--ink-faint); font: 500 12px/1.4 var(--f-mono); text-align: center; }
@media (max-width: 1080px) { .usc { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .usc { grid-template-columns: 1fr; } }
.uplat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.uplat__c { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); } .uplat__c > span { font-size: 30px; } .uplat__c h3 { font: 700 18px/1.2 var(--f-display); }
.uplat__c ol { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: var(--ink-soft); font-size: 14px; line-height: 1.45; } .uplat__c ol li::marker { color: var(--g2); font-weight: 700; } .uplat__c a { color: var(--g2); font: 600 14px/1 var(--f-display); }
.upar { display: grid; place-items: center; padding: 30px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.upar__ph { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; width: 200px; aspect-ratio: 9 / 18; border-radius: 34px; background: linear-gradient(180deg, #0f1f14, #07100a); border: 8px solid #1a1d1b; }
.upar__t { position: absolute; top: 18px; font: 800 15px/1 var(--f-display); letter-spacing: .1em; } .upar__go { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--grad); color: #04140a; font-size: 42px; box-shadow: 0 0 0 14px rgba(34,209,96,.14), 0 18px 40px -10px rgba(34,209,96,.8); animation: opul 2.4s ease-in-out infinite; }
.upar__s { color: var(--g2); font: 700 14px/1 var(--f-display); } .upar__h { position: absolute; bottom: -46px; padding: 8px 12px; border-radius: 99px; background: #fff; color: #111; font: 700 12.5px/1 var(--f-display); white-space: nowrap; animation: ofl2 2s ease-in-out infinite; }
.upar { padding-bottom: 70px; }
.unew { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.unew__p { display: grid; justify-items: center; gap: 6px; font-size: 54px; } .unew__p small { font: 600 13px/1 var(--f-display); color: var(--ink-soft); } .unew__p.is-old { opacity: .4; filter: grayscale(1); } .unew__a { color: var(--g2); font: 700 24px/1 var(--f-display); animation: mdrag2 1.6s ease-in-out infinite; }
@media (max-width: 1080px) { .uplat { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .uplat { grid-template-columns: 1fr; } }

/* ================= /happ-ili-incy/ ================= */
.harena { display: grid; gap: 14px; max-width: 1120px; margin: 0 auto; }
.harena__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .harena__dots { display: flex; gap: 6px; } .harena__dots i { width: 28px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); transition: background .3s; } .harena__dots i.is-h { background: #8cc8ff; } .harena__dots i.is-i { background: var(--g2); } .harena__dots i.is-d { background: rgba(255,255,255,.45); } .harena__dots i.is-on { box-shadow: 0 0 0 2px #fff; }
.harena__ring { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; align-items: center; padding: 34px 30px; border-radius: 30px; background: radial-gradient(40% 70% at 0% 50%, rgba(108,184,255,.18), transparent 70%), radial-gradient(40% 70% at 100% 50%, rgba(34,209,96,.22), transparent 70%), #060a07; border: 1px solid var(--hair); overflow: hidden; }
.harena__ring::after { content: 'VS'; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font: 900 14px/1 var(--f-display); letter-spacing: .2em; color: rgba(255,255,255,.25); }
.harena__p { display: grid; justify-items: center; gap: 12px; text-align: center; transition: transform .4s var(--ease); }
.harena__logo { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px; background: linear-gradient(140deg, #4ea8ff, #2a6fd6); color: #fff; font: 900 22px/1 var(--f-display); box-shadow: 0 16px 40px -12px rgba(78,168,255,.7); }
.harena__logo--i { background: var(--grad); color: #04140a; box-shadow: 0 16px 40px -12px rgba(34,209,96,.8); }
.harena__sc { font: 900 54px/1 var(--f-display); } .harena__p--h .harena__sc { color: #8cc8ff; } .harena__p--i .harena__sc { color: var(--g2); }
.harena__v { min-height: 44px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); font: 600 14px/1.35 var(--f-display); color: var(--ink-soft); }
.harena__p.is-win { transform: scale(1.06); } .harena__p.is-win .harena__v { background: rgba(194,232,78,.16); color: var(--ink); box-shadow: 0 0 0 1px rgba(194,232,78,.5); } .harena__p--h.is-win .harena__v { background: rgba(108,184,255,.18); box-shadow: 0 0 0 1px rgba(108,184,255,.5); }
.harena__p.is-win .harena__sc { animation: hsc .5s var(--ease); } @keyframes hsc { 40% { transform: scale(1.35); } }
.harena__mid { display: grid; justify-items: center; gap: 10px; text-align: center; } .harena__r { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.08); font: 700 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.harena__k { font: 900 clamp(24px, 3vw, 34px)/1.1 var(--f-display); animation: stpin .4s var(--ease); } .harena__d { min-height: 66px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; max-width: 380px; }
.harena__end { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; padding: 18px 22px; border-radius: 22px; background: linear-gradient(110deg, rgba(34,209,96,.2), rgba(194,232,78,.06)); border: 1px solid rgba(194,232,78,.45); opacity: .35; transition: opacity .5s; }
.harena__end.is-on { opacity: 1; } .harena__end b { font: 800 18px/1.25 var(--f-display); } .harena__end span { grid-column: 1; color: var(--ink-soft); font-size: 14.5px; } .harena__end .btn { grid-row: 1 / 3; grid-column: 2; }
.hshort { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.hshort__c { position: relative; display: grid; gap: 12px; padding: 26px; border-radius: 26px; background: linear-gradient(140deg, rgba(34,209,96,.16), rgba(0,0,0,.25)); border: 1px solid rgba(194,232,78,.4); } .hshort__c--h { background: linear-gradient(140deg, rgba(78,168,255,.16), rgba(0,0,0,.25)); border-color: rgba(108,184,255,.4); }
.hshort__l { justify-self: start; padding: 6px 12px; border-radius: 99px; background: var(--grad); color: #04140a; font: 800 13px/1 var(--f-display); } .hshort__c--h .hshort__l { background: linear-gradient(140deg, #4ea8ff, #2a6fd6); color: #fff; }
.hshort__c h3 { font: 800 21px/1.2 var(--f-display); } .hshort__c ul { display: grid; gap: 8px; } .hshort__c li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: 15px; } .hshort__c li::before { content: '✓'; position: absolute; left: 0; color: var(--g2); font-weight: 800; } .hshort__c--h li::before { color: #8cc8ff; }
.htbl thead th:nth-child(2) { color: #8cc8ff; } .htbl thead th:nth-child(3) { color: var(--g2); } .htbl tbody th { width: 22%; font: 600 14px/1.3 var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; } .htbl td { color: var(--ink); font-size: 14.5px; }
.htbl__n { margin-top: 12px; color: var(--ink-faint); font-size: 13px; }
.hpick { display: grid; gap: 12px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.35); border: 1px solid rgba(194,232,78,.3); min-height: 320px; align-content: start; }
.hpick__top { display: flex; align-items: center; justify-content: space-between; } .hpick__top b { font: 800 16px/1 var(--f-display); }
.hpick__q { font: 800 21px/1.2 var(--f-display); animation: stpin .4s var(--ease); } .hpick__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hpick__opts button { position: relative; padding: 14px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 600 14.5px/1.25 var(--f-display); text-align: left; cursor: pointer; transition: all .25s; }
.hpick__opts button:hover, .hpick__opts button.is-tap { border-color: var(--g2); background: rgba(194,232,78,.1); } .hpick__opts button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.hpick__res { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: linear-gradient(140deg, rgba(34,209,96,.18), rgba(0,0,0,.2)); border: 1px solid rgba(194,232,78,.45); animation: stpin .45s var(--ease); } .hpick__res[hidden] { display: none; }
.hpick__res b { font: 800 20px/1.2 var(--f-display); } .hpick__res p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; } .hpick__res .btn { justify-self: start; } .hpick__again { justify-self: start; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--hair); background: none; color: var(--ink-soft); font: 600 13px/1 var(--f-display); cursor: pointer; }
.hmove { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 34px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.hmove__app { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: #10161a; border: 1px solid rgba(108,184,255,.4); } .hmove__app b { font: 800 16px/1 var(--f-display); color: #8cc8ff; } .hmove__app--i { border-color: rgba(194,232,78,.45); background: #0f1a12; } .hmove__app--i b { color: var(--g2); }
.hmove__sub { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); font: 600 13px/1 var(--f-display); } .hmove__sub span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--grad); color: #04140a; font: 800 12px/1 var(--f-display); }
.hmove__app--i .hmove__sub { animation: hmin 3s ease-in-out infinite; } .hmove__app i { font-style: normal; color: var(--g2); font: 700 12.5px/1 var(--f-display); animation: hmin 3s ease-in-out infinite; }
@keyframes hmin { 0%, 45% { opacity: 0; transform: translateY(6px); } 60%, 100% { opacity: 1; transform: none; } }
.hmove__key { font-size: 30px; animation: hkey 3s ease-in-out infinite; } @keyframes hkey { 0% { transform: translateX(-60px); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateX(60px); opacity: 1; } 55%, 100% { transform: translateX(60px); opacity: 0; } }
.halt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.halt__c { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); } .halt__c > span { font-size: 26px; } .halt__c h3 { font: 800 19px/1.2 var(--f-display); } .halt__c p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.hone { max-width: none; }
@media (max-width: 1080px) { .halt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .harena__ring { grid-template-columns: 1fr 1fr; padding: 26px 16px; } .harena__mid { grid-column: 1 / -1; grid-row: 1; } .harena__logo { width: 64px; height: 64px; font-size: 16px; border-radius: 18px; } .harena__sc { font-size: 40px; } .hshort, .halt { grid-template-columns: 1fr; } .harena__end { grid-template-columns: 1fr; } .harena__end .btn { grid-row: auto; grid-column: auto; justify-self: start; } .hmove { grid-template-columns: 1fr; } .hmove__key { justify-self: center; transform: rotate(90deg); animation: none; } .hpick__opts { grid-template-columns: 1fr; } }
.hinst { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.hinst__r { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); } .hinst__r b { display: block; font: 700 14.5px/1.2 var(--f-display); } .hinst__r small { color: var(--ink-faint); font-size: 12.5px; }
.hinst__l { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(140deg, #4ea8ff, #2a6fd6); color: #fff; font: 800 13px/1 var(--f-display); } .hinst__l--i { background: var(--grad); color: #04140a; }
.hinst__r i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(194,232,78,.18); color: var(--g2); font-style: normal; font-weight: 800; } .hinst__r i.is-mid { background: rgba(255,181,71,.18); color: #ffd27a; }
.hinst__n { padding: 12px 14px; border-radius: 14px; background: rgba(255,181,71,.08); color: #ffd9a0; font-size: 14px; }
.htbl3 tbody th { width: 26%; font: 600 14px/1.3 var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-soft) !important; } .htbl3 td { font-size: 14.5px; } .htbl3 td.is-ok { color: var(--g2); font-weight: 700; } .htbl3 thead th:nth-child(3) { color: var(--g2); }
.htbl td, .htbl3 td { color: var(--ink) !important; } .htbl3 td.is-ok { color: var(--g2) !important; } .htbl td:nth-child(3) { color: var(--g2) !important; font-weight: 600; }
.hpick__q[hidden], .hpick__opts[hidden] { display: none !important; }
.hfmt { display: grid; gap: 8px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.hfmt__r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); } .hfmt__r code { font: 600 13px/1.3 var(--f-mono); color: var(--ink); }
.hfmt__r span { flex: none; padding: 5px 10px; border-radius: 99px; font: 700 11.5px/1 var(--f-display); } .hfmt__r .is-b { background: rgba(255,255,255,.1); color: var(--ink-soft); } .hfmt__r .is-i { background: rgba(194,232,78,.16); color: var(--g2); } .hfmt__r .is-n { background: rgba(255,93,108,.12); color: #ff8a95; }
.hfmt p { color: var(--ink-faint); font: 500 11.5px/1.4 var(--f-mono); }

/* ================= /skachat/linux-router/ ================= */
.lxt { display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; }
.lxt__top { display: flex; align-items: center; gap: 10px; } .lxt__top b { font: 800 17px/1 var(--f-display); }
.lxt__ds { display: flex; flex-wrap: wrap; gap: 6px; } .lxt__ds button, .lxt__ar button { position: relative; padding: 9px 12px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 13px/1 var(--f-display); cursor: pointer; }
.lxt__ds button[aria-pressed="true"], .lxt__ar button[aria-pressed="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.lxt__ds button.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #fff; animation: bsring .6s ease-out forwards; }
.lxt__ar { display: flex; align-items: center; gap: 6px; } .lxt__det { margin-left: auto; font: 600 12px/1 var(--f-mono); color: var(--g2); }
.lxt__win { border-radius: 16px; overflow: hidden; background: #0b0e0c; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px -20px #000; }
.lxt__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #2a1f2d; font: 600 12px/1 var(--f-mono); color: #d3c6d8; } .lxt__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .lxt__bar i:nth-child(2) { background: #febc2e; } .lxt__bar i:nth-child(3) { background: #28c840; } .lxt__bar span { margin-left: 8px; }
.lxt__out { margin: 0; min-height: 250px; padding: 14px 16px; font: 500 13px/1.6 var(--f-mono); color: #d8e2d8; white-space: pre-wrap; word-break: break-word; }
.lxt__out .p { color: #7ee787; } .lxt__out .c { color: #fff; } .lxt__out .d { color: #8b978d; } .lxt__out .ok { color: var(--g2); font-weight: 700; } .lxt__out .w { color: #ffcf7a; } .lxt__out .cur { display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--g2); animation: ocaret 1s steps(1) infinite; }
.lxt__copy { justify-self: start; }
.lxtbl td code { font: 600 13px var(--f-mono); color: var(--g2); } .lxtbl td:nth-child(2) { color: var(--ink) !important; font-weight: 700; }
.lxmodes { margin-top: 24px; gap: 30px; } .lxmodes h3 { margin-bottom: 8px; font: 700 19px/1.2 var(--f-display); }
.lxpi { display: grid; gap: 12px; padding: 26px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.lxpi__b { position: relative; justify-self: center; width: 200px; height: 130px; border-radius: 12px; background: linear-gradient(150deg, #1d6b3a, #0d3a1e); border: 2px solid #2a8a4c; box-shadow: 0 20px 40px -16px #000; }
.lxpi__c { position: absolute; left: 30px; top: 34px; width: 50px; height: 50px; border-radius: 6px; background: #c9ced2; box-shadow: inset 0 0 0 6px #9aa0a4; } .lxpi__c--2 { left: 100px; top: 44px; width: 70px; height: 30px; background: #222; box-shadow: none; }
.lxpi__b i { position: absolute; right: 10px; bottom: 8px; font: 800 11px/1 var(--f-mono); font-style: normal; color: var(--g2); }
.lxpi code { display: block; padding: 12px 14px; border-radius: 12px; background: #0b0e0c; font: 500 13px/1.6 var(--f-mono); color: #8b978d; } .lxpi code b { color: var(--g2); } .lxpi code b.is-no { color: #ff8a95; }
.lxnet { display: grid; justify-items: center; gap: 10px; padding: 28px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.lxnet__r { display: grid; justify-items: center; gap: 4px; padding: 14px 22px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--hair); text-align: center; } .lxnet__r span { font-size: 28px; } .lxnet__r b { font: 700 15px/1 var(--f-display); } .lxnet__r small { color: var(--ink-faint); font-size: 12px; }
.lxnet__l { display: grid; grid-template-columns: repeat(4, 1fr); width: 90%; height: 30px; } .lxnet__l i { justify-self: center; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--g2) 0 4px, transparent 4px 8px); animation: lxdash 1s linear infinite; } @keyframes lxdash { to { background-position: 0 8px; } }
.lxnet__d { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; } .lxnet__d div { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: rgba(194,232,78,.08); border: 1px solid rgba(194,232,78,.35); text-align: center; } .lxnet__d span { font-size: 22px; } .lxnet__d small { font: 600 11px/1.2 var(--f-display); color: var(--g2); }
.lxnet__k { margin-top: 4px; padding: 8px 14px; border-radius: 99px; background: var(--grad); color: #04140a; font: 800 13px/1 var(--f-display); }
.lxd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.lxd__c { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid var(--hair-soft); min-width: 0; }
.lxd__f { justify-self: start; padding: 6px 12px; border-radius: 10px; background: var(--grad); color: #04140a; font: 800 14px/1 var(--f-mono); } .lxd__c h3 { font: 700 17px/1.2 var(--f-display); } .lxd__c p { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.lxd__c code { display: block; padding: 10px 12px; border-radius: 10px; background: #0b0e0c; font: 500 12px/1.4 var(--f-mono); color: #7ee787; overflow-wrap: anywhere; }
.lxkey { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 28px 20px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.lxkey__tg, .lxkey__in { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #141a16; border: 1px solid rgba(255,255,255,.1); font: 700 14px/1 var(--f-display); } .lxkey__tg code { font: 600 11.5px/1.3 var(--f-mono); color: var(--g2); overflow-wrap: anywhere; }
.lxkey__tg span, .lxkey__in span { justify-self: start; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.08); font: 700 12px/1 var(--f-mono); color: var(--ink-soft); } .lxkey__in i { font-style: normal; color: var(--g2); font: 700 13px/1 var(--f-display); animation: hmin 3s ease-in-out infinite; }
.lxkey__ar { color: var(--g2); font-size: 22px; animation: mdrag2 1.6s ease-in-out infinite; }
@media (max-width: 1080px) { .lxd { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .lxd, .lxkey { grid-template-columns: 1fr; } .lxkey__ar { transform: rotate(90deg); justify-self: center; } }
.lxub { border-radius: 18px; overflow: hidden; background: #2b0d20; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -30px #000; }
.lxub__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #3a1530; font: 600 12px/1 var(--f-display); color: #e8d6e2; } .lxub__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .lxub__bar i:nth-child(2) { background: #febc2e; } .lxub__bar i:nth-child(3) { background: #28c840; } .lxub__bar span { margin-left: 8px; }
.lxub pre { margin: 0; padding: 16px; font: 500 13px/1.7 var(--f-mono); color: #f2e8ee; white-space: pre-wrap; word-break: break-word; } .lxub .p { color: #7ee787; } .lxub .d { color: #b49ab0; } .lxub .ok { color: var(--g2); font-weight: 700; }
.lxkn { display: grid; gap: 12px; padding: 26px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.lxkn__r { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.05); } .lxkn__r span { font-size: 28px; } .lxkn__r b { font: 800 18px/1 var(--f-display); }
.lxkn__l { display: grid; gap: 8px; } .lxkn__l p { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font: 600 14px/1.3 var(--f-display); } .lxkn__l .is-no { color: #ff8a95; } .lxkn__l .is-mid { color: #ffd27a; } .lxkn__l .is-ok { color: var(--g2); border: 1px solid rgba(194,232,78,.4); }
/* ===== /obnovlenie/ ===== */
.vmet { display: grid; gap: 14px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(34,209,96,.16), transparent 60%), rgba(0,0,0,.42); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; }
.vmet__ch { display: flex; flex-wrap: wrap; gap: 6px; } .vmet__ch button { padding: 8px 11px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 12.5px/1 var(--f-display); cursor: pointer; } .vmet__ch button[aria-pressed="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.vmet__in { display: grid; gap: 6px; } .vmet__in span { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.vmet__in input { height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(0,0,0,.35); color: var(--ink); font: 700 20px/1 var(--f-mono); letter-spacing: .04em; width: 100%; } .vmet__in input:focus { outline: none; border-color: var(--g2); box-shadow: 0 0 0 4px rgba(194,232,78,.15); } .vmet__in small { color: var(--ink-faint); font-size: 12px; }
.vmet__odos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.vmet__o { display: grid; gap: 6px; justify-items: center; } .vmet__k { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.vmet__arr { display: block; padding-bottom: 18px; font-size: 22px; color: var(--g2); }
.vodo { display: flex; align-items: flex-end; padding: 10px 12px; border-radius: 16px; background: linear-gradient(180deg, #0b1a10, #050c07); border: 1px solid var(--hair); box-shadow: inset 0 8px 16px -8px #000, inset 0 -8px 16px -8px #000; font: 800 clamp(30px, 4vw, 42px)/1 var(--f-mono); color: var(--ink); }
.vmet__o--new .vodo { color: var(--g2); border-color: rgba(194,232,78,.35); }
.vodo__d { display: block; height: 1em; overflow: hidden; width: .66em; text-align: center; } .vodo__s { display: grid; transition: transform 1.1s cubic-bezier(.2,.9,.2,1.05); } .vodo__s i { font-style: normal; height: 1em; display: block; }
.vodo__dot { width: .3em; text-align: center; opacity: .55; }
.vmet__gap { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .vmet__gap i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff5d6c, #ffd27a 50%, var(--g2)); transition: width 1s var(--ease); }
.vmet__res { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); min-height: 150px; } .vmet__res b { display: block; font: 800 17px/1.25 var(--f-display); margin-bottom: 4px; } .vmet__res p { color: var(--ink-soft); font-size: 14px; margin: 0 0 8px; }
.vmet__res ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-soft); }
.vmet__res.is-ok { border-color: rgba(194,232,78,.45); } .vmet__res.is-ok b { color: var(--g2); } .vmet__res.is-bad b { color: #ff8a95; } .vmet__res.is-warn b { color: #ffd27a; }
.vtbl td b { color: var(--g2); } .vtbl td { color: var(--ink) !important; }
.vrv { position: relative; padding: 18px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.vrv__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vrv__card { flex: 1 1 260px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(194,232,78,.3); }
.vrv__card b { font: 800 26px/1 var(--f-mono); color: var(--g2); grid-row: span 2; } .vrv__card span { font: 700 12px/1.2 var(--f-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; } .vrv__card p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink); }
.vrv__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .vrv__in { position: relative; min-width: 720px; padding: 4px 0 0; }
.vrv__lane { display: grid; grid-template-columns: 120px 1fr; align-items: center; height: 46px; } .vrv__ln { font: 700 11.5px/1.2 var(--f-mono); color: var(--ink-soft); }
.vrv__track { position: relative; height: 2px; background: rgba(255,255,255,.12); }
.vrv__p { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%; border: 2px solid #0a140c; background: var(--g1); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.vrv__lane--a .vrv__p { background: #7ec8ff; } .vrv__lane--p .vrv__p { background: #ffd27a; }
.vrv__p:hover, .vrv__p.is-on { transform: scale(1.6); box-shadow: 0 0 0 5px rgba(194,232,78,.22), 0 0 18px var(--g2); z-index: 2; }
.vrv__ax { position: relative; height: 22px; margin-left: 120px; border-top: 1px dashed var(--hair-soft); } .vrv__ax span { position: absolute; top: 6px; font: 600 11px/1 var(--f-mono); color: var(--ink-faint); text-transform: uppercase; }
.vrv__scan { position: absolute; top: 0; bottom: 22px; width: 2px; margin-left: -1px; left: calc(120px + (100% - 120px) * var(--x, 1)); background: linear-gradient(180deg, transparent, var(--g2), transparent); opacity: .6; pointer-events: none; transition: left .7s var(--ease); }
.vfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } .vfact { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .vfact b { display: block; font: 800 28px/1 var(--f-display); color: var(--g2); margin-bottom: 6px; } .vfact span { color: var(--ink-soft); font-size: 14px; }
.vtwo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vtwo__c { padding: 26px; border-radius: 26px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .vtwo__c--s { border-color: rgba(194,232,78,.35); background: radial-gradient(80% 60% at 100% 0%, rgba(34,209,96,.12), transparent 60%), rgba(255,255,255,.04); }
.vtwo__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #04140a; font: 800 24px/1 var(--f-display); margin-bottom: 14px; }
.vtwo__c h3 { font: 800 22px/1.2 var(--f-display); margin: 0 0 10px; } .vtwo__c ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--ink-soft); font-size: 15px; } .vtwo__c ul b { color: var(--ink); } .vtwo__c a { color: var(--g2); font-weight: 700; }
.vpl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vpl__c { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); min-width: 0; } .vpl__t { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--g2); } .vpl__c h3 { font: 800 19px/1.2 var(--f-display); margin: 8px 0 10px; }
.vpl__c ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 5px; font-size: 14.5px; } .vpl__c p { margin: 0; color: var(--ink-soft); font-size: 14px; } .vpl__c a { color: var(--g2); } .vpl__c code { word-break: break-word; }
.vlist { display: grid; gap: 6px; padding-left: 20px; }
.vsha { border-radius: 20px; overflow: hidden; background: #2b0d20; border: 1px solid rgba(255,255,255,.12); padding-bottom: 14px; box-shadow: 0 30px 60px -30px #000; }
.vsha__row { display: grid; gap: 4px; padding: 12px 16px 0; } .vsha__row span { font: 700 11px/1 var(--f-mono); color: #b49ab0; text-transform: uppercase; } .vsha__row code { font: 600 13px/1.4 var(--f-mono); color: #f2e8ee; word-break: break-all; min-height: 1.4em; background: none; padding: 0; }
.vsha__ok { margin: 14px 16px 0; padding: 10px 12px; border-radius: 12px; background: rgba(194,232,78,.12); color: var(--g2); font: 700 14px/1.2 var(--f-display); opacity: 0; transform: translateY(6px); transition: .4s; } .vsha__ok.is-on { opacity: 1; transform: none; }
.vsha__note { margin: 10px 16px 0; font-size: 12px; color: #b49ab0; }
.vsub { display: grid; gap: 14px; padding: 24px; border-radius: 28px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); cursor: pointer; }
.vsub__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vsub__top .odec__auto { margin-left: 0; } .vsub__lbl { margin-left: auto; font: 600 13px/1 var(--f-mono); color: var(--ink-soft); } .vsub__lbl b { color: var(--g2); }
.vsub__ring { position: relative; width: min(220px, 70%); margin: 0 auto; aspect-ratio: 1; } .vsub__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vsub__bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; } .vsub__fg { fill: none; stroke: var(--g2); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(194,232,78,.5)); }
.vsub__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .vsub__c b { font: 800 34px/1 var(--f-mono); } .vsub__c span { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.vsub__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .vsub__list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font: 600 14px/1 var(--f-display); } .vsub__list i { width: 8px; height: 8px; border-radius: 50%; background: var(--g1); box-shadow: 0 0 8px var(--g1); } .vsub__list span { margin-left: auto; font: 600 12.5px/1 var(--f-mono); color: var(--ink-soft); }
.vsub__list li.is-new { animation: vnew 1s var(--ease); } @keyframes vnew { 0% { background: rgba(194,232,78,.25); } 100% { background: rgba(255,255,255,.04); } }
.vsub__flash { text-align: center; font: 700 13.5px/1.2 var(--f-display); color: var(--g2); opacity: 0; } .vsub__flash.is-on { animation: vfl 2.6s var(--ease); } @keyframes vfl { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } }
.vkey { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.vkey__c { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .vkey__n { font-size: 26px; } .vkey__c h3 { font: 800 19px/1.2 var(--f-display); margin: 8px 0; } .vkey__c p { margin: 0; color: var(--ink-soft); font-size: 15px; } .vkey__c a { color: var(--g2); }
.vold { display: grid; gap: 10px; } .vold__r { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); display: grid; gap: 4px; } .vold__r b { font: 800 16px/1.2 var(--f-mono); } .vold__r span { font-size: 13.5px; color: var(--ink-soft); }
.vold__r.is-ok { border-color: rgba(194,232,78,.45); } .vold__r.is-ok b { color: var(--g2); } .vold__r.is-bad b { color: #ff8a95; text-decoration: line-through; text-decoration-thickness: 2px; }
@media (max-width: 900px) { .vpl { grid-template-columns: 1fr 1fr; } .vfacts { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .vpl, .vtwo, .vkey { grid-template-columns: 1fr; } .vmet { padding: 16px; border-radius: 24px; } .vodo { padding: 8px; font-size: 28px; } .vmet__arr { padding-bottom: 12px; font-size: 18px; }
  .vtbl table, .vtbl tbody, .vtbl tr, .vtbl td { display: block; } .vtbl thead { display: none; } .vtbl tr { padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); } .vtbl td { padding: 2px 0 !important; border: 0 !important; } .vtbl td:first-child { font-weight: 800; }
}
/* ===== /nastroyka/tunnelirovanie/ ===== */
.thero__top { max-width: 900px; margin-bottom: 26px; }
.tun { display: grid; gap: 14px; padding: 22px; border-radius: 32px; background: radial-gradient(70% 60% at 50% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.45); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); }
.tun__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tun__bar b { font: 800 17px/1 var(--f-display); } .tun__bar .odec__auto { margin-left: 0; }
.tun__pl, .tun__md { display: flex; flex-wrap: wrap; gap: 6px; } .tun__pl { margin-left: auto; }
.tun__pl button, .tun__md button { padding: 9px 13px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 13px/1 var(--f-display); cursor: pointer; }
.tun__pl button[aria-pressed="true"] { background: var(--grad); color: #04140a; border-color: transparent; }
.tun__md button[aria-pressed="true"] { background: rgba(194,232,78,.16); color: var(--g2); border-color: rgba(194,232,78,.5); }
.tun__md button:disabled { opacity: .35; cursor: not-allowed; }
.tun__stage { position: relative; aspect-ratio: 640 / 400; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.2)); border: 1px solid var(--hair-soft); overflow: hidden; }
.tun__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tun__b { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tun__tube { fill: none; stroke: rgba(34,209,96,.22); stroke-width: 26; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(34,209,96,.45)); }
.tun__tube2 { fill: none; stroke: url(#tgr); stroke-width: 2; stroke-dasharray: 10 8; animation: tdash 1s linear infinite; }
@keyframes tdash { to { stroke-dashoffset: -18; } }
.tun__dir { fill: none; stroke: rgba(255,210,122,.45); stroke-width: 2; stroke-dasharray: 2 6; }
.tun__pk--t { fill: var(--g2); filter: drop-shadow(0 0 6px var(--g2)); } .tun__pk--d { fill: #ffd27a; } .tun__pk--q { fill: rgba(255,255,255,.4); }
.tun__apps { position: absolute; inset: 0; pointer-events: none; }
.tun__app { pointer-events: auto; position: absolute; left: 1.2%; width: 20%; transform: translateY(-50%); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(8,20,12,.85); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.tun__ai { grid-row: span 2; font-size: clamp(14px, 2vw, 20px); } .tun__an { font: 700 clamp(9px, 1.15vw, 13px)/1.1 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tun__as { font: 600 clamp(8px, .95vw, 11px)/1.1 var(--f-mono); color: var(--ink-faint); }
.tun__app.is-t .tun__as { color: var(--g2); } .tun__app.is-d .tun__as { color: #ffd27a; }
.tun__app.is-sel { border-color: rgba(194,232,78,.7); box-shadow: 0 0 0 3px rgba(194,232,78,.15); }
.tun__hub { position: absolute; left: 46.875%; top: 50%; transform: translate(-50%, -50%); width: 17%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(34,209,96,.35), rgba(4,19,10,.95) 70%); border: 1px solid rgba(194,232,78,.55); box-shadow: 0 0 40px rgba(34,209,96,.35); }
.tun__hub b { font: 800 clamp(13px, 2vw, 22px)/1 var(--f-display); } .tun__hub span { font: 600 clamp(8px, 1vw, 11px)/1.1 var(--f-mono); color: var(--g2); margin-top: 3px; }
.tun__ex { position: absolute; right: 1.2%; width: 17%; transform: translateY(-50%); padding: 8px 10px; border-radius: 14px; background: rgba(8,20,12,.9); border: 1px solid var(--hair); display: grid; gap: 2px; }
.tun__ex--t { top: 22.5%; border-color: rgba(194,232,78,.55); } .tun__ex--d { top: 80%; border-color: rgba(255,210,122,.45); }
.tun__ex b { font: 800 clamp(10px, 1.3vw, 14px)/1.1 var(--f-display); } .tun__ex span { font: 600 clamp(8px, .95vw, 11px)/1.1 var(--f-mono); color: var(--ink-faint); } .tun__ex i { font: 800 clamp(14px, 2vw, 22px)/1 var(--f-mono); font-style: normal; color: var(--g2); } .tun__ex--d i { color: #ffd27a; }
.tun__cap { margin: 0; min-height: 3em; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--hair-soft); color: var(--ink-soft); font-size: 15px; }
.tmini, .tios { display: grid; gap: 10px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.tmini__r { display: grid; grid-template-columns: 1fr 60px auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); font: 600 15px/1 var(--f-display); }
.tmini__r i { height: 3px; border-radius: 3px; } .tmini__r i.is-t { background: var(--grad); box-shadow: 0 0 8px var(--g2); } .tmini__r i.is-d { background: repeating-linear-gradient(90deg, #ffd27a 0 4px, transparent 4px 8px); }
.tmini__r b { font: 700 12px/1 var(--f-mono); } .tmini__r:nth-child(-n+2) b { color: #ffd27a; } .tmini__r:nth-child(n+3) b { color: var(--g2); }
.ttbl td { color: var(--ink) !important; } .ttbl td:nth-child(2) { white-space: nowrap; font-weight: 700; }
.tmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.tmodes__c { padding: 26px; border-radius: 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,210,122,.35); } .tmodes__c--p { border-color: rgba(194,232,78,.4); }
.tmodes__k { font: 700 12px/1 var(--f-mono); padding: 5px 9px; border-radius: 99px; background: rgba(255,210,122,.14); color: #ffd27a; } .tmodes__c--p .tmodes__k { background: rgba(194,232,78,.14); color: var(--g2); }
.tmodes__c h3 { font: 800 22px/1.2 var(--f-display); margin: 12px 0 8px; } .tmodes__c p { color: var(--ink-soft); } .tmodes__c ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 5px; font-size: 15px; }
.tpick { padding: 22px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); display: grid; gap: 12px; }
.tpick__top { display: flex; align-items: center; gap: 10px; } .tpick__top b { font: 800 18px/1.2 var(--f-display); } .tpick__q { margin: 0; color: var(--ink-soft); }
.tpick__c { display: flex; flex-wrap: wrap; gap: 8px; } .tpick__c button { padding: 10px 14px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 14px/1 var(--f-display); cursor: pointer; transition: .2s; }
.tpick__c button[aria-pressed="true"] { background: rgba(194,232,78,.16); color: var(--g2); border-color: rgba(194,232,78,.55); }
.tpick__r { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); min-height: 96px; } .tpick__r b { display: block; font: 800 18px/1.25 var(--f-display); margin-bottom: 4px; } .tpick__r p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.tpick__r.is-p b { color: var(--g2); } .tpick__r.is-b b { color: #ffd27a; }
.tphone { justify-self: center; width: min(300px, 100%); padding: 12px; border-radius: 42px; background: #0b0f0c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -30px #000; }
.tphone__s { border-radius: 32px; background: #101a13; padding: 26px 16px 16px; display: grid; gap: 12px; }
.tphone__h { margin: 0; font: 800 17px/1.2 var(--f-display); } .tphone__sw, .tphone__l p { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font: 600 14px/1 var(--f-display); }
.tphone i { width: 34px; height: 20px; border-radius: 99px; background: rgba(255,255,255,.15); position: relative; } .tphone i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .3s; } .tphone i.is-on { background: var(--g1); } .tphone i.is-on::after { left: 17px; }
.tphone__seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); } .tphone__seg span { text-align: center; padding: 8px 4px; border-radius: 9px; font: 700 12px/1.1 var(--f-display); color: var(--ink-soft); } .tphone__seg .is-on { background: var(--grad); color: #04140a; }
.tphone__l { display: grid; gap: 6px; } .tphone__n { margin: 0; font-size: 11px; color: var(--ink-faint); text-align: center; }
.tproc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } .tproc__c { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); min-width: 0; } .tproc__c h3 { font: 800 18px/1.2 var(--f-display); margin: 8px 0; } .tproc__c p { color: var(--ink-soft); font-size: 14.5px; } .tproc__c > code { display: block; word-break: break-word; }
.tlay { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; }
.tlay__c { padding: 24px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); position: relative; } .tlay__c--tun { border-color: rgba(194,232,78,.55); background: radial-gradient(80% 60% at 0% 0%, rgba(34,209,96,.14), transparent 60%), rgba(255,255,255,.04); }
.tlay__b { display: inline-block; font: 700 11px/1 var(--f-mono); padding: 5px 9px; border-radius: 99px; background: var(--grad); color: #04140a; margin-bottom: 10px; }
.tlay__c h3 { font: 800 24px/1 var(--f-display); margin: 0 0 10px; } .tlay__c p { color: var(--ink-soft); font-size: 15px; } .tlay__c ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 14.5px; }
.tlay__c li::before { margin-right: 8px; font-weight: 800; } .tlay__c li.ok::before { content: '✓'; color: var(--g2); } .tlay__c li.no::before { content: '✕'; color: #ff8a95; } .tlay__c li.mid::before { content: '~'; color: #ffd27a; }
.tbank { display: grid; gap: 14px; } .tbank > div { padding: 20px; border-radius: 20px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); } .tbank span { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .tbank p { margin: 8px 0 0; font: 600 16px/1.35 var(--f-display); }
.tbank__q { border-color: rgba(255,93,108,.4) !important; } .tbank__q span { color: #ff8a95; } .tbank__a { border-color: rgba(194,232,78,.5) !important; } .tbank__a span { color: var(--g2); }
.tios__r { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); font: 600 14px/1 var(--f-mono); } .tios__r b { font: 700 12px/1 var(--f-mono); } .tios__r .is-d { color: #ffd27a; } .tios__r .is-t { color: var(--g2); } .tios p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.tjs { border-radius: 20px; background: #2b0d20; border: 1px solid rgba(255,255,255,.12); overflow: hidden; } .tjs pre { margin: 0; padding: 18px; font: 500 13px/1.8 var(--f-mono); color: #f2e8ee; white-space: pre-wrap; word-break: break-word; } .tjs .c { color: #b49ab0; } .tjs .k { color: #7ee787; } .tjs .v { color: #ffd27a; } .tjs p { margin: 0; padding: 0 18px 14px; font-size: 12px; color: #b49ab0; }
@media (max-width: 900px) { .tproc, .tlay { grid-template-columns: 1fr; } .tun__pl { margin-left: 0; width: 100%; } }
@media (max-width: 640px) {
  .tun { padding: 14px; border-radius: 24px; } .tmodes { grid-template-columns: 1fr; } .tun__as { display: none; } .tun__app { padding: 4px 5px; border-radius: 8px; column-gap: 4px; width: 23%; left: .8%; } .tun__ex { padding: 5px 6px; border-radius: 9px; width: 19%; } .tun__ex span { display: none; } .tun__stage { border-radius: 16px; }
  .ttbl table, .ttbl tbody, .ttbl tr, .ttbl td { display: block; } .ttbl thead { display: none; } .ttbl tr { padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); } .ttbl td { padding: 2px 0 !important; border: 0 !important; white-space: normal !important; }
}
.tun { max-width: 1040px; margin: 0 auto; }
@media (max-width: 640px) { .tun__hub span { display: none; } .tun__hub { width: 15%; } .tun__ex b { font-size: 9px; } }
.tmodes__c ul, .vlist { list-style: disc; } .tmodes__c li::marker, .vlist li::marker { color: var(--g2); }
.thero__top .toc { margin-top: 18px; }
.tsets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tsets__c { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .tsets__c h3 { font: 800 19px/1.2 var(--f-display); margin: 12px 0 8px; } .tsets__c p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.tsets__m { font: 700 11px/1 var(--f-mono); padding: 5px 9px; border-radius: 99px; } .tsets__m.is-b { background: rgba(255,210,122,.14); color: #ffd27a; } .tsets__m.is-p { background: rgba(194,232,78,.14); color: var(--g2); }
.tchk { display: grid; gap: 12px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.tchk__r { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .tchk__r span { font: 600 13px/1.2 var(--f-display); color: var(--ink-soft); } .tchk__r b { font: 800 20px/1.1 var(--f-mono); } .tchk__r i { font-style: normal; font-size: 13px; color: var(--ink-faint); }
.tchk__r.is-t { border-color: rgba(194,232,78,.5); } .tchk__r.is-t b { color: var(--g2); } .tchk__r.is-d { border-color: rgba(255,210,122,.45); } .tchk__r.is-d b { color: #ffd27a; }
.tchk__ok { margin: 0; text-align: center; font: 700 14px/1.2 var(--f-display); color: var(--g2); }
@media (max-width: 900px) { .tsets { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .tsets { grid-template-columns: 1fr; } }
/* ===== /nastroyka/protokoly/ ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pdis { display: grid; gap: 12px; padding: 22px; border-radius: 30px; background: radial-gradient(90% 70% at 80% 0%, rgba(34,209,96,.16), transparent 60%), rgba(0,0,0,.45); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); min-width: 0; }
.pdis__in textarea { width: 100%; resize: none; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(0,0,0,.4); color: var(--ink); font: 500 13px/1.45 var(--f-mono); word-break: break-all; } .pdis__in textarea:focus { outline: none; border-color: var(--g2); box-shadow: 0 0 0 4px rgba(194,232,78,.15); }
.pdis__url, .pcard__u { font: 600 12.5px/1.6 var(--f-mono); word-break: break-all; color: var(--ink-faint); min-height: 1.6em; }
.c0 { color: #7ee787; } .c1 { color: #7ec8ff; } .c2 { color: #ffd27a; } .c3 { color: #d2a8ff; } .c4 { color: #ff8a95; } .c5 { color: var(--ink); } .c6 { color: #ffa657; } .c7 { color: #a5d6ff; } .c8 { color: var(--ink-faint); } .c9 { color: var(--ink-soft); }
.pdis__m { display: grid; }
.pdis__l, .pdis__core { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; border: 1px dashed var(--hair); background: rgba(255,255,255,.02); transition: border-color .4s, background .4s, box-shadow .4s; }
.pdis__l .pdis__l, .pdis__l .pdis__core { margin-top: 8px; }
.pdis__k { font: 700 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .pdis__l > b, .pdis__core > b { font: 800 15px/1.2 var(--f-display); min-height: 1.2em; word-break: break-word; }
.pdis__l[data-lv="0"].is-on { border: 1px solid rgba(126,231,135,.6); background: rgba(126,231,135,.06); } .pdis__l[data-lv="0"].is-on > b { color: #7ee787; }
.pdis__l[data-lv="1"].is-on { border: 1px solid rgba(126,200,255,.55); background: rgba(126,200,255,.06); } .pdis__l[data-lv="1"].is-on > b { color: #7ec8ff; }
.pdis__l[data-lv="2"].is-on { border: 1px solid rgba(255,210,122,.55); background: rgba(255,210,122,.06); } .pdis__l[data-lv="2"].is-on > b { color: #ffd27a; }
.pdis__l[data-lv="3"].is-on { border: 1px solid rgba(210,168,255,.55); background: rgba(210,168,255,.06); } .pdis__l[data-lv="3"].is-on > b { color: #d2a8ff; }
.pdis__m.is-core .pdis__core { border: 1px solid rgba(194,232,78,.7); background: rgba(194,232,78,.1); box-shadow: 0 0 24px rgba(194,232,78,.25); }
.pdis__res { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); min-height: 84px; } .pdis__res b { display: block; font: 800 16px/1.25 var(--f-display); margin-bottom: 4px; } .pdis__res p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pdis__res.is-ok { border-color: rgba(194,232,78,.45); } .pdis__res.is-ok b { color: var(--g2); } .pdis__res.is-bad b { color: #ff8a95; } .pdis__res.is-warn b { color: #ffd27a; }
.pptbl td { color: var(--ink) !important; } .pptbl td:nth-child(2) code { white-space: nowrap; }
.pskip { margin-top: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255,93,108,.35); background: rgba(255,93,108,.06); color: var(--ink-soft); } .pskip b { color: #ff8a95; }
.pcard { padding: 22px; border-radius: 24px; background: rgba(0,0,0,.35); border: 1px solid var(--hair); display: grid; gap: 14px; } .pcard__h { margin: 0; font: 800 17px/1.2 var(--f-display); } .pcard__u { font-size: 14px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.35); }
.pcard__lg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; color: var(--ink-soft); } .pcard__lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: currentColor; vertical-align: -1px; }
.player { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .player__c { padding: 22px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .player__n { font: 700 12px/1 var(--f-mono); color: var(--g2); } .player__c h3 { font: 800 19px/1.2 var(--f-display); margin: 8px 0; } .player__c p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.pswap { display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .pswap__r { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid transparent; font: 600 14px/1 var(--f-display); } .pswap__r code { font-size: 12px; } .pswap__r b { font: 700 12.5px/1 var(--f-mono); color: var(--g2); } .pswap__r.is-on { border-color: rgba(194,232,78,.55); } .pswap p { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.pfmt { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .pfmt__c { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .pfmt__c b { font: 800 16px/1.2 var(--f-display); color: var(--g2); } .pfmt__c p { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.pdns { display: grid; gap: 14px; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .pdns__q { text-align: center; font: 800 18px/1 var(--f-mono); padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); }
.pdns__s { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pdns__b { padding: 14px; border-radius: 14px; display: grid; gap: 4px; border: 1px solid var(--hair); } .pdns__b span { font-size: 12px; color: var(--ink-faint); } .pdns__b b { font: 700 14px/1.2 var(--f-mono); } .pdns__b.is-r { border-color: rgba(194,232,78,.5); } .pdns__b.is-r b { color: var(--g2); } .pdns__b.is-d { border-color: rgba(255,210,122,.45); } .pdns__b.is-d b { color: #ffd27a; }
.pdns__t { width: 100%; border-collapse: collapse; font-size: 13px; } .pdns__t th, .pdns__t td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--hair-soft); } .pdns__t td:first-child { font-family: var(--f-mono); color: var(--g2); white-space: nowrap; } .pdns__t th { color: var(--ink-faint); font-weight: 600; }
.pks { display: grid; gap: 14px; padding: 22px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.pks__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pks__top .odec__auto { margin-left: 0; }
.pks__sw { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink); font: 700 14px/1 var(--f-display); cursor: pointer; }
.pks__sw i { width: 40px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.15); position: relative; transition: .3s; } .pks__sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .3s; } .pks__sw[aria-pressed="true"] i { background: var(--g1); } .pks__sw[aria-pressed="true"] i::after { left: 19px; }
.pks__st { position: relative; height: 190px; }
.pks__dev, .pks__srv { position: absolute; top: 30px; font-size: 34px; } .pks__dev { left: 0; } .pks__srv { right: 0; }
.pks__tube { position: absolute; left: 52px; right: 52px; top: 40px; height: 22px; border-radius: 99px; background: rgba(34,209,96,.2); box-shadow: 0 0 18px rgba(34,209,96,.35); overflow: hidden; transition: .4s; }
.pks__tube i { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--g2); animation: kpk 1.6s linear infinite; } .pks__tube i:nth-child(2) { animation-delay: .53s; } .pks__tube i:nth-child(3) { animation-delay: 1.06s; }
@keyframes kpk { from { left: -10px; } to { left: 100%; } }
.pks__crack { position: absolute; left: 50%; top: -2px; transform: translateX(-50%) scale(0); font-size: 20px; transition: .3s; }
.pks.is-down .pks__tube { background: rgba(255,93,108,.15); box-shadow: none; } .pks.is-down .pks__tube i { animation-play-state: paused; opacity: .2; } .pks.is-down .pks__crack { transform: translateX(-50%) scale(1); }
.pks__leak { position: absolute; left: 30px; right: 30px; top: 110px; height: 50px; border: 2px dashed rgba(255,210,122,.5); border-top: 0; border-radius: 0 0 30px 30px; opacity: 0; transition: .4s; } .pks__leak span { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); font: 700 12px/1 var(--f-mono); color: #ffd27a; white-space: nowrap; }
.pks__leak i { position: absolute; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ffd27a; animation: kpk 1.4s linear infinite; } .pks__leak i:nth-child(2) { animation-delay: .7s; }
.pks__wall { position: absolute; left: 50%; top: 92px; transform: translateX(-50%) scale(0); font-size: 46px; transition: .35s cubic-bezier(.3,1.6,.5,1); }
.pks.is-down:not(.is-ks) .pks__leak { opacity: 1; } .pks.is-down.is-ks .pks__wall { transform: translateX(-50%) scale(1); }
.pks__cap { margin: 0; min-height: 3em; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); color: var(--ink-soft); font-size: 14.5px; } .pks.is-down.is-ks .pks__cap { color: var(--g2); } .pks.is-down:not(.is-ks) .pks__cap { color: #ffd27a; }
.ppg { padding: 22px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); display: grid; gap: 12px; cursor: pointer; }
.ppg__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ppg__top .odec__auto { margin-left: 0; } .ppg__note { font-size: 12.5px; color: var(--ink-faint); }
.ppg__l { display: grid; grid-template-columns: 170px 1fr 80px; align-items: center; gap: 4px 14px; } .ppg__l p { grid-column: 1 / -1; margin: 0 0 6px; font-size: 13px; color: var(--ink-faint); }
.ppg__k b { font: 800 15px/1 var(--f-mono); } .ppg__k em { font-style: normal; font: 700 10px/1 var(--f-mono); padding: 3px 6px; border-radius: 99px; background: var(--grad); color: #04140a; margin-left: 6px; vertical-align: 2px; }
.ppg__t { height: 12px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; } .ppg__t i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7ec8ff, #d2a8ff); }
.ppg__l[data-pl="100"] .ppg__t i { background: var(--grad); box-shadow: 0 0 10px var(--g2); }
.ppg__v { font: 800 14px/1 var(--f-mono); text-align: right; } .ppg__l.is-done .ppg__v { color: var(--g2); }
.ppg__f { margin: 4px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(194,232,78,.07); border: 1px solid rgba(194,232,78,.3); color: var(--ink-soft); font-size: 14.5px; } .ppg__f b { color: var(--g2); }
.pspd { margin-top: 18px; }
@media (max-width: 1080px) { .pfmt { grid-template-columns: repeat(3, 1fr); } .player { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .pfmt, .player { grid-template-columns: 1fr; } .pcard__lg { grid-template-columns: 1fr; } .ppg__l { grid-template-columns: 1fr 64px; } .ppg__t { grid-column: 1 / -1; grid-row: 2; } .pdns__s { grid-template-columns: 1fr; }
  .pptbl table, .pptbl tbody, .pptbl tr, .pptbl td { display: block; } .pptbl thead { display: none; } .pptbl tr { padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); } .pptbl td { padding: 2px 0 !important; border: 0 !important; } .pptbl td:nth-child(2) code { white-space: normal; word-break: break-all; }
  .pdis { padding: 16px; border-radius: 24px; } .pdis__l, .pdis__core { padding: 8px 10px; }
}
.pfeat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pfeat__c { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); display: grid; gap: 6px; align-content: start; } .pfeat__c b { font: 800 16px/1.2 var(--f-display); } .pfeat__c p { margin: 0; font-size: 14px; color: var(--ink-soft); } .pfeat__c a { color: var(--g2); font-weight: 700; font-size: 14px; }
@media (max-width: 1080px) { .pfeat { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .pfeat { grid-template-columns: 1fr; } }
/* ===== /otzyvy-bezopasnost/ ===== */
.xr { display: grid; gap: 16px; padding: 22px; border-radius: 32px; max-width: 1040px; margin: 0 auto; background: radial-gradient(70% 60% at 50% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.45); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); }
.xr__chain { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 26px 0 10px; }
.xr__n { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border-radius: 20px; background: rgba(8,20,12,.9); border: 1px solid var(--hair); text-align: center; transition: border-color .4s, box-shadow .4s, transform .4s; }
.xr__n span { font-size: 30px; } .xr__n b { font: 700 13px/1.2 var(--f-display); }
.xr__eye { position: absolute; top: -16px; font-style: normal; font-size: 22px; opacity: 0; transform: translateY(6px) scale(.6); transition: .35s; }
.xr__n.is-on { border-color: rgba(194,232,78,.75); box-shadow: 0 0 0 4px rgba(194,232,78,.12), 0 0 30px rgba(34,209,96,.35); transform: translateY(-4px); } .xr__n.is-on .xr__eye { opacity: 1; transform: none; }
.xr__tun { position: absolute; left: calc(20% + 5px); right: calc(20% - 5px); top: 58%; height: 30px; transform: translateY(-50%); border-radius: 99px; background: linear-gradient(90deg, rgba(34,209,96,.28), rgba(194,232,78,.28)); box-shadow: 0 0 22px rgba(34,209,96,.35); display: grid; place-items: center; z-index: 0; }
.xr__tun span { position: relative; top: 30px; font: 700 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--g2); }
.xr__beam { position: absolute; top: 0; bottom: 0; left: var(--bx, 10%); width: 120px; margin-left: -60px; background: linear-gradient(90deg, transparent, rgba(194,232,78,.18), transparent); pointer-events: none; transition: left .8s var(--ease); z-index: 2; mix-blend-mode: screen; }
.xr__p { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); }
.xr__p.is-in { animation: xin .5s var(--ease); } @keyframes xin { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.xr__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .xr__h b { font: 800 20px/1.2 var(--f-display); } .xr__h span { font: 700 13px/1 var(--f-mono); color: var(--g2); }
.xr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .xr__k { margin: 0 0 6px; font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .xr__k.is-see { color: #ffd27a; } .xr__k.is-no { color: var(--g2); }
.xr__cols ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14.5px; color: var(--ink-soft); }
.xr__src { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.ovw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ovw__c { padding: 20px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .ovw__c span { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .ovw__c b { display: block; font: 800 22px/1.15 var(--f-display); margin: 8px 0 6px; color: var(--g2); } .ovw__c p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.odevc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .odevc__r { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); display: grid; gap: 4px; } .odevc__r span { font-size: 12px; color: var(--ink-faint); } .odevc__r b { font: 700 14.5px/1.2 var(--f-mono); word-break: break-word; }
.orv { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.orv__score { display: grid; gap: 12px; align-content: start; }
.orv__g { display: grid; gap: 4px; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); color: var(--ink); text-decoration: none; transition: border-color .3s; } .orv__g:hover { border-color: rgba(194,232,78,.5); }
.orv__k { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } .orv__g b { font: 800 44px/1 var(--f-display); }
.orv__st { --p: calc(var(--v) / 5 * 100%); display: block; width: 120px; height: 22px; font-size: 22px; line-height: 1; letter-spacing: 2px; background: linear-gradient(90deg, #ffd27a var(--p), rgba(255,255,255,.18) var(--p)); -webkit-background-clip: text; background-clip: text; color: transparent; } .orv__st::before { content: '★★★★★'; }
.orv__n { font-size: 13px; color: var(--ink-soft); } .orv__d { margin: 0; font-size: 12.5px; color: var(--ink-faint); } .orv__d a { color: var(--g2); }
.orv__main { padding: 20px; border-radius: 24px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); display: grid; gap: 12px; align-content: start; min-width: 0; }
.orv__top { display: flex; align-items: center; gap: 10px; } .orv__top b { font: 800 17px/1 var(--f-display); }
.orv__ch { display: flex; flex-wrap: wrap; gap: 6px; } .orv__ch button { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--hair); background: rgba(255,255,255,.04); color: var(--ink-soft); font: 700 13px/1.1 var(--f-display); cursor: pointer; text-align: left; }
.orv__ch button.is-p[aria-pressed="true"] { background: rgba(194,232,78,.16); color: var(--g2); border-color: rgba(194,232,78,.55); } .orv__ch button.is-m[aria-pressed="true"] { background: rgba(255,93,108,.14); color: #ff8a95; border-color: rgba(255,93,108,.5); }
.orv__card { padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.04); border-left: 3px solid var(--g2); } .orv__card.is-m { border-left-color: #ff8a95; } .orv__card.is-in { animation: xin .5s var(--ease); }
.orv__lab { margin: 0 0 4px; font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } .orv__lab span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }
.orv__w { margin: 0 0 12px; font: 600 16px/1.4 var(--f-display); font-style: italic; } .orv__a { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; } .orv__l { color: var(--g2); font-weight: 700; }
.osc__leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; font-size: 13px; } .osc__leg .is-ok { color: var(--g2); } .osc__leg .is-mid { color: #ffd27a; }
.osc td { color: var(--ink) !important; } .osc__b { display: inline-block; padding: 4px 9px; border-radius: 99px; font: 700 11.5px/1.2 var(--f-mono); } .osc tr.is-ok .osc__b { background: rgba(194,232,78,.14); color: var(--g2); } .osc tr.is-mid .osc__b { background: rgba(255,210,122,.14); color: #ffd27a; }
.opm2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .opm2__c { padding: 26px; border-radius: 26px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); } .opm2__c.is-p { border-color: rgba(194,232,78,.45); } .opm2__c.is-m { border-color: rgba(255,93,108,.4); }
.opm2__c h3 { font: 800 22px/1 var(--f-display); margin: 0 0 12px; } .opm2__c.is-p h3 { color: var(--g2); } .opm2__c.is-m h3 { color: #ff8a95; } .opm2__c ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 15px; }
.orisk { display: grid; gap: 14px; padding: 24px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.orisk__r { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; } .orisk__r span { font: 600 15px/1.2 var(--f-display); } .orisk__r b { font: 700 12px/1 var(--f-mono); color: var(--g2); align-self: center; } .orisk__r i { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--g2) var(--w), rgba(255,255,255,.07) var(--w)); }
.orisk__r.is-mid b { color: #ffd27a; } .orisk__r.is-mid i { background: linear-gradient(90deg, #ffd27a var(--w), rgba(255,255,255,.07) var(--w)); } .orisk__r.is-hi b { color: #ff8a95; } .orisk__r.is-hi i { background: linear-gradient(90deg, #ff8a95 var(--w), rgba(255,255,255,.07) var(--w)); }
.orisk p { margin: 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.sck { display: grid; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.sck__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } .sck__top .odec__auto { margin-left: 0; } .sck__top b { font: 800 16px/1 var(--f-mono); }
.sck__m { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; } .sck__m i { display: block; height: 100%; width: 0; border-radius: inherit; background: #ff8a95; transition: width .5s var(--ease), background .5s; }
.sck.is-mid .sck__m i { background: #ffd27a; } .sck.is-hi .sck__m i { background: var(--grad); box-shadow: 0 0 12px var(--g2); }
.sck__l { display: grid; gap: 6px; } .sck__i { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 14.5px; } .sck__i input { margin-top: 2px; width: 18px; height: 18px; accent-color: #22d160; flex: none; } .sck__i:has(input:checked) { background: rgba(194,232,78,.1); }
.sck__v { margin: 0; min-height: 2.6em; font: 600 14.5px/1.35 var(--f-display); color: var(--ink-soft); } .sck.is-hi .sck__v { color: var(--g2); }
@media (max-width: 900px) { .orv { grid-template-columns: 1fr; } .orv__score { grid-template-columns: 1fr 1fr; } .orv__d { grid-column: 1 / -1; } .ovw { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .xr { padding: 14px; border-radius: 24px; } .xr__chain { grid-template-columns: 1fr; gap: 8px; padding: 10px 0; } .xr__n { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; padding: 10px 14px; } .xr__n span { font-size: 22px; } .xr__eye { top: 50%; right: 12px; transform: translateY(-50%) scale(.6); } .xr__n.is-on .xr__eye { transform: translateY(-50%); } .xr__n.is-on { transform: translateX(4px); }
  .xr__tun { left: 22px; right: auto; top: 22%; bottom: 22%; width: 6px; height: auto; transform: none; } .xr__tun span { display: none; } .xr__beam { display: none; } .xr__cols { grid-template-columns: 1fr; }
  .ovw, .opm2, .odevc { grid-template-columns: 1fr; } .orv__score { grid-template-columns: 1fr; }
  .osc table, .osc tbody, .osc tr, .osc td { display: block; } .osc thead { display: none; } .osc tr { padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); } .osc td { padding: 2px 0 !important; border: 0 !important; }
}
@media (min-width: 641px) {
  .xr__chain { padding-bottom: 40px; }
  .xr__tun { left: 30%; right: 30%; top: auto; bottom: 18px; height: 8px; transform: none; }
  .xr__tun span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
}
/* ===== /kak-otklyuchit-udalit/ ===== */
.ulad { display: grid; gap: 16px; padding: 22px; border-radius: 32px; max-width: 1040px; margin: 0 auto; background: radial-gradient(70% 60% at 50% 0%, rgba(34,209,96,.14), transparent 60%), rgba(0,0,0,.45); border: 1px solid rgba(194,232,78,.3); box-shadow: 0 40px 100px -40px rgba(34,209,96,.45); }
.ulad__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 10px; }
.ulad__steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; bottom: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); }
.ulad__fill { position: absolute; left: 12.5%; bottom: 0; height: 4px; width: 0; max-width: 75%; border-radius: 4px; background: linear-gradient(90deg, var(--g2), #ffd27a, #ff8a95); transition: width .6s var(--ease); transform-origin: left; }
.ulad__fill { width: calc(var(--w, 0) * 1%); }
.ulad__s { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255,255,255,.03); color: var(--ink-soft); cursor: pointer; transition: .3s; }
.ulad__s span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08); font: 800 14px/1 var(--f-mono); } .ulad__s b { font: 700 13.5px/1.1 var(--f-display); }
.ulad__s.is-past span { background: rgba(194,232,78,.25); color: var(--g2); }
.ulad__s[aria-pressed="true"] { border-color: rgba(194,232,78,.6); color: var(--ink); background: rgba(194,232,78,.08); } .ulad__s[aria-pressed="true"] span { background: var(--grad); color: #04140a; }
.ulad__body { display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center; }
.uphone { justify-self: center; width: 210px; padding: 10px; border-radius: 36px; background: #0b0f0c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -30px #000; }
.uphone__s { position: relative; height: 330px; border-radius: 28px; background: #101a13; padding: 22px 14px; display: grid; align-content: start; gap: 12px; overflow: hidden; }
.uphone__app { display: flex; align-items: center; gap: 10px; transition: .6s var(--ease); } .uphone__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #04140a; font: 900 22px/1 var(--f-display); } .uphone__app b { font: 800 17px/1 var(--f-display); }
.uphone__pw { display: grid; justify-items: center; gap: 8px; padding: 16px 0; transition: .5s; } .uphone__pw i { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, var(--g1), #0c3a1d 70%); box-shadow: 0 0 30px rgba(34,209,96,.6); transition: .5s; } .uphone__pw span { font: 700 12px/1 var(--f-mono); color: var(--g2); transition: .5s; }
.uphone__sub { display: flex; justify-content: space-between; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13px; transition: .6s var(--ease); } .uphone__sub span { color: var(--ink-faint); }
.uphone__del, .uphone__clean { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); font-size: 54px; transition: .45s cubic-bezier(.3,1.6,.5,1); } .uphone__clean { font: 800 20px/1 var(--f-display); color: var(--g2); white-space: nowrap; }
.uphone.lv0 .uphone__pw i, .uphone.lv1 .uphone__pw i { background: radial-gradient(circle, #3a3f3b, #1a1e1b 70%); box-shadow: none; } .uphone.lv0 .uphone__pw span, .uphone.lv1 .uphone__pw span { color: var(--ink-faint); }
.uphone.lv0 .uphone__pw i { animation: upw .6s var(--ease); } @keyframes upw { 50% { transform: scale(.85); } }
.uphone.lv1 .uphone__sub, .uphone.lv2 .uphone__sub, .uphone.lv3 .uphone__sub { transform: translateX(130%); opacity: 0; }
.uphone.lv2 .uphone__app, .uphone.lv3 .uphone__app, .uphone.lv2 .uphone__pw, .uphone.lv3 .uphone__pw { opacity: 0; transform: scale(.6); }
.uphone.lv2 .uphone__app { animation: ujig .4s 2; } @keyframes ujig { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.uphone.lv2 .uphone__del { transform: translate(-50%, -50%) scale(1); } .uphone.lv3 .uphone__clean { transform: translate(-50%, -50%) scale(1); }
.ulad__info { min-width: 0; } .ulad__info.is-in { animation: xin .5s var(--ease); }
.ulad__k { margin: 0; font: 700 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--g2); } .ulad__h { margin: 6px 0 14px; font: 800 clamp(24px, 3vw, 32px)/1.1 var(--f-display); }
.ulad__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ulad__g > div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border-top: 3px solid; } .ulad__g span { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; } .ulad__g p { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.ulad__g .is-loss { border-color: #ff8a95; } .ulad__g .is-loss span { color: #ff8a95; } .ulad__g .is-keep { border-color: var(--g2); } .ulad__g .is-keep span { color: var(--g2); } .ulad__g .is-back { border-color: #7ec8ff; } .ulad__g .is-back span { color: #7ec8ff; }
.ulad__pk { margin: 16px 0 4px; font: 700 12px/1 var(--f-mono); text-transform: uppercase; color: var(--ink-faint); } .ulad__st { margin: 0; font: 600 16px/1.4 var(--f-display); } .ulad__tip { margin: 6px 0 0; font-size: 14px; color: var(--ink-faint); }
.uoff { display: grid; justify-items: center; gap: 14px; padding: 30px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); }
.uoff__b { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #2a2f2b, #121513 70%); border: 1px solid var(--hair); } .uoff__b i { width: 44px; height: 44px; border: 4px solid var(--ink-faint); border-top-color: transparent; border-radius: 50%; position: relative; } .uoff__b i::after { content: ''; position: absolute; left: 50%; top: -14px; width: 4px; height: 24px; margin-left: -2px; background: var(--ink-faint); border-radius: 2px; }
.uoff p { margin: 0; text-align: center; } .uoff b { display: block; font: 800 20px/1.2 var(--f-display); } .uoff span { color: var(--ink-faint); font-size: 14px; }
.usub { display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .usub__r { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); font-size: 15px; } .usub__r b { font: 700 14px/1.2 var(--f-mono); } .usub__r.is-x b { color: var(--g2); } .usub__r.is-ok { border: 1px solid rgba(194,232,78,.5); } .usub__r.is-ok b { color: var(--g2); }
.ufix { display: grid; gap: 10px; } .ufix__i { border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--hair); padding: 0 18px; } .ufix__i summary { cursor: pointer; padding: 16px 0; font: 700 16px/1.3 var(--f-display); list-style: none; } .ufix__i summary::before { content: '⚠'; margin-right: 10px; color: #ffd27a; } .ufix__i p { margin: 0 0 16px; color: var(--ink-soft); } .ufix__i[open] { border-color: rgba(194,232,78,.45); }
.uback { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 30px; border-radius: 26px; background: rgba(0,0,0,.3); border: 1px solid var(--hair); } .uback span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.06); font-size: 28px; } .uback span:last-of-type { background: var(--grad); color: #04140a; font-weight: 900; } .uback i { width: 34px; height: 3px; border-radius: 3px; background: var(--grad); } .uback p { width: 100%; margin: 8px 0 0; text-align: center; font: 600 13px/1 var(--f-mono); color: var(--ink-faint); }
@media (max-width: 760px) { .ulad__body { grid-template-columns: 1fr; } .ulad__g { grid-template-columns: 1fr; } .uphone { width: 180px; } .uphone__s { height: 270px; } }
@media (max-width: 640px) { .ulad { padding: 14px; border-radius: 24px; } .ulad__s { padding: 8px 4px; } .ulad__s b { font-size: 11.5px; } .ulad__s span { width: 26px; height: 26px; } }
/* ===== /legal/ ===== */
.lgl { padding-bottom: 60px; } .lgl__b { max-width: 760px; } .lgl__b .dlhero__title { font-size: clamp(32px, 5vw, 52px); margin-bottom: 8px; }
.lgl__d { color: var(--ink-faint); font: 600 13px/1 var(--f-mono); margin-bottom: 28px; }
.lgl__b h2 { font: 800 22px/1.25 var(--f-display); margin: 30px 0 10px; } .lgl__b p, .lgl__b li { color: var(--ink-soft); font-size: 16px; line-height: 1.65; } .lgl__b ul { padding-left: 22px; display: grid; gap: 6px; list-style: disc; } .lgl__b a:not(.btn) { color: var(--g2); }
/* ===== меню с разделами ===== */
.mnav > ul { display: flex; gap: 2px; }
.mnav__i { position: relative; }
.mnav__b { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 0; background: none; font: 500 14px/1 var(--f-display); color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; }
.mnav__b i { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); opacity: .7; }
.mnav__i:hover .mnav__b, .mnav__i.is-open .mnav__b { background: rgba(255,255,255,.08); color: var(--ink); }
.mnav__i.is-open .mnav__b i, .mnav__i:hover .mnav__b i { transform: translateY(1px) rotate(225deg); }
.mnav__i.is-cur .mnav__b { background: rgba(34,209,96,.14); color: var(--ink); }
.mnav__p { position: absolute; top: 100%; left: 50%; padding-top: 12px; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .25s var(--ease), visibility .2s; z-index: 60; }
.mnav__i:hover .mnav__p, .mnav__i.is-open .mnav__p, .mnav__i:focus-within .mnav__p { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mnav__l { display: grid; gap: 2px; width: 280px; padding: 8px; border-radius: 20px; background: rgba(8, 18, 11, .97); border: 1px solid var(--hair); box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.mnav__l--2 { grid-template-columns: 1fr 1fr; width: 520px; }
.nav__pill .mnav__l a { display: grid; gap: 3px; padding: 11px 13px; border-radius: 13px; color: var(--ink); background: none; }
.nav__pill .mnav__l a b { font: 600 14.5px/1.2 var(--f-display); } .nav__pill .mnav__l a span { font: 500 12.5px/1.25 var(--f-display); color: var(--ink-faint); }
.nav__pill .mnav__l a:hover { background: rgba(255,255,255,.06); }
.nav__pill .mnav__l a[aria-current="page"] { background: rgba(34,209,96,.14); } .nav__pill .mnav__l a[aria-current="page"] b { color: var(--g2); }
.mnav__i:last-child .mnav__p { left: auto; right: 0; transform: translate(0, 6px); } .mnav__i:last-child:hover .mnav__p, .mnav__i:last-child.is-open .mnav__p, .mnav__i:last-child:focus-within .mnav__p { transform: none; }
.nav__sheet { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; gap: 6px; }
.msh__home { padding: 13px 12px !important; }
.msh__g { border-radius: 14px; } .msh__g[open] { background: rgba(255,255,255,.04); }
.msh__g summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; font: 700 17px/1 var(--f-display); cursor: pointer; border-radius: 12px; }
.msh__g summary::-webkit-details-marker { display: none; }
.msh__g summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.msh__g[open] summary::after { transform: translateY(2px) rotate(225deg); }
.msh__g ul { padding: 0 6px 8px; display: grid; gap: 2px; }
.nav__sheet .msh__g a { padding: 11px 12px; font: 500 15.5px/1.2 var(--f-display); color: var(--ink-soft); }
.nav__sheet a[aria-current="page"] { color: var(--g2) !important; background: rgba(34,209,96,.1); }
@media (max-width: 1180px) { .mnav__b { padding: 9px 11px; font-size: 13.5px; } }
.nav__pill ul.mnav__l { display: grid; gap: 2px; }
.nav__pill ul.mnav__l--2 { grid-template-columns: 1fr 1fr; }
.nav__sheet { background: rgba(6, 14, 9, .97); }
/* шапка: слой с маской рисуется на canvas из основного видео */
.hero__box canvas.hero__fg { opacity: 0; transition: opacity .35s ease; }
.hero__box.is-sync canvas.hero__fg { opacity: 1; }
.hero__box video.hero__loop { opacity: 0; }
.hero__box.is-loop video.hero__bg:not(.hero__loop) { opacity: 0; }
.hero__box.is-loop video.hero__bg.hero__loop { opacity: 1; }
/* кнопки полной версии ролика — сразу, не дожидаясь конца */
.hero__now { position: absolute; z-index: 9; left: 24%; right: 6%; bottom: 2.2%; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; transition: opacity .3s; }
.hero__now .btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.hero__now-go .arr { display: inline-block; animation: arrNudge 1.2s ease-in-out infinite; }
.hero__end:not([hidden]) ~ .hero__now { opacity: 0; pointer-events: none; }
.pblk__full { margin-top: 18px; }
@media (max-width: 760px) { .hero__now { left: 16px; right: 16px; bottom: 11%; } }
@media (max-width: 640px) { .hero__now { left: 10px; right: 10px; bottom: 9.5%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; } .hero__now .btn { min-height: 38px; padding: 0 8px; font-size: 12.5px; } }
.hero__now { bottom: 13.5%; left: 24%; right: auto; }
.hero .hero__box ~ * .hero__chips, .hero__chips { bottom: 21%; }
.hero__now-m { display: none; }
@media (max-width: 640px) {
  .hero__now { display: none; }
  .hero__now-m { display: inline-flex; flex: 1 1 100%; justify-content: center; }
  .hero__now-m .arr { display: inline-block; margin-left: 6px; animation: arrNudge 1.2s ease-in-out infinite; }
}
@media (min-width: 641px) and (max-width: 900px) { .hero__now { left: 16px; bottom: 30%; } }
.hero__now-ms { display: none; }
@media (max-width: 640px) {
  .hero__cta .btn--video { flex: 1 1 0; } .hero__cta .btn--video small { display: none; }
  .hero__now-m { flex: 1 1 0; padding: 0 10px !important; font-size: 13.5px !important; }
  .hero__now-ml { display: none; } .hero__now-ms { display: inline; }
  .hero__now-m .arr { margin-left: 4px; }
}
.pblk__full { margin-top: 0; } .pblk__full .arr { display: inline-block; margin-left: 6px; animation: arrNudge 1.2s ease-in-out infinite; }