@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
  src: url(/assets/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-weight: 200 800; font-display: swap;
  src: url(/assets/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; }

:root {
  --bg: #0B0B0D;
  --bg-2: #131316;
  --card: #1A1A1F;
  --line: rgba(255,255,255,.09);
  --text: #F4F4F5;
  --muted: #9C9CA6;
  --lime: #D7FF64;
  --lime-deep: #C2F03A;
  --violet: #A880FF;
  --paper: #F2F3F5;
  --ink: #0B0B0D;
  --ink-muted: #5E6170;
  --red: #FF4D5E;
  --green: #3DDC84;
  --holo: linear-gradient(120deg, #D7FF64 0%, #9DF2D0 35%, #A880FF 70%, #FFB3E1 100%);

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(88px, 12vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(34px, 5vw, 68px); line-height: 1.02; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.fine { color: var(--muted); font-size: 14.5px; }

/* Кнопки */
.btn-chrome { display: inline-flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 12px 0 30px;
  border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none;
  font: 800 18px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 18px 50px -18px rgba(215,255,100,.65);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 300ms ease; }
.btn-chrome .chrome { width: 44px; height: 44px; padding: 4px; border-radius: 50%; background: var(--ink);
  transition: transform 500ms var(--ease-out); }
.btn-chrome .tgi { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #5BB6F5; display: grid; place-items: center; flex: none; }
.btn-chrome .tgi svg { width: 22px; height: 22px; margin-left: -2px; }
.float-cta .tgi { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #5BB6F5; display: grid; place-items: center; }
.float-cta .tgi svg { width: 17px; height: 17px; margin-left: -2px; }
.btn-chrome:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-chrome:hover { background: #E2FF85; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 22px 60px -16px rgba(215,255,100,.85); }
  .btn-chrome:hover .chrome { transform: rotate(120deg); }
}
.btn-chrome-xl { min-height: 84px; padding: 0 14px 0 40px; font-size: clamp(20px, 2.2vw, 26px); gap: 22px; }
.btn-chrome-xl .chrome { width: 60px; height: 60px; }

.btn-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 26px; border-radius: 999px;
  color: var(--text); text-decoration: none; font: 700 16.5px/1 var(--font); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease; }
.btn-ghost svg { width: 20px; height: 20px; color: #5BB6F5; }
.btn-ghost:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 0; background: var(--lime); color: var(--ink); text-decoration: none; cursor: pointer;
  font: 800 15px/1 var(--font); white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #E2FF85; } }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 14.5px; }

/* Шапка */
.top { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 300ms ease, backdrop-filter 300ms ease; }
.top.scrolled { background: rgba(11,11,13,.72); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--line); }
.top-in { display: flex; align-items: center; gap: 36px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--font); letter-spacing: -0.04em; }
.logo svg { width: 32px; height: 32px; }
.nav { display: flex; gap: 28px; margin-right: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--text); } }
@media (max-width: 900px) { .nav { display: none; } .top-in { justify-content: space-between; } }

/* Появление заголовков по словам */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .w > span { display: inline-block; transform: translateY(108%);
  transition: transform 1000ms var(--ease-out) calc(var(--i) * 45ms); }
[data-split].in .w > span { transform: none; }
.rise { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out) var(--d, 0ms), transform 800ms var(--ease-out) var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-split] .w > span { transform: none; transition: none; }
  .rise { transform: none; transition: opacity 400ms ease; }
}

/* Первый экран */
.hero { position: relative; min-height: 100svh; padding: 140px 0 100px; display: flex; align-items: center; overflow: clip; }
.hero::before { content: ""; position: absolute; width: 900px; height: 900px; right: -200px; top: -240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168,128,255,.28), transparent); pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 700px; height: 700px; left: -260px; bottom: -380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(215,255,100,.16), transparent); pointer-events: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; width: 100%; }
.hero-title { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -0.045em; max-width: 11ch; }
.hero-title .w:nth-last-child(-n+2) > span { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 30px; max-width: 33em; color: #C9C9D1; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.55; font-weight: 500; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 40px; }
.hero .fine { margin-top: 18px; }
@media (max-width: 980px) { .hero-in { grid-template-columns: 1fr; gap: 64px; } .hero { padding-top: 120px; } }

/* Стопка карточек: ваш товар и копии */
.pile { position: relative; height: 560px; perspective: 1400px; }
.card { position: absolute; left: 50%; top: 50%; width: 250px; margin: -200px 0 0 -125px; padding: 10px 10px 14px;
  border-radius: 22px; background: #fff; color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4);
  will-change: transform; transition: transform 1100ms var(--ease-out), filter 600ms ease, opacity 600ms ease; }
.card-pic { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #E6EAF0; }
.card-pic svg { width: 100%; height: 100%; }
.card-price { margin-top: 10px; font-size: 20px; letter-spacing: -0.02em; }
.card-price b { color: #F1117E; font-weight: 800; }
.card-price s { color: #9A9EAA; font-size: 13px; font-weight: 600; }
.card-name { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: #22252D; margin-top: 2px; }
.card-seller { font-size: 12.5px; color: #7A7F8C; margin-top: 4px; font-weight: 600; }
.stamp { position: absolute; bottom: 104px; left: 20px; padding: 6px 12px; border-radius: 999px; font: 800 13px/1 var(--font);
  color: #fff; background: var(--red); box-shadow: 0 6px 18px -6px rgba(255,77,94,.8);
  opacity: 0; transform: scale(1.6) rotate(-8deg); transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
.stamp-own { background: var(--ink); color: var(--lime); box-shadow: none; opacity: 1; transform: none; }
.stamp-ok { background: #13A86B; box-shadow: 0 6px 18px -6px rgba(19,168,107,.8); }
.clone.caught .stamp:not(.stamp-ok) { opacity: 1; transform: rotate(-4deg); }
.clone.caught .card-pic { box-shadow: 0 0 0 3px var(--red); }
.card-pic { transition: box-shadow 300ms ease; }
.pile.hidden .clone .card-pic { box-shadow: none; }
.pile.hidden .clone .stamp:not(.stamp-ok) { opacity: 0; transform: scale(.9) rotate(-4deg); }
.pile.hidden .clone .stamp-ok { opacity: 1; transform: rotate(-4deg); }
.pile.hidden .clone { filter: grayscale(1) brightness(.55); }

.loupe { position: absolute; left: 50%; top: 50%; z-index: 5; width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.loupe svg { width: 100%; height: 100%; }
.stamp { white-space: nowrap; }
.glass { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -400px 0 0 -120px; pointer-events: none;
  animation: float 9s ease-in-out infinite; }
.glass i { position: absolute; width: 300px; height: 300px; border-radius: 84px; }
.glass-a { left: 0; top: 30px; background: var(--holo); opacity: .55; filter: blur(2px); transform: rotate(-14deg); }
.glass-b { right: 10px; bottom: 20px; background: linear-gradient(140deg, rgba(255,255,255,.35), rgba(168,128,255,.18) 50%, rgba(215,255,100,.25));
  border: 1.5px solid rgba(255,255,255,.45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: rotate(-14deg);
  box-shadow: inset 0 0 40px rgba(255,255,255,.18); }
@keyframes float { 50% { transform: translateY(-18px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .glass { animation: none; } }
@media (max-width: 980px) { .pile { height: 500px; } }
@media (max-width: 560px) {
  .pile { height: 420px; }
  .stamp { bottom: 86px; }
  .card { width: 190px; margin: -160px 0 0 -95px; padding: 8px 8px 10px; border-radius: 18px; }
  .card-price { font-size: 17px; } .card-name { font-size: 12px; } .stamp { left: 14px; font-size: 11.5px; }
  .glass { width: 360px; height: 360px; margin: -190px 0 0 -180px; } .glass i { width: 210px; height: 210px; border-radius: 60px; }
}

/* Бегущая строка с ответами поддержки */
.ticker { position: relative; z-index: 2; padding: 18px 0; background: var(--lime); color: var(--ink); overflow: hidden; }
.ticker-track { display: flex; width: max-content; gap: 48px; animation: ticker 60s linear infinite; }
.ticker-track .tk { display: inline-flex; align-items: center; gap: 12px; font: 800 18px/1.2 var(--font); letter-spacing: -0.02em; white-space: nowrap; }
.tk::before { content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--ink) center / 16px no-repeat; }
.tk-found::before { background-color: var(--red); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6" fill="none" stroke="white" stroke-width="3"/><path d="M15 15l5 5" stroke="white" stroke-width="3" stroke-linecap="round"/></svg>'); }
.tk-sent::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11.5L21 4l-6 17-3.5-7z" fill="none" stroke="%23D7FF64" stroke-width="2.6" stroke-linejoin="round"/></svg>'); }
.tk-hidden::before { background-color: #13A86B; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation-duration: 240s; } }

/* Тур: закреплённый браузер */
.tour { position: relative; margin-top: 60px; }
.tour-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding-top: 88px; overflow: hidden; }
.tour-track { height: 520svh; margin-top: -100svh; }
.tour-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: end; }
.tour-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; grid-column: 1 / -1; }
.tour-steps li { flex: 1; }
.tour-steps button { width: 100%; padding: 12px 0 0; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: left;
  font: 700 13.5px/1.2 var(--font); position: relative; transition: color 300ms ease; }
.tour-steps button::before, .tour-steps button::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); }
.tour-steps button::after { background: var(--lime); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tour-steps li[data-on] button { color: var(--text); }
.tour-text { display: grid; margin-top: 18px; }
.tour-say { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 48px; align-items: end;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.tour-say[data-on] { opacity: 1; transform: none; pointer-events: auto; }
.tour-say h2 { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.08; }
.tour-say p { color: #BDBDC6; max-width: 40em; font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; }
.tour-stage { flex: 1; min-height: 0; position: relative; padding: 20px var(--gutter) 24px; }
@media (max-width: 760px) {
  .tour-pin { padding-top: 76px; }
  .tour-steps button { font-size: 0; } .tour-steps button span { display: none; }
  .tour-text { margin-top: 12px; }
  .tour-say { grid-template-columns: 1fr; }
  .tour-say p { font-size: 14px; }
}

/* Окно браузера (внутренний размер 1120×700, масштабируется) */
.bw { position: absolute; left: 50%; top: 50%; margin: -350px 0 0 -560px; width: 1120px; height: 700px; border-radius: 16px; overflow: hidden; background: #202124;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 120px -40px rgba(0,0,0,.8), 0 0 120px -20px rgba(168,128,255,.25);
  transform-origin: center; font-family: var(--font); color: #1F2329; }
.bw-bar { height: 38px; display: flex; align-items: flex-end; gap: 14px; padding: 0 14px; background: #2B2C2F; }
.bw-dots { display: flex; gap: 7px; align-self: center; }
.bw-dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.bw-dots i:nth-child(2) { background: #FEBC2E; } .bw-dots i:nth-child(3) { background: #28C840; }
.bw-tab { height: 30px; min-width: 220px; max-width: 280px; display: flex; align-items: center; padding: 0 14px; border-radius: 9px 9px 0 0;
  background: #3C3D41; color: #E8EAED; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-nav { height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #3C3D41; }
.bw-arrows { color: #9AA0A6; font-size: 18px; letter-spacing: 6px; }
.bw-addr { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #282A2D;
  color: #E8EAED; font-size: 13px; font-weight: 500; }
.bw-ext { width: 26px; height: 26px; border-radius: 7px; opacity: 0; transform: scale(.4); transition: opacity 300ms var(--ease-out), transform 500ms var(--ease-out); }
.bw-ext.on { opacity: 1; transform: none; }
.bw-ext svg { width: 26px; height: 26px; }
.bw-puzzle { width: 20px; color: #9AA0A6; }
.bw-view { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.sc { position: absolute; inset: 0; animation: sc-in 500ms var(--ease-out) both; }
@keyframes sc-in { from { opacity: 0; transform: scale(.985); } }

.cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 26px; height: 26px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); transition: opacity 300ms ease; }
.cursor.on { opacity: 1; }
.cursor svg { width: 26px; height: 26px; }
.cursor::after { content: ""; position: absolute; left: -14px; top: -14px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(215,255,100,.55); transform: scale(0); opacity: 0; }
.cursor.click::after { animation: click 500ms var(--ease-out); }
@keyframes click { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.press { animation: press 260ms var(--ease-out); }
@keyframes press { 40% { transform: scale(.95); } }

/* Сцена: магазин расширений */
.cws { padding: 0 0 30px; height: 100%; background: #fff; }
.cws-head { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 40px; border-bottom: 1px solid #E3E5E8; font-size: 18px; font-weight: 600; color: #3C4043; }
.cws-head svg { width: 30px; height: 30px; }
.cws-search { margin-left: 40px; flex: 1; max-width: 480px; height: 42px; border-radius: 999px; background: #F1F3F4; display: flex; align-items: center; padding: 0 18px; color: #80868B; font-size: 14px; font-weight: 500; }
.cws-main { display: grid; grid-template-columns: 112px 1fr auto; gap: 28px; align-items: center; padding: 40px 70px 30px; }
.cws-icon { width: 112px; height: 112px; border-radius: 28px; background: #0B0B0D; display: grid; place-items: center; }
.cws-icon svg { width: 76px; height: 76px; }
.cws-main h4 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: #202124; }
.cws-main p { color: #5F6368; font-size: 15px; margin-top: 6px; }
.cws-tags { display: flex; gap: 8px; margin-top: 12px; }
.cws-tags span { padding: 5px 12px; border-radius: 999px; border: 1px solid #DADCE0; font-size: 12.5px; font-weight: 600; color: #3C4043; }
.cws-btn { height: 46px; padding: 0 28px; border-radius: 999px; border: 0; background: #0B57D0; color: #fff; font: 700 15px/1 var(--font); cursor: pointer; }
.cws-btn.done { background: #fff; color: #0B57D0; box-shadow: inset 0 0 0 1px #747775; }
.cws-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 70px; }
.promo { aspect-ratio: 16 / 10; border-radius: 14px; background: #0B0B0D; color: #fff; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.promo b { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.promo-pics { display: flex; gap: 8px; align-items: center; }
.promo-pics .pic { width: 64px; height: 86px; border-radius: 9px; overflow: hidden; }
.promo-pics .pic:nth-child(2) { box-shadow: 0 0 0 2px var(--red); }
.promo-pics .pic:last-child:not(:first-child) { box-shadow: 0 0 0 2px var(--red); }
.promo-pct { padding: 4px 9px; border-radius: 999px; background: var(--red); font-size: 12px; font-weight: 800; }
.promo-ok { padding: 8px 14px; border-radius: 999px; background: #13A86B; font-size: 14px; font-weight: 800; }
.promo:nth-child(2) { background: linear-gradient(135deg, #1A1A22, #2A2140); }
.promo:nth-child(3) { background: var(--lime); color: var(--ink); }
.cws-about { padding: 26px 70px 0; max-width: 860px; }
.cws-about h6 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #202124; }
.cws-about p { color: #5F6368; font-size: 14.5px; line-height: 1.55; }
.ext-toast { position: absolute; top: 10px; right: 14px; width: 330px; padding: 16px 18px; border-radius: 14px; background: #fff; color: #202124;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); display: flex; gap: 14px; align-items: center;
  font-size: 14px; font-weight: 600; animation: drop 450ms var(--ease-out) both; }
.ext-toast svg { width: 36px; height: 36px; flex: none; }
.ext-toast small { display: block; color: #5F6368; font-weight: 500; font-size: 12.5px; margin-top: 2px; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* Сцена: Telegram */
.tg { display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.tg-side { background: #fff; border-right: 1px solid #E6E8EB; padding: 12px 8px; }
.tg-search { height: 38px; border-radius: 999px; background: #F1F2F4; margin: 0 6px 10px; }
.tg-chat-item { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; font-size: 14px; }
.tg-chat-item b { display: block; font-weight: 700; color: #111; }
.tg-chat-item small { color: #8A8F98; font-size: 13px; }
.tg-chat-item.on { background: #3390EC; } .tg-chat-item.on b, .tg-chat-item.on small { color: #fff; }
.tg-ava { width: 46px; height: 46px; border-radius: 50%; background: #0B0B0D; display: grid; place-items: center; flex: none; }
.tg-ava svg { width: 30px; height: 30px; }
.tg-ava.alt { background: #E9E2FF; }
.tg-main { display: flex; flex-direction: column; background: linear-gradient(160deg, #C7DFAA, #A8CB8F 60%, #8FBF85); }
.tg-head { height: 56px; background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: 15px; }
.tg-head .tg-ava { width: 38px; height: 38px; } .tg-head .tg-ava svg { width: 24px; height: 24px; }
.tg-head small { display: block; color: #8A8F98; font-size: 12.5px; }
.tg-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 90px 18px; overflow: hidden; }
.tg-msg { max-width: 420px; padding: 9px 13px 8px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; background: #fff; color: #111;
  align-self: flex-start; border-bottom-left-radius: 5px; animation: pop-in 320ms var(--ease-out) both; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.tg-msg.out { align-self: flex-end; background: #EFFDDE; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.tg-kb { align-self: flex-start; width: 420px; display: grid; gap: 4px; animation: pop-in 320ms var(--ease-out) both; }
.tg-kb button { height: 40px; border: 0; border-radius: 10px; background: rgba(42,76,40,.38); color: #fff; font: 700 14px/1 var(--font); cursor: pointer;
  backdrop-filter: blur(4px); }
.tg-input { height: 54px; margin: 0 90px 16px; border-radius: 14px; background: #fff; display: flex; align-items: center; padding: 0 18px; color: #A0A4AB; font-size: 14.5px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Окно расширения (popup) */
.ext-pop { position: absolute; top: 6px; right: 40px; width: 330px; border-radius: 16px; background: #141418; color: var(--text);
  padding: 18px; box-shadow: 0 30px 60px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); animation: drop 450ms var(--ease-out) both; font-size: 13.5px; }
.ext-pop-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.ext-pop-h svg { width: 26px; height: 26px; }
.ext-pop .ok { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.35); }
.ext-pop .ok b { color: var(--green); display: flex; align-items: center; gap: 8px; }
.ext-pop .ok b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.ext-pop .row { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); }
.ext-pop .row span:last-child { color: var(--text); font-weight: 700; }

/* Сцена: страница магазина на Ozon */
.oz { height: 100%; background: #F2F3F5; position: relative; }
.oz-head { height: 70px; background: #fff; display: flex; align-items: center; gap: 14px; padding: 0 34px; }
.oz-logo { font: 900 28px/1 var(--font); color: #005BFF; letter-spacing: -0.04em; }
.oz-cat { height: 42px; padding: 0 18px; border-radius: 12px; background: #005BFF; color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.oz-search { flex: 1; height: 42px; border-radius: 12px; border: 2px solid #005BFF; display: flex; align-items: center; gap: 8px; padding: 0 8px; color: #9AA0A6; font-size: 14.5px; }
.oz-search i { font-style: normal; height: 28px; padding: 0 10px; border-radius: 8px; background: #005BFF; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.oz-shop { margin: 14px 34px; padding: 16px 20px; border-radius: 20px; background: #fff; display: flex; align-items: center; gap: 14px; }
.oz-shop .ava { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; }
.oz-shop b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.oz-shop small { display: block; color: #70757F; font-size: 13px; font-weight: 600; }
.oz-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 0 34px; }
.oz-card { position: relative; background: #fff; border-radius: 16px; padding: 6px 6px 10px; transition: box-shadow 250ms ease, transform 250ms var(--ease-out); }
.oz-card .pic { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.oz-card .pic svg { width: 100%; height: 100%; }
.oz-card .pr { margin-top: 6px; font-size: 16px; font-weight: 800; color: #F1117E; }
.oz-card .pr s { color: #9AA0A6; font-size: 11px; font-weight: 600; }
.oz-card .nm { font-size: 12px; line-height: 1.3; color: #22252D; font-weight: 500; }
.oz-card.scan { box-shadow: 0 0 0 3px var(--lime-deep), 0 10px 30px -10px rgba(194,240,58,.7); transform: translateY(-3px); }
.oz-card.hit { box-shadow: 0 0 0 3px var(--red); }
.oz-card .badge { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 800; animation: pop-in 300ms var(--ease-out) both; }

.kp { position: absolute; left: 18px; bottom: 18px; z-index: 5; width: 300px; padding: 14px 16px 16px; border-radius: 16px; background: #141418; color: var(--text);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); font-size: 12.5px; animation: pop-in 400ms var(--ease-out) both; }
.kp-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.kp-h svg { width: 20px; height: 20px; }
.kp-h em { margin-left: 2px; font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgba(215,255,100,.14); color: var(--lime); font-size: 11px; }
.kp-h .n { margin-left: auto; color: var(--muted); font-weight: 700; }
.kp p { margin-top: 8px; color: var(--muted); line-height: 1.45; }
.kp .btn { width: 100%; margin-top: 12px; min-height: 40px; font-size: 13.5px; }
.kp-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 10px; overflow: hidden; }
.kp-bar i { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(0); transition: transform 300ms linear; }
.kp-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.kp-nums div { padding: 8px 4px; text-align: center; color: var(--muted); font-size: 11px; }
.kp-nums div + div { border-left: 1px solid rgba(255,255,255,.1); }
.kp-nums b { display: block; color: var(--text); font-size: 18px; font-weight: 800; }
.kp-nums .red b { color: var(--red); }
.kp-link { display: inline-block; margin-top: 10px; color: var(--lime); font-weight: 700; }

.pp { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 560px; z-index: 4; padding: 22px; border-radius: 20px; background: #fff;
  box-shadow: -30px 0 80px -20px rgba(0,0,0,.35); animation: slide-in 600ms var(--ease-out) both; overflow: hidden; }
@keyframes slide-in { from { opacity: 0; transform: translateX(60px); } }
.pp-top { display: grid; grid-template-columns: 150px 1fr; gap: 18px; }
.pp-top .pic { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; }
.pp-top h5 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.pp-top .pr { margin-top: 10px; font-size: 26px; font-weight: 800; color: #F1117E; }
.pp-top small { display: block; color: #70757F; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.pp-cheaper { margin-top: 18px; padding: 14px; border-radius: 16px; background: #F2F3F5; }
.pp-cheaper h6 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.offer { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: #fff;
  transition: box-shadow 300ms ease; }
.offer + .offer { margin-top: 8px; }
.offer .pic { width: 52px; height: 69px; border-radius: 8px; overflow: hidden; }
.offer .pic svg { width: 100%; height: 100%; }
.offer b { font-size: 17px; font-weight: 800; color: #F1117E; }
.offer small { display: block; color: #70757F; font-size: 12px; font-weight: 600; }
.offer .cart { height: 34px; padding: 0 14px; border-radius: 10px; background: #005BFF; color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.offer.copy { box-shadow: 0 0 0 2.5px var(--red); }
.offer .tagc { position: absolute; right: 8px; top: -11px; padding: 3px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  animation: pop-in 300ms var(--ease-out) both; }

.cmp { width: 520px; background: #141418; color: var(--text); }
.cmp-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.cmp-h svg { width: 26px; height: 26px; }
.cmp-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.cmp-pics figure { margin: 0; }
.cmp-pics .pic { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.cmp-pics .pic svg { width: 100%; height: 100%; }
.cmp-pics figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cmp.done .their { box-shadow: 0 0 0 3px var(--red); }
.cmp-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lime); box-shadow: 0 0 16px 4px rgba(215,255,100,.6);
  animation: scan 1.1s var(--ease-in-out) infinite alternate; }
.cmp.done .cmp-scan { display: none; }
@keyframes scan { to { transform: translateY(var(--h, 300px)); } }
.cmp-meter { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; color: var(--muted); font-weight: 700; font-size: 14px; }
.cmp-meter b { font-size: 30px; color: var(--text); letter-spacing: -0.03em; }
.cmp.done .cmp-meter b { color: var(--red); }
.cmp-bar i { transition: transform 60ms linear; }
.cmp.done .cmp-bar i { background: var(--red); }
.cmp-rows { margin-top: 14px; display: grid; gap: 6px; }
.cmp-row { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 13.5px; color: var(--muted); }
.cmp-row b { color: var(--text); }
.cmp-row s { text-decoration: none; color: var(--red); }
.cmp-row b.red { color: var(--red); }

/* Сцена: отчёт KlonOff */
.rep { height: 100%; background: #101014; color: var(--text); padding: 22px 30px; overflow: hidden; }
.rep-top { display: flex; align-items: center; gap: 10px; }
.rep-top h5 { margin: 0 auto 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.rep-top .btn { min-height: 42px; }
.rep-pills { display: flex; gap: 8px; margin-top: 14px; }
.rep-pills span { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); font-size: 13px; font-weight: 700; }
.rep-pills span.on { background: var(--text); color: var(--ink); }
.rep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.rep-stats div { padding: 12px 14px; border-radius: 14px; background: #19191E; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.rep-stats b { display: block; font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.rep-stats .red b { color: var(--red); } .rep-stats .lime b { color: var(--lime); }
.rep-prod { margin-top: 14px; border-radius: 16px; background: #19191E; border: 1px solid var(--line); overflow: hidden; }
.rep-own { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px; align-items: center; }
.rep-own .pic { width: 70px; height: 93px; border-radius: 10px; overflow: hidden; }
.rep-own small { color: var(--lime); font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.rep-own b { display: block; font-size: 17px; font-weight: 800; }
.rep-own span { color: var(--muted); font-size: 13px; }
.rep-own em { font-style: normal; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,77,94,.15); color: var(--red); font-weight: 800; font-size: 12px; }
.rep-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 14px 12px 22px; border-top: 1px solid var(--line); position: relative;
  opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.rep-row::before { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--red); }
.rep-row.in { opacity: 1; transform: none; }
.pair { display: flex; align-items: center; gap: 8px; }
.pair .pic { width: 60px; height: 80px; border-radius: 9px; overflow: hidden; }
.pair .pic.their { box-shadow: 0 0 0 2px var(--red); }
.pair i { color: var(--muted); font-style: normal; }
.rep-chips { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.chip { padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 11.5px; }
.chip-red { background: var(--red); color: #fff; } .chip-ok { background: rgba(61,220,132,.16); color: var(--green); }
.rep-row b { font-weight: 700; }
.rep-row .meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.rep-row .meta s { text-decoration: none; color: var(--red); font-weight: 800; }
.rep-row .why { margin-top: 4px; font-size: 13px; color: #D7D7DE; }
.rep-row .why2 { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; display: none; }
.rep-row.open .why2 { display: block; animation: pop-in 300ms var(--ease-out) both; }
.rep-acts { display: flex; gap: 6px; margin-top: 8px; }
.rep-acts span { padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: #D7D7DE; }
.rep-acts span.on { border-color: var(--lime); color: var(--lime); }

/* Сцена: чат поддержки */
.oc { display: grid; grid-template-columns: 260px 1fr; height: 100%; background: #F2F3F5; position: relative; }
.oc-side { background: #fff; border-right: 1px solid #E6E8EB; padding: 18px 12px; }
.oc-side h6 { margin: 0 0 12px 8px; font-size: 20px; font-weight: 800; }
.oc-item { padding: 10px 12px; border-radius: 12px; font-size: 13px; color: #70757F; }
.oc-item b { display: block; color: #1F2329; font-size: 14px; }
.oc-item.on { background: #EEF4FF; }
.oc-main { display: flex; flex-direction: column; min-width: 0; }
.oc-head { height: 56px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 20px; font-weight: 800; font-size: 15px; border-bottom: 1px solid #E6E8EB; }
.oc-head small { color: #70757F; font-weight: 600; font-size: 12.5px; }
.oc-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px 28px 28px 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 80px); mask-image: linear-gradient(transparent, #000 80px); }
.oc-row { display: flex; gap: 10px; align-items: flex-end; animation: pop-in 320ms var(--ease-out) both; flex: none; }
.oc-row.out { justify-content: flex-end; }
.oc-bot { width: 30px; height: 30px; border-radius: 50%; background: #005BFF; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.oc-msg { max-width: 470px; padding: 10px 14px; border-radius: 16px; background: #fff; font-size: 14px; line-height: 1.4; color: #1F2329; border-bottom-left-radius: 5px; }
.oc-row.out .oc-msg { background: #005BFF; color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; font-weight: 600; }
.oc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 40px; animation: pop-in 320ms var(--ease-out) both; flex: none; }
.oc-chips span { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #005BFF; color: #005BFF; font-size: 13px; font-weight: 700; transition: background-color 200ms ease, color 200ms ease; }
.oc-chips span.hit { background: #005BFF; color: #fff; }
.oc-file { display: flex; align-items: center; gap: 10px; }
.oc-file i { width: 34px; height: 40px; border-radius: 6px; background: #fff; color: #005BFF; font: 800 10px/40px var(--font); text-align: center; font-style: normal; flex: none; }
.oc-file small { display: block; opacity: .75; font-weight: 500; font-size: 12px; }
.oc-msg .hid { color: #10A060; font-weight: 800; }
.oc-input { height: 52px; margin: 0 28px 18px; border-radius: 14px; background: #fff; display: flex; align-items: center; padding: 0 16px; color: #A0A4AB; font-size: 14px; }
.oc .kp { left: auto; right: 18px; bottom: 84px; }

.win2 { position: absolute; z-index: 20; left: 70px; top: 120px; width: 600px; height: 400px; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 50px 100px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.1); animation: win-in 800ms var(--ease-out) both; }
@keyframes win-in { from { opacity: 0; transform: translate(-40px, 60px) scale(.94); } }
.win2-bar { height: 36px; background: #E9EAED; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: #3C4043; }
.win2-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.win2-bar i:nth-child(2) { background: #FEBC2E; } .win2-bar i:nth-child(3) { background: #28C840; margin-right: 8px; }
.sheet { display: grid; grid-template-columns: 40px repeat(5, 1fr); font-size: 12px; }
.sheet span { height: 30px; border-right: 1px solid #ECEDEF; border-bottom: 1px solid #ECEDEF; padding: 0 8px; display: flex; align-items: center; color: #3C4043; white-space: nowrap; overflow: hidden; }
.sheet span.h { background: #F6F7F8; font-weight: 700; color: #70757F; }
.sheet span.sel { box-shadow: inset 0 0 0 2px #1A73E8; }
.win2-tag { position: absolute; z-index: 21; left: 90px; top: 92px; padding: 8px 14px; border-radius: 999px; background: var(--lime); color: var(--ink);
  font-size: 13.5px; font-weight: 800; animation: pop-in 400ms var(--ease-out) 500ms both; }

/* Светлая секция: безопасность */
.safe { background: var(--paper); color: var(--ink); padding: var(--section) 0; border-radius: 40px 40px 0 0; position: relative; z-index: 3; }
.safe-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.safe h2 { position: sticky; top: 120px; }
.safe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.safe-list li { position: relative; padding: 26px 28px 26px 96px; border-radius: 24px; background: #fff; color: var(--ink-muted); font-size: 16.5px; line-height: 1.5;
  box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.safe-list li b { display: block; color: var(--ink); font-size: 20px; letter-spacing: -0.02em; margin-bottom: 4px; }
.safe-list li::before { content: ""; position: absolute; left: 26px; top: 26px; width: 48px; height: 48px; border-radius: 15px; background: var(--ink); }
.safe-list li::after { content: ""; position: absolute; left: 38px; top: 38px; width: 24px; height: 24px; background: var(--lime);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.safe-list li:nth-child(1) { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18v14H3zM3 9h18" fill="none" stroke="black" stroke-width="2.2"/></svg>'); }
.safe-list li:nth-child(2) { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="11" rx="2.5" fill="none" stroke="black" stroke-width="2.2"/><path d="M8 10V7a4 4 0 0 1 8 0v3" fill="none" stroke="black" stroke-width="2.2"/></svg>'); }
.safe-list li:nth-child(3) { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5L19.5 7" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.safe-list li:nth-child(4) { --ic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"/></svg>'); }
@media (max-width: 900px) { .safe-in { grid-template-columns: 1fr; } .safe h2 { position: static; } .safe-list li { padding: 22px 20px 22px 84px; } .safe-list li::before { left: 20px; top: 22px; } .safe-list li::after { left: 32px; top: 34px; } }

/* Тарифы */
.price { background: var(--paper); color: var(--ink); padding: 0 0 var(--section); position: relative; z-index: 3; }
.plans { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { padding: 30px; border-radius: 28px; background: #fff; display: flex; flex-direction: column; }
.plan-big { font-size: clamp(48px, 6vw, 80px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-bottom: 26px; }
.plan h3 { font-size: 21px; }
.plan p:not(.plan-big) { margin-top: 8px; color: var(--ink-muted); font-size: 16px; }
.plan-trial { background: var(--ink); color: var(--text); position: relative; overflow: hidden; }
.plan-trial .plan-big { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-trial p:not(.plan-big) { color: var(--muted); }
.plan-trial::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 56px; background: var(--holo); opacity: .2; filter: blur(20px); transform: rotate(-14deg); }
.plan-btn { margin-top: auto; align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15.5px; position: relative; z-index: 1; }
.plan-trial p:last-of-type { margin-bottom: 22px; }
[data-todo] { color: #9AA0A6; }
.price .fine { margin-top: 18px; color: var(--ink-muted); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* Вопросы */
.faq { background: var(--paper); color: var(--ink); padding: 0 0 var(--section); position: relative; z-index: 3; border-radius: 0 0 40px 40px; }
.faq-in { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); }
.qa { display: grid; gap: 10px; }
.qa details { border-radius: 20px; background: #fff; padding: 0 26px; transition: background-color 300ms ease, box-shadow 300ms ease; }
.qa details[open] { box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) { .qa details:not([open]):hover { box-shadow: 0 0 0 2px rgba(11,11,13,.12); } }
.qa-a { overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0;
  font-size: 18.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background:
  linear-gradient(var(--ink), var(--ink)) center / 13px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 13px no-repeat, var(--paper);
  transition: transform 300ms var(--ease-out), background-color 200ms ease; }
.qa details[open] summary::after { transform: rotate(135deg); background-color: var(--lime); }
.qa summary::after { transition: transform 450ms var(--ease-out), background-color 250ms ease; }
.qa-a p { padding: 0 50px 24px 0; color: var(--ink-muted); }
@media (max-width: 900px) { .faq-in { grid-template-columns: 1fr; } }

/* Финал */
.final { padding: var(--section) 0; position: relative; overflow: clip; }
.final::before { content: ""; position: absolute; width: 1000px; height: 600px; left: 50%; top: 40%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168,128,255,.25), transparent); }
.final .wrap { position: relative; }
.final-title { font-size: clamp(44px, 8.4vw, 132px); line-height: .95; letter-spacing: -0.05em; max-width: 12ch; }
.final-title .w:nth-child(n+3) > span { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final-row { margin-top: 48px; display: grid; grid-template-columns: minmax(0, .8fr) auto; gap: 32px; align-items: end; }
.final-row p { color: #C9C9D1; max-width: 30em; }
.final-row p a { color: var(--lime); }
.final-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 900px) { .final-row { grid-template-columns: 1fr; } }

/* Подвал */
.foot { padding: 56px 0 72px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; }
.foot p + p { margin-top: 6px; }
.foot b { color: var(--text); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-note { grid-column: 1 / -1; }
@media (max-width: 700px) { .foot-in { grid-template-columns: 1fr; } }

/* Плашка cookies */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 20px; border-radius: 18px;
  background: #1C1C21; color: #D7D7DE; font-size: 14.5px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6), 0 0 0 1px var(--line);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
@starting-style { .cookie { opacity: 0; transform: translateY(16px); } }
.cookie a { color: var(--lime); }
.cookie .btn { flex: none; }

/* Крючок после тура */
.hook { position: relative; padding: clamp(80px, 10vw, 140px) 0; overflow: clip; }
.hook::before { content: ""; position: absolute; inset: 10% -10% auto auto; width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(215,255,100,.14), transparent); pointer-events: none; }
.hook-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 64px; align-items: end; }
.hook-q { font-size: clamp(48px, 8vw, 120px); line-height: .95; font-weight: 800; letter-spacing: -0.05em; }
.hook-q .w:last-child > span, .hook-q .w:nth-last-child(2) > span { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hook-side p { color: #C9C9D1; margin-bottom: 26px; max-width: 26em; }
@media (max-width: 900px) { .hook-in { grid-template-columns: 1fr; } }

/* Плавающая кнопка */
.float-cta { position: fixed; z-index: 55; left: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none; white-space: nowrap;
  font: 800 15.5px/1 var(--font); box-shadow: 0 20px 50px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.3) inset, 0 0 40px -10px rgba(215,255,100,.6);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 500ms var(--ease-out), opacity 300ms ease; }
.float-cta.on { transform: translate(-50%, 0); opacity: 1; }
.float-cta:active { transform: translate(-50%, 0) scale(.97); }
.float-cta .chrome { width: 34px; height: 34px; padding: 3px; border-radius: 50%; background: var(--ink); }
.float-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 420px) { .float-cta { font-size: 14px; padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { .float-dot { animation: none; } }

/* Призыв в конце демо */
.demo-cta { position: absolute; z-index: 25; left: 50%; top: 50%; width: 520px; margin: -130px 0 0 -260px; padding: 34px; border-radius: 26px; text-align: center;
  background: rgba(11,11,13,.92); color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); animation: pop-in 500ms var(--ease-out) both; }
.demo-cta b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.demo-cta p { color: var(--muted); margin: 10px 0 22px; font-size: 16px; }
.demo-cta .btn-chrome { font-size: 18px; }

/* Документы: оферта, политика, реквизиты */
.doc-page { background: var(--paper); color: var(--ink); }
.doc-top { background: var(--bg); color: var(--text); }
.doc-top .top-in { height: 72px; }
.doc-back { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; margin-left: auto; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .doc-back:hover { color: var(--text); } }
.doc { max-width: 820px; margin: 0 auto; padding: 72px var(--gutter) 120px; }
.doc-meta { color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.doc h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.045em; margin: 10px 0 18px; }
.doc .doc-lead { font-size: 18px; color: var(--ink-muted); }
.doc h2 { font-size: 22px; letter-spacing: -0.02em; margin: 44px 0 12px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: #2A2C35; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 22px; margin: 8px 0; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--ink); text-decoration-color: var(--lime-deep); text-decoration-thickness: 2px; }
.doc-card { margin-top: 28px; padding: 26px 28px; border-radius: 24px; background: #fff; }
.doc-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 12px 24px; }
.doc-card dt { color: var(--ink-muted); font-weight: 600; font-size: 15px; }
.doc-card dd { margin: 0; font-weight: 700; font-size: 16px; }
@media (max-width: 600px) { .doc-card dl { grid-template-columns: 1fr; gap: 2px; } .doc-card dd { margin-bottom: 12px; } }
.doc-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid #DDE0E6; color: var(--ink-muted); font-size: 14px; }