/* =====================================================================
   LunoPay - единая дизайн-система.
   Логика и токены взяты с base.org: белый холст, чёрный текст, один
   синий акцент, тонкие рамки, крупная сжатая типографика, пилюли-кнопки.
   Светлая тема - базовая, тёмная включается атрибутом data-theme="dark".

   Файл подключается и публичными страницами, и сборкой React-кабинета - 
   так дизайн везде один и тот же.
   ===================================================================== */

/* --------------------------------------------------------------- токены */
:root {
  /* холст и текст */
  --bg: #ffffff;
  --bg-2: #fafafa;
  --surface: #f8f8f8;
  --surface-hover: #f0f0f0;
  --fg: #111111;
  --fg-2: #5f5f5f;
  --fg-3: #3a3a3a;
  --fg-inverse: #ffffff;

  /* линии */
  --border: #eaeaea;
  --border-strong: #111111;
  --border-soft: #f2f2f2;

  /* бренд: тот же синий, что и на base.org */
  --brand: #0000ff;
  --brand-hover: #0000d6;
  --brand-soft: #eeeeff;
  --brand-ring: rgba(0, 0, 255, 0.18);

  /* статусы - приглушённые, читаемые на белом */
  --ok: #0f7a3d;
  --ok-soft: #e8f6ee;
  --warn: #8a5a00;
  --warn-soft: #fdf4e3;
  --err: #c02626;
  --err-soft: #fdecec;
  --info: #1f5fd0;
  --info-soft: #eaf1ff;

  /* форма */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* тени - почти нет: дизайн плоский, глубина за счёт рамок */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow: 0 12px 32px -20px rgba(17, 17, 17, 0.28);
  --shadow-lg: 0 32px 64px -32px rgba(17, 17, 17, 0.32);

  --nav-h: 64px;
  --container: 1248px;

  /* движение: короткие переходы по «iOS»-кривой, одинаковые на всём сайте */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.44, 1);
  --dur-1: 0.16s;
  --dur-2: 0.24s;
  --dur-3: 0.4s;

  color-scheme: light;

  /* --- те же токены в HSL: их использует сборка кабинета (Tailwind) --- */
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 240 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 97%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 97%;
  --muted-foreground: 0 0% 44%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 7%;
  --input: 0 0% 91%;
  --border-hsl: 0 0% 92%;
  --ring: 0 0% 62%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;
  --success: 150 79% 31%;
  --success-foreground: 150 60% 24%;
  --warning: 40 100% 27%;
  --warning-foreground: 40 100% 22%;
  --info-hsl: 216 74% 47%;
  --info-foreground: 216 70% 35%;
  --chart-1: 150 79% 31%;
  --chart-2: 216 74% 47%;
  --chart-3: 240 100% 50%;
  --chart-4: 268 62% 52%;
  --chart-5: 0 0% 55%;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 27%;
  --sidebar-primary: 240 100% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 97%;
  --sidebar-accent-foreground: 0 0% 7%;
  --sidebar-border: 0 0% 92%;
  --sidebar-ring: 240 100% 50%;

  /* --- шкала, которой пользуются шаблоны (bg-ink-900, text-ink-200…) --- */
  --ink-100: #111111;
  --ink-200: #3a3a3a;
  --ink-300: #6f6f6f;
  --ink-400: #8f8f8f;
  --ink-500: #c9c9c9;
  --ink-600: #eaeaea;
  --ink-700: #f0f0f0;
  --ink-750: #f5f5f5;
  --ink-800: #f8f8f8;
  --ink-850: #fbfbfb;
  --ink-900: #ffffff;
  --ink-950: #fafafa;

  /* акцентная шкала шаблонов → фирменный синий */
  --accent-100: #e8e8ff;
  --accent-200: #c7c7ff;
  --accent-300: #8080ff;
  --accent-400: #3d3dff;
  --accent-500: #0000ff;
  --accent-600: #0000d6;
  --accent-700: #0000ad;

  /* --- те же цвета в виде RGB-триплетов: Tailwind берёт их, когда нужен
         модификатор прозрачности (bg-accent-500/10) --- */
  --ink-100-rgb: 17 17 17;
  --ink-200-rgb: 58 58 58;
  --ink-300-rgb: 111 111 111;
  --ink-400-rgb: 143 143 143;
  --ink-500-rgb: 201 201 201;
  --ink-600-rgb: 234 234 234;
  --ink-700-rgb: 240 240 240;
  --ink-750-rgb: 245 245 245;
  --ink-800-rgb: 248 248 248;
  --ink-850-rgb: 251 251 251;
  --ink-900-rgb: 255 255 255;
  --ink-950-rgb: 250 250 250;
  --accent-100-rgb: 232 232 255;
  --accent-200-rgb: 199 199 255;
  --accent-300-rgb: 128 128 255;
  --accent-400-rgb: 61 61 255;
  --accent-500-rgb: 0 0 255;
  --accent-600-rgb: 0 0 214;
  --accent-700-rgb: 0 0 173;
}

[data-theme="dark"],
.dark {
  --ink-100-rgb: 255 255 255;
  --ink-200-rgb: 230 230 230;
  --ink-300-rgb: 154 154 154;
  --ink-400-rgb: 125 125 125;
  --ink-500-rgb: 92 92 92;
  --ink-600-rgb: 38 38 38;
  --ink-700-rgb: 42 42 42;
  --ink-750-rgb: 33 33 34;
  --ink-800-rgb: 30 30 31;
  --ink-850-rgb: 26 26 27;
  --ink-900-rgb: 22 22 22;
  --ink-950-rgb: 12 12 12;
  --accent-100-rgb: 217 224 255;
  --accent-200-rgb: 179 194 255;
  --accent-300-rgb: 138 163 255;
  --accent-400-rgb: 88 119 255;
  --accent-500-rgb: 34 75 255;
  --accent-600-rgb: 26 60 224;
  --accent-700-rgb: 21 48 184;

  --bg: #111111;
  --bg-2: #151515;
  --surface: rgba(38, 38, 38, 0.35);
  --surface-hover: rgba(58, 58, 58, 0.5);
  --fg: #ffffff;
  --fg-2: #a8a8a8;
  --fg-3: #b8b8b8;
  --fg-inverse: #111111;

  --border: rgba(111, 111, 111, 0.22);
  --border-strong: #ffffff;
  --border-soft: rgba(111, 111, 111, 0.12);

  --brand: #224bff;
  --brand-hover: #4a6bff;
  --brand-soft: rgba(34, 75, 255, 0.16);
  --brand-ring: rgba(34, 75, 255, 0.35);

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, 0.14);
  --info: #7aa2ff;
  --info-soft: rgba(122, 162, 255, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 72px -40px rgba(0, 0, 0, 0.95);

  color-scheme: dark;

  --background: 0 0% 7%;
  --foreground: 0 0% 100%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 100%;
  --primary: 230 100% 57%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 96%;
  --muted: 0 0% 13%;
  --muted-foreground: 0 0% 70%;
  --accent: 0 0% 16%;
  --accent-foreground: 0 0% 100%;
  --input: 0 0% 20%;
  --border-hsl: 0 0% 20%;
  --ring: 0 0% 52%;
  --destructive: 0 84% 70%;
  --success: 142 69% 58%;
  --warning: 43 96% 56%;
  --info-hsl: 220 100% 74%;
  --success-foreground: 142 69% 68%;
  --warning-foreground: 43 96% 65%;
  --info-foreground: 220 100% 82%;
  --chart-1: 142 69% 58%;
  --chart-2: 220 100% 74%;
  --chart-3: 230 100% 57%;
  --chart-4: 268 80% 74%;
  --chart-5: 0 0% 62%;
  --sidebar-background: 0 0% 8%;
  --sidebar-foreground: 0 0% 80%;
  --sidebar-primary: 230 100% 57%;
  --sidebar-accent: 0 0% 14%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 0 0% 16%;
  --sidebar-ring: 230 100% 57%;

  --ink-100: #ffffff;
  --ink-200: #e6e6e6;
  --ink-300: #9a9a9a;
  --ink-400: #7d7d7d;
  --ink-500: #5c5c5c;
  --ink-600: rgba(111, 111, 111, 0.24);
  --ink-700: rgba(111, 111, 111, 0.16);
  --ink-750: rgba(58, 58, 58, 0.42);
  --ink-800: rgba(38, 38, 38, 0.5);
  --ink-850: rgba(38, 38, 38, 0.32);
  --ink-900: #161616;
  --ink-950: #0c0c0c;

  --accent-100: #d9e0ff;
  --accent-200: #b3c2ff;
  --accent-300: #8aa3ff;
  --accent-400: #5877ff;
  --accent-500: #224bff;
  --accent-600: #1a3ce0;
  --accent-700: #1530b8;
}

/* ---------------------------------------------------------------- база */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Двойная страховка от горизонтальной прокрутки: сначала clip на самом
   корне (колонки grid не растягивают страницу), потом обрезка у секций
   со свечением и лентами. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter var", Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
}

@layer base {
  button {
    font: inherit;
    color: inherit;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--brand);
  color: #fff;
}

/* Кольцо фокуса нейтральное: синие обводки в интерфейсе не используем,
   при этом клавиатурный фокус остаётся заметным. */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--fg) 45%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-500) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--ink-500);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------- каркас */
.lp-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.lp-section {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}

.lp-section--plain {
  border-top: 0;
}

.lp-grid {
  display: grid;
  gap: 16px;
}

@media (max-width: 720px) {
  .lp-container {
    padding: 0 16px;
  }
  .lp-section {
    padding: 64px 0;
  }
}

/* ---------------------------------------------------------- типографика */
.lp-display {
  font-size: clamp(44px, 8.2vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.042em;
  font-weight: 600;
}

.lp-h2 {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.lp-h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.lp-lead {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
  color: var(--fg-2);
  letter-spacing: -0.015em;
}

.lp-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}

.lp-eyebrow {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.lp-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.lp-tnum {
  font-variant-numeric: tabular-nums;
}

.lp-muted {
  color: var(--fg-2);
}

.lp-brand-text {
  color: var(--brand);
}

/* ------------------------------------------------------------- кнопки */
.btn {
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-ios);
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn-secondary:hover {
  background: var(--fg);
  color: var(--fg-inverse);
}

.btn-soft {
  background: var(--surface);
  color: var(--fg);
}
.btn-soft:hover {
  background: var(--surface-hover);
}

.btn-ghost {
  color: var(--fg);
  padding: 0 12px;
}
.btn-ghost:hover {
  background: var(--surface);
}

.btn-danger {
  background: var(--err);
  color: #fff;
}

.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}

.btn-lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------- формы */
.label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-3);
}

.input,
.select,
textarea.input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

textarea.input {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.input::placeholder {
  color: var(--fg-2);
}

.input:focus,
.select:focus,
textarea.input:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent);
}

.hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--fg-2);
}

.field + .field {
  margin-top: 16px;
}

/* --------------------------------------------------------------- плашки */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.chip-blue {
  background: var(--info-soft);
  color: var(--info);
}
.chip-green {
  background: var(--ok-soft);
  color: var(--ok);
}
.chip-red {
  background: var(--err-soft);
  color: var(--err);
}
.chip-amber {
  background: var(--warn-soft);
  color: var(--warn);
}
.chip-neutral {
  background: var(--surface);
  color: var(--fg-3);
}
.chip-violet {
  background: var(--brand-soft);
  color: var(--brand);
}
.chip-sky {
  background: var(--info-soft);
  color: var(--info);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ------------------------------------------------------------- карточки */
.card {
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 24px;
}

.card-pad {
  padding: 24px;
}

.card-soft {
  background: var(--surface);
  border-color: transparent;
}

.card-hover {
  transition: background-color 0.18s ease;
}
.card-hover:hover {
  background: var(--surface-hover);
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* ---------------------------------------------------------------- навбар */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

/* Тонкая полоса прогресса чтения: подсказывает, сколько осталось до конца. */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.nav-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, transparent));
  transition: width 0.12s linear;
}

.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--border-soft);
  box-shadow: 0 12px 30px -26px rgba(17, 17, 17, 0.4);
}

.site-nav-in {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--nav-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  transition: height var(--dur-2) var(--ease-out);
}

.site-nav.is-scrolled .site-nav-in {
  height: 56px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.wordmark-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
  object-fit: contain;
  transition: transform var(--dur-2) var(--ease-spring);
}

.wordmark:hover .wordmark-mark {
  transform: scale(1.06) rotate(-3deg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.nav-links a {
  position: relative;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.nav-links a:hover {
  color: var(--fg);
  background: var(--surface-hover);
}

.nav-links a.is-active {
  color: var(--fg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.nav-spacer {
  flex: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-ios);
}

.theme-toggle:hover {
  background: var(--surface);
  border-color: var(--fg);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun,
.dark .theme-toggle .icon-sun {
  display: block;
}

html:not([data-theme="dark"]) .theme-toggle .icon-moon {
  display: block;
}

.nav-burger {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-ios);
}

.nav-burger:active {
  transform: scale(0.94);
}

.nav-burger .burger-close {
  display: none;
}

.site-nav.is-menu-open .nav-burger .burger-open {
  display: none;
}

.site-nav.is-menu-open .nav-burger .burger-close {
  display: block;
}

.site-nav.is-menu-open {
  background: var(--bg);
}

/* Мобильное меню: раскрывается по высоте, строки подъезжают друг за другом. */
.nav-mobile {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 0;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: max-height var(--dur-3) var(--ease-ios), border-color var(--dur-2) var(--ease-out);
}

.site-nav.is-menu-open .nav-mobile {
  max-height: min(78vh, 560px);
  border-bottom-color: var(--border);
  overflow-y: auto;
}

.nav-mobile-in {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 24px 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.site-nav.is-menu-open .nav-mobile-in {
  opacity: 1;
  transform: none;
  transition-delay: 0.04s;
}

.nav-mobile-link {
  display: block;
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 15.5px;
  color: var(--fg-2);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.nav-mobile-link:hover,
.nav-mobile-link.is-active {
  background: var(--surface);
  color: var(--fg);
}

.nav-mobile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

/* Плавное «сжатие» шапки: сначала чуть уменьшаются разделы, потом уходит
   ссылка входа, и только затем разделы уезжают в бургер. Так на любом
   размере экрана шапка помещается целиком, без переносов и обрезки. */
@media (max-width: 1280px) {
  .nav-links {
    margin-left: 4px;
  }
  .nav-links a {
    padding: 7px 9px;
    font-size: 14px;
  }
  .site-nav-in {
    gap: 14px;
  }
}

@media (max-width: 1180px) {
  .site-nav .nav-login {
    display: none;
  }
}

/* Кнопка темы в меню: на телефоне верхний переключатель скрыт, чтобы
   шапка не расползалась, а тёмная и светлая темы остаются под рукой. */
.nav-mobile-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-2);
  font: inherit;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.nav-mobile-theme:hover,
.nav-mobile-theme:focus-visible {
  background: var(--surface);
  color: var(--fg);
}

.nav-mobile-theme svg {
  flex: none;
}

.nav-mobile-theme .icon-moon,
.nav-mobile-theme .icon-sun {
  display: none;
}

[data-theme="dark"] .nav-mobile-theme .icon-sun,
.dark .nav-mobile-theme .icon-sun {
  display: block;
}

html:not([data-theme="dark"]) .nav-mobile-theme .icon-moon {
  display: block;
}

/* Планшет и телефон: разделы уезжают в бургер. Селекторы с .site-nav
   перебивают унаследованные кнопочные стили из tailwind.css. */
@media (max-width: 1060px) {
  .site-nav .nav-links,
  .site-nav .nav-login {
    display: none;
  }
  .site-nav .nav-burger {
    display: grid;
  }
}

@media (max-width: 560px) {
  .site-nav-in {
    gap: 8px;
    padding: 0 16px;
  }
  /* на телефоне шапка держит только логотип, кнопку и бургер */
  .site-nav .theme-toggle {
    display: none;
  }
  .site-nav .nav-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
  }
  .nav-mobile-in {
    padding: 8px 16px 18px;
  }
  .nav-mobile-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .site-nav-in {
    gap: 6px;
    padding: 0 12px;
  }
  .wordmark {
    font-size: 16px;
  }
  .wordmark-mark {
    width: 24px;
    height: 24px;
  }
  .site-nav .nav-cta {
    padding: 0 12px;
  }
}

/* --------------------------------------------------------------- футер */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
  background: var(--bg);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 32px;
}

.site-footer h4 {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.site-footer a {
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--fg-3);
}

.site-footer a:hover {
  color: var(--brand);
}

.site-footer-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--fg-2);
}

@media (max-width: 820px) {
  /* minmax(0, 1fr): колонки футера не должны раздвигать страницу по своему
     содержимому (длинные ссылки и адреса). */
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 40px 0 32px;
  }
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .site-footer-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 28px;
  }
}

/* ------------------------------------------------------------- утилиты */
.lp-stack {
  display: flex;
  flex-direction: column;
}
.lp-row {
  display: flex;
  align-items: center;
}
.lp-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lp-wrap {
  flex-wrap: wrap;
}
/* Legacy helpers belong below Tailwind utilities, not above responsive variants. */
@layer base {
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12.5px; }
.text-lg { font-size: 18px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.tabular { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.full { width: 100%; }
.hidden { display: none; }

}

/* --------------------------------------------------------- анимации */
[data-lp-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js-motion [data-lp-reveal].is-in {
  animation: lp-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html:not(.js-motion) [data-lp-reveal] {
  opacity: 1;
  transform: none;
}

@keyframes lp-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-lp-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* ---------------------------------------------- синий текст в тёмной теме
   Насыщенный #2448ff годится для заливки кнопки, но как цвет текста на тёмном
   фоне не проходит по контрасту - в тёмной теме берём светлый акцент.
   Правило обязано быть с !important: Tailwind-утилиты идут ниже по файлу. */
[data-theme="dark"] .text-primary,
.dark .text-primary {
  color: rgb(var(--accent-300-rgb, 138 163 255)) !important;
}
[data-theme="dark"] .text-accent-600,
[data-theme="dark"] .text-accent-700 {
  color: rgb(var(--accent-300-rgb, 138 163 255)) !important;
}


/* ------------------------------------ нажатие без грубого выделения
   Кнопки, ссылки и подписи не выделяют текст и не тянут системный
   прямоугольник при тапе: на телефоне нажатие выглядит чисто. Поля ввода и
   обычный текст остаются выделяемыми - это не трогаем. */
button,
[role="button"],
[role="tab"],
a,
label,
summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: auto;
  user-select: auto;
  touch-action: auto;
}

/* Prevent iOS auto-zoom when focusing public-site forms. */
@media (max-width:767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),textarea,select{font-size:16px!important}
}

/* Incremental interface refresh: shared across public pages and React.
   Neutral focus, stable geometry, no payment or merchant palette overrides. */
.site-skip-link{position:fixed;inset:12px auto auto 12px;z-index:10000;max-width:calc(100vw - 24px);padding:12px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--fg);font-size:14px;line-height:1.5;transform:translateY(-180%);text-decoration:none}
.site-skip-link:focus{transform:translateY(0)}
.ui-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:where(input,textarea,select)::placeholder{color:var(--fg-2);opacity:.8}
:where(input,textarea,select):focus-visible{outline:2px solid var(--fg-2);outline-offset:3px}
:where(input,textarea,select)[aria-invalid=true]{border-color:var(--err,#c65c5c);box-shadow:0 0 0 1px var(--err,#c65c5c)}
:where(button,input,select,textarea):disabled{cursor:not-allowed}
:where(dialog,[role=dialog],[role=menu]){overscroll-behavior:contain}
:where(.docs-body h1,.docs-body h2,.auth-title,.workspace-toolbar h1){text-wrap:balance}
:where(.docs-body h2,.docs-body h3,[id^=section-]){scroll-margin-top:96px}
.auth-fields .field:focus-within>.label,.auth-fields .flow-field:focus-within>span:first-child{color:var(--fg)}
.auth-alert,.flow-error{overflow-wrap:anywhere}
.dashboard-main .workspace-toolbar{padding-bottom:18px;border-bottom:1px solid var(--border);row-gap:14px}
.dashboard-main .workspace-toolbar>div{min-width:0}
.dashboard-main .surface{border:1px solid var(--border)}
.dashboard-main .appearance-draft-status{flex-basis:100%;margin:0;color:var(--fg-2);font-size:12px;line-height:1.6}
:where(.dashboard-main,.admin-workspace) :where(th,td,[class*=amount],.tabular-nums){font-variant-numeric:tabular-nums}
.docs .docs-nav a{padding:8px 12px;margin-left:-12px;border-radius:8px;color:var(--fg-2);transition:background-color .15s,color .15s}
.docs .docs-nav a:hover,.docs .docs-nav a:focus-visible{background:var(--surface);color:var(--fg)}
.docs .docs-policy-note{padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.8}
.docs pre.ui-code-example{position:relative;padding-top:56px;border:1px solid var(--border);border-radius:14px}
.ui-code-copy{position:absolute;top:10px;right:10px;min-height:34px;max-width:calc(100% - 20px);padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg-2);font:500 11px/1.5 Inter,system-ui,sans-serif;white-space:normal;display:inline-flex;align-items:center;gap:6px}
.ui-code-copy:hover,.ui-code-copy:focus-visible{color:var(--fg);background:var(--surface-hover)}
@media(pointer:coarse){.ui-code-copy{min-height:44px}.docs pre.ui-code-example{padding-top:66px}}
@media(max-width:767px){.dashboard-main .workspace-toolbar{padding-bottom:14px}.docs .docs-policy-note{padding:14px 16px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.site-skip-link,.docs .docs-nav a{transition:none!important;scroll-behavior:auto!important}}

/* Shared motion pass: no hidden content, no animated payment counters. */
@keyframes luno-content-arrive{from{opacity:.25;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:no-preference){
 html:not(.low-power):not([data-personal-motion=reduced]){scroll-behavior:smooth}
 html:not(.low-power):not([data-personal-motion=reduced]) :is(.auth-form,.docs-body,.sbp-checkout .checkout-layout,.crypto-checkout .cc-summary,.crypto-checkout .cc-main){animation:luno-content-arrive .45s cubic-bezier(.22,1,.36,1) both}
 html:not(.low-power):not([data-personal-motion=reduced]) .crypto-checkout .cc-main{animation-delay:70ms}
 html:not(.low-power):not([data-personal-motion=reduced]) :is(.auth-form,.docs,.site-header,.site-footer,.sbp-checkout,.crypto-checkout) :is(button,a,input,textarea,select){transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,opacity .2s ease}
 html:not(.low-power):not([data-personal-motion=reduced]) :is(.docs,.auth-form) details[open]>:not(summary){animation:luno-content-arrive .28s cubic-bezier(.22,1,.36,1) both}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.auth-form,.docs-body,.sbp-checkout .checkout-layout,.crypto-checkout .cc-summary,.crypto-checkout .cc-main{animation:none!important}}

/* Isolated integration sandbox. Explicit test labels in every state. */
.sandbox-workspace{max-width:1120px;margin:0 auto;padding:58px 24px 80px;display:flex;flex-direction:column;gap:28px}.sandbox-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.sandbox-heading>div{min-width:0;max-width:700px}.sandbox-badge{display:inline-flex;align-items:center;padding:7px 10px;border:1px dashed var(--fg-2);border-radius:7px;font-size:10px;letter-spacing:.1em;font-weight:600;color:var(--fg)}.sandbox-heading h1{font-size:clamp(28px,4vw,42px);font-weight:600;line-height:1.15;letter-spacing:-.04em;margin:20px 0 14px}.sandbox-heading p{font-size:14px;color:var(--fg-2);line-height:1.8}.sandbox-heading>a{flex-shrink:0}.sandbox-warning{padding:20px 22px;border:1px dashed var(--border);border-radius:14px;background:var(--surface);font-size:13px;line-height:1.9}.sandbox-warning strong{font-weight:550}.sandbox-warning p{color:var(--fg-2);margin-top:4px}.sandbox-grid,.sandbox-checkout-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px}.sandbox-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:26px;min-width:0}.sandbox-number{font-size:10px;letter-spacing:.12em;color:var(--fg-2)}.sandbox-card h2{font-size:20px;font-weight:550;line-height:1.4;letter-spacing:-.025em;margin:12px 0 8px}.sandbox-card header>p{font-size:12px;line-height:1.9;color:var(--fg-2);margin-bottom:24px}.sandbox-key-result{display:grid;gap:14px;padding:18px;margin-bottom:20px;background:var(--bg);border:1px solid var(--border);border-radius:12px;font-size:12px}.sandbox-key-result code{font-size:12px;overflow-wrap:anywhere;white-space:pre-wrap;user-select:all}.sandbox-key-result button{justify-self:start}.sandbox-key-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}.sandbox-key-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:12px;font-size:12px;min-width:0;color:var(--fg-2)}.sandbox-key-list code{overflow-wrap:anywhere}.sandbox-key-list button{min-height:38px;font-size:11px}.sandbox-text-link{font-size:12px;display:inline-flex;min-height:44px;align-items:center}.sandbox-form{display:grid;gap:20px}.sandbox-form label{display:grid;gap:10px;font-size:12px}.sandbox-form input,.sandbox-form select{width:100%;min-width:0;min-height:44px}.sandbox-form small{font-size:11px;line-height:1.8;color:var(--fg-2)}.sandbox-form button{min-height:44px;height:auto;white-space:normal}.sandbox-invoice-list{display:grid;gap:12px}.sandbox-invoice-list>a{display:flex;align-items:center;gap:18px;padding:16px;border:1px solid var(--border);border-radius:12px;font-size:12px;min-width:0}.sandbox-invoice-list>a>div{flex:1;min-width:0}.sandbox-invoice-list strong{display:block;overflow-wrap:anywhere;font-weight:550}.sandbox-invoice-list small{display:block;color:var(--fg-2);font-size:10px;line-height:1.8;overflow-wrap:anywhere;margin-top:6px}.sandbox-status{display:inline-flex;padding:6px 9px;border:1px solid var(--border);border-radius:7px;font-size:11px;line-height:1.6;color:var(--fg-2);background:var(--bg);white-space:normal}.sandbox-status[data-status=PAID]{border-style:dashed;color:var(--fg)}.sandbox-empty{padding:24px 0;color:var(--fg-2);font-size:13px;line-height:1.8}.sandbox-clear{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}.sandbox-clear summary{cursor:pointer;font-size:12px;min-height:44px}.sandbox-clear form{display:grid;gap:16px;padding-top:16px}.sandbox-clear label{display:flex;gap:12px;align-items:flex-start;font-size:12px;line-height:1.9;color:var(--fg-2)}.sandbox-clear input{margin-top:5px;flex-shrink:0}.sandbox-clear button{justify-self:start}.sandbox-qr-card{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.sandbox-qr-frame{padding:14px;border:3px dashed #767676;border-radius:16px;background:white;max-width:100%;aspect-ratio:1}.sandbox-qr-frame img{display:block;max-width:100%;height:auto;image-rendering:pixelated}.sandbox-qr-card>p{font-size:11px;color:var(--fg-2)}.sandbox-qr-content{font-size:11px;line-height:1.8;overflow-wrap:anywhere;max-width:100%;color:var(--fg-2)}.sandbox-amount{display:block;font-size:44px;line-height:1.3;letter-spacing:-.04em;font-weight:550;margin:16px 0 20px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.sandbox-order>h2{font-size:13px;color:var(--fg-2);font-weight:400;margin-top:24px}.sandbox-simulation-note{font-size:13px;line-height:1.9;margin:20px 0;color:var(--fg-2)}.sandbox-order dl{display:grid;gap:14px;border-top:1px solid var(--border);padding-top:20px;font-size:12px}.sandbox-order dl>div{display:flex;gap:20px;justify-content:space-between}.sandbox-order dt{flex-shrink:0;color:var(--fg-2)}.sandbox-order dd{text-align:right;overflow-wrap:anywhere;min-width:0}.sandbox-description{font-size:12px;line-height:1.9;overflow-wrap:anywhere;margin-top:20px;white-space:pre-wrap}.sandbox-simulate{padding-top:24px;margin-top:24px;border-top:1px solid var(--border)}.sandbox-error{font-size:13px;line-height:1.9;color:var(--err,#c65c5c);overflow-wrap:anywhere}
@media(max-width:767px){.sandbox-workspace{padding:32px 18px 100px;gap:22px}.sandbox-heading{flex-wrap:wrap;gap:14px}.sandbox-heading h1{font-size:30px}.sandbox-grid,.sandbox-checkout-grid{grid-template-columns:1fr;gap:20px}.sandbox-card{padding:20px}.sandbox-warning{padding:16px 18px}.sandbox-invoice-list>a{flex-wrap:wrap;gap:12px}.sandbox-invoice-list>a>div{flex-basis:100%}.sandbox-key-list button{min-height:44px}.sandbox-amount{font-size:38px}.sandbox-order dd{max-width:70%}.sandbox-card .btn{max-width:100%}}
@media(prefers-reduced-motion:no-preference){html:not(.low-power) .sandbox-card{animation:luno-content-arrive .38s cubic-bezier(.22,1,.36,1) both}.sandbox-invoice-list>a{transition:border-color .2s,background-color .2s}.sandbox-invoice-list>a:hover{border-color:var(--fg-2)}}