/* ==========================================================================
   HeadRocket — revisions.css
   Правки Германа (10 пунктов): новые интерактивные и визуальные стили.
   ========================================================================== */

/* ==========================================================================
   1. ХЕДЕР & ГЛАВНЫЙ ЭКРАН
   ========================================================================== */

/* Логотип-иконка ракеты в навигации (вместо текста «Главная») */
.nav__link--home { width: 30px; padding: 4px 0; justify-content: center; }
.nav__link--home .icon { width: 17px; height: 17px; fill: none; stroke: none; }
.nav__link--home[aria-current="page"] { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); }
.nav__link--home:hover .icon { transform: translateY(-1px); }
.nav__link--home .icon { transition: transform var(--duration-fast) var(--ease-out); }

/* Плоский современный стиль кнопок действий */
.btn--primary { box-shadow: none; }
.btn--flat { box-shadow: none; border-color: transparent; background: var(--accent); color: var(--accent-fg); }
.btn--flat:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn--flat:active { transform: translateY(0) scale(.98); }

/* Интерактивная canvas-сетка фона Hero */
.hero > .hero__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero > .hero__fade { z-index: 1; }
.hero > .hero__inner, .hero > .hero__chart { z-index: 2; }

/* ==========================================================================
   2. ГРАФИК КОНВЕРСИИ & ЛОГОТИПЫ
   ========================================================================== */

/* Pulse Wave — пульсирующие концентрические волны в узловых точках графика */
.node-core { fill: #fff; }
.node-wave { fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulsewave 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.node-wave--2 { animation-delay: 1.4s; }
@keyframes pulsewave {
  0% { transform: scale(1); opacity: .9; }
  80%, 100% { transform: scale(4.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .node-wave { animation: none; opacity: 0; } }

/* Stack Visual — карточка отзыва как стопка + индикатор n/N */
.quote-stack { position: relative; }
.quote-stack::before,
.quote-stack::after { content: ""; position: absolute; left: 50%; translate: -50% 0; border-radius: var(--radius-md); background: rgba(232,226,212,.55); box-shadow: var(--shadow-card); z-index: 0; pointer-events: none; }
.quote-stack::before { bottom: -9px; width: calc(100% - 28px); height: 22px; }
.quote-stack::after { bottom: -17px; width: calc(100% - 56px); height: 22px; opacity: .55; }
.quote-stack .quote { position: relative; z-index: 1; }
.stack-counter { position: absolute; top: -13px; right: clamp(10px, 6vw, 84px); z-index: 2; display: inline-flex; align-items: baseline; gap: 3px; padding: 5px 10px; border-radius: var(--radius-pill); background: #0a0a0a; color: #fff; font: 400 11px/1 var(--font-mono); letter-spacing: .04em; box-shadow: var(--shadow-float); }
.stack-counter b { font: 500 13px/1 var(--font-mono); }
.stack-counter .of { color: rgba(255,255,255,.55); }

/* Бегущая строка — чистые монохромные SVG-логотипы компаний */
.marquee__track { align-items: center; }
.logo-item { display: inline-flex; align-items: center; color: var(--text-secondary); transition: color var(--duration-fast); }
.logo-item:hover { color: var(--text-primary); }
.logo-item svg { display: block; height: 22px; width: auto; }
.logo-item text { fill: currentColor; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.logo-item .lg-cut { fill: var(--bg); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; }

/* ==========================================================================
   3. БЛОК СТАТИСТИКИ БОЛИ — Mouse Spotlight
   ========================================================================== */

[data-spotlight] { position: relative; overflow: hidden; }
[data-spotlight]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--duration-base); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(61,220,132,.14)), transparent 65%); }
[data-spotlight]:hover::after { opacity: 1; }
:root, [data-theme="light"] { --spot: rgba(77,102,98,.12); }
[data-theme="dark"], [data-theme="black"] { --spot: rgba(61,220,132,.13); }
.metric > * { position: relative; z-index: 1; }

/* ==========================================================================
   4. БЛОК 4 ШАГОВ — интерактивный аккордеон + анимированный SVG-арт
   ========================================================================== */

.step-item__btn { cursor: pointer; }
.step-item__btn .step-item__chev { margin-left: auto; flex: none; color: var(--text-tertiary); transition: transform var(--duration-base) var(--ease-out); align-self: center; }
.step-item__btn[aria-expanded="true"] { color: var(--text-primary); }
.step-item__btn[aria-expanded="true"] .mono-num { color: var(--live); }
.step-item__btn[aria-expanded="true"] .step-item__chev { transform: rotate(180deg); color: var(--text-primary); }
.step-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); }
.step-item__panel.is-open { grid-template-rows: 1fr; }
.step-item__panel > div { overflow: hidden; min-height: 0; }
.step-item__body { padding: 0 0 18px 28px; color: var(--text-secondary); font-size: 13px; max-width: 34em; }
.step-item__body p { margin: 0 0 8px; }
.step-item__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 16px 28px; }
.step-item.is-active .step-item__btn { color: var(--text-primary); }
.step-visuals { position: relative; }
@media (min-width: 1024px) {
  .steps-x { grid-template-columns: minmax(0,5fr) minmax(0,7fr); align-items: start; gap: 48px; }
  .step-visuals { position: sticky; top: calc(var(--header-h) + 24px); }
}
.step-visuals .visual[hidden] { display: none; }

/* Анимированный SVG-арт внутри .visual */
.step-art { width: 100%; height: 100%; }
.step-art .sa-line { fill: none; stroke: var(--line-art); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.step-art .sa-dim { stroke: var(--line-dim); }
.step-art .sa-fill { fill: var(--line-art); }
.step-art .sa-live { stroke: var(--live); }
.step-art .sa-dot { fill: var(--live); }
.step-art .sa-label { font: 400 8.5px var(--font-mono); fill: var(--text-tertiary); text-transform: uppercase; }
.step-art .sa-mut { fill: var(--text-tertiary); }

/* шаг 01 — радар стратегии */
.sa-sweep { transform-origin: 150px 92px; animation: sa-spin 5s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-blip { animation: sa-blink 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sa-blip--2 { animation-delay: .9s; }
.sa-blip--3 { animation-delay: 1.7s; }
@keyframes sa-blink { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* шаг 02 — упаковка резюме */
.sa-write { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sa-write 3.4s var(--ease-standard) infinite; }
.sa-write--d2 { animation-delay: .5s; }
.sa-write--d3 { animation-delay: 1s; }
.sa-write--d4 { animation-delay: 1.5s; }
@keyframes sa-write { 0% { stroke-dashoffset: 100; } 55%,100% { stroke-dashoffset: 0; } }
.sa-stamp { transform-box: fill-box; transform-origin: center; animation: sa-stamp 3.4s ease-in-out infinite; }
@keyframes sa-stamp { 0%,58% { transform: scale(1.5) rotate(-14deg); opacity: 0; } 68% { transform: scale(.94) rotate(-8deg); opacity: 1; } 76%,100% { transform: scale(1) rotate(-8deg); opacity: 1; } }

/* шаг 03 — переписка за вас */
.sa-plane { animation: sa-plane 4.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes sa-plane {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translate(128px,-46px) rotate(-6deg); opacity: 1; }
  62%,100% { transform: translate(148px,-54px) rotate(-8deg); opacity: 0; }
}
.sa-typing i { display: inline-block; width: 3.4px; height: 3.4px; border-radius: 50%; background: var(--text-tertiary); animation: sa-type 1.2s ease-in-out infinite; }
.sa-typing i:nth-child(2) { animation-delay: .18s; }
.sa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes sa-type { 0%,100% { transform: translateY(0); opacity: .4; } 45% { transform: translateY(-3px); opacity: 1; } }
.sa-pop { animation: sa-pop 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sa-pop--d2 { animation-delay: .55s; }
@keyframes sa-pop { 0%,12% { transform: scale(.6); opacity: 0; } 24%,82% { transform: scale(1); opacity: 1; } 94%,100% { transform: scale(1); opacity: 0; } }

/* шаг 04 — оффер / взлёт */
.sa-rocketfly { animation: sa-fly 3.8s var(--ease-out) infinite; transform-box: fill-box; }
@keyframes sa-fly { 0% { transform: translateY(26px); opacity: 0; } 18% { opacity: 1; } 68%,100% { transform: translateY(-30px); opacity: 0; } }
.sa-chartline { stroke-dasharray: 240; stroke-dashoffset: 240; animation: sa-chart 3.8s ease-in-out infinite; }
@keyframes sa-chart { 0% { stroke-dashoffset: 240; } 60%,100% { stroke-dashoffset: 0; } }
.sa-star { animation: sa-star 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sa-star--d2 { animation-delay: .6s; }
.sa-star--d3 { animation-delay: 1.1s; }
@keyframes sa-star { 0%,100% { transform: scale(.4) rotate(0deg); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sa-sweep, .sa-blip, .sa-write, .sa-stamp, .sa-plane, .sa-typing i, .sa-pop, .sa-rocketfly, .sa-chartline, .sa-star { animation: none !important; }
}

/* ==========================================================================
   5. БЕНТО-ТРЕКЕР — интерактивные карточки, мультистеп флоу 1–4
   ========================================================================== */

.bento__cell { transition: border-color var(--duration-fast); }
.bento__cell[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.bento__cell .bento__art { transition: transform var(--duration-base) var(--ease-out); }
.bento__cell:hover .bento__art { transform: translateY(-4px); }

/* мультистеп флоу */
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; position: relative; width: 100%; max-width: 560px; }
.flow-steps::before { content: ""; position: absolute; top: 17px; left: 12%; right: 12%; height: 1px; background: var(--border-strong); }
.flow-steps__fill { position: absolute; top: 17px; left: 12%; height: 1px; width: 0; background: var(--live); animation: flow-fill 5.2s var(--ease-standard) infinite; }
@keyframes flow-fill { 0% { width: 0; } 70%,100% { width: 76%; } }
.flow-step { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.flow-step__dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; font: 500 11px/1 var(--font-mono); color: var(--text-secondary); animation: flow-dot 5.2s ease-in-out infinite; }
.flow-step:nth-child(3) .flow-step__dot { animation-delay: 1.3s; }
.flow-step:nth-child(4) .flow-step__dot { animation-delay: 2.6s; }
.flow-step:nth-child(5) .flow-step__dot { animation-delay: 3.9s; }
@keyframes flow-dot { 0%,18% { border-color: var(--border-strong); color: var(--text-secondary); box-shadow: none; } 30%,78% { border-color: var(--live); color: var(--live); box-shadow: 0 0 0 4px var(--success-bg); } 92%,100% { border-color: var(--border-strong); color: var(--text-secondary); } }
.flow-step__label { font: 400 10px/1.35 var(--font-mono); text-transform: uppercase; color: var(--text-tertiary); max-width: 12ch; }
@media (prefers-reduced-motion: reduce) { .flow-steps__fill, .flow-step__dot { animation: none; } }

/* ==========================================================================
   6. БЛОК ОТЗЫВОВ — печать качества / верификации
   ========================================================================== */

.verify-stamp { position: relative; width: 96px; height: 96px; flex: none; display: grid; place-items: center; color: var(--text-secondary); }
.verify-stamp__ring { position: absolute; inset: 0; animation: stamp-spin 18s linear infinite; }
@keyframes stamp-spin { to { transform: rotate(360deg); } }
.verify-stamp__ring text { font: 400 8.6px var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase; fill: var(--text-secondary); }
.verify-stamp__core { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--live); background: var(--surface); }
.verify-stamp__core .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .verify-stamp__ring { animation: none; } }

/* ==========================================================================
   7 & 9. PROMO TIMER — Digital Clock (неоновые цифровые часы)
   ========================================================================== */

.promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--rail); border-radius: var(--radius-md); background: var(--bg-soft); }
.promo__label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.promo__label .icon { color: var(--live); }
.promo__label b { color: var(--text-primary); font-weight: 500; }

.promo-timer { display: inline-flex; align-items: center; gap: 8px; }
.promo-timer__group { display: inline-flex; align-items: center; gap: 4px; }
.promo-timer__cell { position: relative; min-width: 34px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: #070707; border: 1px solid #232323; font: 500 20px/1 var(--font-mono); color: #5fe39a; text-shadow: 0 0 8px rgba(95,227,154,.8), 0 0 22px rgba(95,227,154,.35); letter-spacing: .02em; }
.promo-timer__cell::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(255,255,255,.06); }
.promo-timer__sep { font: 500 18px/1 var(--font-mono); color: var(--text-tertiary); animation: dt-blink 1s steps(1) infinite; }
@keyframes dt-blink { 50% { opacity: .2; } }
.promo-timer__cap { font: 400 8.5px/1 var(--font-mono); text-transform: uppercase; color: var(--text-tertiary); letter-spacing: .08em; }
.promo-timer__unit { display: grid; justify-items: center; gap: 4px; }
.promo-timer__note { font: 400 10px/1 var(--font-mono); text-transform: uppercase; color: var(--text-tertiary); letter-spacing: .06em; }
.promo-timer.is-done .promo-timer__cell { color: var(--danger); text-shadow: 0 0 8px rgba(255,90,82,.7); }
@media (prefers-reduced-motion: reduce) { .promo-timer__sep { animation: none; } }

/* ==========================================================================
   8. БЛОК ГАРАНТИИ — кинетический Grain + SLA-карточки + ховер кнопки
   ========================================================================== */

.guarantee { position: relative; }
.guarantee__grain { position: absolute; inset: -24px; z-index: 0; opacity: .5; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; }
[data-theme="light"] .guarantee__grain, :root .guarantee__grain { mix-blend-mode: multiply; opacity: .35; }
[data-theme="dark"] .guarantee__grain, [data-theme="black"] .guarantee__grain { mix-blend-mode: overlay; opacity: .5; }
.guarantee__body, .guarantee__list { position: relative; z-index: 1; }

.sla-cards { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 768px) { .sla-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sla-card { padding: 18px; border: 1px solid var(--rail); border-radius: var(--radius-md); background: var(--bg-soft); display: grid; gap: 8px; align-content: start; }
.sla-card .label { display: flex; align-items: center; gap: 6px; }
.sla-card .label .icon { width: 12px; height: 12px; color: var(--live); }
.sla-card b { font-size: 14.5px; font-weight: 500; }
.sla-card p { font-size: 12.5px; color: var(--text-secondary); }
.sla-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.sla-card ul li { display: flex; gap: 8px; }
.sla-card ul li::before { content: "—"; color: var(--text-tertiary); flex: none; }

/* плавная ховер-анимация «Попробовать без риска» — блик */
.btn--sheen { position: relative; overflow: hidden; }
.btn--sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .65s var(--ease-standard); pointer-events: none; }
.btn--sheen:hover::after { left: 120%; }

/* ==========================================================================
   9. ПРЕД-CTA БЛОК — таймер + магнитная кнопка
   ========================================================================== */

.cta__timer { display: grid; justify-items: center; gap: 8px; padding: 16px 22px; border: 1px solid var(--rail); border-radius: var(--radius-md); background: var(--bg-soft); }
.cta__timer .promo-timer__cell { min-width: 40px; height: 48px; font-size: 24px; }
.cta .btn--magnet { will-change: transform; transition: transform .18s ease-out, background var(--duration-fast); }
.btn--magnet { position: relative; overflow: hidden; }
.btn--magnet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); transition: left .6s var(--ease-standard); pointer-events: none; }
.btn--magnet:hover::after { left: 120%; }

/* ==========================================================================
   10. ФОРМА ЗАЯВКИ — плейсхолдер под новые услуги
   ========================================================================== */

.next-services { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 18px; display: grid; gap: 12px; background: transparent; }
.next-services__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.next-services__head .label { display: flex; align-items: center; gap: 6px; }
.next-services__head .icon { width: 12px; height: 12px; color: var(--info); }
.next-services__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.next-services__list li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-secondary); }
.next-services__list .mono-num { font-size: 10px; color: var(--text-tertiary); flex: none; }
.next-services__list b { color: var(--text-primary); font-weight: 500; }
.next-services__list .tag { margin-left: auto; flex: none; font: 400 9.5px/1 var(--font-mono); text-transform: uppercase; color: var(--info); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); padding: 3px 7px; }
.next-services__note { font-size: 11.5px; color: var(--text-tertiary); }