/* ==========================================================================
   Дизайн-система «Обменки»
   ==========================================================================
   Продукт про чужие деньги, поэтому визуальный язык решает конкретную
   задачу: выглядеть так, чтобы человеку было не страшно перевести
   незнакомцу пятьдесят тысяч рублей. Отсюда решения:

   * глубокий тёмный фон и сдержанный акцент — финансовые интерфейсы
     смотрят подолгу, и кричащая палитра утомляет за первые минуты;
   * крупная типографика с плотным трекингом — суммы и курсы должны
     читаться мгновенно, а не разбираться;
   * анимации короткие и объясняющие, а не украшающие. Всё, что дольше
     400 мс, воспринимается как задержка интерфейса, а не как красота.
   ========================================================================== */

:root {
  /* --- Основа. Не чистый чёрный: на нём рвутся градиенты --- */
  --bg: #07080c;
  --bg-soft: #0a0c12;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .09);
  --border: rgba(255, 255, 255, .09);
  --border-soft: rgba(255, 255, 255, .05);

  /* --- Текст --- */
  --text: #f2f4f8;
  --text-dim: #a9b1c4;
  --muted: #6f7891;

  /* --- Акцент: один градиент на весь продукт, индиго в циан --- */
  --accent: #7c85ff;
  --accent-hot: #9aa2ff;
  --accent-deep: #5158e0;
  --accent-soft: rgba(99, 102, 241, .14);
  --accent-glow: rgba(99, 102, 241, .38);

  --green: #10b981;
  --green-soft: rgba(16, 185, 129, .13);
  --red: #f43f5e;
  --red-soft: rgba(244, 63, 94, .13);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, .13);
  --violet: #22d3ee;

  --grad-accent: linear-gradient(100deg, #6366f1 0%, #22d3ee 100%);
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);

  /* --- Гарнитуры с разными ролями ---
     Заголовки — техничная с характером, текст — нейтральная, числа —
     моноширинная с табличными цифрами: курс сравнивают взглядом по
     столбцу, и прыгающая ширина знаков этому мешает. */
  --font-display: "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Геометрия --- */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* --- Тени. Тень = высота элемента, а не украшение --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .6);
  --shadow-accent: 0 10px 34px rgba(99, 102, 241, .34);

  /* --- Движение --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: .16s;
  --normal: .28s;
  --slow: .5s;
}

/* Пальцем в кнопку высотой 34px не попасть: минимум для касания — 44px.
   Правило действует на всех устройствах с касанием, а не только на узких
   экранах: планшет тоже трогают пальцем. */
@media (pointer: coarse) {
  .b, .b-sm, .b-quiet, .nav-toggle, .calc-modes button,
  .btn, .btn-small, .copy-btn, .attach-btn, .rating-option span {
    min-height: 44px;
  }
  .nav a { padding-top: 12px; padding-bottom: 12px; }
}

/* Человеку, которому анимации мешают, их быть не должно: это не
   украшение, от которого можно отказаться, а требование доступности. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Полоса стенда. Сплошная заливка во всю ширину перетягивала на себя первый
   взгляд, а самое важное на странице — курс, а не напоминание. Поэтому
   тонированная подложка и своя типографика, а не заливка. Правило общее для
   всех трёх оболочек: раньше оно было скопировано в каждую, и правка в
   одной оставляла две другие прежними. */
.testnet-strip {
  background: var(--amber-soft);
  border-bottom: 1px solid rgba(245, 158, 11, .25);
  color: var(--amber);
  text-align: center;
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px;
}

/* ==========================================================================
   Типографика
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-size: clamp(33px, 5.8vw, 66px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0;
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.028em;
  font-weight: 700;
  margin: 0;
}

.subhead {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--text-dim);
  font-weight: 400;
}

.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Цифры в финансовом интерфейсе выравниваются по разрядам: прыгающая
   ширина знаков мешает сравнивать суммы взглядом. */
.tnum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* ==========================================================================
   Поверхности
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}

.panel-glow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}

/* Тонкая световая линия по верхней грани: имитация подсветки сверху,
   от которой поверхность кажется физической. */
.panel-glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}

.glass {
  background: rgba(18, 20, 28, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .07);
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.b {
  /* border-box: у .b-wide ширина 100% иначе складывается с боковыми
     отступами, и кнопка вылезает за край карточки. */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), box-shadow var(--normal) var(--ease),
              background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.b:active { transform: translateY(1px); }

.b-primary {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.b-primary:hover { box-shadow: 0 16px 48px var(--accent-glow); transform: translateY(-1px); }

.b-ghost {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.b-ghost:hover { border-color: var(--accent); background: var(--surface-3); }

.b-quiet {
  background: transparent;
  color: var(--text-dim);
  padding: 10px 14px;
}
.b-quiet:hover { color: var(--text); }

.b-lg { padding: 16px 30px; font-size: 16px; }
.b-sm { padding: 9px 15px; font-size: 13.5px; }
.b-wide { width: 100%; }

/* ==========================================================================
   Появление при прокрутке
   ==========================================================================
   Класс навешивается разметкой, снимается наблюдателем. Если JS не
   отработал, содержимое обязано остаться видимым — поэтому «спрятанное»
   состояние включается только при наличии класса на <html>.
   ========================================================================== */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
}
.js-anim .reveal.shown { opacity: 1; transform: none; }

.js-anim .reveal-d1 { transition-delay: .07s; }
.js-anim .reveal-d2 { transition-delay: .14s; }
.js-anim .reveal-d3 { transition-delay: .21s; }
.js-anim .reveal-d4 { transition-delay: .28s; }

/* ==========================================================================
   Иконки
   ========================================================================== */

.ic {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-lg { width: 26px; height: 26px; }
.ic-xl { width: 34px; height: 34px; }

.ic-box {
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(76, 125, 240, .22);
}
.ic-box-green { background: var(--green-soft); color: var(--green); border-color: rgba(47, 208, 138, .22); }
.ic-box-amber { background: var(--amber-soft); color: var(--amber); border-color: rgba(240, 178, 58, .22); }
.ic-box-violet { background: rgba(139, 107, 240, .12); color: var(--violet); border-color: rgba(139, 107, 240, .22); }

/* ==========================================================================
   Сетка
   ========================================================================== */

/* border-box обязателен: без него ширина 100% складывается с боковыми
   отступами, и на узком экране страница уезжает вправо на 44px. */
.wrap { box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 880px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .wrap { padding: 0 16px; }
}