/* Ersultan AI — слой движения. Без JS страница остаётся полностью читаемой. */

:root { --g: #00D26A; --ease: cubic-bezier(.2, .8, .2, 1); }

/* ── полоса прогресса чтения ── */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100; background: var(--g);
  transform-origin: 0 50%; transform: scaleX(0); }

/* ── плавающее меню-«пилюля» ── */
.pill { position: fixed; z-index: 95; left: 50%; top: 14px; display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px; background: rgba(10,14,11,.62); border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transform: translate(-50%, -140%); transition: transform .5s var(--ease); font: 500 14px/1.2 'Golos Text', system-ui, sans-serif; max-width: calc(100vw - 24px); box-sizing: border-box; }
.pill.show { transform: translate(-50%, 0); }
.pill a { color: #C9CEC9; text-decoration: none; padding: 9px 14px; border-radius: 999px; white-space: nowrap; transition: background .25s, color .25s; }
.pill a:hover { color: #F2F2EE; background: rgba(255,255,255,.06); }
.pill a.on { color: #04140A; background: var(--g); }
.pill .pill-logo { display: flex; align-items: center; gap: 7px; font-weight: 800; color: #F2F2EE; padding: 4px 12px 4px 4px; }
.pill .pill-logo img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
.pill .pill-logo i { font-style: normal; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 5px; background: var(--g); color: #04140A; transform: rotate(-8deg); }
.pill .pill-cta { color: var(--g); border: 1px solid rgba(0,210,106,.5); }
.pill .pill-now { display: none; color: #F2F2EE; padding: 9px 6px; }
@media (max-width: 700px) {
  .pill .pill-link { display: none; }
  .pill .pill-now { display: inline; }
}

/* ── бегущая строка тем ── */
.ticker { border-top: 1px solid #1F2A22; border-bottom: 1px solid #1F2A22; padding: 14px 0; overflow: hidden; background: #080808;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-row { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker-row + .ticker-row { margin-top: 10px; animation-direction: reverse; animation-duration: 75s; }
.ticker-row span { font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: #8A918A; padding: 0 18px; white-space: nowrap; }
.ticker-row span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 18px; border-radius: 50%; background: var(--g); vertical-align: middle; opacity: .8; }
.ticker-row span:nth-child(3n) { color: #F2F2EE; }
.ticker:hover .ticker-row { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── первый экран: фон-нейросеть, слова заголовка, телефон ── */
.hero { position: relative; overflow: hidden; }
.hero > *:not(.hero-net) { position: relative; z-index: 1; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-phone { box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); }
.tg-feed { will-change: transform; transition: opacity .6s; }
.tg-feed.fade { opacity: 0; }
.js .hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js .hero-title .wi { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero-title.ready .wi { transform: none; }
.js .hero-copy > :not(.hero-title) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero-copy.ready > :not(.hero-title) { opacity: 1; transform: none; }
.hero-proof b { font-variant-numeric: tabular-nums; }
.hp-item, .hp-line { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hp-hide { opacity: 0 !important; transform: translateY(10px) !important; }
.hp-status { transition: color .3s; }
.hp-status.typing { color: var(--g) !important; }
.hero-scroll svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ── появление блоков при прокрутке ── */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ── подсветка карточек под курсором ── */
.spot { transition: border-color .3s, transform .3s var(--ease); }
.spot:hover { border-color: #4A564E !important; transform: translateY(-2px); }

/* ── «живой» лог, полосы воронки, наклон макетов ── */
.js .tl-hide { visibility: hidden; }
.caret { display: inline-block; width: .6em; height: 1.05em; margin-left: 4px; vertical-align: -2px; background: var(--g); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bar-grow { transition: width 1.4s var(--ease); transition-delay: var(--d, 0ms); }
.tilt { transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* ── схема конвейера ── */
.pipe { margin: 48px 0 0; padding: 18px; border: 1px solid #1F2A22; border-radius: 12px; background: #090B0A; }
.pipe-canvas { display: block; width: 100%; height: auto; }
.pipe-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; padding: 0 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8A918A; }
.pipe-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.pipe-legend .pipe-note { margin-left: auto; }
.no-js .pipe { display: none; }

/* ── уважение к настройке «уменьшить движение» ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv, .js .hero-copy > *, .js .hero-title .wi { opacity: 1 !important; transform: none !important; }
}