/* NODA — лендинг. Состояния, которые в дизайн-эталоне были шаблонными подстановками,
   здесь выражены классами. Статические стили остались инлайновыми, как в эталоне. */

@import url('fonts.css');

html, body { margin: 0; }
body { background: #0B0B0C; }
a { color: #5B8CFF; text-decoration: none; }
a:hover { color: #5B8CFF; text-decoration: underline; }
button { font: inherit; cursor: pointer; }

@keyframes aFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes qDrift {
  0%, 100% { transform: translate(0, 0) rotate(var(--r)); opacity: var(--o); }
  50% { transform: translate(var(--dx), var(--dy)) rotate(var(--r2)); opacity: calc(var(--o) * 2.2); }
}

/* ---------- кнопки и ссылки ---------- */
.btn-primary { transition: background .2s; }
.btn-primary:hover { background: #5B8CFF; color: #0B0B0C; text-decoration: none; }
.btn-secondary { transition: border-color .2s; }
.btn-secondary:hover { border-color: #8E8E93; }
.link-muted { transition: color .2s; }
.link-muted:hover { color: #F2F2F0; }
.link-plain:hover { text-decoration: none; }
.icon-btn:hover { color: #F2F2F0; }

/* ---------- шапка ---------- */
.burger { display: none; }
@media (max-width: 639.98px) {
  .hdr-sub { display: none; }
  .burger { display: flex; }
}

/* ---------- работы: табы, панели кейсов, подпись ---------- */
.tab { color: #8E8E93; border-bottom: 1px solid transparent; transition: color .2s; }
.tab:hover { color: #F2F2F0; }
.tab.is-on { color: #5B8CFF; border-bottom-color: #5B8CFF; }

.case { opacity: 0; pointer-events: none; }
.case.is-on { opacity: 1; pointer-events: auto; }

.case-meta { display: none; }
.case-meta.is-on { display: flex; }

/* ---------- четыре слоя ---------- */
.layers-stack { position: sticky; top: var(--l-top, 64px); }
.layers-stack.is-flow { position: relative; top: auto; }

.plane { border-color: #3A3A3F; background: rgba(22, 22, 24, .75); color: #F2F2F0; }
.plane.is-on { border-color: #5B8CFF; background: rgba(91, 140, 255, .18); }
.layers-stack.has-active .plane { color: #8E8E93; }
.layers-stack.has-active .plane.is-on { color: #F2F2F0; }

.layer { color: #F2F2F0; }
.layers-texts.has-active .layer { color: #8E8E93; }
.layers-texts.has-active .layer.is-on { color: #F2F2F0; }
.layer-num { color: #8E8E93; }
.layer.is-on .layer-num { color: #5B8CFF; }

/* ---------- этапы ---------- */
.stages-wide { display: none; }
.stages-narrow { display: none; }
.stages.is-wide .stages-wide { display: flex; flex-direction: column; gap: clamp(40px, 4cqw, 64px); }
.stages.is-wide .h2-narrow { display: none; }
.stages.is-narrow .stages-narrow { display: flex; flex-direction: column; gap: 18px; max-width: 520px; padding-bottom: 10px; }

.key {
  opacity: 0;
  transform: translateY(-48px) scale(.96);
  box-shadow: none;
  color: #8E8E93;
  transition-delay: var(--d1);
}
.stages.is-in .key {
  opacity: 1;
  transform: none;
  color: #F2F2F0;
  box-shadow: 0 8px 0 rgba(44, 76, 166, .28), 0 26px 40px -16px rgba(91, 140, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.stages.is-in .key.is-hot {
  transform: translateY(-8px);
  box-shadow: 0 14px 0 rgba(44, 76, 166, .45), 0 36px 48px -14px rgba(91, 140, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
  z-index: 5;
}
.stages.is-done .key { transition-delay: 0s; }

.key-lit { opacity: 0; transition-delay: var(--d2); }
.stages.is-in .key-lit { opacity: .2; }
.stages.is-in .key.is-hot .key-lit { opacity: .5; }
.stages.is-done .key-lit { transition-delay: 0s; }

.key-body { transition-delay: var(--d2); }
.stages.is-done .key-body { transition-delay: 0s; }

.key-ic { color: #8FB0FF; transform: none; }
.key.is-hot .key-ic { color: #FFFFFF; transform: translateY(-4px) scale(1.08); }

.key-panel { opacity: 0; transform: translateY(10px); pointer-events: none; z-index: 1; }
.key-panel.is-on { opacity: 1; transform: none; pointer-events: auto; z-index: 5; }

.key-text { display: none; }
.key.is-hot .key-text { display: block; }

/* ---------- без предоплаты ---------- */
.pay-bar { width: 0%; transition-duration: 0s; }
.pay.is-in .pay-bar { width: 100%; transition-duration: 4s; }

.pay-step .dot { background: #0B0B0C; border: 2px solid #3A3A3F; transition-delay: var(--d); }
.pay-step .cap { color: #8E8E93; transition-delay: var(--d); }
.pay.is-in .pay-step:not(.is-last) .dot { background: #F2F2F0; border-color: #F2F2F0; }
.pay.is-in .pay-step:not(.is-last) .cap { color: #F2F2F0; }
.pay.is-done .pay-step.is-last .dot { background: #5B8CFF; border-color: #5B8CFF; }
.pay.is-done .pay-step.is-last .cap { color: #5B8CFF; }

.pay-zero { opacity: 1; transform: none; }
.pay-full { opacity: 0; transform: translateY(14px); }
.pay.is-done .pay-zero { opacity: 0; transform: translateY(-14px); }
.pay.is-done .pay-full { opacity: 1; transform: none; }

.pay-note { display: none; }
.pay.is-in .pay-note-run { display: block; }
.pay.is-done .pay-note-run { display: none; }
.pay.is-done .pay-note-done { display: block; }

/* ---------- вопросы ---------- */
.faq-a { display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-plus { transition: transform .5s; transform: none; }
.faq-item.is-open .faq-plus { transform: rotate(45deg); }

/* ---------- окна ---------- */
.ov { display: none; }
.ov.is-on { display: flex; }
.menu-link:hover { color: #5B8CFF; text-decoration: none; }
.field:focus { border-color: #5B8CFF; }
.field-err { display: none; }
.field-err.is-on { display: block; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}