/* Сайт Aurus Media Creatives. Цвета студии из brand/ui/aurus.css.

   Шпаргалка общих классов и data-атрибутов (ими можно пользоваться на любой странице):
   .reveal                блок появляется при прокрутке (site.js ставит .in); соседи, появившиеся вместе, идут по очереди
   data-reveal="left|right|zoom|fade"   вид появления для .reveal, по умолчанию снизу вверх
   data-delay="200"       своя задержка появления .reveal в мс
   НЕ ставить .reveal на элемент, у которого есть своя animation: появление её перебьёт
   .spot, data-spot       свечение фона и рамки за курсором (у .card, .plan, .product, .pain ставится само)
   data-tilt              элемент получает --tx и --ty (от -0.5 до 0.5) по курсору: для наклона и параллакса детей
   data-magnet            кнопка мягко тянется за курсором (у .btn.primary само)
   data-count="24"        число считается от 0 при появлении, без JS сразу видно итоговое
   data-countdown="2026-10-31T23:59:59+03:00"  таймер, внутри элементы [data-u=d|h|m|s]; по окончании html.promo-over
   data-progress          элемент получает --p от 0 до 1 по мере прокрутки (линия шагов "Как купить")
   .win > .bar            снимок в рамке окна с точками, разметка build.win_bar(title)
   .pill                  плашка-ссылка в первом экране; .chip стеклянная плашка с .ico; .glass стеклянная подложка
   .grad                  текст с градиентом студии; .promo-only прячется после конца акции; .hide-sm не виден на телефоне
   form, #form, data-hide-float   пока такой элемент на экране, плавающая кнопка Telegram спрятана
   .btn.alt               заметная вторичная кнопка с цветной рамкой; .btn.shine блик по основной кнопке
   .dock                  нижняя панель действий на телефоне (build.dock); .tg-float плавающая кнопка Telegram
*/

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #0A0F18;
  --bg-2: #0E141E;
  --surface: #121A27;
  --surface-2: #172233;
  --surface-3: #1D2A3E;
  --line: #223047;
  --line-2: #2E3F5A;
  --text: #E9EEF7;
  --muted: #93A1B8;
  --faint: #66758D;
  --accent: #5A6EDB;
  --accent-2: #8FA2F7;
  --accent-soft: rgba(90, 110, 219, .16);
  --good: #3CCB8F;
  --hue: var(--accent-2);
  --hue-rgb: 143, 162, 247;
  --hue-soft: rgba(143, 162, 247, .14);
  --hue-grad: linear-gradient(100deg, #8FA2F7 0%, #B9A5FF 45%, #6FD6E8 100%);
  --grad: linear-gradient(100deg, #8FA2F7 0%, #B9A5FF 45%, #5ED6D0 100%);
  --violet: #B9A5FF;
  --glass: rgba(16, 23, 36, .64);
  --glass-line: rgba(143, 162, 247, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 18px;
  --wrap: 1200px;
  --gutter: 24px;
  color-scheme: dark;
}
.hue-amber { --hue: #F2B544; --hue-rgb: 242, 181, 68; --hue-soft: rgba(242, 181, 68, .14);
  --hue-grad: linear-gradient(100deg, #FFD98A 0%, #F2B544 45%, #FF9B5E 100%); }
.hue-blue  { --hue: #8FA2F7; --hue-rgb: 143, 162, 247; --hue-soft: rgba(143, 162, 247, .15);
  --hue-grad: linear-gradient(100deg, #8FA2F7 0%, #B9A5FF 45%, #6FD6E8 100%); }
.hue-teal  { --hue: #2EC4C4; --hue-rgb: 46, 196, 196; --hue-soft: rgba(46, 196, 196, .14);
  --hue-grad: linear-gradient(100deg, #7BEBDD 0%, #2EC4C4 45%, #8FA2F7 100%); }
.hue-azure { --hue: #6CB6FF; --hue-rgb: 108, 182, 255; --hue-soft: rgba(108, 182, 255, .14);
  --hue-grad: linear-gradient(100deg, #9FD0FF 0%, #6CB6FF 45%, #2479D1 100%); }
.hue-violet { --hue: #B99BFF; --hue-rgb: 185, 155, 255; --hue-soft: rgba(185, 155, 255, .14);
  --hue-grad: linear-gradient(100deg, #D7C6FF 0%, #B99BFF 45%, #8A5CE6 100%); }
.hue-green { --hue: #4FD1A5; --hue-rgb: 79, 209, 165; --hue-soft: rgba(79, 209, 165, .14);
  --hue-grad: linear-gradient(100deg, #A6F0D6 0%, #4FD1A5 45%, #2EC4C4 100%); }
.hue-copper { --hue: #F2A65A; --hue-rgb: 242, 166, 90; --hue-soft: rgba(242, 166, 90, .14);
  --hue-grad: linear-gradient(100deg, #FFD3A1 0%, #F2A65A 45%, #CC6F1F 100%); }
.hue-orange { --hue: #FF8A1F; --hue-rgb: 255, 138, 31; --hue-soft: rgba(255, 138, 31, .14);
  --hue-grad: linear-gradient(100deg, #FFC58A 0%, #FF8A1F 45%, #E8637A 100%); }
.hue-cobalt { --hue: #5B8CFF; --hue-rgb: 91, 140, 255; --hue-soft: rgba(91, 140, 255, .15);
  --hue-grad: linear-gradient(100deg, #A9C2FF 0%, #5B8CFF 45%, #2F5BD8 100%); }
.hue-sky { --hue: #36B4F0; --hue-rgb: 54, 180, 240; --hue-soft: rgba(54, 180, 240, .14);
  --hue-grad: linear-gradient(100deg, #A5E2FF 0%, #36B4F0 45%, #2EC4C4 100%); }
.hue-rose  { --hue: #E8637A; --hue-rgb: 232, 99, 122; --hue-soft: rgba(232, 99, 122, .14);
  --hue-grad: linear-gradient(100deg, #FF9DAE 0%, #E8637A 45%, #F2B544 100%); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(143, 162, 247, .35); color: #fff; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-2); text-decoration: none; transition: color .2s; }
a:hover { color: #B4C1FF; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; }
p { margin: 0; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

/* ---------- фон первого экрана: плывущие пятна света, сетка, шум */
.glow {
  position: absolute; inset: 0 0 auto 0; height: 1150px; pointer-events: none; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #0D1422 0%, var(--bg) 94%);
}
.glow i { position: absolute; border-radius: 50%; will-change: transform; }
.glow .b1 { width: 820px; height: 820px; left: -260px; top: -300px;
  background: radial-gradient(closest-side, rgba(90, 110, 219, .42), rgba(90, 110, 219, 0));
  animation: drift-a 26s ease-in-out infinite alternate; }
.glow .b2 { width: 720px; height: 720px; right: -220px; top: -120px;
  background: radial-gradient(closest-side, rgba(var(--hue-rgb), .24), rgba(var(--hue-rgb), 0));
  animation: drift-b 31s ease-in-out infinite alternate; }
.glow .b3 { width: 620px; height: 620px; left: 34%; top: 360px;
  background: radial-gradient(closest-side, rgba(185, 165, 255, .13), rgba(185, 165, 255, 0));
  animation: drift-c 36s ease-in-out infinite alternate; }
.glow::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(143, 162, 247, .055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(143, 162, 247, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1000px 640px at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(1000px 640px at 50% 0%, #000 20%, transparent 75%);
}
.glow::after {
  content: ""; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes drift-a { to { transform: translate3d(140px, 90px, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-160px, 120px, 0) scale(.9); } }
@keyframes drift-c { to { transform: translate3d(-120px, -110px, 0) scale(1.18); } }

/* ---------- шапка: стекло, уменьшается при прокрутке, полоса прочитанного */
.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 15, 24, .5);
  backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid rgba(143, 162, 247, .07);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.top.scrolled { background: rgba(9, 13, 21, .8); border-bottom-color: rgba(143, 162, 247, .14); box-shadow: 0 12px 34px rgba(0, 0, 0, .35); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 76px; transition: height .35s var(--ease); }
.top.scrolled .wrap { height: 62px; }
.read-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad); box-shadow: 0 0 12px rgba(143, 162, 247, .7);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand img { width: 40px; height: 40px; border-radius: 50%; transition: width .35s var(--ease), height .35s var(--ease), box-shadow .3s;
  box-shadow: 0 0 0 1px rgba(143, 162, 247, .35), 0 0 22px rgba(90, 110, 219, .45); }
.brand:hover img { box-shadow: 0 0 0 1px rgba(143, 162, 247, .6), 0 0 30px rgba(90, 110, 219, .7); }
.top.scrolled .brand img { width: 34px; height: 34px; }
/* неоновое кольцо вокруг знака: бегущий градиент по контуру и мягкое пульсирующее свечение */
.logo-ring { position: relative; display: inline-flex; flex: none; border-radius: 50%; isolation: isolate; }
.logo-ring::before, .logo-ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #5A6EDB, #8FA2F7, #3CE0D0, #B58CFF, #5A6EDB);
  animation: ring-spin 4s linear infinite;
}
.logo-ring::before { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.logo-ring::after { inset: -6px; filter: blur(9px); opacity: .55; animation: ring-spin 4s linear infinite, ring-glow 2.6s ease-in-out infinite; }
.logo-ring img { position: relative; z-index: 1; box-shadow: none !important; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ring-glow { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
.brand small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { position: relative; color: var(--muted); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 10px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:not(.btn):not(.nav-order)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:not(.btn):not(.nav-order):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav-order {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 6px; padding: 7px 14px; border-radius: 999px;
  color: var(--text); border: 1px solid transparent;
  background: linear-gradient(#111827, #111827) padding-box, var(--grad) border-box;
  transition: box-shadow .3s ease, background .3s ease;
}
.nav .nav-order:hover, .nav .nav-order[aria-current="page"] { color: #fff; box-shadow: 0 0 24px rgba(185, 165, 255, .28);
  background: linear-gradient(#18203A, #18203A) padding-box, var(--grad) border-box; }
.nav .nav-order svg.i { width: 16px; height: 16px; color: var(--violet); }
.nav .btn { margin-left: 8px; flex: none; }
.burger {
  display: none; position: relative; margin-left: auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: rgba(143, 162, 247, .06); border: 1px solid var(--line-2); color: var(--text); border-radius: 12px;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--ease), background .2s;
}
.burger span { left: 12px; top: 20px; }
.burger span::before { left: 0; top: -6px; }
.burger span::after { left: 0; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- кнопки */
.btn {
  --bx: 0px; --by: 0px; --lift: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 14px;
  font: 700 16px/1 "Manrope", system-ui, sans-serif; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--bx), calc(var(--by) + var(--lift)), 0);
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .2s;
}
.btn:hover { --lift: -2px; }
.btn:active { --lift: 1px; transition-duration: .08s; }
.btn.primary {
  color: #fff;
  background: linear-gradient(180deg, #7488F2 0%, #5064D6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 0 0 1px rgba(143, 162, 247, .35), 0 12px 32px rgba(90, 110, 219, .45);
}
.btn.primary:hover { color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 0 0 1px rgba(170, 186, 255, .6), 0 18px 44px rgba(90, 110, 219, .62); }
.btn.primary::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .42) 47%, rgba(255, 255, 255, .1) 55%, transparent 68%);
  transform: translateX(-130%);
}
.btn.primary:hover::after { animation: shine .9s var(--ease); }
.btn.shine::after { animation: shine-loop 6s ease-in-out 1.6s infinite; }
@keyframes shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes shine-loop { 0%, 76% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.btn.ghost { color: var(--text); background: rgba(143, 162, 247, .06); border-color: rgba(143, 162, 247, .24); }
.btn.ghost:hover { color: var(--text); background: rgba(143, 162, 247, .12); border-color: rgba(143, 162, 247, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.btn.alt {
  color: var(--text); border: 1px solid transparent;
  background: linear-gradient(#101725, #101725) padding-box, var(--grad) border-box;
}
.btn.alt:hover { color: #fff; box-shadow: 0 14px 38px rgba(185, 165, 255, .26);
  background: linear-gradient(#17203A, #17203A) padding-box, var(--grad) border-box; }
.btn.alt svg.i { color: var(--violet); }
.btn.small { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn .sub { font-weight: 600; font-size: 13px; opacity: .75; }
.btn svg.i { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.btn:hover svg.i.arr { transform: translateX(3px); }

/* ---------- общие мелочи */
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glass { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 5px 14px 5px 5px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #D3F5E0;
  background: rgba(22, 163, 74, .1); border: 1px solid rgba(74, 222, 128, .35);
  transition: background .25s, border-color .25s, color .2s;
}
.pill b { flex: none; padding: 3px 10px; border-radius: 999px; background: #16A34A; color: #fff; font-size: 13px; box-shadow: 0 0 16px rgba(22, 163, 74, .6); }
.pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill svg.i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.pill:hover { color: #fff; background: rgba(22, 163, 74, .18); border-color: rgba(74, 222, 128, .6); }
.pill:hover svg.i { transform: translateX(3px); }
.pill-row { margin-bottom: 18px; }
/* три плашки первого экрана главной: одной ширины, по самой широкой */
.hero-badges { display: grid; gap: 14px; width: fit-content; max-width: 100%; }
.hero-badges .pill-row { margin: 0; display: grid; }
.hero-badges .pill, .hero-badges .hot, .hero-badges .eyebrow { display: flex; width: 100%; box-sizing: border-box; }
.hero-badges .pill > span:last-of-type, .hero-badges .hot-txt { flex: 1; }
/* броская плашка "Программы на заказ": вращающийся ореол, пульс свечения, мерцание значка */
.hot {
  position: relative; display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 9px 20px 9px 9px;
  border-radius: 20px; color: #fff; isolation: isolate;
  border: 2px solid transparent;
  background-image: linear-gradient(135deg, #1C1640, #2A1B5C), conic-gradient(from var(--ang), #FBBF24, #F472B6, #8FA2F7, #22D3EE, #FBBF24);
  background-origin: border-box; background-clip: padding-box, border-box;
  animation: spin-border 3.5s linear infinite, hot-glow 2s ease-in-out infinite;
  transition: transform .25s var(--ease);
}
.hot:hover { transform: translateY(-2px) scale(1.02); }
.hot-halo {
  position: absolute; inset: -14px; z-index: -1; border-radius: 30px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(251, 191, 36, .45), rgba(244, 114, 182, .3) 55%, transparent 100%);
  filter: blur(14px); animation: hot-halo 2s ease-in-out infinite;
}
.hot-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2B1600;
  background: linear-gradient(135deg, #FDE68A, #FBBF24); animation: hot-flicker 2.6s linear infinite;
}
.hot-badge svg.i { width: 18px; height: 18px; }
.hot-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hot-txt b { font-size: 18px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.hot-txt i { font-style: normal; font-size: 13px; font-weight: 600; color: #C9CFF7; }
.hot > svg.i { flex: none; width: 18px; height: 18px; color: #FBBF24; transition: transform .25s var(--ease); }
.hot:hover > svg.i { transform: translateX(4px); }
@keyframes hot-glow { 0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, .35); } 50% { box-shadow: 0 0 34px rgba(244, 114, 182, .75); } }
@keyframes hot-halo { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes hot-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 10% { opacity: 1; } 12% { opacity: .7; } 14%, 60% { opacity: 1; } 62% { opacity: .6; } 64% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hot, .hot-halo, .hot-badge { animation: none; } }
@media (max-width: 560px) { .hot { gap: 10px; padding-right: 14px; } .hot-txt b { font-size: 15px; } .hot-txt i { display: none; } .hot-badge { padding: 7px 10px; } }
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--text);
  background: rgba(16, 23, 36, .9); border: 1px solid rgba(var(--hue-rgb), .3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--hue-rgb), .12);
}
.chip .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--hue-soft); color: var(--hue); }
.chip .ico svg.i { width: 17px; height: 17px; }

/* ---------- первый экран */
.hero { position: relative; padding: 84px 0 64px; overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero.home .wrap { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 40px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #B3BFD3; letter-spacing: .01em;
  background: rgba(143, 162, 247, .05); border: 1px solid rgba(143, 162, 247, .16);
}
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); animation: ping 2.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(var(--hue-rgb), .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(var(--hue-rgb), 0); } }
.hero h1 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 22px 0; text-wrap: pretty; }
.hero.home h1 { font-size: clamp(36px, 4.3vw, 56px); line-height: 1.06; }
.hero.home h1 em { display: block; width: fit-content; }
.hero h1 em, .hero h1.split em .w {
  font-style: normal; color: transparent;
  background: var(--hue-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: grad-pan 9s ease-in-out infinite alternate;
}
.hero h1.split em { background: none; animation: none; }
@keyframes grad-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.js .split .w { display: inline-block; animation: word-in .9s var(--ease) backwards; animation-delay: calc(var(--i) * 55ms + 80ms); }
.js .hero h1.split em .w { animation: word-in .9s var(--ease) backwards, grad-pan 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 55ms + 80ms), 0s; }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(8px); } }
.hero .lead { font-size: 19px; color: #B9C4D6; max-width: 36em; }
.hero-tg { margin-top: 18px; font-size: 15px; color: var(--muted); }
.hero-tg a { font-weight: 800; white-space: nowrap; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.facts li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #C9D5E6;
  background: rgba(60, 203, 143, .06); border: 1px solid rgba(60, 203, 143, .2);
}
.facts svg.i { width: 16px; height: 16px; color: var(--good); }
.note { margin-top: 16px; font-size: 14px; color: var(--faint); max-width: 42em; }

/* снимок программы в рамке окна */
.shot {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(143, 162, 247, .2); background: var(--surface);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 80px var(--hue-soft);
}
.shot img { width: 100%; height: auto; }
.win .bar {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: linear-gradient(180deg, #1B2538, #141C2B); border-bottom: 1px solid rgba(143, 162, 247, .12);
}
/* три точки в заголовке окна: цвета флага РФ, белый, синий, красный (везде и для новых плашек тоже) */
.win .bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; }
.win .bar i:nth-child(2) { background: #1C57A5; }
.win .bar i:nth-child(3) { background: #D52B1E; }
.win .bar span { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 38%);
}

/* страница программы: снимок, телефон и плашки с параллаксом за курсором (--tx, --ty от data-tilt) */
.hero-visual { position: relative; perspective: 1600px; }
.hero-visual > .shot {
  transform: rotateY(calc(-7deg + var(--tx, 0) * 10deg)) rotateX(calc(2deg - var(--ty, 0) * 8deg));
  transform-origin: 40% 50%; transition: transform .7s var(--ease);
}
.hero-visual .phone {
  position: absolute; right: -14px; bottom: -40px; width: 21%; border-radius: 22px; overflow: hidden;
  border: 3px solid #1D2638; box-shadow: 0 30px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(143, 162, 247, .22);
  transform: translate3d(calc(var(--tx, 0) * -30px), calc(var(--ty, 0) * -22px), 0); transition: transform .7s var(--ease);
  animation: bob 7s ease-in-out infinite;
}
.hero-visual > .chip {
  position: absolute; z-index: 2;
  transform: translate3d(calc(var(--tx, 0) * 44px), calc(var(--ty, 0) * 34px), 0); transition: transform .7s var(--ease);
  animation: bob 6s ease-in-out infinite;
}
.hero-visual > .chip.c1 { left: -30px; bottom: 16%; }
.hero-visual > .chip.c2 { right: 14%; top: -22px; animation-delay: -3s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* главная: четыре программы лесенкой в объёме. l1 дальняя, l4 передняя.
   Шаг лесенки ровный: 12% вниз и 7% влево, снимки одной высоты (обрезка сверху вниз),
   плашки c1..c4 по одной на программу, каждая в своей полосе по высоте, чтобы не наезжали */
.stack { position: relative; aspect-ratio: 1.1; perspective: 1800px; }
.stack .deck {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(9deg - var(--ty, 0) * 10deg)) rotateY(calc(-13deg + var(--tx, 0) * 14deg));
  transition: transform .9s var(--ease);
}
.stack .layer { position: absolute; width: 72%; }
.stack .shot img { aspect-ratio: 960 / 562; object-fit: cover; object-position: top left; }
.stack .l1 { top: 0; right: -1%; transform: translateZ(-150px); }
.stack .l2 { top: 10%; right: 5%; transform: translateZ(-90px); }
.stack .l3 { top: 20%; right: 11%; transform: translateZ(-30px); }
.stack .l4 { top: 30%; right: 17%; transform: translateZ(20px); }
.stack .l5 { top: 40%; right: 23%; transform: translateZ(70px); }
.stack .l6 { top: 50%; right: 29%; transform: translateZ(120px); }
.stack .l1 .shot img { filter: brightness(.55); }
.stack .l2 .shot img { filter: brightness(.7); }
.stack .l3 .shot img { filter: brightness(.85); }
.stack .chip { position: absolute; transform: translateZ(150px); animation: bob 6s ease-in-out infinite; }
/* плитки программ над лесенкой снимков: три в ряд, каждая ссылка на страницу программы */
.hero-right { min-width: 0; }
.hero.home .hero-right { align-self: start; }  /* верх плиток на уровне верха левой колонки */
.hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; position: relative; z-index: 3; }
.tile {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 11px; border-radius: 14px; min-width: 0;
  background: rgba(16, 23, 36, .88); border: 1px solid rgba(var(--hue-rgb), .3); color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.tile:hover, .tile:focus-visible { transform: translateY(-3px); border-color: rgba(var(--hue-rgb), .75); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 28px rgba(var(--hue-rgb), .25); }
.tile .ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--hue-soft); color: var(--hue); }
.tile .ico svg.i { width: 18px; height: 18px; }
.tile .tx { display: flex; flex-direction: column; min-width: 0; }
.tile b { font-size: 14px; line-height: 1.2; }
.tile i { font-style: normal; font-size: 12px; line-height: 1.3; color: var(--muted); }
@media (max-width: 1080px) { .hero.home .hero-right { align-self: auto; } .hero-right { max-width: 720px; margin: 0 auto; width: 100%; } }
@media (max-width: 560px) { .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tile { padding: 9px; } .tile i { display: none; } }

/* главная: девять больших плиток (программа, кому, три пункта) вместо лесенки снимков.
   Первый экран всегда заканчивается кнопками: на компьютере секция высотой с окно без шапки,
   заголовок и отступы зависят от высоты окна, на низких окнах прячутся eyebrow и факты */
.hero-tiles.big { margin: 0; gap: 10px; align-content: center; }
.tile.big { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px 13px; }
.tile.big .hd { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tile.big .ico { width: 30px; height: 30px; border-radius: 9px; }
.tile.big .ico svg.i { width: 16px; height: 16px; }
.tile.big { position: relative; }
.tile.big b { font-size: 15px; }
/* "скоро" ярлычком на верхней рамке, чтобы не съедать место у имени */
.tile.big .soon {
  position: absolute; top: -8px; right: 10px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  border: 1px solid rgba(var(--hue-rgb), .45); background: #121A29;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hue);
}
.tile.big i { font-size: 12.5px; font-weight: 700; color: var(--hue); }
.tile.big ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tile.big li { position: relative; padding-left: 12px; font-size: 12.5px; line-height: 1.3; color: #B9C4D6; }
.tile.big li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--hue); }
.hero.home .hero-left { min-width: 0; }
.hero.home .eyebrow { margin-top: 14px; font-size: 13px; }
@media (min-width: 1081px) {
  .hero.home { display: flex; align-items: center; min-height: calc(100svh - 76px); padding: clamp(16px, 3vh, 40px) 0; }
  .hero.home .wrap { width: 100%; max-width: 1340px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: center; }
  .hero.home h1 { font-size: clamp(30px, min(3.5vw, 5.8vh), 54px); margin: clamp(10px, 2vh, 20px) 0; }
  .hero.home .lead { font-size: clamp(15px, min(1.3vw, 2.3vh), 19px); }
  .hero.home .facts { margin-top: clamp(12px, 2vh, 22px); }
  .hero.home .cta { margin-top: clamp(16px, 3vh, 30px); }
  .hero.home .hero-badges { gap: 10px; }
}
@media (min-width: 1081px) and (max-height: 820px) {
  .hero.home .eyebrow { display: none; }
  .tile.big { padding: 9px 12px 10px; gap: 4px; }
  .tile.big li { font-size: 12px; }
}
@media (min-width: 1081px) and (max-height: 700px) {
  .hero.home .facts { display: none; }
  .hero.home .hero-badges .promo-only { display: none; }
}
/* широкая плитка анонса Aurus Graber под плитками программ: знак студии в кольце, ярлык СКОРО, блик */
.hero.home .hero-right { align-self: center; display: grid; gap: 12px; }
.g-tile {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px;
  border-radius: 16px; color: var(--text); border: 1px solid rgba(185, 155, 255, .45);
  background: radial-gradient(360px 140px at 0% 50%, rgba(185, 155, 255, .2), transparent 70%),
              linear-gradient(100deg, rgba(30, 24, 52, .95), rgba(16, 23, 36, .92));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 32px rgba(185, 155, 255, .12);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.g-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
  transform: translateX(-100%); animation: g-shine 5s ease-in-out infinite; }
.g-tile:hover, .g-tile:focus-visible { transform: translateY(-3px); border-color: rgba(185, 155, 255, .85); box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 36px rgba(185, 155, 255, .3); }
.g-logo { flex: none; width: 60px; height: 60px; border-radius: 50%; padding: 2px; display: grid; place-items: center;
  background: conic-gradient(from 0deg, #B99BFF, #6E8BFF, #3CCB8F, #B99BFF); box-shadow: 0 0 22px rgba(185, 155, 255, .45); }
.g-logo img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.g-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.g-k { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.g-tx b { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.g-tx i { font-style: normal; font-size: 13px; line-height: 1.35; color: #B9C4D6; }
.g-badge { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .2em;
  color: #D7C6FF; border: 1px dashed rgba(185, 155, 255, .6); background: rgba(185, 155, 255, .1); }
@media (prefers-reduced-motion: reduce) { .g-tile::after { animation: none; } }
@media (min-width: 1081px) and (max-height: 820px) { .g-tile { padding: 10px 14px 10px 10px; } .g-logo { width: 48px; height: 48px; } .g-logo img { width: 44px; height: 44px; } .g-tx b { font-size: 17px; } }
@media (min-width: 1081px) and (max-height: 700px) { .g-tx i { display: none; } }
@media (max-width: 560px) { .g-tile { gap: 12px; padding: 12px; } .g-tx i { display: none; } .g-badge { padding: 4px 9px; font-size: 11px; letter-spacing: .12em; } }

/* телефон: без eyebrow и фактов (они есть в полосе цифр ниже), чтобы обе кнопки влезли в первый экран */
@media (max-width: 640px) {
  .hero.home .eyebrow, .hero.home .facts { display: none; }
  .hero.home .lead { font-size: 16px; }
  .hero.home .cta { margin-top: 22px; gap: 10px; }
}
@media (max-width: 560px) { .tile.big i { display: block; font-size: 11.5px; } .tile.big ul { display: none; } .tile.big b { font-size: 14px; } }

/* ---------- цифры */
.stats-sec { padding: 0 0 40px; }
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, rgba(23, 34, 51, .6), rgba(18, 26, 39, .38));
  border: 1px solid var(--glass-line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.stat { position: relative; padding: 28px 28px 26px; }
.stat + .stat { border-left: 1px solid rgba(143, 162, 247, .1); }
.stat b {
  display: block; font-size: clamp(36px, 3.8vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat b small { font-size: .5em; letter-spacing: 0; margin-left: 4px; }
.stat > span { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }

/* ---------- бегущая строка возможностей */
.ticker-sec { padding: 0 0 24px; overflow-x: clip; }
.ticker {
  overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker + .ticker { margin-top: 10px; }
.ticker .track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.ticker.rev .track { animation-direction: reverse; animation-duration: 70s; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .grp { display: flex; gap: 12px; padding-right: 12px; }
.ticker .item {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: #C9D2E0;
  background: rgba(18, 26, 39, .7); border: 1px solid rgba(var(--hue-rgb), .2);
}
.ticker .item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 10px var(--hue); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- секции */
section { padding: 96px 0; }
.sec-head { max-width: 780px; margin-bottom: 48px; }
.sec-head .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hue);
}
.sec-head .kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sec-head h2 {
  font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; margin-top: 14px; letter-spacing: -.03em; text-wrap: balance;
  background: linear-gradient(90deg, #FFFFFF 0%, #DCE3F0 55%, #AFBCD6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head p { margin-top: 16px; color: var(--muted); font-size: 18px; }
.band { background: linear-gradient(180deg, rgba(18, 26, 39, 0), rgba(18, 26, 39, .72) 14%, rgba(18, 26, 39, .72) 86%, rgba(18, 26, 39, 0)); }

/* ---------- свечение за курсором (.spot) */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--hue-rgb), .85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(var(--hue-rgb), .11), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ---------- видео */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(143, 162, 247, .2); background: #05080D;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 90px rgba(var(--hue-rgb), .12);
}
.video video, .video img { width: 100%; height: 100%; object-fit: cover; }
.video img { transition: transform 1.2s var(--ease); }
.video:hover img { transform: scale(1.03); }
.video .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  background: radial-gradient(circle at 50% 50%, rgba(5, 8, 13, .05), rgba(5, 8, 13, .55));
  border: 0; color: #fff; cursor: pointer; font: 700 16px "Manrope", sans-serif;
}
.video .play span.circle {
  position: relative; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7488F2, #4C5FD0); box-shadow: 0 16px 50px rgba(90, 110, 219, .65);
  transition: transform .35s var(--ease);
}
.video .play span.circle::before, .video .play span.circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(143, 162, 247, .55);
  animation: ring 2.8s ease-out infinite;
}
.video .play span.circle::after { animation-delay: 1.4s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.video .play:hover span.circle { transform: scale(1.08); }
.video .play svg.i { width: 36px; height: 36px; fill: #fff; stroke: none; margin-left: 5px; }
.video.playing .play { display: none; }

/* ---------- возможности и карточки */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  position: relative; padding: 28px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(23, 34, 51, .92), rgba(18, 26, 39, .92));
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 26px 54px rgba(0, 0, 0, .35); }
.card .ico {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--hue-soft); color: var(--hue); margin-bottom: 18px;
  box-shadow: inset 0 0 0 1px rgba(var(--hue-rgb), .22); transition: transform .4s var(--ease), box-shadow .4s ease;
}
.card:hover .ico { transform: scale(1.07) rotate(-5deg); box-shadow: inset 0 0 0 1px rgba(var(--hue-rgb), .4), 0 0 24px rgba(var(--hue-rgb), .25); }
.card h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; }

/* ---------- боль и решение (главная) */
/* четыре карточки: 2 на 2, верхний ряд подрядчику (Смета, Прораб), нижний УК (Взыскание, DocFlow) */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pains > .pain:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pain {
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 34, 51, .9), rgba(16, 23, 35, .9)); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s ease;
}
.pain:hover { transform: translateY(-4px); border-color: rgba(var(--hue-rgb), .35); box-shadow: 0 26px 54px rgba(0, 0, 0, .35); }
.pain .was { padding: 24px 26px 20px; }
.pain .now { position: relative; flex: 1; padding: 22px 26px 24px; border-top: 1px dashed rgba(143, 162, 247, .16);
  background: radial-gradient(420px 200px at 0% 0%, var(--hue-soft), transparent 70%); }
.pain .lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pain .was .lbl { color: #D98B96; }
.pain .was .lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E5485F; }
.pain .now .lbl { color: var(--hue); }
.pain .now .lbl svg.i { width: 16px; height: 16px; }
.pain .was p { margin-top: 10px; color: #A7B2C5; font-size: 16px; }
.pain .now p { margin-top: 10px; color: var(--text); font-size: 16px; font-weight: 600; }
.pain .turn {
  position: absolute; top: -17px; right: 24px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--hue); background: #121A28; border: 1px solid rgba(var(--hue-rgb), .4);
  box-shadow: 0 0 18px rgba(var(--hue-rgb), .25);
}
.pain .turn svg.i { width: 16px; height: 16px; transform: rotate(90deg); }
.pain .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 800; font-size: 15px; color: var(--hue); }
.pain .more svg.i { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.pain .more:hover { color: var(--text); }
.pain .more:hover svg.i { transform: translateX(4px); }

/* ---------- галерея и просмотр снимков */
.gallery { display: grid; gap: 18px; }
.stage { margin: 0; cursor: zoom-in; }
.stage img { aspect-ratio: 1708 / 1000; object-fit: cover; object-position: top left; transition: opacity .3s ease; }
.stage img.swap { opacity: .2; }
.stage .zoom {
  position: absolute; right: 14px; top: 44px; z-index: 2; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; background: rgba(10, 15, 24, .7); border: 1px solid rgba(143, 162, 247, .3);
  opacity: .75; transition: opacity .25s, transform .3s var(--ease);
}
.stage:hover .zoom { opacity: 1; transform: scale(1.08); }
.stage .zoom svg.i { width: 18px; height: 18px; }
.stage figcaption { padding: 16px 20px; font-size: 16px; color: #C4CEDD; border-top: 1px solid var(--line); background: var(--surface); }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.thumbs button {
  padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface);
  cursor: pointer; text-align: left; color: var(--muted); font: 700 14px "Manrope", sans-serif;
  transition: border-color .25s, color .25s, transform .3s var(--ease), box-shadow .3s;
}
.thumbs button:hover { transform: translateY(-3px); color: var(--text); }
.thumbs button img { aspect-ratio: 1708 / 1000; object-fit: cover; object-position: top left; opacity: .62; transition: opacity .25s; }
.thumbs button span { display: block; padding: 10px 12px; }
.thumbs button:hover img, .thumbs button[aria-selected="true"] img { opacity: 1; }
.thumbs button[aria-selected="true"] { border-color: var(--hue); color: var(--text); box-shadow: 0 0 0 1px var(--hue), 0 0 26px var(--hue-soft); }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 64px 88px 76px; background: rgba(4, 6, 10, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.lightbox img {
  max-width: min(1708px, 100%); max-height: calc(100vh - 150px); width: auto; border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(143, 162, 247, .2);
  transform: scale(.95); transition: transform .45s var(--ease), opacity .25s ease;
}
.lightbox.open img { transform: none; }
.lightbox img.swap { opacity: .25; }
.lightbox p { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: #C4CEDD; font-size: 15px; padding: 0 80px; }
.lightbox .count { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.lightbox button {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(18, 26, 39, .85); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .25s var(--ease);
}
.lightbox button:hover { background: rgba(90, 110, 219, .5); border-color: var(--accent-2); }
.lightbox .close { top: 16px; right: 18px; }
.lightbox .prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- для кого */
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.who .sec-head { margin-bottom: 0; }
.who p.big {
  position: relative; padding: 30px 32px 30px 36px; font-size: 21px; line-height: 1.55; color: #CDD6E4;
  border-radius: 22px; background: linear-gradient(180deg, rgba(23, 34, 51, .7), rgba(18, 26, 39, .5)); border: 1px solid var(--line);
}
.who p.big::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--hue-grad); }

/* ---------- цены и акция */
.offer {
  display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 26px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(90, 110, 219, .20), rgba(90, 110, 219, .06));
  border: 1px solid rgba(143, 162, 247, .35);
}
.offer .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 24px rgba(90, 110, 219, .6); }
.offer b { display: block; font-size: 17px; }
.offer span { color: #BFC9DA; font-size: 15px; }

.promo {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 18px 22px; margin-bottom: 28px; border-radius: 18px;
  background: linear-gradient(90deg, rgba(22, 163, 74, .22), rgba(22, 163, 74, .05));
  border: 1px solid rgba(74, 222, 128, .45);
}
.promo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%);
  transform: translateX(-100%); animation: sheen 7s ease-in-out 2s infinite;
}
@keyframes sheen { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.promo .ico {
  width: 58px; height: 58px; border-radius: 16px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #16A34A; color: #fff; font-weight: 800; font-size: 17px; animation: pulse-green 2.6s ease-in-out infinite;
}
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 18px rgba(22, 163, 74, .45); } 50% { box-shadow: 0 0 34px rgba(22, 163, 74, .8); } }
.promo .ptxt { flex: 1 1 auto; min-width: 0; }
.promo .ptxt b { display: block; font-size: 18px; color: #6EE7A0; line-height: 1.35; }
.promo .ptxt span { display: block; margin-top: 2px; color: #CDEBD8; font-size: 15px; }
.countdown { flex: none; text-align: center; }
.countdown .cd-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #86EFAC; }
.countdown .cd-until { display: block; font-weight: 800; color: #fff; }
.countdown .cd-cells { display: none; gap: 6px; justify-content: center; }
.countdown.live .cd-cells { display: flex; }
.countdown.live .cd-until { display: none; }
.cd-cells > span {
  min-width: 54px; padding: 6px 6px 5px; border-radius: 11px; text-align: center;
  background: rgba(10, 15, 24, .6); border: 1px solid rgba(74, 222, 128, .3);
}
.cd-cells b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }
.cd-cells small { display: block; font-size: 11px; font-weight: 700; color: #CDEBD8; }
s.old { color: #F0788A; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: #F0788A; }
.new { color: #4ADE80; }
.plan .price s.old { display: block; font-size: 20px; letter-spacing: 0; margin-bottom: 2px; }
.product .from s.old { font-size: 16px; }
.promo-over .promo, .promo-over .new, .promo-over .promo-only { display: none; }
.promo-over s.old, .promo-over .plan .price s.old, .promo-over .product .from s.old {
  display: inline; font-size: inherit; color: inherit; font-weight: inherit; text-decoration: none; margin: 0;
}

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 32px 28px; border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .3s ease;
}
.plan:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.plan.featured {
  --hue: #4ADE80; --hue-rgb: 74, 222, 128; --hue-soft: rgba(74, 222, 128, .12);
  border-color: rgba(var(--hue-rgb), .25);
  background: radial-gradient(360px 220px at 50% 0%, var(--hue-soft), transparent 70%), linear-gradient(180deg, #1A2539, #121A28);
  box-shadow: 0 24px 70px rgba(var(--hue-rgb), .14);
}
.plan.featured::before, .plan.featured.spot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 1;
  background: conic-gradient(from var(--ang), rgba(var(--hue-rgb), .1), var(--hue) 10%, rgba(var(--hue-rgb), .1) 24%, rgba(var(--hue-rgb), .1) 50%, var(--hue) 60%, rgba(var(--hue-rgb), .1) 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-border 6s linear infinite;
}
.plan.featured:hover { box-shadow: 0 34px 80px rgba(var(--hue-rgb), .22); }
@keyframes spin-border { to { --ang: 360deg; } }
.plan .badge {
  position: absolute; top: -13px; left: 26px; z-index: 2; padding: 5px 12px; border-radius: 999px;
  background: var(--hue); color: #10151F; font-size: 13px; font-weight: 800; box-shadow: 0 6px 22px rgba(var(--hue-rgb), .45);
}
.plan h3 { font-size: 18px; font-weight: 700; color: var(--muted); }
.plan .price { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.plan .per { color: var(--muted); font-size: 15px; margin-top: 2px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 16px; color: #C9D2E0; }
.plan li svg.i { width: 20px; height: 20px; color: var(--good); margin-top: 2px; }
.plan .btn { margin-top: auto; width: 100%; }
.extras { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(18, 26, 39, .5); }
.extras div { display: flex; justify-content: space-between; gap: 18px; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 16px; transition: background .2s; }
.extras div:hover { background: rgba(143, 162, 247, .04); }
.extras div:first-child { border-top: 0; }
.extras div > span { color: #C9D2E0; }
.extras div b { white-space: nowrap; text-align: right; }
.fine { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* ---------- как купить: линия шагов рисуется при прокрутке (--p от data-progress) */
.steps { --p: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps::before, .steps::after {
  content: ""; position: absolute; top: 31px; left: 32px; height: 2px; border-radius: 2px;
  width: calc((100% - 56px) * 2 / 3 + 56px);
}
.steps::before { background: var(--line-2); }
.steps::after { background: var(--grad); box-shadow: 0 0 14px rgba(143, 162, 247, .6); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.step { position: relative; z-index: 1; }
.step .n {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; color: #fff;
  background: radial-gradient(circle at 32% 28%, #7488F2, #3F50B8); border: 1px solid rgba(143, 162, 247, .7);
  box-shadow: 0 0 0 6px rgba(90, 110, 219, .14), 0 12px 30px rgba(90, 110, 219, .45);
  transition: background .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease, transform .5s var(--ease);
}
.step .n svg.i { width: 26px; height: 26px; }
.js .step:not(.on) .n { color: var(--muted); background: #121A28; border-color: var(--line-2); box-shadow: none; transform: scale(.92); }
.step .k { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.step h3 { font-size: 21px; font-weight: 800; margin: 6px 0 8px; }
.step p { color: var(--muted); font-size: 16px; max-width: 24em; }

/* ---------- вопросы */
.faq { display: grid; gap: 12px; max-width: 920px; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: rgba(18, 26, 39, .85); transition: border-color .3s, box-shadow .3s, background .3s; }
.faq details:hover { border-color: var(--line-2); }
.faq details[open] { border-color: rgba(var(--hue-rgb), .4); background: linear-gradient(180deg, rgba(23, 34, 51, .95), rgba(18, 26, 39, .95)); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 68px 20px 24px; font-weight: 700; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; position: absolute; right: 20px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: rgba(143, 162, 247, .07); border: 1px solid var(--line-2); transition: background .3s, border-color .3s;
}
.faq summary::after {
  content: ""; position: absolute; right: 30px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: linear-gradient(var(--text), var(--text)) center / 10px 2px no-repeat, linear-gradient(var(--text), var(--text)) center / 2px 10px no-repeat;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::before { background: var(--hue-soft); border-color: rgba(var(--hue-rgb), .5); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 24px 22px; color: var(--muted); }
.faq details[open] p { animation: faq-in .45s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- финальный призыв */
.final {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  background: radial-gradient(700px 360px at 88% 0%, rgba(var(--hue-rgb), .22), transparent 70%),
              radial-gradient(520px 320px at 0% 100%, rgba(90, 110, 219, .2), transparent 70%),
              linear-gradient(135deg, #18233A 0%, #111927 62%);
  border: 1px solid rgba(143, 162, 247, .22);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(143, 162, 247, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 162, 247, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(500px 300px at 85% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(500px 300px at 85% 30%, #000, transparent 75%);
}
.final h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.final p { color: #BFC9DA; margin-top: 14px; font-size: 18px; max-width: 34em; }
.final .orb { position: relative; width: 170px; height: 170px; }
.final .orb::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  background: conic-gradient(from var(--ang), transparent, rgba(143, 162, 247, .9), transparent 35%, transparent 55%, rgba(185, 165, 255, .8), transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%);
  animation: spin-border 8s linear infinite;
}
.final .logo { width: 170px; height: 170px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(143, 162, 247, .35), 0 0 70px rgba(90, 110, 219, .55); animation: halo 5s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 1px rgba(143, 162, 247, .5), 0 0 100px rgba(90, 110, 219, .8); } }
.tg { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }

/* ---------- главная: карточки программ */
.products { display: grid; gap: 24px; }
.product {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center;
  padding: 40px; border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(620px 360px at 100% 0%, var(--hue-soft), transparent 70%), linear-gradient(180deg, rgba(23, 34, 51, .95), rgba(16, 23, 35, .95));
  transition: transform .45s var(--ease), border-color .3s ease, box-shadow .45s ease;
}
.product:hover { transform: translateY(-4px); border-color: rgba(var(--hue-rgb), .35); box-shadow: 0 34px 80px rgba(0, 0, 0, .4), 0 0 70px rgba(var(--hue-rgb), .08); }
.product .mark { display: inline-flex; align-items: center; gap: 14px; }
.product .mark .ico {
  width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--hue-soft); color: var(--hue); box-shadow: inset 0 0 0 1px rgba(var(--hue-rgb), .3), 0 0 26px rgba(var(--hue-rgb), .15);
}
.product .mark .ico svg.i { width: 26px; height: 26px; }
.product h3 { font-size: 30px; font-weight: 800; }
.product .tag { color: var(--hue); font-weight: 700; font-size: 15px; }
.product .plats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.product .plats span { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #B3BFD3; background: rgba(143, 162, 247, .06); border: 1px solid rgba(143, 162, 247, .14); }
.product ul { list-style: none; padding: 0; margin: 20px 0 22px; display: grid; gap: 10px; }
.product li { display: flex; gap: 10px; color: #C9D2E0; }
.product li svg.i { width: 20px; height: 20px; color: var(--hue); margin-top: 3px; }
.product .from { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.product .from b { color: var(--text); font-size: 22px; }
.product .row { display: flex; flex-wrap: wrap; gap: 10px; }
.product > .shot {
  transform: perspective(1400px) rotateY(calc(var(--tx, 0) * 9deg - 4deg)) rotateX(calc(var(--ty, 0) * -7deg + 1deg));
  transition: transform .7s var(--ease), box-shadow .45s ease;
}
.product:hover > .shot { box-shadow: 0 44px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 100px rgba(var(--hue-rgb), .2); }

.kit {
  position: relative; display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 22px; margin-top: 24px;
  border: 1px dashed rgba(143, 162, 247, .45); background: rgba(90, 110, 219, .07);
}
.kit .ico { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-2); display: flex; align-items: center; justify-content: center; flex: none; }
.kit p { color: var(--muted); }
.kit b { color: var(--text); }
.kit .btn { margin-left: auto; flex: none; }

.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* блок страницы заказа, если order.py вернул только содержимое без своей секции */
.order-slot { padding: 40px 0; }

/* ---------- подвал */
.foot { position: relative; padding: 60px 0 28px; color: var(--muted); font-size: 15px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 20, 30, 0), rgba(14, 20, 30, .85)); }
.foot::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 162, 247, .7), transparent); }
.foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot h4 { margin: 0 0 12px; color: var(--text); font-size: 15px; }
.foot a { color: var(--muted); display: block; padding: 4px 0; }
.foot a:hover { color: var(--text); }
.foot .brand { display: flex; margin-bottom: 14px; }
.foot .brand:hover { color: var(--text); }
.foot .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(143, 162, 247, .08); font-size: 14px; color: var(--faint); }

/* плавающая кнопка Telegram */
.tg-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #3DB5EC, #1F8FC4);
  box-shadow: 0 14px 34px rgba(31, 143, 196, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .4s var(--ease), opacity .3s ease, box-shadow .3s ease;
}
.tg-float:hover { color: #fff; transform: scale(1.07); box-shadow: 0 18px 44px rgba(31, 143, 196, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
.tg-float svg.i { width: 26px; height: 26px; margin-left: -2px; }
.tg-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(61, 181, 236, .6); animation: ring 3s ease-out infinite; }
.tg-float span {
  position: absolute; right: 70px; top: 50%; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--text); background: rgba(16, 23, 36, .95); border: 1px solid var(--line-2);
  opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .25s, transform .3s var(--ease);
}
.tg-float:hover span { opacity: 1; transform: translate(0, -50%); }
.js .tg-float { opacity: 0; transform: translateY(20px) scale(.85); pointer-events: none; }
.js .tg-float.show { opacity: 1; transform: none; pointer-events: auto; }
.js .tg-float.show:hover { transform: scale(1.07); }
.js .tg-float.show.off { opacity: 0; transform: translateY(20px) scale(.85); pointer-events: none; }

/* нижняя панель действий: только телефон */
.dock { display: none; }

/* ---------- появление при прокрутке */
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; animation: rv-up .9s var(--ease) var(--rd, 0ms) backwards; }
.js .reveal.in[data-reveal="left"] { animation-name: rv-left; }
.js .reveal.in[data-reveal="right"] { animation-name: rv-right; }
.js .reveal.in[data-reveal="zoom"] { animation-name: rv-zoom; animation-duration: 1.1s; }
.js .reveal.in[data-reveal="fade"] { animation-name: rv-fade; }
@keyframes rv-up { from { opacity: 0; transform: translate3d(0, 30px, 0); } }
@keyframes rv-left { from { opacity: 0; transform: translate3d(-40px, 0, 0); } }
@keyframes rv-right { from { opacity: 0; transform: translate3d(40px, 0, 0); } }
@keyframes rv-zoom { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.94); } }
@keyframes rv-fade { from { opacity: 0; } }

/* ---------- планшет */
@media (max-width: 1080px) {
  .hero .wrap, .hero.home .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero-visual, .stack { max-width: 720px; width: 100%; margin: 0 auto; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pains { grid-template-columns: minmax(0, 1fr); }
  .pain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .pain .now { border-top: 0; border-left: 1px dashed rgba(143, 162, 247, .16); }
  .pain .turn { top: 50%; left: -17px; right: auto; margin-top: -17px; }
  .pain .turn svg.i { transform: none; }
  .product { grid-template-columns: minmax(0, 1fr); }
  .product > .shot { transform: none; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .final { grid-template-columns: minmax(0, 1fr); padding: 44px; }
  .final .orb { display: none; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(143, 162, 247, .1); }
}
@media (max-width: 1320px) {
  .burger { display: inline-block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 18px; background: #0B1019; border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .35s var(--ease); }
  .nav a { padding: 13px 14px; font-size: 17px; }
  .nav a:not(.btn):not(.nav-order)::after { display: none; }
  .nav a[aria-current="page"] { background: rgba(143, 162, 247, .08); }
  .nav .nav-order { margin: 6px 0; border-radius: 14px; padding: 13px 14px; }
  .nav .btn { margin: 8px 0 0; }
  .nav .btn.msg { width: 100%; }
}

/* ---------- телефон: без тяжёлых эффектов */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top .wrap, .top.scrolled .wrap { height: 62px; }
  .brand img, .top.scrolled .brand img { width: 34px; height: 34px; }
  .glow { height: 900px; }
  .glow i { animation: none; }
  .glow .b1 { width: 520px; height: 520px; left: -220px; top: -200px; }
  .glow .b2 { width: 480px; height: 480px; right: -240px; top: 80px; }
  .glow .b3 { display: none; }
  .hero { padding: 32px 0 36px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 40px); margin: 18px 0; }
  .hero .lead { font-size: 17px; }
  .eyebrow { font-size: 13px; padding: 6px 12px 6px 10px; border-radius: 14px; }
  .pill { font-size: 13px; }
  .hide-sm { display: none; }
  .cta .btn { width: 100%; }
  .facts li { font-size: 13px; padding: 5px 10px 5px 8px; }
  .hero-visual > .shot { transform: none; }
  .hero-visual .phone { right: 6px; bottom: -26px; width: 23%; transform: none; animation: none; }
  .hero-visual > .chip { display: none; }
  .win .bar { height: 22px; gap: 5px; padding: 0 9px; }
  .win .bar i { width: 7px; height: 7px; }
  .win .bar span { font-size: 10px; margin-left: 4px; }
  .stack { aspect-ratio: 1.16; perspective: none; }
  .stack .deck { transform: none; }
  .stack .layer { transform: none; width: 76%; }
  .stack .l1 { top: 0; right: 0; }
  .stack .l2 { top: 9%; right: 5%; }
  .stack .l3 { top: 18%; right: 10%; }
  .stack .l4 { top: 27%; right: 15%; }
  .stack .l5 { top: 36%; right: 20%; }
  .stack .l6 { top: 45%; right: 25%; }
  .stack .chip { display: none; }
  section { padding: 64px 0; }
  .stats-sec { padding: 0 0 28px; }
  .stat { padding: 20px 18px; }
  .stat > span { font-size: 14px; margin-top: 8px; }
  .ticker .item { font-size: 14px; padding: 8px 14px; }
  .sec-head { margin-bottom: 30px; }
  .sec-head p { font-size: 16px; }
  .grid3, .why { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 22px; }
  .pain { display: flex; }
  .pain .was, .pain .now { padding-left: 20px; padding-right: 20px; }
  .pain .now { border-left: 0; border-top: 1px dashed rgba(143, 162, 247, .16); }
  .pain .turn { top: -17px; left: auto; right: 20px; margin-top: 0; }
  .pain .turn svg.i { transform: rotate(90deg); }
  .thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .thumbs button { scroll-snap-align: start; }
  .thumbs button:hover { transform: none; }
  .stage figcaption { padding: 12px 14px; font-size: 15px; }
  .stage .zoom { top: 30px; right: 10px; width: 36px; height: 36px; }
  .who p.big { font-size: 18px; padding: 22px 20px 22px 24px; }
  .product { padding: 22px; gap: 24px; border-radius: 22px; }
  .product h3 { font-size: 25px; }
  .product .row .btn { flex: 1 1 auto; }
  .plan { padding: 28px 22px; }
  .plan .price { font-size: 38px; }
  .extras div { flex-direction: column; gap: 4px; padding: 14px 18px; }
  .extras div b { text-align: left; }
  .offer { align-items: flex-start; padding: 16px 18px; }
  .promo { flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px 16px 18px; }
  .promo .ico { width: 46px; height: 46px; font-size: 15px; border-radius: 13px; }
  .promo .ptxt { flex: 1 1 200px; }
  .promo .ptxt b { font-size: 16px; }
  .countdown { flex: 1 1 100%; text-align: left; }
  .countdown .cd-cells { justify-content: flex-start; }
  .cd-cells > span { flex: 1; min-width: 0; }
  .kit { flex-direction: column; align-items: flex-start; padding: 22px; }
  .kit .btn { margin-left: 0; width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before, .steps::after { display: none; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; left: 31px; top: 70px; bottom: -20px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, #8FA2F7, #B9A5FF); box-shadow: 0 0 10px rgba(143, 162, 247, .5); transition: background .5s ease, box-shadow .5s ease;
  }
  .js .step:not(:last-child):not(:has(+ .step.on))::after { background: var(--line-2); box-shadow: none; }
  .step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; }
  .step .n { grid-row: span 3; margin: 0; }
  .step h3 { font-size: 19px; }
  .faq summary { font-size: 16px; padding: 18px 60px 18px 18px; }
  .faq details p { padding: 0 18px 20px; }
  .final { padding: 32px 22px; border-radius: 24px; }
  .final .cta .btn { width: 100%; }
  .foot .cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .video .play span.circle { width: 74px; height: 74px; }
  .lightbox { padding: 60px 10px 120px; }
  .lightbox .prev, .lightbox .next { top: auto; bottom: 60px; transform: none; }
  .lightbox p { bottom: 16px; padding: 0 12px; font-size: 14px; }
  .lightbox .count { top: 30px; }
  .tg-float { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .tg-float span { display: none; }
  .dock {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 56; display: flex; gap: 8px; padding: 8px;
    border-radius: 18px; background: rgba(12, 18, 28, .88); border: 1px solid rgba(143, 162, 247, .2);
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    transition: transform .45s var(--ease), opacity .3s ease;
  }
  .js .dock { transform: translateY(140%); opacity: 0; }
  .js .dock.show { transform: none; opacity: 1; }
  .dock .btn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 12px; font-size: 15px; border-radius: 12px; }
  .dock .btn svg.i { display: none; }
  .dock .btn.icon { flex: 0 0 48px; padding: 0; }
  .dock .btn.icon svg.i { display: block; }
  .has-dock .tg-float, body:has(.dock) .tg-float { display: none; }
  .has-dock .foot, body:has(.dock) .foot { padding-bottom: 100px; }
}

/* ---------- уменьшенная анимация: всё видно сразу, ничего не движется */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; }
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker .grp[aria-hidden="true"] { display: none; }
  .ticker .grp { padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .hero-visual > .shot { transform: rotateY(-7deg) rotateX(2deg); }
  .stack .deck { transform: rotateX(9deg) rotateY(-13deg); }
  .js .step:not(.on) .n { color: #fff; background: radial-gradient(circle at 32% 28%, #7488F2, #3F50B8); border-color: rgba(143, 162, 247, .7); transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .hero-visual > .shot, .stack .deck { transform: none; }
}

/* подробный текст о программе */
.seo-text { max-width: 820px; }
.seo-text p { font-size: 17px; line-height: 1.7; color: #CDD6E4; margin: 0 0 16px; }

/* Абонентская поддержка: тарифы на главной, короткая строка на страницах программ */
.support-not { margin-top: 26px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); }
.support-not b { display: block; margin-bottom: 10px; }
.support-not ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--muted); font-size: 15px; }
.support-not li { padding-left: 16px; position: relative; }
.support-not li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.support-note { margin-top: 26px; display: flex; align-items: center; gap: 20px; padding: 20px 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); }
.support-note p { color: var(--muted); margin-top: 4px; }
.support-note .btn { margin-left: auto; flex: none; }
@media (max-width: 700px) {
  .support-note { flex-direction: column; align-items: flex-start; padding: 20px; }
  .support-note .btn { margin-left: 0; width: 100%; }
  .support-not { padding: 18px; }
}

/* ---------- два ролика на одной странице */
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.video-pair .video { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 60px rgba(var(--hue-rgb), .1); }
.video-cap { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.video-cap b { font-size: 20px; }
.video-cap span { color: var(--muted, #8C9AB0); font-size: 16px; line-height: 1.5; }
@media (max-width: 860px) { .video-pair { grid-template-columns: 1fr; } }

/* ---------- окно "Написать на почту" */
.mail-dlg { width: min(460px, calc(100vw - 32px)); padding: 26px 24px 24px; border-radius: 20px; border: 1px solid rgba(143, 162, 247, .35);
  background: #101724; color: var(--text); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(90, 110, 219, .25); }
.mail-dlg::backdrop { background: rgba(5, 8, 15, .72); backdrop-filter: blur(4px); }
.mail-dlg h2 { font-size: 24px; margin: 0 0 6px; }
.mail-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.mail-x { position: absolute; top: 10px; right: 12px; margin: 0; }
.mail-x button { background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mail-x button:hover { color: var(--text); }
.mail-f label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.mail-f input:not([type="hidden"]), .mail-f textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(143, 162, 247, .25); background: #0B1220; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; }
.mail-f input:focus, .mail-f textarea:focus { outline: 2px solid rgba(143, 162, 247, .6); outline-offset: 1px; }
.mail-f textarea { resize: vertical; min-height: 110px; }
.mail-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mail-msg { min-height: 20px; font-size: 14px; margin: 0 0 10px; }
.mail-msg.err { color: #FF8A8A; }
.mail-msg.ok { color: #6FE0A8; }
.mail-f .btn { width: 100%; justify-content: center; }
.nav .btn.alt { margin-left: 4px; }

/* кнопка "Почта": красный Яндекса */
.btn[data-mail-open], .mail-f .btn[type="submit"] {
  background: linear-gradient(180deg, #FF5A3C, #FC3F1D); border-color: rgba(255, 140, 110, .55); color: #fff;
  box-shadow: 0 8px 22px rgba(252, 63, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn[data-mail-open]:hover, .mail-f .btn[type="submit"]:hover { background: linear-gradient(180deg, #FF6A4E, #FF4A28); color: #fff; box-shadow: 0 10px 28px rgba(252, 63, 29, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn[data-mail-open] svg.i, .mail-f .btn[type="submit"] svg.i { color: #fff; }

/* кнопки связи в шапке: одной ширины, цвета мессенджеров */
.nav .btn.msg { width: 122px; padding: 0 10px; margin-left: 6px; gap: 7px; color: #fff; }
.nav .btn.msg svg.i { width: 18px; height: 18px; color: #fff; }
.nav .btn.msg-tg { background: linear-gradient(180deg, #3DB8F5, #229ED9); border-color: rgba(140, 215, 255, .55); box-shadow: 0 8px 22px rgba(34, 158, 217, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav .btn.msg-tg:hover { background: linear-gradient(180deg, #55C4FA, #2AABEE); color: #fff; box-shadow: 0 10px 28px rgba(34, 158, 217, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nav .btn.msg-max { background: linear-gradient(135deg, #3FA2FF, #7A4DFF); border-color: rgba(170, 150, 255, .55); box-shadow: 0 8px 22px rgba(110, 80, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav .btn.msg-max:hover { background: linear-gradient(135deg, #5AB1FF, #8D63FF); color: #fff; box-shadow: 0 10px 28px rgba(110, 80, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nav .btn.msg-wa { background: linear-gradient(180deg, #3BDB7A, #1FB855); border-color: rgba(130, 240, 170, .55); box-shadow: 0 8px 22px rgba(31, 184, 85, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav .btn.msg-wa:hover { background: linear-gradient(180deg, #52E68D, #25D366); color: #fff; box-shadow: 0 10px 28px rgba(31, 184, 85, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nav .btn.msg { margin-left: 4px; width: 112px; }
@media (min-width: 1321px) { .nav a:not(.btn) { padding: 8px 9px; } }
@media (max-width: 1320px) { .nav .btn.msg { width: 100%; margin: 8px 0 0; } }
@media (min-width: 1321px) { .nav a:not(.btn) { padding: 8px 7px; font-size: 14px; } .nav .btn.msg { width: 108px; margin-left: 3px; } .nav .btn.msg-tg { margin-left: 10px; } }

/* широкий значок Windows + Android (замена звёздочки): высоту задаёт контекст, ширина по пропорции */
svg.i.i-wide { width: auto !important; aspect-ratio: 46 / 24; fill: currentColor; stroke: none; }
.nav .nav-order svg.i.i-wide { height: 14px; }
.oz-banner-ico { width: auto; min-width: 44px; padding: 0 12px; border-radius: 22px; }
.oz-banner-ico svg.i.i-wide { height: 18px; }


/* ------------------------------------------------------------------ линейка Aurus Постер
   карточки трёх Постеров (.pcards, главная и /postery/), таблица отличий (.diff),
   две карточки "где работает" (.where2), полоса линейки на странице Постера (.family) */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pcard {
  position: relative; display: flex; flex-direction: column; padding: 18px 18px 24px; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(420px 260px at 100% 0%, var(--hue-soft), transparent 70%), linear-gradient(180deg, rgba(23, 34, 51, .95), rgba(16, 23, 35, .95));
  transition: transform .45s var(--ease), border-color .3s ease, box-shadow .45s ease;
}
.pcard:hover { transform: translateY(-4px); border-color: rgba(var(--hue-rgb), .4); box-shadow: 0 30px 70px rgba(0, 0, 0, .4), 0 0 60px rgba(var(--hue-rgb), .1); }
.pcard > .shot { margin-bottom: 20px; }
.pcard > .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.pcard .mark { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.pcard .mark .ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--hue-soft); color: var(--hue); box-shadow: inset 0 0 0 1px rgba(var(--hue-rgb), .3); }
.pcard .mark .ico svg.i { width: 22px; height: 22px; }
.pcard h3 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.pcard .tag { color: var(--hue); font-weight: 700; font-size: 14px; }
.pcard ul { list-style: none; padding: 0 6px; margin: 16px 0 18px; display: grid; gap: 8px; }
.pcard li { display: flex; gap: 9px; color: #C9D2E0; font-size: 15px; }
.pcard li svg.i { flex: none; width: 18px; height: 18px; color: var(--hue); margin-top: 3px; }
.pcard .from { padding: 0 6px; font-size: 14px; color: var(--muted); margin: auto 0 16px; }
.pcard .from b { color: var(--text); font-size: 20px; }
.pcard .row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px; }
.fam-more { margin-top: 22px; text-align: center; }
.fam-more .more, .family .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; color: #FFB46B; }
.fam-more .more svg.i { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.fam-more .more:hover { color: var(--text); }
.fam-more .more:hover svg.i { transform: translateX(4px); }
.fam-tiles { max-width: 860px; margin: 0 auto; }
.fam-tiles .tile[aria-current] { border-color: rgba(var(--hue-rgb), .75); box-shadow: 0 0 28px rgba(var(--hue-rgb), .2); }
.diff-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: rgba(18, 26, 39, .5); }
.diff { width: 100%; border-collapse: collapse; min-width: 640px; }
.diff th, .diff td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.diff tr:last-child th, .diff tr:last-child td { border-bottom: 0; }
.diff thead th { font-size: 16px; font-weight: 800; color: var(--hue, var(--text)); }
.diff tbody th { color: var(--muted); font-weight: 700; font-size: 14px; width: 22%; }
.diff td { color: #C9D2E0; font-size: 15px; }
.posters-hero .stack { aspect-ratio: 1.4; }
.posters-hero .stack .l3 .shot img { filter: none; }
.where2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) {
  .pcards { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .where2 { grid-template-columns: minmax(0, 1fr); }
  .diff th, .diff td { padding: 12px 14px; }
}
/* с пунктом "Постеры" меню шире ширины .wrap: на всех экранах без бургера поджимаем ссылки и кнопки связи */
@media (min-width: 1321px) {
  .top .wrap { gap: 14px; }
  .nav a:not(.btn) { padding: 8px 8px; font-size: 14px; }
  .nav .btn.msg { width: auto; padding: 0 11px; margin-left: 4px; font-size: 14px; }
  .nav a[href$="#faq"] { display: none; }   /* вопросы остаются в подвале и внизу страницы */
  .top .brand { flex: none; }
}

/* анонс: плашка "Скоро в продаже" и заставка Aurus Graber на главной */
.soon-pill { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 800; font-size: 16px;
  color: #FFC58A; background: rgba(255, 138, 31, .12); border: 1px dashed rgba(255, 138, 31, .55); }
.pcard .from .soon-pill { min-height: 34px; padding: 0 14px; font-size: 14px; }
.graber-sec { padding: 24px 0 8px; }
.graber {
  position: relative; overflow: hidden; text-align: center; padding: 72px 24px; border-radius: 28px; border: 1px dashed rgba(185, 155, 255, .4);
  background: radial-gradient(520px 260px at 50% 0%, rgba(185, 155, 255, .16), transparent 70%), linear-gradient(180deg, rgba(23, 34, 51, .9), rgba(12, 18, 28, .95));
}
.graber::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
  transform: translateX(-100%); animation: g-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes g-shine { 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .graber::after { animation: none; } }
.g-kicker { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.g-name { margin-top: 14px; font-size: clamp(34px, 6vw, 64px); font-weight: 800; letter-spacing: -.02em; }
.g-soon { margin-top: 10px; font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; letter-spacing: .3em; color: #D7C6FF; }
@media (max-width: 560px) { .graber { padding: 48px 16px; } }

/* дополнение для телефона: снимки в рамках телефонов */
#mobile .mbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.mbadge { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text);
  background: rgba(var(--hue-rgb), .14); border: 1px solid rgba(var(--hue-rgb), .4); }
.mphones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.mphone { margin: 0; }
.mframe { border: 6px solid #1D2638; border-radius: 30px; overflow: hidden; background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(143, 162, 247, .2), 0 0 70px rgba(var(--hue-rgb), .14);
  transition: transform .5s var(--ease); }
.mphone:hover .mframe { transform: translateY(-6px); }
.mframe img { display: block; width: 100%; height: auto; }
.mphone figcaption { margin-top: 14px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted, #a3afc2); }
.mpoints { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.mpoints li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.mpoints li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ok, #34d399); }
.mnote { margin: 22px 0 0; font-size: 14px; color: var(--muted, #a3afc2); max-width: 70ch; }
@media (max-width: 900px) { .mphones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mpoints { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .mphones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .mframe { border-width: 4px; border-radius: 22px; } }

/* первый экран с телефоном и плашками в ряд: плашки над окном программы, телефон крупнее и целиком, с воздухом по краям */
.hero-visual.row { padding-bottom: 54px; }
.hero-visual.row .chips-row { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 22px; }
.hero-visual.row .chips-row .chip { position: static; transform: none; animation: none; }
.hero-visual.row .phone { right: 12px; bottom: 26px; width: 31%; border-width: 4px; border-radius: 26px; }
@media (max-width: 1100px) { .hero-visual.row .phone { width: 34%; } }
@media (max-width: 760px) {
  .hero-visual.row { padding-bottom: 36px; }
  .hero-visual.row .chips-row { margin-bottom: 16px; }
  .hero-visual.row .phone { width: 38%; right: 8px; bottom: 14px; }
}

/* макет смартфона: корпус с полями, экран со скруглением, строка состояния и полоска навигации.
   Размеры в cqw от ширины телефона, поэтому пропорции одинаковы и в первом экране, и в ряду снимков */
.pmock { container-type: inline-size; }
.pm-body { padding: 3.6cqw; border-radius: 15cqw; background: linear-gradient(150deg, #2B3447 0%, #121826 45%, #0A0E16 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 0 0 1px rgba(143, 162, 247, .18),
    0 0 80px rgba(var(--hue-rgb), .14); }
.pm-screen { position: relative; border-radius: 11.5cqw; overflow: hidden; background: #07090E; }
.pm-status { display: flex; align-items: center; justify-content: space-between; height: 11cqw; padding: 0 8cqw;
  color: #EEF2F8; font: 600 4.4cqw/1 "Manrope", system-ui, sans-serif; background: #07090E; position: relative; }
.pm-cam { position: absolute; left: 50%; top: 50%; width: 3.6cqw; height: 3.6cqw; margin: -1.8cqw 0 0 -1.8cqw; border-radius: 50%;
  background: #1C2230; box-shadow: inset 0 0 0 .7cqw #0D1018; }
.pm-ic { display: flex; align-items: center; gap: 1.2cqw; }
.pm-ic i { width: 1.2cqw; height: 2.6cqw; background: #EEF2F8; border-radius: .4cqw; }
.pm-ic i:first-child { height: 1.8cqw; }
.pm-ic b { width: 5.4cqw; height: 2.6cqw; border: .45cqw solid #EEF2F8; border-radius: .8cqw; position: relative; }
.pm-ic b::after { content: ""; position: absolute; inset: .4cqw 1.4cqw .4cqw .4cqw; background: #EEF2F8; border-radius: .2cqw; }
.pmock img { display: block; width: 100%; height: auto; }
.pm-home { height: 8cqw; display: grid; place-items: center; background: #07090E; }
.pm-home::after { content: ""; width: 34%; height: 1.3cqw; border-radius: 1cqw; background: rgba(238, 242, 248, .55); }
/* в первом экране корпус сам даёт рамку и тень */
.hero-visual .phone.pmock { border: 0; border-radius: 0; overflow: visible; box-shadow: none; background: none; }
.hero-visual.row .phone.pmock { width: 30%; right: 18px; bottom: 30px; }
@media (max-width: 760px) { .hero-visual.row .phone.pmock { width: 37%; right: 10px; bottom: 16px; } }
.mphone .pmock { transition: transform .5s var(--ease); }
.mphone:hover .pmock { transform: translateY(-6px); }
.mphones { gap: 30px; }
@media (max-width: 900px) { .mphones { gap: 24px 20px; } }
@media (max-width: 520px) { .mphones { gap: 18px 14px; } }


/* ==========================================================================
   Страница заказа программы (/zakaz/), политика (/privacy/), блок на главной
   и полоса на страницах программ. Все классы с приставкой oz-.
   build.py склеивает этот файл после style.css в один site/style.css.
   ========================================================================== */

.oz-p-windows { --c: #8FA2F7; --c-soft: rgba(143, 162, 247, .15); }
.oz-p-android { --c: #3CCB8F; --c-soft: rgba(60, 203, 143, .14); }
.oz-p-both    { --c: #F2B544; --c-soft: rgba(242, 181, 68, .14); }
.oz-p-unsure  { --c: #2EC4C4; --c-soft: rgba(46, 196, 196, .14); }

.oz-sr, .oz-hpot {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.oz-hpot { left: -10000px; }

.oz-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; font-weight: 600; }
.oz-ticks li { display: inline-flex; align-items: center; gap: 8px; }
.oz-ticks svg.i { width: 18px; height: 18px; color: var(--good); }

.oz-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.oz-tags span {
  font-size: 13px; font-weight: 700; color: #C9D2E0; padding: 5px 11px; border-radius: 999px;
  background: rgba(143, 162, 247, .07); border: 1px solid var(--line-2);
}

/* ---------- первый экран */
.oz-hero { padding: 72px 0 56px; position: relative; }
.oz-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: center; }
.oz-hero h1 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; margin: 18px 0 22px; line-height: 1.06; letter-spacing: -.025em; }
.oz-hero h1 em {
  font-style: normal; display: inline-block; color: var(--hue);
  background: linear-gradient(92deg, #8FA2F7 0%, #B9C5FF 42%, #F2B544 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.oz-hero .lead { font-size: 19px; color: #B9C4D6; max-width: 34em; }

.oz-hv { position: relative; padding: 26px 8% 40px 0; }
.oz-hv-win {
  position: relative; border-radius: 16px; overflow: hidden; background: #0C121C;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(143, 162, 247, .08), 0 0 80px -20px rgba(90, 110, 219, .55);
  transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center;
}
.oz-hv-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #141C2A; border-bottom: 1px solid var(--line); }
.oz-hv-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2E3F5A; }
.oz-hv-bar i:first-child { background: #FFFFFF; }
.oz-hv-bar i:nth-child(2) { background: #1C57A5; }
.oz-hv-bar i:nth-child(3) { background: #D52B1E; }
.oz-hv-bar span { margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.oz-hv-desk { width: 100%; aspect-ratio: 1708 / 1000; object-fit: cover; object-position: top left; }
.oz-hv-ph {
  position: absolute; right: 0; bottom: 0; width: 25%; border-radius: 22px; overflow: hidden;
  border: 5px solid #05080D; background: #05080D;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(143, 162, 247, .25), 0 0 50px -10px rgba(60, 203, 143, .45);
}
.oz-hv-ph img { width: 100%; }
.oz-badges { list-style: none; margin: 0; padding: 0; }
.oz-badge {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px 9px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text);
  background: rgba(16, 23, 36, .78); border: 1px solid rgba(143, 162, 247, .3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7);
  animation: oz-float 6s ease-in-out infinite;
}
.oz-badge svg.i { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 50%; }
.oz-b1 { top: 0; left: -4%; }
.oz-b1 svg.i { color: #F2B544; background: rgba(242, 181, 68, .16); }
.oz-b2 { top: 44%; left: -8%; animation-delay: -1.5s; }
.oz-b2 svg.i { color: #8FA2F7; background: rgba(143, 162, 247, .16); }
.oz-b3 { top: 8%; right: 2%; animation-delay: -3s; }
.oz-b3 svg.i { color: #3CCB8F; background: rgba(60, 203, 143, .16); }
.oz-b4 { bottom: 4%; left: 14%; animation-delay: -4.5s; }
.oz-b4 svg.i { color: #2EC4C4; background: rgba(46, 196, 196, .16); }
@keyframes oz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---------- что вы получите */
.oz-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.oz-get { position: relative; overflow: hidden; }
.oz-get h3 { font-size: 18px; }
.oz-get p { font-size: 15px; }
.oz-get-big { grid-column: span 2; padding: 32px; }
.oz-get-big h3 { font-size: 24px; }
.oz-get-big p { font-size: 16.5px; max-width: 30em; }
.oz-get-big::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 110, 219, .35), transparent 70%); pointer-events: none;
}
.oz-get-big + .oz-get-big::after { background: radial-gradient(circle, rgba(60, 203, 143, .25), transparent 70%); }

/* ---------- от вас только описание */
.oz-need { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.oz-need .sec-head { margin-bottom: 30px; }
.oz-need-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.oz-need-list li { display: flex; gap: 16px; align-items: flex-start; }
.oz-need-list b { display: block; font-size: 18px; margin-bottom: 2px; }
.oz-need-list p { color: var(--muted); font-size: 16px; }
.oz-need-ico {
  width: 46px; height: 46px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(143, 162, 247, .25);
}
.oz-chat {
  margin: 0; padding: 26px; border-radius: 24px; border: 1px solid var(--line-2); display: grid; gap: 14px;
  background: radial-gradient(420px 260px at 100% 0%, rgba(90, 110, 219, .22), transparent 70%), linear-gradient(180deg, #131C2B, #0F1622);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.oz-chat figcaption { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.oz-msg { max-width: 88%; padding: 14px 16px; font-size: 15.5px; line-height: 1.55; }
.oz-msg-in { background: var(--surface-3); border-radius: 18px 18px 18px 6px; color: #D4DCE8; }
.oz-msg-out {
  justify-self: end; border-radius: 18px 18px 6px 18px; color: #E4E9FF;
  background: linear-gradient(135deg, rgba(90, 110, 219, .38), rgba(90, 110, 219, .18)); border: 1px solid rgba(143, 162, 247, .35);
}
.oz-msg-who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: #B4C1FF; margin-bottom: 6px; }
.oz-msg-who img { width: 22px; height: 22px; border-radius: 50%; }
.oz-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oz-att { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: rgba(10, 15, 24, .5); color: #C9D2E0; }
.oz-att svg.i { width: 15px; height: 15px; color: var(--accent-2); }

/* ---------- как работаем */
.oz-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; }
.oz-flow::before {
  content: ""; position: absolute; left: 24px; right: calc((100% - 64px) / 5 - 24px); top: 23px; height: 2px;
  background: linear-gradient(90deg, rgba(143, 162, 247, .1), rgba(143, 162, 247, .55), rgba(60, 203, 143, .55));
}
.oz-flow-i { position: relative; }
.oz-flow-n {
  position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(135deg, #5A6EDB, #7C8CF0);
  box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(90, 110, 219, .6); margin-bottom: 18px;
}
.oz-flow-i:last-child .oz-flow-n { background: linear-gradient(135deg, #2FB57D, #3CCB8F); box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(60, 203, 143, .5); }
.oz-flow h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.oz-flow p { color: var(--muted); font-size: 15px; }

/* ---------- уже сделали */
.oz-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.oz-work {
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.oz-work:hover { border-color: var(--hue); transform: translateY(-3px); box-shadow: 0 24px 60px -24px var(--hue-soft), 0 0 0 1px var(--hue); }
.oz-work-shot { display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: #0C121C; }
.oz-work-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: transform .5s; }
.oz-work:hover .oz-work-shot img { transform: scale(1.03); }
.oz-work-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.oz-work-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.oz-work-mark .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--hue-soft); color: var(--hue); flex: none; }
.oz-work h3 { font-size: 21px; font-weight: 800; }
.oz-work p { color: var(--muted); font-size: 15.5px; }
.oz-work .oz-tags { margin: 14px 0 18px; }
.oz-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--hue); }
.oz-more svg.i { width: 18px; height: 18px; transition: transform .2s; }
.oz-more:hover { color: var(--text); }
.oz-more:hover svg.i { transform: translateX(3px); }

/* ---------- цены */
.oz-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.oz-price { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.oz-price h3 { font-size: 16px; font-weight: 700; color: var(--muted); }
.oz-price-v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.oz-price-t { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 12px; font-size: 14px; font-weight: 700; color: var(--accent-2); }
.oz-price-t svg.i { width: 16px; height: 16px; }
.oz-price p { color: var(--muted); font-size: 15px; }
.oz-price:last-child { border-color: rgba(60, 203, 143, .4); background: linear-gradient(160deg, rgba(60, 203, 143, .1), var(--surface) 60%); }
.oz-price:last-child .oz-price-t { color: var(--good); }
.oz-fine { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* ==========================================================================
   Форма
   ========================================================================== */
.oz-form-sec { position: relative; }
.oz-form-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(700px 420px at 30% 30%, rgba(90, 110, 219, .16), transparent 70%);
}
.oz-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.oz-app.oz-on { grid-template-columns: minmax(0, 1fr) 330px; }
.oz-main { min-width: 0; }
.oz-card {
  position: relative; padding: 34px; border-radius: 26px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(25, 36, 54, .92), rgba(16, 23, 35, .94));
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(143, 162, 247, .05), 0 0 90px -40px rgba(90, 110, 219, .6);
}
.oz-card::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 162, 247, .8), rgba(242, 181, 68, .6), transparent);
}

/* прогресс */
.oz-prog, .oz-bar, .oz-sum, .oz-back, .oz-next { display: none; }
.oz-on .oz-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.oz-on .oz-bar { display: block; }
.oz-on .oz-sum { display: block; }
.oz-on .oz-back, .oz-on .oz-next { display: inline-flex; }
.oz-prog-b {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 4px; background: none; border: 0;
  color: var(--faint); font: inherit; font-size: 14px; font-weight: 700; cursor: default; text-align: left; border-radius: 10px;
}
.oz-prog-n {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border: 1.5px solid var(--line-2); color: var(--muted); background: var(--bg-2, #0E141E);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.oz-prog-b.is-done { color: #C9D2E0; cursor: pointer; }
.oz-prog-b.is-done .oz-prog-n { background: rgba(60, 203, 143, .16); border-color: rgba(60, 203, 143, .6); color: var(--good); }
.oz-prog-b.is-done:hover .oz-prog-t { color: var(--text); }
.oz-prog-b.is-active { color: var(--text); }
.oz-prog-b.is-active .oz-prog-n { background: var(--accent); border-color: var(--accent-2); color: #fff; box-shadow: 0 0 0 4px rgba(90, 110, 219, .25), 0 0 20px rgba(90, 110, 219, .6); }
.oz-bar { height: 4px; border-radius: 4px; background: rgba(143, 162, 247, .1); margin: 14px 0 30px; overflow: hidden; }
.oz-bar i {
  display: block; height: 100%; width: var(--p, 25%); border-radius: 4px;
  background: linear-gradient(90deg, #5A6EDB, #8FA2F7 60%, #3CCB8F);
  box-shadow: 0 0 14px rgba(143, 162, 247, .7); transition: width .5s cubic-bezier(.2, .7, .2, 1);
}

/* шаги */
.oz-step + .oz-step { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.oz-on .oz-step { display: none; }
.oz-on .oz-step + .oz-step { margin-top: 0; padding-top: 0; border-top: 0; }
.oz-on .oz-step.is-active { display: block; animation: oz-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes oz-in { from { opacity: 0; transform: translateX(var(--oz-dir, 26px)); } to { opacity: 1; transform: none; } }
.oz-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.oz-step-n {
  width: 36px; height: 36px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #5A6EDB, #8FA2F7); box-shadow: 0 0 22px rgba(90, 110, 219, .5);
}
.oz-step-head h3 { font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; outline: none; }
.oz-step-head p { color: var(--muted); font-size: 15.5px; margin-top: 4px; }

/* группы и подписи */
.oz-group { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.oz-group > legend.oz-label { float: left; width: 100%; padding: 0; }
.oz-group > legend + * { clear: both; }
.oz-label { display: block; font-size: 15.5px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.oz-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.oz-label-row .oz-label { margin-bottom: 8px; }
.oz-opt { font-size: 13px; font-weight: 600; color: var(--faint); margin-left: 4px; }
.oz-req { color: #FF8C9B; }
.oz-hint { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.oz-hint-block { margin: -6px 0 12px; }
.oz-field { margin-bottom: 26px; }
.oz-field .oz-label + .oz-input { margin-top: 0; }

/* карточки платформы */
.oz-plats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.oz-plat {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: center;
  padding: 20px 50px 20px 20px; border-radius: 20px; cursor: pointer; min-height: 104px;
  border: 1.5px solid var(--line-2); background: rgba(143, 162, 247, .03);
  transition: border-color .2s, background .25s, transform .2s, box-shadow .25s;
}
.oz-plat:hover { border-color: #435679; transform: translateY(-2px); }
.oz-plat input, .oz-chip input, .oz-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.oz-plat-ico {
  grid-row: span 2; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--c-soft); color: var(--c); transition: transform .3s, box-shadow .3s;
}
.oz-plat-ico svg.i { width: 28px; height: 28px; }
.oz-plat-t { font-size: 18px; font-weight: 800; line-height: 1.25; }
.oz-plat-d { font-size: 14px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.oz-plat-tick {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;
}
.oz-plat-tick svg.i { width: 15px; height: 15px; stroke-width: 3; color: #0A0F18; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.oz-plat.is-on, .oz-plat:has(input:checked) {
  border-color: var(--c); background: linear-gradient(135deg, var(--c-soft), rgba(143, 162, 247, .02) 75%);
  box-shadow: 0 0 0 1px var(--c), 0 18px 44px -18px var(--c);
}
.oz-plat.is-on .oz-plat-ico, .oz-plat:has(input:checked) .oz-plat-ico { transform: scale(1.06); box-shadow: 0 0 26px -4px var(--c); }
.oz-plat.is-on .oz-plat-tick, .oz-plat:has(input:checked) .oz-plat-tick { background: var(--c); border-color: var(--c); }
.oz-plat.is-on .oz-plat-tick svg.i, .oz-plat:has(input:checked) .oz-plat-tick svg.i { opacity: 1; transform: none; }
.oz-plat:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* фишки */
.oz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.oz-chip { position: relative; cursor: pointer; }
.oz-chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: rgba(143, 162, 247, .04); color: #C9D2E0; font-size: 15px; font-weight: 600;
  line-height: 1.3; transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.oz-chip span svg.i { width: 18px; height: 18px; color: var(--accent-2); }
.oz-chip:hover span { border-color: #435679; color: var(--text); }
.oz-chip input:checked + span {
  color: #fff; border-color: var(--accent-2);
  background: linear-gradient(135deg, rgba(90, 110, 219, .45), rgba(90, 110, 219, .22));
  box-shadow: 0 8px 22px -10px rgba(90, 110, 219, .9);
}
.oz-chip input:checked + span svg.i { color: #fff; }
.oz-chip input:checked + span::before {
  content: ""; width: 7px; height: 12px; margin: -3px 2px 0 0; border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.oz-chip input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.oz-chip:active span { transform: scale(.97); }

/* поля ввода */
.oz-input, .oz-form textarea {
  display: block; width: 100%; font: inherit; font-size: 16px; color: var(--text); padding: 14px 16px; border-radius: 14px;
  background: rgba(8, 12, 20, .55); border: 1.5px solid var(--line-2); transition: border-color .2s, box-shadow .2s, background .2s;
}
.oz-form textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.oz-input::placeholder, .oz-form textarea::placeholder { color: #5D6B82; }
.oz-input:hover, .oz-form textarea:hover { border-color: #435679; }
.oz-input:focus, .oz-form textarea:focus { outline: none; border-color: var(--accent-2); background: rgba(8, 12, 20, .8); box-shadow: 0 0 0 4px rgba(90, 110, 219, .25); }
.oz-input[aria-invalid="true"], .oz-form textarea[aria-invalid="true"] { border-color: #FF6B7F; box-shadow: 0 0 0 4px rgba(255, 107, 127, .14); }
.oz-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.oz-desc-hints { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.oz-desc-hints li { font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--line-2); }
.oz-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--accent-2);
}
.oz-link:hover { color: #B4C1FF; }
.oz-ex-btn { display: none; }
.oz-on .oz-ex-btn { display: inline-flex; }
.oz-link svg.i { width: 17px; height: 17px; }
.oz-example {
  margin: 0 0 14px; padding: 16px 18px; border-radius: 14px; border-left: 3px solid #F2B544;
  background: linear-gradient(90deg, rgba(242, 181, 68, .1), rgba(242, 181, 68, .03)); color: #D4DCE8; font-size: 15px;
  animation: oz-fade .35s ease;
}
@keyframes oz-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.oz-under { display: flex; justify-content: flex-end; margin-top: 6px; min-height: 20px; }
.oz-count { font-size: 13px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.oz-count.is-low { color: #F2B544; }
.oz-count.is-ok { color: var(--good); }
.oz-err { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: #FF8C9B; }
.oz-err:empty { margin: 0; }

/* файлы */
.oz-drop {
  position: relative; border-radius: 18px; border: 1.5px dashed var(--line-2); background: rgba(143, 162, 247, .03);
  padding: 16px; transition: border-color .2s, background .2s, transform .2s;
}
.oz-drop-in { display: none; }
.oz-on .oz-drop { padding: 26px 20px; text-align: center; cursor: pointer; }
.oz-on .oz-drop-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oz-on .oz-file-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.oz-drop:hover, .oz-drop:focus-within { border-color: #4B5F85; }
.oz-drop.is-over { border-color: var(--accent-2); background: var(--accent-soft); transform: scale(1.01); }
.oz-drop-ico {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
  background: var(--accent-soft); color: var(--accent-2); box-shadow: 0 0 30px -6px rgba(90, 110, 219, .6); transition: transform .3s;
}
.oz-drop:hover .oz-drop-ico, .oz-drop.is-over .oz-drop-ico { transform: translateY(-4px); }
.oz-drop b { font-size: 16px; }
.oz-drop-or { font-size: 13px; color: var(--faint); }
.oz-drop small { font-size: 13px; color: var(--faint); margin-top: 4px; }
.oz-file-input { color: var(--muted); font: inherit; font-size: 15px; max-width: 100%; }
.oz-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oz-files:not(:empty) { margin-top: 12px; }
.oz-files li {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); animation: oz-fade .3s ease;
}
.oz-files .oz-f-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #0A0F18; background: #8FA2F7; text-transform: uppercase; }
.oz-files .oz-f-ico.x { background: #3CCB8F; }
.oz-files .oz-f-ico.w { background: #7FA8FF; }
.oz-files .oz-f-ico.p { background: #FF8C9B; }
.oz-files .oz-f-ico.i { background: #F2B544; }
.oz-files .oz-f-n { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-files .oz-f-s { font-size: 13px; color: var(--faint); white-space: nowrap; }
.oz-files button {
  width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.oz-files button:hover { color: #FF8C9B; border-color: rgba(255, 107, 127, .35); background: rgba(255, 107, 127, .08); }
.oz-files button svg.i { width: 18px; height: 18px; }

/* согласие */
.oz-consent { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; color: #BFC9DA; line-height: 1.5; }
.oz-consent a { text-decoration: underline; text-underline-offset: 3px; }
.oz-box {
  width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--line-2); background: rgba(8, 12, 20, .55);
  display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;
}
.oz-box svg.i { width: 15px; height: 15px; stroke-width: 3; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.oz-consent:hover .oz-box { border-color: #4B5F85; }
.oz-consent input:checked + .oz-box { background: var(--accent); border-color: var(--accent-2); box-shadow: 0 0 16px rgba(90, 110, 219, .6); }
.oz-consent input:checked + .oz-box svg.i { opacity: 1; transform: none; }
.oz-consent input:focus-visible + .oz-box { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.oz-consent input[aria-invalid="true"] + .oz-box { border-color: #FF6B7F; }

/* кнопки шагов */
.oz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; }
.oz-on .oz-nav { padding-top: 22px; border-top: 1px solid var(--line); }
.oz-nav .btn svg.i { width: 19px; height: 19px; }
.oz-step:not([data-step="4"]) .oz-nav { display: none; }
.oz-on .oz-step .oz-nav { display: flex; }
.oz-submit { min-width: 240px; }
.oz-form.is-busy .oz-submit { opacity: .6; pointer-events: none; }
.oz-submit-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--faint); }
.oz-submit-note svg.i { width: 16px; height: 16px; color: var(--good); }
.oz-sending { margin-top: 20px; }
.oz-sending-t { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.oz-sending-bar { height: 8px; border-radius: 8px; background: rgba(143, 162, 247, .1); overflow: hidden; }
.oz-sending-bar i {
  display: block; height: 100%; width: var(--p, 5%); border-radius: 8px; transition: width .3s ease;
  background: linear-gradient(90deg, #5A6EDB, #8FA2F7, #3CCB8F); background-size: 200% 100%; animation: oz-shine 1.2s linear infinite;
}
@keyframes oz-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }

.oz-draft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -12px 0 22px; padding: 8px 14px; border-radius: 12px;
  font-size: 14px; color: #C9D2E0; background: var(--accent-soft); border: 1px solid rgba(143, 162, 247, .25); animation: oz-fade .35s ease;
}
.oz-draft[hidden] { display: none; }
.oz-draft .oz-link { padding: 4px 0; }
.oz-noscript { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; font-size: 15px; color: #C9D2E0; background: var(--accent-soft); }

/* сообщения после отправки без JavaScript */
.oz-notice { display: none; align-items: flex-start; gap: 14px; padding: 18px 20px; margin-bottom: 22px; border-radius: 18px; outline: none; }
.oz-notice:target, .oz-notice.is-shown { display: flex; animation: oz-fade .4s ease; }
.oz-notice b { display: block; font-size: 17px; }
.oz-notice p { color: #C9D2E0; font-size: 15px; margin-top: 2px; }
.oz-notice-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.oz-notice-ok { border: 1px solid rgba(60, 203, 143, .45); background: rgba(60, 203, 143, .09); }
.oz-notice-ok .oz-notice-ico { background: rgba(60, 203, 143, .18); color: var(--good); }
.oz-notice-bad { border: 1px solid rgba(255, 107, 127, .45); background: rgba(255, 107, 127, .07); }
.oz-notice-bad .oz-notice-ico { background: rgba(255, 107, 127, .16); color: #FF8C9B; }

/* сводка "Ваша заявка" */
.oz-sum { position: sticky; top: 92px; }
.oz-sum-d {
  border-radius: 22px; border: 1px solid var(--line-2); overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 34, 51, .85), rgba(16, 23, 35, .9));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.oz-sum-d summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 16px; border-bottom: 1px solid var(--line);
}
.oz-sum-d summary::-webkit-details-marker { display: none; }
.oz-sum-d summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .25s;
}
.oz-sum-d[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.oz-sum-c { margin-left: auto; }
.oz-sum-d summary > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.oz-sum-d summary svg.i { color: var(--accent-2); width: 20px; height: 20px; }
.oz-sum-c { font-size: 12.5px; font-weight: 800; color: var(--accent-2); padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); white-space: nowrap; }
.oz-sum dl { margin: 0; padding: 4px 20px 12px; }
.oz-sum-r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.oz-sum-r:last-child { border-bottom: 0; }
.oz-sum dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.oz-sum dd { margin: 0; font-size: 14.5px; color: #D4DCE8; overflow-wrap: anywhere; line-height: 1.45; }
.oz-sum dd.is-empty { color: #56647B; }
.oz-sum dd.is-new { animation: oz-flash 1s ease; }
@keyframes oz-flash { 0% { color: #fff; text-shadow: 0 0 12px rgba(143, 162, 247, .9); } 100% { text-shadow: none; } }

/* итог: успех и ошибка */
.oz-result { outline: none; }
.oz-done { text-align: center; padding: 10px 0 4px; }
.oz-done-ico { position: relative; width: 104px; height: 104px; margin: 0 auto 22px; }
.oz-done-ico svg { width: 104px; height: 104px; overflow: visible; }
.oz-done-ring { fill: rgba(60, 203, 143, .12); stroke: #3CCB8F; stroke-width: 3; stroke-dasharray: 302; stroke-dashoffset: 302; animation: oz-draw .8s .1s ease forwards; }
.oz-done-tick { fill: none; stroke: #3CCB8F; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: oz-draw .45s .75s ease forwards; }
@keyframes oz-draw { to { stroke-dashoffset: 0; } }
.oz-done-ico::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(60, 203, 143, .5);
  opacity: 0; animation: oz-ping 1.4s .9s ease-out;
}
@keyframes oz-ping { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.5); } }
.oz-spark-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; opacity: 0; animation: oz-burst .9s .8s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes oz-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(84px) scale(.4); } }
.oz-done h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.oz-done > p { color: #BFC9DA; max-width: 32em; margin: 12px auto 0; font-size: 16.5px; }
.oz-num {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 10px 18px; border-radius: 14px;
  background: rgba(60, 203, 143, .08); border: 1px solid rgba(60, 203, 143, .35); font-size: 14px; color: var(--muted); font-weight: 700;
}
.oz-num b { font-size: 24px; color: var(--text); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.oz-next-t { margin: 30px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.oz-next-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left; counter-reset: oz; }
.oz-next-l li {
  counter-increment: oz; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; color: #C9D2E0;
  opacity: 0; animation: oz-fade .5s ease forwards;
}
.oz-next-l li:nth-child(1) { animation-delay: 1.1s; }
.oz-next-l li:nth-child(2) { animation-delay: 1.25s; }
.oz-next-l li:nth-child(3) { animation-delay: 1.4s; }
.oz-next-l li::before { content: counter(oz); display: flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; margin-bottom: 8px; font-weight: 800; font-size: 13px; color: #fff; background: var(--accent); }
.oz-warn { margin: 22px auto 0; max-width: 36em; padding: 14px 16px; border-radius: 14px; text-align: left; font-size: 15px; color: #F3DDB0; background: rgba(242, 181, 68, .09); border: 1px solid rgba(242, 181, 68, .38); }
.oz-res-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.oz-fail h3 { font-size: clamp(24px, 2.8vw, 30px); font-weight: 800; display: flex; align-items: center; gap: 14px; }
.oz-fail-ico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(242, 181, 68, .15); color: #F2B544; }
.oz-fail > p { color: #BFC9DA; margin-top: 12px; }
.oz-fail .oz-srv { color: #FF8C9B; font-weight: 700; }
.oz-fail textarea { margin-top: 16px; min-height: 260px; font-size: 14px; font-weight: 400; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.oz-fail .oz-res-btns { justify-content: flex-start; }

/* ==========================================================================
   Блок на главной и полоса на страницах программ
   ========================================================================== */
.oz-home-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center;
  padding: 48px; border-radius: 30px; border: 1px solid rgba(143, 162, 247, .32);
  background:
    radial-gradient(620px 320px at 0% 0%, rgba(90, 110, 219, .38), transparent 70%),
    radial-gradient(520px 320px at 100% 100%, rgba(242, 181, 68, .15), transparent 70%),
    linear-gradient(160deg, #151F31, #0E1522);
  box-shadow: 0 50px 110px -40px rgba(90, 110, 219, .55);
}
.oz-home-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .06) 50%, transparent 65%);
  transform: translateX(-100%); animation: oz-sheen 7s ease-in-out infinite;
}
@keyframes oz-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.oz-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F2B544; }
.oz-kicker svg.i { width: 17px; height: 17px; }
.oz-home-text h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; margin-top: 12px; }
.oz-home-text p { color: #BFC9DA; font-size: 18px; margin-top: 14px; max-width: 30em; }
.oz-home-pick { position: relative; z-index: 1; padding: 24px; border-radius: 22px; background: rgba(8, 12, 20, .5); border: 1px solid var(--line-2); }
.oz-home-q { font-size: 15px; font-weight: 800; color: var(--muted); margin-bottom: 14px; }
.oz-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oz-hp {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 16px; color: var(--text);
  font-weight: 800; font-size: 15px; line-height: 1.25; border: 1px solid var(--line-2); background: rgba(143, 162, 247, .04);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.oz-hp:hover { color: var(--text); border-color: var(--c); background: var(--c-soft); transform: translateY(-2px); box-shadow: 0 14px 30px -16px var(--c); }
.oz-hp-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--c-soft); color: var(--c); }
.oz-hp-t { flex: 1; min-width: 0; }
.oz-hp-go { color: var(--c); opacity: .35; transition: opacity .2s, transform .2s; }
.oz-hp-go svg.i { width: 18px; height: 18px; }
.oz-hp:hover .oz-hp-go { opacity: 1; transform: translateX(3px); }
.oz-home-btn { width: 100%; margin-top: 14px; }

.oz-strip { padding: 12px 0; }
.oz-banner {
  display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 20px; color: var(--text);
  border: 1px solid rgba(143, 162, 247, .3);
  background: linear-gradient(90deg, rgba(90, 110, 219, .2), rgba(143, 162, 247, .05) 60%, rgba(242, 181, 68, .1));
  transition: border-color .2s, box-shadow .25s, transform .2s;
}
.oz-banner:hover { color: var(--text); border-color: var(--accent-2); box-shadow: 0 18px 44px -20px rgba(90, 110, 219, .8); transform: translateY(-1px); }
.oz-banner-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(242, 181, 68, .15); color: #F2B544; }
.oz-banner-t { font-size: 17px; font-weight: 800; }
.oz-banner-l { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent-2); white-space: nowrap; }
.oz-banner-l svg.i { width: 18px; height: 18px; transition: transform .2s; }
.oz-banner:hover .oz-banner-l svg.i { transform: translateX(3px); }

/* ==========================================================================
   Политика обработки персональных данных
   ========================================================================== */
.oz-doc-sec { padding: 64px 0 88px; }
.oz-doc { max-width: 820px; }
.oz-doc h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; margin: 16px 0 10px; }
.oz-doc-date { font-size: 14px; color: var(--faint); font-weight: 600; }
.oz-doc .lead { margin: 20px 0 26px; font-size: 18px; color: #BFC9DA; }
.oz-doc-toc { padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.oz-doc-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 15px; }
.oz-doc-toc li { padding: 3px 0; break-inside: avoid; color: var(--faint); }
.oz-doc-toc a { color: var(--muted); }
.oz-doc-toc a:hover { color: var(--text); }
.oz-doc-s { margin-top: 40px; scroll-margin-top: 90px; }
.oz-doc-s h2 { font-size: 23px; font-weight: 800; margin-bottom: 12px; }
.oz-doc-s p, .oz-doc-s li { color: #C4CEDD; font-size: 16.5px; }
.oz-doc-s p + p, .oz-doc-s ul + p, .oz-doc-s p + ul { margin-top: 12px; }
.oz-doc-s ul { margin: 0; padding-left: 22px; }
.oz-doc-s li { margin: 6px 0; }
.oz-doc-s li::marker { color: var(--accent-2); }
.oz-doc-op { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.oz-doc-op div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.oz-doc-op div:first-child { border-top: 0; }
.oz-doc-op dt { color: var(--muted); font-size: 15px; }
.oz-doc-op dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.oz-doc-back { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }

/* ==========================================================================
   Планшет и телефон
   ========================================================================== */
@media (max-width: 1020px) {
  .oz-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .oz-hv { max-width: 680px; }
  .oz-hv-win { transform: none; }
  .oz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-need { grid-template-columns: 1fr; gap: 36px; }
  .oz-flow { grid-template-columns: 1fr; gap: 0; }
  .oz-flow::before { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(143, 162, 247, .55), rgba(60, 203, 143, .55)); }
  .oz-flow-i { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 22px; }
  .oz-flow-n { grid-row: span 2; margin-bottom: 0; }
  .oz-flow h3 { margin: 10px 0 4px; }
  .oz-works { grid-template-columns: 1fr; }
  .oz-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oz-work-shot { border-bottom: 0; border-right: 1px solid var(--line); }
  .oz-work-shot img { height: 100%; }
  .oz-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-app.oz-on { grid-template-columns: 1fr; }
  .oz-sum { position: static; }
  .oz-home-card { grid-template-columns: 1fr; gap: 30px; padding: 36px; }
}

@media (max-width: 760px) {
  .oz-hero { padding: 36px 0 28px; }
  .oz-hero .lead { font-size: 17px; }
  .oz-hv { padding: 0 0 20px; }
  .oz-hv-ph { width: 27%; right: -2px; bottom: 58px; border-width: 4px; border-radius: 16px; }
  .oz-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .oz-badge { position: static; animation: none; font-size: 13px; padding: 7px 12px 7px 8px; }
  .oz-badge svg.i { width: 15px; height: 15px; padding: 4px; }
  .oz-bento { grid-template-columns: 1fr; }
  .oz-get-big { grid-column: auto; padding: 24px; }
  .oz-get-big h3 { font-size: 21px; }
  .oz-work { display: flex; }
  .oz-work-shot { border-right: 0; border-bottom: 1px solid var(--line); }
  .oz-work-shot img { height: auto; }
  .oz-msg { max-width: 94%; }
  .oz-chat { padding: 20px; }
  .oz-prices { grid-template-columns: 1fr; }
  .oz-card { padding: 22px 18px; border-radius: 22px; }
  .oz-prog { gap: 4px; }
  .oz-prog-b { flex-direction: column; gap: 6px; font-size: 12px; text-align: center; padding: 4px 0; }
  .oz-bar { margin: 12px 0 24px; }
  .oz-step-head { margin-bottom: 20px; }
  .oz-step-n { display: none; }
  .oz-plats { grid-template-columns: 1fr; gap: 10px; }
  .oz-plat { min-height: 0; padding: 16px 46px 16px 16px; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .oz-plat-ico { width: 48px; height: 48px; border-radius: 14px; }
  .oz-plat-ico svg.i { width: 24px; height: 24px; }
  .oz-plat-t { font-size: 17px; }
  .oz-chip span { font-size: 14.5px; padding: 8px 14px; }
  .oz-row2 { grid-template-columns: 1fr; }
  .oz-nav .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  .oz-nav > span:empty { display: none; }
  .oz-submit { min-width: 0; }
  .oz-next-l { grid-template-columns: 1fr; gap: 8px; }
  .oz-next-l li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .oz-next-l li::before { margin: 0; flex: none; }
  .oz-done-ico, .oz-done-ico svg { width: 84px; height: 84px; }
  .oz-res-btns .btn { width: 100%; }
  .oz-home-card { padding: 26px 20px; border-radius: 24px; }
  .oz-home-text p { font-size: 16.5px; }
  .oz-home-pick { padding: 16px; }
  .oz-banner { flex-wrap: wrap; padding: 16px 18px; gap: 10px 14px; }
  .oz-banner-t { flex: 1 1 200px; font-size: 16px; }
  .oz-banner-l { margin-left: 58px; }
  .oz-doc-sec { padding: 36px 0 64px; }
  .oz-doc-toc ol { columns: 1; }
  .oz-doc-op div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 480px) {
  .oz-home-grid { grid-template-columns: 1fr; }
  .oz-hp { min-height: 56px; }
}

/* на телефонах и планшетах без мыши перетаскивать нечем: остаётся кнопка выбора файлов */
@media (hover: none) and (pointer: coarse) {
  .oz-on .oz-drop b, .oz-on .oz-drop-or { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [class*="oz-"], [class*="oz-"]::before, [class*="oz-"]::after, [class*="oz-"] * {
    animation: none !important; transition: none !important;
  }
  .oz-done-ring, .oz-done-tick { stroke-dashoffset: 0; }
  .oz-next-l li { opacity: 1; }
  .oz-spark-dot { display: none; }
  .oz-hv-win { transform: none; }
}


/* Статьи /stati/ (articles.py). Все классы с приставкой ar-, кроме общих .wrap, .eyebrow, .btn. */
.ar { padding: 40px 0 72px; }
.ar-wrap { max-width: 820px; }
.ar h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 18px 0 16px; text-wrap: balance; }
.ar-lead { font-size: 19px; line-height: 1.6; color: #B9C4D6; margin: 0 0 14px; max-width: 44em; }
.ar-meta { font-size: 14px; color: var(--faint); margin: 0 0 36px; }
.ar-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--faint); margin-bottom: 26px; }
.ar-crumbs a { color: var(--muted); text-decoration: none; }
.ar-crumbs a:hover { color: var(--text); }
.ar-crumbs i { font-style: normal; opacity: .6; }

.ar-body h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 750; letter-spacing: -.02em; line-height: 1.25; margin: 44px 0 14px; }
.ar-body p, .ar-body li { font-size: 17px; line-height: 1.75; color: #CDD6E4; }
.ar-body p { margin: 0 0 16px; }
.ar-body ul, .ar-body ol { margin: 0 0 20px; padding-left: 24px; }
.ar-body li { margin: 0 0 10px; padding-left: 4px; }
.ar-body li::marker { color: var(--hue); font-weight: 700; }
.ar-note { border-left: 3px solid var(--hue); background: var(--hue-soft); border-radius: 0 12px 12px 0; padding: 14px 18px; color: var(--text) !important; }

.ar-cta { display: flex; align-items: center; gap: 18px; margin: 28px 0; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); }
.ar-cta-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--hue-soft); color: var(--hue); }
.ar-cta-ico svg { width: 24px; height: 24px; }
.ar-cta > div:nth-child(2) { flex: 1; min-width: 0; }
.ar-cta b { display: block; font-size: 17px; margin-bottom: 4px; }
.ar-cta span { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ar-cta .btn { flex: none; }

.ar-more-h { font-size: 22px; margin: 56px 0 16px; }
.ar-more, .ar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
.ar-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.ar-card:hover { border-color: var(--hue); transform: translateY(-2px); }
.ar-card span { display: block; font-size: 13px; color: var(--hue); margin-bottom: 8px; }
.ar-card b { display: block; font-size: 17px; line-height: 1.35; }
.ar-card.big b { font-size: 20px; }
.ar-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

@media (max-width: 760px) {
  .ar { padding: 24px 0 56px; }
  .ar-more, .ar-list { grid-template-columns: 1fr; }
  .ar-cta { flex-wrap: wrap; }
  .ar-cta .btn { width: 100%; justify-content: center; }
  .ar-body p, .ar-body li { font-size: 16px; }
  .ar-lead { font-size: 17px; }
}