/* EV Navia — lending. Bazovye tokeny i obshchie elementy.
   Struktura vzyata iz nashego proekta dvbsolution: otdelnyy fayl na sekciyu,
   chtoby pravit odno mesto ne zadevaya ostalnoe. */

:root {
  --l-bg: #071316;
  --l-bg2: #0e2126;
  --l-bg3: #132e33;
  --l-line: #1e4249;
  --l-text: #e6f4f1;
  --l-dim: #9dbdba;
  --l-mute: #638a88;
  --l-teal: #14b8a6;
  --l-teal2: #2dd4bf;
  --l-teal3: #5eead4;
  --l-amber: #fbbf24;
  --l-blue: #38bdf8;
  --l-green: #34d399;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body.landing {
  background: var(--l-bg);
  color: var(--l-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(1160px, 92vw); margin: 0 auto; }

/* --- Knopki --- */
.btn-main, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 12px; font-weight: 600; font-size: 15px;
  padding: 13px 26px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; transition: transform .15s, background .15s, border-color .15s;
}
.btn-main { background: var(--l-teal); color: #04222a; }
.btn-main:hover { background: var(--l-teal2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--l-line); color: var(--l-text); }
.btn-ghost:hover { border-color: var(--l-teal); color: var(--l-teal3); }

/* --- Beydzhi: fon 12%, ramka 25%, yarkiy tekst (shablon iz dvbsolution) --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.badge-teal  { background: rgba(20,184,166,.12);  border: 1px solid rgba(20,184,166,.25);  color: var(--l-teal2); }
.badge-green { background: rgba(52,211,153,.12);  border: 1px solid rgba(52,211,153,.25);  color: var(--l-green); }
.badge-amber { background: rgba(251,191,36,.12);  border: 1px solid rgba(251,191,36,.25);  color: var(--l-amber); }
.badge-blue  { background: rgba(56,189,248,.12);  border: 1px solid rgba(56,189,248,.25);  color: var(--l-blue); }

/* --- Sekcii --- */
section.band { padding: 86px 0; border-top: 1px solid var(--l-line); position: relative; }
.band-head { max-width: 62ch; margin-bottom: 44px; }
.band h2 { margin: 12px 0 12px; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.025em; line-height: 1.15; }
.band .sub { margin: 0; color: var(--l-dim); font-size: 16px; }

/* --- Poyavlenie pri prokrutke ---
 *
 * Skryvaem tolko esli skripty rabotayut — inache tekst ostalsya by nevidimym.
 *
 * VNIMANIE k selektoram: pokazyvayushchee pravilo dolzhno byt' NE SLABEE
 * skryvayushchego. `html.js .reveal` — eto element + dva klassa, a prostoe
 * `.reveal.is-visible` — vsego dva klassa, i ono proigryvaet. Iz-za etogo
 * vsya stranica nizhe pervogo ekrana ostavalas' nevidimoy: klass `is-visible`
 * stavilsya, a prozrachnost ostavalas nulevoy. Poetomu zdes' `html.js` tozhe.
 */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Человек попросил меньше движения — показываем сразу, без появления. */
  html.js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}