/* styles/main.css */
/* Entry point — build concatenates imports into dist/assets/css/main.css */
/* styles/tokens.css */
/*
 * Design tokens — 1:1 from Figma Variables (file w7hPNNr4WHfsuW7HCveucM, page «01 — Основы»).
 * Names mirror Figma: `KassaGo / Colors / text/primary` → --color-text-primary.
 * Aliases keep the Figma reference chain (↳) so a base change propagates.
 */

:root {
  /* ── KassaGo / Colors · 38 ───────────────────────────── */
  --color-accent-blue: #0088ff;
  --color-accent-blue-light: rgb(0 136 255 / 0.1);
  --color-accent-cyan: #00c0e8;
  --color-accent-cyan-light: rgb(0 192 232 / 0.1);
  --color-accent-green: #08c469;
  --color-accent-green-light: rgb(8 196 105 / 0.1);
  --color-accent-indigo: #6155f5;
  --color-accent-indigo-light: rgb(97 85 245 / 0.1);
  --color-accent-orange: #e78551;
  --color-accent-orange-light: rgb(231 133 81 / 0.1);
  --color-accent-red: #ff383c;
  --color-accent-red-light: rgb(255 56 60 / 0.1);
  --color-accent-yellow: #ffcc00;
  --color-accent-yellow-light: rgb(255 204 0 / 0.1);

  --color-action-primary: #0088ff;
  --color-action-primary-hover: #0076e3;
  --color-action-primary-pressed: #0062be;
  --color-action-focus: #005fcc;

  --color-blue-subtle: #eff7ff;
  --color-blue-subtle-pressed: #dfefff;

  --color-border-default: #dbe2ec;
  --color-border-hover: #c1c8d2;
  --color-border-strong: #7d8ea6;
  --color-border-disabled: #d2dbe6;

  --color-surface-canvas: #ffffff;
  --color-surface-subtle: #f6f6fb;
  --color-surface-disabled: #ececf3;
  --color-surface-header: #14141e;

  --color-text-primary: #000000;
  --color-text-secondary: #707074;
  --color-text-tertiary: #bfbfbf;
  --color-text-disabled: #bfbfbf;
  --color-text-on-primary: #ffffff;

  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-tertiary: var(--color-text-tertiary);
  --color-icon-on-primary: var(--color-text-on-primary);

  --color-footer-link-default: #858585;

  /* ── KassaGo / Controls · 32 colour ───────────────────── */
  --button-primary-default: var(--color-action-primary);
  --button-primary-hover: var(--color-action-primary-hover);
  --button-primary-pressed: var(--color-action-primary-pressed);
  --button-primary-disabled: var(--color-surface-disabled);

  --button-secondary-default: var(--color-surface-canvas);
  --button-secondary-hover: var(--color-surface-canvas);
  --button-secondary-pressed: var(--color-surface-canvas);
  --button-secondary-border-default: var(--color-border-default);
  --button-secondary-border-hover: var(--color-border-hover);
  --button-secondary-border-pressed: var(--color-action-primary);

  --button-border-default: var(--color-border-strong);
  --button-border-hover: var(--color-action-primary);
  --button-border-pressed: var(--color-action-primary-pressed);
  --button-border-disabled: var(--color-border-disabled);
  --button-focus: var(--color-action-focus);

  --button-text-default: var(--color-text-primary);
  --button-text-disabled: var(--color-text-disabled);
  --button-text-on-primary: var(--color-text-on-primary);

  --icon-blue: var(--color-action-primary);
  --icon-hover: var(--color-action-primary-hover);
  --icon-pressed: var(--color-action-primary-pressed);
  --icon-disabled: var(--color-text-disabled);
  --icon-ink: var(--color-text-primary);
  --icon-white: var(--color-text-on-primary);

  --link-default: var(--color-action-primary);
  --link-hover: var(--color-action-primary-hover);
  --link-pressed: var(--color-action-primary-pressed);
  --link-disabled: var(--color-text-disabled);

  --segment-background-default: #202031;
  --segment-background-selected: #2a2a45;
  --segment-text-default: var(--color-text-on-primary);

  --surface-soft: var(--color-surface-subtle);

  /* ── Unbound one-off colours kept by design-owner decision ── */
  --color-footer-border: #ececf3;

  /* ── Fonts ─────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Roboto Condensed', 'Arial Narrow', var(--font-sans);

  /* ── Motion (from homepage prototype) ─────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-press: 160ms;
  --duration-enter: 400ms;
  --duration-card: 300ms;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* ZH: Figma switches the text family to Noto Sans SC via Variables. */
:root:lang(zh) {
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: var(--font-sans);
}

/* styles/base.css */
/* Reset + document defaults. Layout rules live in layout.css. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-offset);
}

body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* :where keeps this at class-level specificity so `.container` padding still applies */
:where(ul, ol)[role='list'] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  overflow-wrap: break-word;
}


:focus-visible {
  outline: 2px solid var(--color-action-focus);
  outline-offset: 2px;
}

/* `hidden` must win over component display rules */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* styles/layout.css */
/*
 * Layout primitives. No fixed widths/heights: everything is driven by
 * max-width, padding-inline and the content itself.
 *
 * Breakpoints (Figma): Mobile 390 · Tablet 768 · Desktop ≥1024 (1440 frame).
 * Structural switch happens at 1024 (Desktop) / 1023 (Tablet).
 */

:root {
  /* Content box of the 1440 frame = 1440 − 2 × 80 */
  --container-max: 1280px;

  /* Side gutter: 16 @390 → 32 @768, 32 in tablet range, 80 from 1024 */
  --gutter: clamp(16px, 16px + 16 * (100vw - 390px) / 378, 32px);

  --header-offset: 72px;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 80px;
  }
}

/* Centred column; width = min(viewport − gutters, max) */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Vertical flow with a configurable gap: <div class="stack" style="--gap: 24px"> */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 16px);
}

/* Horizontal flow that wraps instead of overflowing */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--align, center);
  gap: var(--gap, 16px);
}

/*
 * Auto grid: as many columns as fit at --min, never more than --max-cols.
 * Replaces "4 cards → 2×2 at 1279px" style breakpoints with content-driven wrapping.
 */
.auto-grid {
  --_min: var(--min, 260px);
  --_cols: var(--max-cols, 4);
  --_gap: var(--gap, 24px);
  display: grid;
  gap: var(--_gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(var(--_min), (100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols))), 1fr)
  );
}

/*
 * Page flow — vertical rhythm between top-level sections (Figma page frames):
 * Mobile 48 · Tablet 64 · Desktop 112. Interpolated between frames.
 */
:root {
  --section-gap: clamp(48px, 48px + 16 * (100vw - 390px) / 378, 64px);
}

@media (min-width: 768px) {
  :root {
    --section-gap: clamp(64px, 64px + 48 * (100vw - 768px) / 672, 112px);
  }
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-block-end: var(--section-gap);
}

/* Centered section intro: title + lead (+ optional action) */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.section-head__lead {
  color: var(--color-text-secondary);
}

/* styles/typography.css */
/*
 * Typography — Figma text styles `KassaGo/Typography/{Desktop,Tablet,Mobile,Shared}/*`.
 *
 * Figma defines three fixed steps (Mobile 390 · Tablet 768 · Desktop 1440).
 * Each value is exact at those widths and interpolates linearly in between,
 * so text never jumps and never needs per-width overrides.
 *
 * A style declares raw numbers (px without unit):
 *   --fs-m / --fs-t / --fs-d   font-size at 390 / 768 / 1440
 *   --lh-m / --lh-t / --lh-d   line-height at the same widths
 */

:where(
  .t-page-title, .t-page-title-compact, .t-section, .t-subheading,
  .t-card-title, .t-lead, .t-metric, .t-body, .t-small, .t-caption
) {
  --_fs: clamp(
    var(--fs-m) * 1px,
    var(--fs-m) * 1px + (var(--fs-t) - var(--fs-m)) * (100vw - 390px) / 378,
    var(--fs-t) * 1px
  );
  --_lh: clamp(
    var(--lh-m) * 1px,
    var(--lh-m) * 1px + (var(--lh-t) - var(--lh-m)) * (100vw - 390px) / 378,
    var(--lh-t) * 1px
  );
  font-size: var(--_fs);
  line-height: var(--_lh);
}

@media (min-width: 768px) {
  :where(
  .t-page-title, .t-page-title-compact, .t-section, .t-subheading,
  .t-card-title, .t-lead, .t-metric, .t-body, .t-small, .t-caption
) {
    --_fs: clamp(
      var(--fs-t) * 1px,
      var(--fs-t) * 1px + (var(--fs-d) - var(--fs-t)) * (100vw - 768px) / 672,
      var(--fs-d) * 1px
    );
    --_lh: clamp(
      var(--lh-t) * 1px,
      var(--lh-t) * 1px + (var(--lh-d) - var(--lh-t)) * (100vw - 768px) / 672,
      var(--lh-d) * 1px
    );
  }
}

/* Page Title — Roboto Condensed Bold · 40/44 → 56/60 → 72/72 */
.t-page-title {
  --fs-m: 36; --fs-t: 52; --fs-d: 64;
  --lh-m: 40; --lh-t: 56; --lh-d: 66;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.0278em;
}

/* Mobile/Page Title Compact — long titles · 36/40 on mobile, regular scale above */
.t-page-title-compact {
  --fs-m: 34; --fs-t: 52; --fs-d: 64;
  --lh-m: 38; --lh-t: 56; --lh-d: 66;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.0278em;
}

/* Section — Inter Bold · 32/40 → 36/44 → 44/52 */
.t-section {
  --fs-m: 32; --fs-t: 36; --fs-d: 44;
  --lh-m: 40; --lh-t: 44; --lh-d: 52;
  font-weight: 700;
  letter-spacing: -0.0227em;
}

/* Subheading — Inter Semi Bold · 24/32 → 28/36 → 32/40 */
.t-subheading {
  --fs-m: 24; --fs-t: 28; --fs-d: 32;
  --lh-m: 32; --lh-t: 36; --lh-d: 40;
  font-weight: 600;
}

/* Card Title — Inter Medium · 20/28 → 24/32 → 24/32 */
.t-card-title {
  --fs-m: 20; --fs-t: 24; --fs-d: 24;
  --lh-m: 28; --lh-t: 32; --lh-d: 32;
  font-weight: 500;
}

/* Lead — Inter Medium · 16/24 → 18/28 → 20/28 */
.t-lead {
  --fs-m: 16; --fs-t: 18; --fs-d: 20;
  --lh-m: 24; --lh-t: 28; --lh-d: 28;
  font-weight: 500;
}

/* Metric — Inter Bold · 64/72 → 96/104 → 120/128 */
.t-metric {
  --fs-m: 64; --fs-t: 96; --fs-d: 120;
  --lh-m: 72; --lh-t: 104; --lh-d: 128;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Shared styles — identical on every width */
.t-body {
  --fs-m: 16; --fs-t: 16; --fs-d: 16;
  --lh-m: 24; --lh-t: 24; --lh-d: 24;
  font-weight: 500;
}

.t-small {
  --fs-m: 14; --fs-t: 14; --fs-d: 14;
  --lh-m: 20; --lh-t: 20; --lh-d: 20;
  font-weight: 500;
}

.t-caption {
  --fs-m: 12; --fs-t: 12; --fs-d: 12;
  --lh-m: 16; --lh-t: 16; --lh-d: 16;
  font-weight: 400;
}

/* Chinese has no Semi Bold in Noto Sans SC subset used by Figma → Bold. */
:lang(zh) .t-subheading {
  font-weight: 700;
}

/* «от 1%» — prefix in the same size as the number, one word space apart (client 2026-10-28) */
.t-metric__from {
  margin-inline-end: 0.22em;
  font-size: 1em;
}


/* Components */
/* styles/components/icon.css */
/* Inline SVG icon — size comes from --icon-size (set by the icon() helper). */
.icon {
  display: inline-grid;
  flex: none;
  inline-size: var(--icon-size, 24px);
  aspect-ratio: 1;
}

.icon > svg {
  inline-size: 100%;
  block-size: 100%;
}

/* styles/components/button.css */
/*
 * Button — Figma «KassaGo / Primary Button» (164:375) · «KassaGo / Secondary Button» (164:458)
 *
 * <a|button class="btn btn--primary btn--48">…</a>
 *   sizes:  btn--36 (Control Small 14/20, 8×16, icon 20) · btn--48 (Control Medium 16/24, 12×24, icon 24)
 *   states: :hover · :active · :focus-visible · [disabled]/[aria-disabled] · [aria-busy="true"] (loading)
 * Height is a min-height so a long label can wrap instead of overflowing.
 */

.btn {
  --_bg: var(--button-primary-default);
  --_fg: var(--button-text-on-primary);
  --_border: transparent;
  --_ring: none;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: var(--_h);
  padding: var(--_py) var(--_px);
  border: 1px solid var(--_border);
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  box-shadow: var(--_ring);
  font-size: var(--_fs);
  line-height: var(--_lh);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-press) var(--ease-out),
    border-color var(--duration-press) var(--ease-out),
    color var(--duration-press) var(--ease-out),
    transform var(--duration-press) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
}

.btn:active:not(:disabled, [aria-disabled='true']) {
  transform: scale(0.98);
}

/* Sizes */
.btn--36 { --_h: 36px; --_py: 7px; --_px: 15px; --_fs: 14px; --_lh: 20px; --icon-size: 20px; }
.btn--48 { --_h: 48px; --_py: 11px; --_px: 23px; --_fs: 16px; --_lh: 24px; --icon-size: 24px; }
/* padding = Figma padding − 1px border, so outer box matches 1:1 */

.btn .icon {
  inline-size: var(--icon-size);
}

/* Primary */
.btn--primary:hover { --_bg: var(--button-primary-hover); }
.btn--primary:active { --_bg: var(--button-primary-pressed); }
.btn--primary:focus-visible { --_ring: inset 0 0 0 3px var(--button-focus); }

/* Secondary */
.btn--secondary {
  --_bg: var(--button-secondary-default);
  --_fg: var(--button-text-default);
  --_border: var(--button-secondary-border-default);
}
.btn--secondary:hover { --_border: var(--button-secondary-border-hover); }
.btn--secondary:active { --_border: var(--button-secondary-border-pressed); }
.btn--secondary:focus-visible {
  --_border: var(--button-border-default);
  --_ring: 0 0 0 3px var(--color-action-primary);
}

/* Disabled */
.btn:is(:disabled, [aria-disabled='true']) {
  --_fg: var(--button-text-disabled);
  pointer-events: none;
  cursor: default;
}
.btn--primary:is(:disabled, [aria-disabled='true']) { --_bg: var(--button-primary-disabled); }
.btn--secondary:is(:disabled, [aria-disabled='true']) { --_border: var(--button-border-disabled); }

/* Loading — content keeps its width (Figma: fixed width), spinner sits on top */
.btn[aria-busy='true'] {
  pointer-events: none;
}
.btn[aria-busy='true'] > * {
  visibility: hidden;
}
.btn[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--icon-size);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--loader-mask) center / contain no-repeat;
  mask: var(--loader-mask) center / contain no-repeat;
  animation: btn-spin 0.9s linear infinite;
}

/* «24x24 / loader-4» from the icon library */
:root {
  --loader-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0008 21V18M18.3608 18.36L16.2408 16.24M21.0008 12H18.0008M18.3608 5.64L16.2408 7.76M12.0008 3V6M5.64078 5.64L7.76078 7.76M4.00078 12H6.00078M7.00078 16.95L7.71078 16.24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='black'/%3E%3C/svg%3E");
}

@keyframes btn-spin {
  to { rotate: 1turn; }
}

/* styles/components/link.css */
/*
 * Links
 *   .link         Figma «KassaGo / Link» (167:393) — content link, 16/24, 44px hit area, optional icon
 *   .nav-link     Figma «Navigation Link» (791:6971) — desktop header, on dark surface
 *   .footer-link  Figma «Footer Link» (1083:8779)
 */

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-block: 10px;
  border-radius: 6px;
  color: var(--link-default);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  transition: color var(--duration-press) var(--ease-out);
  --icon-size: 24px;
}
.link:hover { color: var(--link-hover); }
.link:active { color: var(--link-pressed); }
.link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-focus);
}
.link:is([aria-disabled='true']) {
  color: var(--link-disabled);
  pointer-events: none;
}

.nav-link {
  display: inline-flex;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-on-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--duration-press) var(--ease-out);
}
.nav-link:hover { color: var(--color-text-secondary); }
.nav-link:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px var(--color-action-focus),
    0 0 0 3px var(--color-action-primary);
}
/* Not in Figma — current page: accent text, same metrics so nothing shifts */
.nav-link[aria-current='page'] { color: var(--color-action-primary); }

.footer-link {
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  color: var(--color-footer-link-default);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  transition: color var(--duration-press) var(--ease-out);
}
.footer-link:hover,
.footer-link[aria-current='page'] { color: var(--color-text-primary); }
.footer-link:focus-visible {
  outline: none;
  color: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-action-focus);
}

/* styles/components/field.css */
/*
 * Form fields — Figma «KassaGo / Input» (554:1745) · «Select» (556:1814) · «Textarea» (581:4028)
 *
 * <div class="field [is-invalid]">
 *   <label class="field__label" for="x">Имя<span class="field__req">*</span></label>
 *   <input class="field__control" id="x">            | <textarea> | <div class="select">…</div>
 *   <p class="field__error">Проверьте введённые данные</p>
 * </div>
 * Width is always the parent's — fields never carry Figma's frame widths.
 */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field__label {
  display: flex;
  gap: 4px;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.field__req {
  color: var(--color-accent-red);
}

.field__control {
  --_border: var(--color-border-default);
  display: block;
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 13px; /* Figma 12×14 − 1px border */
  border: 1px solid var(--_border);
  border-radius: var(--radius-md);
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font-size: 16px; /* ≥16px keeps iOS from zooming on focus */
  line-height: 24px;
  font-weight: 500;
  transition: border-color var(--duration-press) var(--ease-out);
}

.field__control::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

.field__control:hover { --_border: var(--color-border-hover); }
.field__control:focus,
.field__control:focus-visible,
.field__control[aria-expanded='true'] {
  --_border: var(--color-action-primary);
  outline: none;
}

.field__control:disabled,
.field__control[aria-disabled='true'] {
  --_border: var(--color-border-disabled);
  background: var(--color-surface-disabled);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.field.is-invalid .field__control,
.field__control[aria-invalid='true'] {
  --_border: var(--color-accent-red);
}

.field__error {
  color: var(--color-accent-red);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.field:not(.is-invalid) .field__error {
  display: none;
}

textarea.field__control {
  min-block-size: 128px;
  resize: vertical;
}

/* ── Select ─────────────────────────────────────────────── */

:root {
  --chevron-down: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='black'/%3E%3C/svg%3E");
}

.select {
  position: relative;
}

/* Native <select> (no-JS fallback) and the enhanced trigger share the look */
.select__native,
.select__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline-end: 13px;
  text-align: start;
  cursor: pointer;
}

.select__native {
  appearance: none;
  padding-inline-end: calc(13px + 24px + 8px);
  background: var(--color-surface-canvas) var(--chevron-down) right 13px center / 24px no-repeat;
}

.select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select__trigger[data-empty] .select__value {
  color: var(--color-text-tertiary);
}

.select__trigger .icon {
  transition: rotate var(--duration-press) var(--ease-out);
}

.select__trigger[aria-expanded='true'] .icon {
  rotate: 180deg;
}

.select__list {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-block-size: min(320px, 50dvh);
  overflow-y: auto;
  padding: 5px; /* 6 − 1 border */
  margin: 0;
  list-style: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-canvas);
}

.select__list[hidden] {
  display: none;
}

.select__option {
  padding: 8px;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.select__option:hover,
.select__option[data-active],
.select__option[aria-selected='true'] {
  background: var(--color-surface-subtle);
}

/* Enhanced: hide native, keep it in the form for submission */
.select.is-enhanced .select__native {
  display: none;
}

.select:not(.is-enhanced) .select__trigger,
.select:not(.is-enhanced) .select__list {
  display: none;
}

/* styles/components/tabs.css */
/*
 * Tabs — Figma «KassaGo / Tab» (919:8508) · «Tabs» (921:40276)
 *
 * <div class="tabs" role="tablist" data-tabs>
 *   <button class="tab" role="tab" aria-selected="true" aria-controls="p1">…</button>
 * </div>
 * <div class="tab-panel" role="tabpanel" id="p1">…</div>
 *
 * The row scrolls horizontally when tabs don't fit (mobile) instead of wrapping or shrinking.
 */

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  flex: none;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    background-color var(--duration-press) var(--ease-out),
    color var(--duration-press) var(--ease-out);
}

.tab:hover,
.tab[aria-selected='true'] {
  background: var(--color-surface-subtle);
}

.tab[aria-selected='true'] {
  color: var(--color-text-primary);
}

.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-focus);
}

.tab-panel[hidden] {
  display: none;
}

/* styles/components/faq.css */
/*
 * FAQ item — Figma «FAQ / Item» (533:1940): Default · Hover · Expanded
 *
 * <details class="faq-item" name="faq">
 *   <summary class="faq-item__q">Вопрос <span class="faq-item__icon">+/−</span></summary>
 *   <div class="faq-item__a">Ответ</div>
 * </details>
 * Native <details>: works without JS, keyboard + screen-reader accessible out of the box.
 */

.faq-item {
  border-radius: 16px;
  background: var(--color-surface-subtle);
  transition: background-color var(--duration-press) var(--ease-out);
}

.faq-item:not([open]):has(> .faq-item__q:hover) {
  background: var(--color-blue-subtle);
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: inherit;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-focus);
}

.faq-item__q > :first-child {
  flex: 1;
  min-width: 0;
}

/* Plus / minus swap — both icons rendered, one visible */
.faq-item__icon {
  display: grid;
  flex: none;
}

.faq-item__icon > .icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--duration-press) var(--ease-out),
    rotate var(--duration-card) var(--ease-out);
}

.faq-item:not([open]) .faq-item__minus,
.faq-item[open] .faq-item__plus {
  opacity: 0;
  rotate: 90deg;
}

.faq-item__a {
  padding: 0 20px 20px;
  margin-top: -8px; /* Figma gap 12 = 20 padding − 8 */
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

/* Smooth open/close where supported (Chromium 131+, Safari 18.4+) */
@supports (interpolate-size: allow-keywords) {
  .faq-item {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--duration-card) var(--ease-out),
      content-visibility var(--duration-card) allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }
}

/* styles/components/header.css */
/*
 * Site header — Figma «Header» (688:85869). Always fixed (designer's requirement).
 *
 *            Desktop ≥1024                     Tablet / Mobile <1024
 *   ┌──────────────────────────────┐   ┌──────────────────────────────┐
 *   │ logo │ nav … │ lang │ CTA    │   │ logo              CTA  ☰     │
 *   └──────────────────────────────┘   ├──────────────────────────────┤ (open)
 *     pill, width = content            │ nav (column) · language row  │
 *                                      └──────────────────────────────┘
 *                                        card, max 620px, radius 32
 */

:root {
  --header-top: 20px;
}

@media (min-width: 768px) {
  :root {
    --header-top: 20px;
  }
}

.site-header {
  position: fixed;
  z-index: 50;
  inset-inline: 0;
  inset-block-start: var(--header-top);
  padding-inline: var(--gutter);
  pointer-events: none; /* only the bar itself is interactive */
}

.site-header__bar {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'logo actions'
    'nav  nav';
  align-items: center;
  max-inline-size: 620px;
  margin-inline: auto;
  padding: 12px 16px 12px 24px;
  border-radius: 32px;
  background: var(--color-surface-header);
  color: var(--color-text-on-primary);
}

.site-header__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-self: start;
  min-block-size: 36px;
  border-radius: 4px;
}

.site-header__logo svg,
.site-header__logo .logo-img {
  inline-size: 91px;
  block-size: auto;
}

.site-header__logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-action-primary);
}

.site-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CTA label: full on ≥768, short on mobile (Figma) */
.site-header__cta--short { display: none; }

@media (max-width: 767px) {
  .site-header__cta--full { display: none; }
  .site-header__cta--short { display: inline-flex; }
}

.site-header__burger {
  display: grid;
  place-items: center;
  inline-size: 36px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  color: var(--color-text-on-primary);
}

.site-header__burger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-primary);
}

/* ── Collapsible nav (tablet / mobile) ─────────────────── */

.site-header__nav {
  grid-area: nav;
  display: none;
  flex-direction: column;
  gap: 24px;
  padding-block-start: 24px;
}

.site-header[data-open] .site-header__bar {
  padding-block-end: 24px;
}

.site-header[data-open] .site-header__nav {
  display: flex;
  animation: header-nav-in var(--duration-card) var(--ease-out);
}

@keyframes header-nav-in {
  from { opacity: 0; translate: 0 -8px; }
}

.site-header__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-header__links .nav-link,
.site-header__lang-label {
  font-size: 16px;
  line-height: 24px;
}

.site-header__lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__lang-label {
  padding: 4px;
  font-weight: 500;
}

/* Segment control / Language — 999:9483 */
.lang-segment {
  display: flex;
  flex: 0 1 219px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--segment-background-default);
}

.lang-segment > li {
  flex: 1 0 auto;
}

.lang-segment__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-block-size: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--segment-text-default);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--duration-press) var(--ease-out);
}

.lang-segment__item:hover,
.lang-segment__item[aria-current] {
  background: var(--segment-background-selected);
}

.lang-segment__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-action-primary);
}

/* ── Language selector (desktop) — 1006:9776 ───────────── */

.lang-select {
  position: relative;
  display: none;
}

.lang-select__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  min-block-size: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-text-on-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  transition: background-color var(--duration-press) var(--ease-out);
}

.lang-select__trigger:hover,
.lang-select__trigger[aria-expanded='true'] {
  background: var(--segment-background-default);
}

.lang-select__trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-primary);
}

.lang-select__menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 177px;
  padding: 5px; /* 6 − 1 border */
  border: 1px solid #313131; /* Figma: unbound colour */
  border-radius: var(--radius-md);
  background: var(--segment-background-default);
  animation: header-nav-in var(--duration-press) var(--ease-out);
}

.lang-select__menu[hidden] {
  display: none;
}

.lang-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  color: var(--color-text-on-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.lang-select__option:hover,
.lang-select__option:focus-visible,
.lang-select__option[aria-current] {
  outline: none;
  background: #28283e; /* Figma: unbound colour */
}

/* ── Desktop ───────────────────────────────────────────── */

@media (min-width: 1024px) {
  .site-header__bar {
    grid-template-columns: auto auto auto;
    grid-template-areas: 'logo nav actions';
    column-gap: 28px;
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: 12px 12px 12px 24px;
    border-radius: 99px;
  }

  .site-header__nav,
  .site-header[data-open] .site-header__nav {
    display: block;
    padding: 0;
    animation: none;
  }

  .site-header__links {
    flex-direction: row;
    gap: 24px;
  }

  .site-header__links .nav-link {
    font-size: 14px;
    line-height: 20px;
  }

  .site-header__lang-row,
  .site-header__burger {
    display: none;
  }

  .lang-select {
    display: block;
  }
}

/* Open menu shows a cross instead of the burger */
.site-header__burger-close,
.site-header__burger[aria-expanded='true'] .site-header__burger-open { display: none; }
.site-header__burger[aria-expanded='true'] .site-header__burger-close { display: block; }

/* styles/components/footer.css */
/*
 * Site footer — Figma «Footer» (672:43261)
 *
 *   Desktop ≥1024   brand | Платформа | Информация | Статьи        (side padding 120 @1440)
 *   Tablet 768      Платформа | Информация | Статьи  →  brand below
 *   Mobile 390      Платформа | Информация  →  Статьи  →  brand
 *
 * Watermark «KassaGO» is 28.8% of the viewport width on every frame
 * (414.76/1440 · 221.20/768 · 112.33/390) and is cropped by ~⅓ of its size at the bottom.
 */

.site-footer {
  position: relative;
  overflow: hidden;
  border-block-start: 1px solid var(--color-footer-border);
  background: var(--color-surface-canvas);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    'c1 c2'
    'c3 c3'
    'brand brand';
  column-gap: 24px;
  row-gap: 36px;
  max-inline-size: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 36px var(--gutter) 0;
}

.site-footer__inner > :nth-child(2) { grid-area: c1; }
.site-footer__inner > :nth-child(3) { grid-area: c2; }
.site-footer__inner > :nth-child(4) { grid-area: c3; }
.site-footer__brand {
  grid-area: brand;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, auto);
    grid-template-areas:
      'c1 c2 c3'
      'brand brand brand';
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    grid-template-areas: 'brand c1 c2 c3';
    column-gap: clamp(40px, 12.15vw, 175px); /* Figma gaps 184 / 166 → 175 avg */
    justify-content: stretch;
    /* 1440 frame: 120 side padding, content sits 40px inside the 80px page gutter */
    max-inline-size: 1440px;
    /* Figma desktop: 120 left, 98 right (columns are absolutely placed in the frame) */
    padding: 60px clamp(var(--gutter), 6.8vw, 98px) 0 clamp(var(--gutter), 8.333vw, 120px);
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__logo {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  color: var(--color-text-primary);
  border-radius: 4px;
}

.site-footer__logo svg,
.site-footer__logo .logo-img {
  inline-size: 91px;
  block-size: auto;
}

.site-footer__logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-action-focus);
}

.site-footer__meta {
  color: var(--color-text-tertiary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.site-footer__copy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__dot {
  inline-size: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9d9d9; /* Figma: unbound decorative colour */
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.site-footer__heading {
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__links > li {
  display: flex; /* line box = link's 20px, not the body's 24px */
}

.site-footer__watermark {
  margin-block: 36px -0.33em; /* Figma: 36 below brand (mobile/tablet) */
  color: #f1f1f1; /* Figma: unbound decorative colour */
  font-family: 'Roboto Condensed', var(--font-display);
  font-size: 28.8vw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

@media (min-width: 1024px) {
  .site-footer__watermark {
    /* 36 → 68 between 1024 and 1440 (desktop frame: columns end at 252, glyph box starts at 320) */
    margin-block-start: clamp(36px, 36px + 32 * (100vw - 1024px) / 416, 68px);
  }
}

@media (min-width: 1440px) {
  .site-footer__watermark {
    font-size: min(28.8vw, 414.76px);
  }
}

/* styles/components/faq-section.css */
/*
 * FAQ section — Figma «FAQ» (667:18167)
 * Desktop/Tablet: head gap 32, list 576 wide · Mobile: head gap 16, list full width.
 */

.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.faq-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.faq-section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: 100%;
  max-inline-size: 576px;
}

@media (min-width: 768px) {
  .faq-section__head {
    gap: 32px;
  }
}

/* styles/components/contact.css */
/*
 * Contact form block — Figma «Contact form» (667:17519)
 *
 *   Desktop ≥1024  intro (569) | card (604) — two columns, intro vertically centred on the card
 *   Tablet / Mobile  intro on top (title + lead only), card full width below
 */

.contact {
  display: grid;
  gap: 36px;
}

.contact__intro {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.contact__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__lead,
.contact__muted {
  color: var(--color-text-secondary);
}

.contact__lead {
  max-inline-size: 528px; /* Tablet frame text width; desktop 434 below */
}

/* Decorative dot row (569:14332): 6px dots, ~27.8px step, #F6F6FB */
.contact__dots {
  display: none;
  inline-size: min(100%, 423px);
  block-size: 6px;
  background: radial-gradient(circle at 3px 3px, var(--color-surface-subtle) 2.5px, transparent 3px) 0 0 / 27.8px 6px;
  background-repeat: space no-repeat;
}

.contact__steps {
  display: none;
  flex-direction: column;
  gap: 28px;
  max-inline-size: 434px;
}

.contact__step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.contact__step > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact__step .icon {
  color: var(--color-action-primary);
}

/* Card */
.contact__card {
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__row > .field {
  flex: 1 1 0;
}

.contact__submit {
  inline-size: 100%;
}

.contact__failure {
  color: var(--color-accent-red);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.contact__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-tertiary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
}

.contact__legal a {
  border-radius: 2px;
  transition: color var(--duration-press) var(--ease-out);
}

.contact__legal a:hover {
  color: var(--color-text-secondary);
}

.contact__dot {
  inline-size: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9d9d9; /* Figma: unbound decorative colour */
}

/* Mobile frame drops the first dot so the line can wrap after "reCAPTCHA" */
@media (max-width: 767px) {
  .contact__legal .contact__dot:first-of-type {
    display: none;
  }
}

/* Success (scenario 04) */
.contact__success {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block-end: 4px; /* Figma: 20/24 vs form 20/20 */
  text-align: center;
  outline: none;
}

.contact__success[hidden] {
  display: none;
}

.contact__success-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.contact__success .icon {
  color: var(--color-action-primary);
}

/* ── Tablet ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .contact__card {
    padding: 28px 32px;
  }

  .contact__form {
    gap: 19px;
  }

  .contact__row {
    flex-direction: row;
    gap: 24px;
  }
}

/* ── Desktop ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: minmax(0, 569fr) minmax(0, 604fr);
    column-gap: clamp(40px, 7.43vw, 107px); /* 1440: 80 + 569 + 107 + 604 + 80 */
    align-items: center; /* intro centred against the form, whatever the form's height */
  }

  .contact__lead {
    max-inline-size: 434px;
  }

  .contact__dots,
  .contact__steps {
    display: flex;
  }
}

/* styles/components/process.css */
/*
 * «Как мы работаем» — Figma «Block process» (773:42099)
 *
 *   ≥1280   4 columns, gap 24, title centred, head gap 60
 *   ≤1279   2 × 2 (designer: cards don't fit, so two rows of two)
 *   Tablet  2 × 2, title left, gap 24
 *   Mobile  1 column, title left, head gap 20
 *
 * Scenes are illustration canvases: the art keeps Figma's pixel sizes and is intentionally cropped
 * (window, platform list, payment sheet run past the edges), so the canvas has a fixed height per
 * frame. Its width always follows the card.
 */

.process {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process__grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.process__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.process__text h3 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  text-wrap: wrap;
}

.process__num {
  color: var(--color-action-primary);
}

.process__desc {
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .process {
    gap: 24px;
  }

  .process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .process {
    gap: 60px;
  }

  .process__title {
    text-align: center;
  }

  .process__step {
    gap: 16px;
  }
}

@media (min-width: 1280px) {
  .process__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Scene canvas ───────────────────────────────────────── */

.process__scene {
  --scene-h: 201px; /* Mobile frame */
  position: relative;
  display: flex;
  justify-content: center;
  block-size: var(--scene-h);
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-subtle);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .process__scene { --scene-h: 210px; }
}

@media (min-width: 1024px) {
  .process__scene { --scene-h: 188px; }
}

/* 1 · Request — browser window with a form, cropped at the bottom */
.process__scene--request {
  align-items: flex-start;
  padding-block-start: 20px;
}

.pr-window {
  display: flex;
  flex-direction: column;
  gap: 4px;
  inline-size: 239px;
  padding: 10px 10px 0;
  border-radius: 12px;
  background: var(--color-surface-canvas);
}

.pr-window__dots {
  display: flex;
  gap: 4px;
}

.pr-window__dots i {
  inline-size: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-subtle);
}

.pr-window__form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-surface-subtle);
  border-block-end: 0;
  border-radius: 12px 12px 0 0;
}

.pr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pr-row {
  display: flex;
  gap: 10px;
}

.pr-label {
  inline-size: 41px;
  block-size: 6px;
  border-radius: 4px;
  background: var(--color-surface-subtle);
}

.pr-input {
  block-size: 20px;
  border-radius: 4px;
  background: var(--color-surface-subtle);
}

.pr-submit {
  position: relative;
  block-size: 20px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue-light);
}

.pr-cursor {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 58%;
}

/* 2 · Review — checklist with dotted connectors */
.process__scene--review {
  align-items: center;
}

.pr-checks {
  display: flex;
  flex-direction: column;
}

.pr-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 32px;
  white-space: nowrap;
}

.pr-check .icon {
  color: var(--color-action-primary);
}

.pr-check--pending {
  color: rgb(0 0 0 / 0.25);
}

.pr-pending {
  display: grid;
  place-items: center;
  inline-size: 32px;
  aspect-ratio: 1;
  border: 2.13px solid #d9d9d9; /* Figma: unbound */
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}

/* 32×24 column of three 4px dots, centred under the 32px icon */
.pr-connector {
  inline-size: 32px;
  block-size: 24px;
  background: radial-gradient(circle, var(--color-action-primary) 2px, transparent 2.5px) center top / 4px 10px repeat-y;
}

.pr-connector--muted {
  background-image: radial-gradient(circle, #d9d9d9 2px, transparent 2.5px);
}

/* 3 · Integration — platform list, selected item sharp, neighbours blurred */
.process__scene--integration {
  align-items: center;
}

.pr-platforms {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pr-platforms li {
  display: flex;
  align-items: center;
  gap: 4.64px;
  color: rgb(0 0 0 / 0.25);
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
}

.pr-platforms .is-near { filter: blur(1px); }
.pr-platforms .is-far { filter: blur(4px); }
.pr-platforms .is-active { color: var(--color-action-primary); }

/* 4 · Success — payment sheet rising from the bottom with a blue glow */
.process__scene--success {
  align-items: flex-end;
}

.process__scene--success::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -9px;
  block-size: 22px;
  background: rgb(161 211 255 / 0.6);
  filter: blur(35px);
}

.pr-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: min(238px, 100% - 64px);
  min-block-size: 140px;
  margin-block-start: 50px;
  padding-block-start: 20px;
  border-radius: 20px 20px 0 0;
  background: var(--color-surface-canvas);
}

.pr-sheet .icon {
  color: var(--color-action-primary);
}

.pr-sheet strong {
  margin-block-start: 16px;
  color: var(--color-action-primary);
  font-weight: 500;
  white-space: nowrap;
}

.pr-sheet__bar {
  inline-size: 170px;
  max-inline-size: 72%;
  block-size: 12px;
  margin-block-start: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
}

/* styles/components/payments.css */
/*
 * «Приём и вывод средств» — Figma «Block Payments» (786:7254)
 *
 *   ≥1024   card | dots · brand mark · dots | card   (row, gap 12)
 *           1440/1366: 4 dots per side, gap 18 · 1024: 2 dots per side
 *   <1024   cards stacked, hub vertical (2 dots per side, gap 8)
 */

.payments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.payments__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: 567px;
}

.payments__head {
  align-self: flex-start;
}

@media (min-width: 1024px) {
  .payments__head { align-self: center; }
  .payments__head h2 { text-align: center; }
}

.payments__lead,
.payments__muted {
  color: var(--color-text-secondary);
}

.payments__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
}

.payments__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  inline-size: 100%;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.payments__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  inline-size: 100%;
}

.payments__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payments__divider {
  block-size: 1px;
  border: 0;
  border-radius: 99px;
  background: var(--color-border-default);
}

.payments__methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.payments__method {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 99px;
  background: var(--color-surface-canvas);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.payments__method--more {
  padding: 8px;
}

.payments__stack {
  display: flex;
}

.payments__stack > .icon + .icon {
  margin-inline-start: -8px; /* Figma: gap −8 */
}

/* Hub: brand mark with dotted connectors */
.payments__hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.payments__dots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payments__dots i {
  inline-size: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-subtle);
}

/* Two dots per side on stacked layouts and at 1024 */
.payments__dots:first-child i:nth-child(-n + 2),
.payments__dots:last-child i:nth-child(n + 3) {
  display: none;
}

.payments__mark {
  flex: none;
  inline-size: 120px;
  block-size: auto;
}

@media (min-width: 768px) {
  .payments {
    gap: 32px;
  }

  .payments__head {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .payments {
    gap: 60px;
  }

  .payments__flow,
  .payments__hub,
  .payments__dots {
    flex-direction: row;
  }

  .payments__flow {
    align-items: center;
  }

  .payments__card {
    flex: 1 1 0;
    min-width: 0;
    padding: 28px;
  }

  .payments__hub,
  .payments__dots {
    gap: 18px;
  }
}

@media (min-width: 1280px) {
  .payments__dots i {
    display: block !important;
  }
}

/* Monochrome method icons are blue in Figma (credit card, QR, link) */
.payments__method > .icon {
  color: var(--color-action-primary);
}

/* styles/components/benefits.css */
/*
 * «Почему KassaGo?» — Figma «Block benefits» (773:38587) · «Benefits / Item» (428:1193)
 *
 *   ≥1024   head (484) → list | visual (560 square), 2 equal columns, column gap 160 @1440
 *   Tablet  list | visual, smaller
 *   Mobile  list, visual below
 */

.benefits {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.benefits__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-inline-size: 484px;
}

.benefits__lead {
  color: var(--color-text-secondary);
}

.benefits__layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.benefits__list {
  display: flex;
  flex-direction: column;
}

/* Benefits / Item — Default · Hover · Selected */
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  inline-size: 100%;
  padding: 20px;
  border-radius: 20px;
  text-align: start;
  transition: background-color var(--duration-press) var(--ease-out);
}

.benefit-item:hover {
  background: rgb(246 246 251 / 0.72);
}

.benefit-item[aria-expanded='true'] {
  background: var(--color-surface-subtle);
}

.benefit-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-action-focus);
}

.benefit-item > .icon {
  --icon-size: 32px;
}

.benefit-item__body {
  display: grid;
  flex: 1;
  min-width: 0;
}

.benefit-item__text {
  display: block;
  color: var(--color-text-secondary);
  overflow: hidden;
  block-size: 0;
  opacity: 0;
  transition: opacity var(--duration-card) var(--ease-out);
}

.benefit-item[aria-expanded='true'] .benefit-item__text {
  block-size: auto;
  margin-block-start: 12px;
  opacity: 1;
}

/* + / − toggle drawn with two bars (matches 24×24 plus/minus) */
.benefit-item__toggle {
  position: relative;
  flex: none;
  inline-size: 24px;
  aspect-ratio: 1;
  margin-block-start: 4px;
  color: rgb(0 0 0 / 0.45);
}

.benefit-item__toggle::before,
.benefit-item__toggle::after {
  content: '';
  position: absolute;
  inset: 11px 5px;
  border-radius: 2px;
  background: currentColor;
  transition: rotate var(--duration-card) var(--ease-out);
}

.benefit-item__toggle::after {
  rotate: 90deg;
}

.benefit-item[aria-expanded='true'] .benefit-item__toggle::after {
  rotate: 0deg;
}

/* ── Visual ─────────────────────────────────────────────── */

.benefits__visual {
  position: relative;
  inline-size: 100%;
  max-inline-size: 560px;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: var(--color-surface-subtle);
  container-type: inline-size;
}

.bn-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: bn-scene-in var(--duration-card) var(--ease-out);
}

@keyframes bn-scene-in {
  from { opacity: 0; filter: blur(10px); }
}

/* 560×560 artboard scaled to the visual's width — pure CSS via container units */
.bn-artboard {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 560px;
  block-size: 560px;
  overflow: hidden;
  translate: -50% -50%;
  scale: calc(100cqi / 560px);
}

@supports not (scale: calc(1cqi / 1px)) {
  .bn-artboard { scale: var(--bn-scale, 1); }
}

/* 1 · Service — skeleton thread from Figma, filled with a real dialogue.
   Client lines type inside their bubble, manager lines show a typing indicator first. */
.bn-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 32px 24px;
  transition: opacity 400ms var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 48px);
  mask-image: linear-gradient(180deg, transparent 0, #000 48px);
}

.bn-thread.is-fading { opacity: 0; }

.bn-bubble {
  flex: none;
  max-inline-size: var(--w);
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
  color: var(--color-text-primary);
  font: 400 14px/1.3 var(--font-sans);
}

/* Phones: undo the artboard scale for the text — 14/20 on screen */
@media (max-width: 767px) {
  .bn-bubble {
    padding: calc(10px / var(--bn-k, 1)) calc(14px / var(--bn-k, 1));
    font-size: calc(14px / var(--bn-k, 1));
    line-height: calc(20px / var(--bn-k, 1));
    max-inline-size: 82%;
  }
  .bn-thread { gap: calc(8px / var(--bn-k, 1)); padding-inline: calc(16px / var(--bn-k, 1)); }
}

.bn-bubble--left { align-self: flex-start; border-end-start-radius: 0; }
.bn-bubble--right { align-self: flex-end; border-end-end-radius: 0; }

/* client: caret while the line types */
.bn-bubble.is-typing::after {
  content: '';
  display: inline-block;
  inline-size: 2px;
  block-size: 1.1em;
  margin-inline-start: 1px;
  vertical-align: -0.15em;
  background: var(--color-text-secondary);
  animation: bn-caret 0.9s steps(1) infinite;
}

@keyframes bn-caret { 50% { opacity: 0; } }

/* manager: typing dots in place of the text */
.bn-bubble.is-waiting { display: flex; gap: 6px; }
.bn-bubble.is-waiting::before,
.bn-bubble.is-waiting::after,
.bn-bubble.is-waiting > i {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  animation: bn-dot 1s infinite ease-in-out;
}
.bn-bubble.is-waiting > i { animation-delay: 150ms; }
.bn-bubble.is-waiting::after { animation-delay: 300ms; }

@keyframes bn-dot {
  0%, 60%, 100% { translate: 0 0; opacity: 0.5; }
  30% { translate: 0 -5px; opacity: 1; }
}

.bn-skeleton {
  display: block;
  inline-size: var(--line);
  max-inline-size: 100%;
  block-size: 8px;
  border-radius: 99px;
  background: #f2f2f7;
}

/* 2 · Personal approach */
.bn-card {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 206px;
  padding: 16px;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  background: var(--color-surface-canvas);
  box-shadow: 0 6px 24px rgb(20 30 50 / 0.04);
}

.bn-card__title {
  color: #22242b;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.bn-card--input { inset-block-start: 76px; inset-inline-start: 53px; block-size: 152px; }
.bn-card--events { inset-block-start: 76px; inset-inline-start: 301px; block-size: 152px; align-items: stretch; gap: 4px; }
.bn-card--solutions { inset-block-start: 307px; inset-inline-start: 149px; inline-size: 262px; align-items: stretch; gap: 4px; }

.bn-card--events .bn-card__title,
.bn-card--solutions .bn-card__title {
  align-self: center;
  margin-block-end: 12px;
}

.bn-node {
  position: absolute;
  z-index: 1;
  inset-block-start: 44px;
  inset-inline-start: 93px;
  inline-size: 20px;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--color-border-default);
}

.bn-pill {
  position: absolute;
  z-index: 1;
  inline-size: 52px;
  block-size: 16px;
  border-radius: 99px;
  background: var(--color-border-default);
}

.bn-pill:nth-of-type(1) { inset-block-start: 80px; inset-inline-start: 16px; }
.bn-pill:nth-of-type(2) { inset-block-start: 80px; inset-inline-end: 16px; }
.bn-pill:nth-of-type(3) { inset-block-start: 120px; inset-inline-start: 16px; }
.bn-pill:nth-of-type(4) { inset-block-start: 120px; inset-inline-end: 16px; }

.bn-internal-line {
  position: absolute;
  z-index: 0;
  fill: none;
  stroke: var(--color-border-default);
  stroke-width: 1.5;
  stroke-linejoin: bevel;
  stroke-dasharray: 4 4;
}

.bn-internal-line--top-left { inset-block-start: 53.25px; inset-inline-start: 41.25px; inline-size: 49px; block-size: 24px; }
.bn-internal-line--top-right { inset-block-start: 53.25px; inset-inline-start: 116px; inline-size: 49px; block-size: 24px; }
.bn-internal-line--bottom-left { inset-block-start: 99.25px; inset-inline-start: 41.25px; inline-size: 2px; block-size: 18px; }
.bn-internal-line--bottom-right { inset-block-start: 99.25px; inset-inline-start: 163.25px; inline-size: 2px; block-size: 18px; }

.bn-event {
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 28px;
  padding: 0 10px;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}

.bn-status {
  flex: none;
  inline-size: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #48c78e;
}

.bn-status--wait { background: #f2ad4d; }
.bn-event .bn-skeleton { block-size: 6px; flex: 1 1 auto; }
.bn-event span { margin-inline-start: auto; color: #9da3af; font-size: 15px; }

.bn-connector {
  position: absolute;
  z-index: 0;
  inset-block-start: 228px;
  inline-size: 132.364px;
  block-size: 80px;
  overflow: visible;
}

.bn-connector--left { inset-inline-start: 155px; }
.bn-connector--right { inset-inline-start: 272.636px; }

.bn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 36px;
  padding: 0 10px;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}

.bn-row .bn-skeleton { block-size: 7px; }
.bn-chevron { color: #a0a6b2; font-size: 21px; }

.bn-switch {
  inline-size: 30px;
  block-size: 18px;
  padding: 2px;
  border-radius: 99px;
  background: var(--color-action-primary);
}

.bn-switch i {
  display: block;
  inline-size: 14px;
  aspect-ratio: 1;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--color-surface-canvas);
}

/* 3 · Withdrawal methods */
.bn-payout-hub {
  position: absolute;
  z-index: 2;
  inset-block-start: 108px;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 56px;
  padding: 12px 16px;
  translate: -50% 0;
  border: 1px solid #e7eaf0;
  border-radius: 99px;
  background: var(--color-surface-canvas);
  color: #23252d;
  font-size: 16px;
  line-height: 24px;
}

.bn-payout-hub svg { inline-size: 24px; block-size: 24px; }
.bn-payout-hub b { white-space: nowrap; font-weight: 500; }

.bn-payout-connector,
.bn-security-connector {
  position: absolute;
  z-index: 0;
  overflow: visible;
}

.bn-payout-connector--bybit { inset-block-start: 158px; inset-inline-start: 279.5px; inline-size: 196.864px; block-size: 165px; }
.bn-payout-connector--card { inset-block-start: 158px; inset-inline-start: 83.636px; inline-size: 197.864px; block-size: 165px; }
.bn-payout-connector--sbp { inset-block-start: 158px; inset-inline-start: 153.636px; inline-size: 127.864px; block-size: 215px; }
.bn-payout-connector--wechat { inset-block-start: 158px; inset-inline-start: 238.636px; inline-size: 42.864px; block-size: 235px; }
.bn-payout-connector--usdt { inset-block-start: 158px; inset-inline-start: 279.5px; inline-size: 41.864px; block-size: 235px; }
.bn-payout-connector--alipay { inset-block-start: 158px; inset-inline-start: 279.5px; inline-size: 126.864px; block-size: 215px; }

.bn-payout-recipient {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 60px;
  aspect-ratio: 1;
  border: 1px solid #e7eaf0;
  border-radius: 50%;
  background: var(--color-surface-canvas);
}

.bn-payout-recipient svg { inline-size: 32px; block-size: 32px; }
.bn-payout-recipient--card { inset-block-start: 322px; inset-inline-start: 61px; }
.bn-payout-recipient--sbp { inset-block-start: 372px; inset-inline-start: 131px; }
.bn-payout-recipient--wechat { inset-block-start: 392px; inset-inline-start: 216px; }
.bn-payout-recipient--usdt { inset-block-start: 392px; inset-inline-start: 284px; }
.bn-payout-recipient--alipay { inset-block-start: 372px; inset-inline-start: 369px; }
.bn-payout-recipient--bybit { inset-block-start: 322px; inset-inline-start: 439px; }

/* 4 · Low fee */
.bn-scene--fee strong {
  position: relative;
  z-index: 1;
  color: var(--color-action-primary);
  font-size: clamp(64px, 21cqi, 120px);
  line-height: 1;
}

.bn-particles {
  position: absolute;
  inset: -8%;
  opacity: 0.32;
  background-image: radial-gradient(circle, #168eff 1.6px, transparent 2px);
  background-size: 46px 40px;
  transform: rotate(9deg) scale(1.12);
  animation: bn-particles-drift 18s linear infinite alternate;
}

@keyframes bn-particles-drift {
  to { background-position: 46px 80px; }
}

/* 5 · Security */
.bn-security-connector { fill: none; }
.bn-security-connector--fraud { inset-block-start: 157px; inset-inline-start: 143px; inline-size: 135px; block-size: 89px; }
.bn-security-connector--encryption { inset-block-start: 157px; inset-inline-start: 276px; inline-size: 130.5px; block-size: 89px; }
.bn-security-connector--monitoring { inset-block-start: 314px; inset-inline-start: 150.5px; inline-size: 127.5px; block-size: 89px; }
.bn-security-connector--secure { inset-block-start: 314px; inset-inline-start: 276px; inline-size: 126px; block-size: 89px; }

.bn-security-feature {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 184px;
  padding: 12px 16px 12px 12px;
  border: 1px solid #e7eaf0;
  border-radius: 20px;
  background: var(--color-surface-canvas);
  font-size: 16px;
  line-height: 24px;
}

.bn-security-feature b { font-weight: 700; white-space: nowrap; }

.bn-security-feature > span {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  aspect-ratio: 1;
  border-radius: 12px;
}

.bn-security-feature svg { inline-size: 24px; block-size: 24px; }
.bn-security-feature--fraud { inset-block-start: 89px; inset-inline-start: 63px; }
.bn-security-feature--fraud > span { background: #fff2e8; }
.bn-security-feature--encryption { inset-block-start: 89px; inset-inline-start: 313px; }
.bn-security-feature--encryption > span { background: #f0eefc; }
.bn-security-feature--monitoring { inset-block-start: 403px; inset-inline-start: 62px; }
.bn-security-feature--monitoring > span { background: #eaf8f1; }
.bn-security-feature--secure { inset-block-start: 403px; inset-inline-start: 320px; }
.bn-security-feature--secure > span { background: var(--color-accent-blue-light); }

.bn-security-payment {
  position: absolute;
  z-index: 2;
  inset-block-start: 246px;
  inset-inline-start: 124px;
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 312px;
  min-block-size: 68px;
  padding: 12px;
  border: 1px solid #e7eaf0;
  border-radius: 20px;
  background: var(--color-surface-canvas);
}

.bn-security-payment > svg { flex: none; inline-size: 44px; block-size: 44px; border-radius: 12px; }
.bn-security-payment > span { display: flex; flex-direction: column; min-width: 0; }
.bn-security-payment b { font-size: 16px; line-height: 24px; font-weight: 700; white-space: nowrap; }
.bn-security-payment small { color: rgb(0 0 0 / 0.45); font-size: 14px; line-height: 20px; }
.bn-security-payment strong { margin-inline-start: auto; color: #ff3d42; font-size: 20px; line-height: 28px; white-space: nowrap; }

/* ── Breakpoints ─────────────────────────────────────────── */

@media (min-width: 768px) {
  .benefits__head { gap: 16px; }
  .benefits__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .benefits { gap: 60px; }
  .benefits__layout {
    grid-template-columns: minmax(0, 560px) minmax(0, 560px);
    justify-content: space-between;
    column-gap: clamp(40px, 11.11vw, 160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn-particles { animation: none; }
}

/* Client Lottie particles (benefits-particles.json, 518×518) replace the dot pattern once drawn */
.bn-lottie { position: absolute; inset: 0; pointer-events: none; }
.motion .bn-scene--fee:has(.bn-lottie) .bn-particles { display: none; } /* client Lottie only, no static flash */

/* styles/components/banners.css */
/*
 * Commission card (569:11875) and social banner (899:20068)
 *   Desktop  max 1024 / 1040 wide, centred, padding 40, radius 40
 *   Tablet   padding 24, radius 40, row
 *   Mobile   padding 20×16, radius 32, column, buttons full width
 */

.commission,
.social-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-inline: auto;
  padding: 20px 16px;
  border-radius: 32px;
  overflow: hidden;
}

/* ── Commission ─────────────────────────────────────────── */

.commission {
  max-inline-size: 1024px;
  background: var(--color-surface-subtle);
}

.commission__copy {
  display: contents; /* mobile: text → metric → button, as in Figma */
}

.commission__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.commission__lead {
  color: var(--color-text-secondary);
}

.commission__cta {
  order: 3;
  inline-size: 100%;
}

.commission__metric {
  position: relative;
  align-self: flex-start;
  color: var(--color-action-primary);
}

.commission__metric .t-metric {
  position: relative;
  display: block;
}

.commission__particles {
  position: absolute;
  inset: -40% -14%;
  inline-size: 128%;
  block-size: 180%;
  pointer-events: none;
}

/* Slow drift, like the prototype's fee scene (benefit-particles-drift). Interim until the
   client's particle source arrives; off with reduced motion (no .motion class) */
.motion .commission__particles { animation: commission-drift 9s ease-in-out infinite alternate; }

@keyframes commission-drift {
  from { translate: -10px 6px; }
  to { translate: 10px -6px; }
}

@media (min-width: 768px) {
  .commission {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 24px;
    border-radius: 40px;
  }

  .commission__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 1 593px;
    min-width: 0;
  }

  .commission__text { gap: 16px; }
  .commission__cta { inline-size: auto; }
  .commission__metric { align-self: center; flex: none; }
}

@media (min-width: 1024px) {
  .commission { padding: 40px; }
}

/* ── Social banner ──────────────────────────────────────── */

.social-banner {
  max-inline-size: 1040px;
  background: var(--color-action-primary) url('../images/icons/particles-banner.svg') center / cover no-repeat;
  color: var(--color-text-on-primary);
  text-align: center;
}

.social-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Prototype connect-particles: two Lottie lanes (one on phones); the static Figma
   particles stay as the background until the animation is drawn */
.social-banner.is-live { background-image: none; }
.social-banner__particles { position: absolute; inset: 0; z-index: -1; display: flex; pointer-events: none; }
.social-banner__particles > div { flex: 0 0 50%; block-size: 100%; overflow: hidden; }
@media (max-width: 600px) {
  .social-banner__particles > div:first-child { flex-basis: 100%; }
  .social-banner__particles > div:nth-child(2) { display: none; }
}

.social-banner__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-banner__lead {
  color: #eaf6ff; /* Figma: unbound */
}

.social-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-banner__actions .btn {
  inline-size: 100%;
}

@media (min-width: 768px) {
  .social-banner {
    align-items: center;
    gap: 32px;
    padding: 24px;
    border-radius: 40px;
  }

  .social-banner__text { gap: 16px; }

  .social-banner__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-banner__actions .btn { inline-size: auto; }
}

@media (min-width: 1024px) {
  .social-banner { padding: 40px; }
}

/* Client Lottie particles (commission-conditions-particles.json, 1024×272 — the card itself);
   static particles stay only for reduced motion */
.commission__lottie { position: absolute; inset: 0; pointer-events: none; }
.motion .commission__particles { display: none; }
.commission__copy, .commission__metric { position: relative; z-index: 1; }

/* Phones: the client's mobile Lottie (153×72) sits around «от 1%» only, not the whole card */
.commission__lottie-m { display: none; position: absolute; inset: -40% -14%; pointer-events: none; }
@media (max-width: 767px) {
  .commission__lottie { display: none; }
  .commission__lottie-m { display: block; }
}

/* styles/components/solutions.css */
/*
 * «Решения» — Figma «Block solutions» (880:18453)
 *
 *   ≥768   visual | text, features, CTA   (desktop column gap 120 @1440, 80 on SaaS frame)
 *   Mobile text → visual → features → CTA (Figma mobile frame order)
 * Tabs scroll horizontally when they don't fit (see tabs.css).
 */

.solutions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.solutions__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
  text-align: center;
}

.solutions__tabs {
  max-inline-size: 100%;
}

.solutions__panel {
  display: grid;
  grid-template-areas:
    'text'
    'visual'
    'features'
    'cta';
  gap: 24px;
  align-items: start;
}

.solutions__panel:not([hidden]) {
  animation: bn-scene-in var(--duration-card) var(--ease-out);
}

.solutions__text { grid-area: text; display: flex; flex-direction: column; gap: 16px; }
.solutions__visual { grid-area: visual; }
.solutions__features { grid-area: features; }
.solutions__cta { grid-area: cta; justify-self: start; }

.solutions__muted {
  color: var(--color-text-secondary);
}

.solutions__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 20px clamp(24px, 6vw, 100px);
}

.solutions__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #151515; /* Figma: unbound */
  font-size: 16px;
  line-height: 24px;
}

.solutions__panel { --sol-accent: var(--color-action-primary); }
/* Feature icons take the tab's accent — Figma «Block solutions» (880:18453) */
.solutions__panel--shop { --sol-accent: var(--color-accent-cyan); }
.solutions__panel--telegram { --sol-accent: var(--color-accent-blue); }
.solutions__panel--saas { --sol-accent: #a67800; } /* Figma: unbound */
.solutions__panel--market { --sol-accent: var(--color-accent-indigo); }
.solutions__panel--services { --sol-accent: var(--color-accent-green); }

.solutions__features .icon {
  color: var(--sol-accent);
}

@media (min-width: 768px) {
  .solutions { gap: 40px; }
  .solutions__panel { row-gap: 20px; }
  .solutions__cta { margin-block-start: 4px; }
  .solutions__features { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }

  /* Figma reads row-major on tablet: «Без двойного списания» sits mid second row */
  .solutions__features li:nth-child(2) { grid-area: 2 / 2; }
}

@media (min-width: 1024px) {
  .solutions__features { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(24px, 6vw, 100px); }
  .solutions__cta { margin-block-start: 0; }
  .solutions__features li:nth-child(2) { grid-area: auto; }

  .solutions__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'visual text'
      'visual features'
      'visual cta';
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 8.33vw, 120px);
    row-gap: 40px;
  }
}

/* ── Visual: 625×518 artboard scaled to the column width ── */

.solutions__visual {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 625 / 518;
  overflow: hidden;
  border-radius: clamp(24px, 4cqi, 40px);
  background: var(--color-surface-subtle);
  container-type: inline-size;
}

.sl-artboard {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 625px;
  block-size: 518px;
  translate: -50% -50%;
  scale: calc(100cqi / 625px);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

@supports not (scale: calc(1cqi / 1px)) {
  .sl-artboard { scale: var(--sl-scale, 1); }
}

.sl-stack { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.sl-stack b { font-weight: 500; }
.sl-stack small { color: var(--color-text-secondary); font-size: 14px; line-height: 20px; }

.sl-tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  aspect-ratio: 1;
  border-radius: 12px;
}

.sl-tile--blue { background: var(--color-accent-blue-light); color: var(--color-action-primary); }
.sl-tile--indigo { background: var(--color-accent-indigo-light); color: var(--color-accent-indigo); }
.sl-tile--green { background: var(--color-accent-green-light); color: var(--color-accent-green); }
.sl-tile .icon { --icon-size: 28px; }
.sl-blue { color: var(--color-action-primary); }

.sl-pay {
  display: grid;
  place-items: center;
  block-size: 48px;
  border-radius: 13px;
  background: #232323; /* Figma: unbound */
  color: var(--color-text-on-primary);
}

.sl-pay--small { block-size: 36px; border-radius: 8px; font-size: 14px; }

/* Shop — checkout card (370 wide) */
.sl-checkout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 370px;
  padding: 20px;
  border-radius: 22px;
  background: var(--color-surface-canvas);
}

.sl-checkout__title { font-size: 20px; line-height: 28px; }
.sl-product { display: flex; align-items: center; gap: 8px; }
.sl-product__thumb { flex: none; inline-size: 60px; block-size: 60px; }
.sl-product__meta { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.sl-product__meta b { color: #1b1d23; font-size: 14px; line-height: 20px; font-weight: 500; }
.sl-product__meta small { color: #9096a3; font-size: 12px; line-height: 16px; font-weight: 400; }
.sl-divider { block-size: 1px; border: 0; background: rgb(0 0 0 / 0.04); }
.sl-label { font-size: 14px; line-height: 20px; }
.sl-methods { display: flex; gap: 8px; }

.sl-method {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  font-size: 12px;
  line-height: 16px;
}

.sl-method.is-active { border-color: var(--color-accent-cyan); }
.sl-method .icon { color: var(--color-action-primary); }

/* Telegram — chat */
.sl-chat {
  display: flex;
  flex-direction: column;
  gap: 20px;
  inline-size: 500px;
}

.sl-bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: fit-content;
  min-inline-size: 291px;
  padding: 20px;
  border-radius: 24px;
  background: var(--color-surface-canvas);
}

.sl-bubble--in { align-self: flex-start; border-end-start-radius: 0; }
.sl-bubble--out { align-self: flex-end; min-inline-size: 0; border-end-end-radius: 0; }
.sl-bubble--row { flex-direction: row; align-items: center; gap: 8px; }
.sl-bubble--in.sl-bubble--row { gap: 12px; }
.sl-bubble--in:has(.sl-pay) { min-inline-size: 291px; }

.sl-bubble i,
.sl-order__line {
  display: block;
  inline-size: var(--line, 100%);
  max-inline-size: 100%;
  block-size: 8px;
  border-radius: 99px;
  background: #f2f2f7;
}

/* SaaS — account window 478×340 */
.sl-window {
  display: flex;
  flex-direction: column;
  inline-size: 478px;
  block-size: 340px;
  padding: 16px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
}

.sl-window__dots { display: flex; gap: 6px; padding-block-end: 12px; border-block-end: 1px solid var(--color-surface-subtle); }
.sl-window__dots i { inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background: #e7eaf0; }
.sl-window__body { display: flex; flex: 1; }

.sl-window__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  inline-size: 143px;
  padding: 16px 16px 0 0;
  border-inline-end: 1px solid var(--color-surface-subtle);
}

.sl-window__side i { block-size: 28px; border-radius: 8px; background: var(--color-surface-subtle); }
.sl-window__side .sl-window__bottom { margin-block-start: auto; }

.sl-window__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 0 16px;
  text-align: center;
}

.sl-window__main b { font-weight: 600; }
.sl-window__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sl-window__cards i { block-size: 121px; border-radius: 8px; background: var(--color-surface-subtle); }
.sl-window__row { block-size: 20px; border-radius: 8px; background: var(--color-surface-subtle); }

/* Marketplace — order splits to sellers + platform fee */
.sl-artboard--market { display: block; }

.sl-order {
  position: absolute;
  inset-block-start: 52px;
  inset-inline-start: 210px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  inline-size: 206px;
  padding: 16px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.sl-order b { margin-block-end: 8px; font-weight: 500; }

.sl-order__row {
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 28px;
  padding: 0 10px;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}

.sl-order__line { flex: 0 0 80px; }
.sl-order__row .sl-dot:last-child { margin-inline-start: auto; }
.sl-dot { inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent-indigo); }

.sl-trunk {
  position: absolute;
  inset-block: 204px 100px;
  inset-inline-start: 313.5px;
  inline-size: 1px;
  background: #e6eaf0;
}

.sl-node {
  position: absolute;
  inset-block-start: 236px;
  inset-inline-start: 304px;
  inline-size: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6eaf0;
}

.sl-curve { position: absolute; inset-block-start: 246px; }
.sl-curve--left { inset-inline-start: 207px; inline-size: 98px; }
.sl-curve--right { inset-inline-start: 324px; inline-size: 95px; }

.sl-seller {
  position: absolute;
  inset-block-start: 301px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
}

.sl-seller--left { inset-inline-start: 32px; }
.sl-seller--right { inset-inline-start: 417px; }

.sl-fee {
  position: absolute;
  inset-block-start: 418px;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  translate: -50% 0;
  border-radius: 99px;
  background: var(--color-surface-canvas);
  white-space: nowrap;
}

/* Services — calendar + booking toast */
.sl-booking { display: flex; flex-direction: column; gap: 12px; }

.sl-calendar {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 4px;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
  text-align: center;
}

.sl-calendar__wd { padding-block-end: 8px; color: #bfbfbf; font-size: 14px; line-height: 32px; }

.sl-calendar__day {
  display: grid;
  place-items: center;
  block-size: 32px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
  font-size: 14px;
}

.sl-calendar__day.is-picked { background: var(--color-accent-green); color: var(--color-text-on-primary); }

.sl-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
}

/* Mobile frame 673:* shows the full labels in a scrolling row; short labels stay for later use. */
.solutions__tab-short { display: none; }

/* Tablet 637:4002: wide, low canvas; the 625 artboard shrinks to ~0.85 at 704 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .solutions__visual { aspect-ratio: 704 / 360; }
  .sl-artboard { scale: calc(100cqi / 828px); }
}

/* Mobile 673:*: card fills the canvas; features wrap by content width */
@media (max-width: 767.98px) {
  .solutions__visual { aspect-ratio: 358 / 340; }
  /* only the checkout card is designed to fill the phone canvas; the other scenes are
     compositions across the whole 625px artboard and were cropped at that zoom */
  .sl-artboard { scale: calc(100cqi / 625px); }
  .sl-artboard--shop { scale: calc(100cqi / 370px); }
  .solutions__cta { justify-self: stretch; }
  .solutions__features { display: flex; flex-wrap: wrap; gap: 16px 24px; }
}

/* styles/components/hero-home.css */
/*
 * Home hero — Figma 947:27597 (1440) · 980:11510 (768) · 980:11769 (390)
 *   padding-top: 160 mobile · 132 tablet/desktop (leaves room for the fixed header)
 *   phone: 312 · 358 · 348 wide; sky image covers the section, 48px fade to white at the bottom.
 */

.hero-home {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 120px 16px;
  background: #7fb6f2 url('../images/hero-sky.webp') center top / cover no-repeat;
  overflow: hidden;
}

.hero-home::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 48px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.08) 33%, rgb(255 255 255 / 0.72) 78%, #fff 100%);
  pointer-events: none;
}

.hero-home__copy,
.hero-home__visual { position: relative; z-index: 1; pointer-events: none; }
.hero-home__copy > *, .hero-home__phone { pointer-events: auto; }

.hero-home__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.hero-home__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero-home__text h1 {
  max-inline-size: 1024px;
}

.hero-home__lead {
  max-inline-size: 342px;
}

.hero-home__visual {
  display: flex;
  justify-content: center;
  padding-block: 15px;
}

.hero-home__phone {
  inline-size: 312px;
  max-inline-size: calc(100% - 2 * var(--gutter));
  block-size: auto;
}

@media (min-width: 768px) {
  .hero-home {
    gap: 32px;
    padding-block-start: 120px;
  }

  .hero-home__copy { gap: 32px; }
  .hero-home__text { gap: 16px; }
  .hero-home__text h1 { max-inline-size: 598px; }
  .hero-home__lead { max-inline-size: 672px; }
  .hero-home__visual { padding-block: 17px 21px; }
  .hero-home__phone { inline-size: 358px; }
}

@media (min-width: 1024px) {
  .hero-home { padding-block-end: 32px; }
  .hero-home__text h1 { max-inline-size: 1024px; }
  .hero-home__visual { padding-block: 12px; }
  .hero-home__phone { inline-size: 348px; }
}

/* styles/components/home-blocks.css */
/* Home-only blocks: integrations logo field, business models, assurance card. */

/* ── Integrations — 569:11776 ───────────────────────────── */

.integrations-home {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

.integrations-home__lead {
  max-inline-size: 600px;
}

.integrations-home__cta {
  margin-block-start: 8px;
}

.logo-scene {
  position: relative;
  inline-size: 100%;
  block-size: clamp(320px, 36vw, 520px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* vertical page scroll stays native on touch */
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 0 48%, #000e 62%, #0006 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 48% at 50% 50%, #000 0 48%, #000e 62%, #0006 82%, transparent 100%);
}

.logo-scene.is-dragging { cursor: grabbing; }
.logo-scene__field { position: absolute; inset: 0; }

.integration-tile {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 104px;
  block-size: 104px;
  border: 1px solid rgb(21 27 39 / 0.065);
  border-radius: 24px;
  background: var(--color-surface-canvas);
  box-shadow: 0 4px 8px #16223505;
  will-change: transform, opacity;
}

.integration-tile img {
  inline-size: 72px;
  block-size: 72px;
  object-fit: contain;
  border-radius: 13px;
  pointer-events: none;
}

@media (max-width: 767px) {
  .logo-scene { inline-size: 140%; margin-inline: -20%; }
}

/* ── Business models — 569:13662 ────────────────────────── */

.business {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.business__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.business__grid > li {
  display: flex;
  flex: 1 1 100%;
}

.business__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duration-card) var(--ease-out);
}

@media (hover: hover) {
  .business__card:hover { transform: scale(1.015); } /* same as .article-card hover */
}

.business__card:focus-visible { outline: 2px solid var(--color-action-focus); outline-offset: 2px; }

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

.business__icon {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
}

.business__muted { color: var(--color-text-secondary); }

.business__exclusions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  inline-size: 100%;
  max-inline-size: 904px;
  margin-inline: auto;
}

.business__divider {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 24px;
}

.business__divider::before,
.business__divider::after {
  content: '';
  flex: 1;
  block-size: 1px;
  background: var(--color-surface-disabled);
}

.business__blocked {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  padding: 16px 20px;
  border-radius: 20px;
  background: #ffe8e8; /* Figma: unbound */
}

.business__blocked li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 24px;
}

.business__blocked svg { inline-size: 24px; block-size: 24px; }

/* Red dot separators between items (desktop) */
@media (min-width: 768px) {
  .business { gap: 32px; }
  .business__grid { gap: 24px; }
  .business__grid > li { flex: 0 1 calc((100% - 24px) / 2); }
  .business__card { padding: 28px; }
  .business__blocked li + li::before {
    content: '';
    inline-size: 6px;
    aspect-ratio: 1;
    margin-inline-end: 18px;
    border-radius: 50%;
    background: var(--color-accent-red);
  }
}

@media (min-width: 1024px) {
  .business { gap: 60px; }
  .business__grid { gap: 24px; }
  .business__grid > li { flex: 0 1 calc((100% - 48px) / 3); }
  .business__exclusions { margin-block-start: -36px; } /* Figma: 24 below cards */
}

/* ── Assurance — 569:13723 ─────────────────────────────── */

.assurance {
  display: grid;
  gap: 24px;
  max-inline-size: 1024px;
  margin-inline: auto;
  padding: 24px 16px 20px;
  border-radius: 32px;
  background: var(--color-surface-subtle);
}

.assurance__text { display: flex; flex-direction: column; gap: 12px; }

/* Figma: Mobile/Tablet Subheading (24/32 · 28/36), Desktop Section (44/52) */
.assurance__text .t-section { --fs-m: 24; --fs-t: 28; --lh-m: 32; --lh-t: 36; font-weight: 600; letter-spacing: 0; }
@media (min-width: 1024px) { .assurance__text .t-section { font-weight: 700; letter-spacing: -0.0227em; } }
.assurance__lead { color: var(--color-text-secondary); }

.assurance__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assurance__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
}

.assurance__chip > span:last-child { display: flex; flex-direction: column; }
.assurance__chip b { font-size: 16px; line-height: 24px; font-weight: 500; }
.assurance__chip small { color: var(--color-text-secondary); font-size: 14px; line-height: 20px; }

.assurance__tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  aspect-ratio: 1;
  border-radius: 8px;
}

.assurance__tile svg { inline-size: 32px; block-size: 32px; }
.assurance__chip--encryption .assurance__tile { background: #f0eefc; }
.assurance__chip--verify .assurance__tile { background: var(--color-accent-blue-light); }
.assurance__chip--antifraud .assurance__tile { background: var(--color-accent-orange-light); }

.assurance__cta { inline-size: 100%; }

@media (min-width: 768px) {
  .assurance {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'text stack'
      'cta  stack';
    align-items: center;
    column-gap: 40px;
    padding: 40px;
    border-radius: 40px;
  }

  .assurance__text { grid-area: text; align-self: end; gap: 16px; }
  .assurance__cta { grid-area: cta; align-self: start; inline-size: auto; justify-self: start; }
  .assurance__stack { grid-area: stack; }

  /* Staggered chips (desktop composition) */
  .assurance__stack { gap: 12px; }
  .assurance__chip { padding: 8px 12px 8px 8px; border-radius: 16px; }
  .assurance__chip--encryption { margin-inline-start: 67px; }
  .assurance__chip--antifraud { margin-inline-start: 75px; }
}

@media (min-width: 1024px) {
  .assurance__stack { gap: 32px; }
  .assurance__chip { padding: 12px 16px 12px 12px; border-radius: 20px; }
  .assurance__chip--encryption { margin-inline-start: 110px; }
  .assurance__chip--antifraud { margin-inline-start: 120px; }
}

@media (min-width: 1024px) {
  .assurance { padding: 40px 40px 40px; }
}

/* styles/components/pages.css */
/* Inner-page building blocks: page hero, acceptance cards, feature split + their illustrations. */

/* ── Page hero (products 1009:20837) ────────────────────── */

.page-hero {
  position: relative;
  padding-block: 120px 48px;
  background: #b5d6f7 url('../images/page-hero-sky.webp') center top / cover no-repeat;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 48px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.08) 33%, rgb(255 255 255 / 0.72) 78%, #fff 100%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.page-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.page-hero__text h1 { max-inline-size: 1024px; }
.page-hero__lead { max-inline-size: 672px; }

@media (min-width: 768px) {
  .page-hero { padding-block: 120px 32px; } /* tablet: 116 from CTA to the next title */
  .page-hero__inner { gap: 32px; }
  .page-hero__text { gap: 16px; }
}

@media (min-width: 1024px) {
  .page-hero { padding-block-end: 80px; }
}

/* ── Acceptance (314:58932) ─────────────────────────────── */

.acceptance { display: flex; flex-direction: column; gap: 20px; }
.acceptance__head { max-inline-size: 597px; margin-inline: auto; }

.acceptance__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* odd last card sits centred on tablet */
  gap: 12px;
}

.acceptance__grid > * { flex: 1 1 100%; }

.acceptance__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.acceptance__intro { display: flex; flex-direction: column; gap: 12px; }
.acceptance__title { --fs-m: 24; --lh-m: 32; display: flex; align-items: center; gap: 8px; } /* Figma mobile keeps 24/32 */
.acceptance__icons { display: flex; gap: 4px; }
.acceptance__muted { color: var(--color-text-secondary); }
.acceptance__divider { block-size: 1px; border: 0; border-radius: 99px; background: var(--color-border-default); }

.acceptance__items { display: flex; flex-direction: column; gap: 28px; }
.acceptance__items li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 24px; }
.acceptance__items li > .icon { color: var(--color-action-primary); }
.acceptance__items div { display: flex; flex-direction: column; gap: 4px; }
.acceptance__items b { font-weight: 500; }

@media (min-width: 768px) {
  .acceptance { gap: 32px; }
  .acceptance__grid { align-items: flex-start; }
  .acceptance__grid > * { flex: 0 1 calc((100% - 12px) / 2); }
}

@media (min-width: 1024px) {
  .acceptance { gap: 60px; }
  .acceptance__grid { flex-wrap: nowrap; align-items: stretch; gap: 24px; }
  .acceptance__grid > * { flex: 1 1 0; }
  .acceptance__card { padding: 28px; }
}

/* ── Feature split (326:59176 · 231:54451 · 231:54455) ──── */

.split {
  display: grid;
  grid-template-areas: 'text' 'visual' 'features';
  gap: 20px;
}

.split__text { grid-area: text; display: flex; flex-direction: column; gap: 12px; }
.split__visual { grid-area: visual; }
.split__features { grid-area: features; display: flex; flex-direction: column; gap: 16px; }
.split__lead { color: var(--color-text-secondary); }

.split__features li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; }
.split__features .icon { color: var(--color-action-primary); }

@media (min-width: 768px) {
  .split { gap: 24px; }
}

/* Tablet keeps the stacked mobile order (1009:21390); side-by-side from desktop. */
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 518fr) minmax(0, 529fr);
    grid-template-areas:
      'visual text'
      'visual features';
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 13.75vw, 197px); /* 1440: 80 + 518 + 197 + 529 */
    row-gap: 32px;
    align-items: center;
  }

  .split__text { gap: 16px; align-self: end; }
  .split__features { align-self: start; }

  .split--reverse {
    grid-template-columns: minmax(0, 476fr) minmax(0, 518fr);
    grid-template-areas:
      'text visual'
      'features visual';
    column-gap: clamp(32px, 15.97vw, 226px); /* 1440: 140 + 476 + 226 + 518 */
  }

  .split--reverse { padding-inline-start: calc(var(--gutter) + clamp(0px, 4.17vw, 60px)); }
}

/* Illustration canvases */
.art {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--color-surface-subtle);
  container-type: inline-size;
}

.art--square { aspect-ratio: 1; }

.art__board {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
}

.art__board--518x518 {
  inline-size: 518px;
  block-size: 518px;
  scale: calc(100cqi / 518px);
}

@supports not (scale: calc(1cqi / 1px)) {
  .art__board--518x518 { scale: var(--art-scale, 1); }
}

/* Mass payouts tree (content group at 40,96 in the 518 board) */
.mp { position: absolute; inset: 96px 40px auto; block-size: 344px; }

.mp__source {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 150px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 99px;
  background: var(--color-surface-canvas);
  font-size: 16px;
  line-height: 24px;
}

.mp__source .icon { color: var(--color-action-primary); }

.mp__line { position: absolute; inset-block-start: 50px; }
.mp__line--1 { inset-inline-start: 22px; inline-size: 198px; }
.mp__line--2 { inset-inline-start: 92px; inline-size: 128px; }
.mp__line--3 { inset-inline-start: 177px; inline-size: 43px; }
.mp__line--4 { inset-inline-start: 219.5px; inline-size: 42px; }
.mp__line--5 { inset-inline-start: 219.5px; inline-size: 127px; }
.mp__line--6 { inset-inline-start: 219.5px; inline-size: 197px; }

.mp__user {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-canvas);
  color: var(--color-text-tertiary);
}

.mp__user--1 { inset-block-start: 214px; inset-inline-start: 0; }
.mp__user--2 { inset-block-start: 264px; inset-inline-start: 70px; }
.mp__user--3 { inset-block-start: 284px; inset-inline-start: 155px; }
.mp__user--4 { inset-block-start: 284px; inset-inline-start: 223px; }
.mp__user--5 { inset-block-start: 264px; inset-inline-start: 308px; }
.mp__user--6 { inset-block-start: 214px; inset-inline-start: 378px; }

.mp__check { position: absolute; z-index: 1; color: var(--color-action-primary); }
.mp__check--1 { inset-block-start: 210px; inset-inline-start: 40px; }
.mp__check--3 { inset-block-start: 280px; inset-inline-start: 195px; }
.mp__check--5 { inset-block-start: 260px; inset-inline-start: 348px; }

/* Withdrawal methods card (378 wide in a 518×406 canvas) */
.art--wide { display: grid; place-items: center; padding: clamp(16px, 13.5cqi, 70px); }

.wd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: 378px;
  padding: 16px;
  border-radius: 28px;
  background: var(--color-surface-canvas);
}

.wd__title { font-size: 14px; line-height: 20px; }
.wd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.wd__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.wd__method.is-active { border-color: var(--color-action-primary); }
.wd__method .icon { color: var(--color-action-primary); }

/* Analytics table card (462 wide, 28 inset) */
.art--wide:has(.an) { padding: clamp(16px, 5.4cqi, 28px); }

.an {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  padding: 16px;
  border-radius: 24px;
  background: var(--color-surface-canvas);
  font-size: 12px;
  line-height: 16px;
}

.an__dots { display: flex; gap: 6px; }
.an__dots i { inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background: #e7eaf0; }
.an__title { font-size: 14px; line-height: 20px; }
.an__filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.an__filters span { display: flex; flex-direction: column; gap: 4px; }
.an__filters i:first-child { inline-size: 40px; block-size: 6px; border-radius: 4px; background: var(--color-surface-subtle); }
.an__filters i:last-child { block-size: 28px; border-radius: 8px; background: var(--color-surface-subtle); }

.an__table { inline-size: 100%; border-collapse: collapse; }
.an__table th { padding-block: 4px 8px; border-block-end: 1px solid var(--color-surface-subtle); color: var(--color-text-tertiary); font-weight: 400; text-align: start; }
.an__table td { padding-block: 5px; }
.an__status--ok { color: var(--color-accent-green); }
.an__status--fail { color: var(--color-accent-red); }
.an__status--wait { color: var(--color-accent-yellow); }

/* ── FAQ page (231:55603) — groups of 576-wide items ────── */
.page--tight { gap: 0; }
.page--tight > .page-hero { padding-block-end: 72px; } /* tablet/mobile 703:97674 · 703:98193 */
@media (min-width: 1024px) { .page--tight > .page-hero { padding-block-end: 40px; } }

.faq-topics {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block-end: var(--section-gap);
}

.faq-topics__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  inline-size: 100%;
  max-inline-size: 576px;
  margin-inline: auto;
}

/* ── Contacts (231:55709) ───────────────────────────────── */
.page--contacts { --section-gap: clamp(60px, 8.33vw, 120px); }
/* Sky covers only the top (Figma: fades to white at 294–394), cards sit on white */
.page-hero--contacts { --sky-h: clamp(300px, 27.4vw, 394px); padding-block-end: 0; background: none; }
.page-hero--contacts::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  block-size: var(--sky-h);
  background: #b5d6f7 url('../images/page-hero-sky.webp') center top / cover no-repeat;
}
.page-hero--contacts::after { inset-block: calc(var(--sky-h) - 100px) auto; block-size: 100px; }

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  inline-size: 100%;
  margin-block-start: 28px;
  text-align: start;
}

.channels__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-surface-subtle);
}

.channels__text { display: flex; flex-direction: column; gap: 16px; }
.channels__title { display: flex; align-items: center; gap: 8px; }
.channels__muted { color: var(--color-text-secondary); }
.channels__card [data-copy].is-copied { border-color: var(--color-accent-green); }

/* Mobile 673:*: full-width buttons, cards start below the sky */
@media (max-width: 767.98px) {
  .channels { margin-block-start: 62px; }
  .channels__card { align-items: stretch; }
}

/* Tablet: two columns, mail card spans the row, cards tuck under the CTA */
@media (min-width: 768px) {
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 4px; }
  .channels__card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 60px; }
  .channels__card:last-child { grid-column: auto; }
  .channels__card { padding: 28px; }
}
.channels__title > .icon { color: var(--color-accent-orange); }

/* ── Blog (231:55831) — 3 columns, gap 40/32 ─────────────── */
.page--blog { gap: 60px; }
.page--blog > .page-hero { padding-block-end: 32px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 40px 32px;
}

@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.article-card { display: flex; flex-direction: column; gap: 8px; }
.article-card__link { display: flex; flex-direction: column; gap: 16px; border-radius: 20px; }
.article-card__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-action-focus); }

.article-card__cover {
  inline-size: 100%;
  aspect-ratio: 405 / 228;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-surface-subtle);
  transition: transform var(--duration-card) var(--ease-out);
}

.article-card__link:hover .article-card__cover { transform: scale(1.015); }
.article-card__date { color: var(--color-text-secondary); }

/* ── Article (231:55919) — media 871, text ~600 ──────────── */
.page-hero--article { padding-block-end: 32px; }
.page-hero--article .page-hero__inner { gap: 16px; }
.article-top__title { max-inline-size: 856px; }
.article-top { display: flex; flex-direction: column; gap: 40px; }

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-inline-size: calc(871px + 2 * var(--gutter));
}

.article__media {
  inline-size: 100%;
  aspect-ratio: 871 / 500;
  object-fit: cover;
  border-radius: 20px;
}

.article__text,
.article__section { inline-size: 100%; max-inline-size: 600px; }
.article__text { font-size: 16px; line-height: 24px; }
.article__section { display: flex; flex-direction: column; gap: 24px; }

/* Mobile 673:*: tighter reading rhythm */
@media (max-width: 767.98px) {
  .article { gap: 28px; }
  .article__section { gap: 12px; }
}

.article__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  inline-size: 100%;
  max-inline-size: 840px;
}

.article__gallery span { aspect-ratio: 408 / 330; border-radius: 20px; background: var(--color-surface-subtle); }

/* ── 404 (no Figma frame — inner hero in the existing style) ── */
.not-found { min-block-size: min(100svh, 760px); display: grid; align-content: center; }
.not-found__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(96px, 16vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-action-primary);
}
.not-found__actions { justify-content: center; gap: 12px; }

/* Animated sky (prototype sky-gradient.js) over the static sky image — home and inner heroes */
.sky-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  visibility: hidden;
  pointer-events: none;
}
.sky-canvas.is-ready { visibility: visible; }
.sky-grain {
  position: absolute;
  inset: 0;
  background-size: 256px 256px;
  image-rendering: pixelated;
  mix-blend-mode: overlay;
  opacity: 0.02;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sky-canvas, .sky-grain { display: none; }
}

/* styles/components/scenario.css */
/*
 * «Как выбрать платёжный сценарий» — solutions 231:54930
 *   Desktop: intro (482) sticky on the left, steps (497) on the right; steps gap 40
 *   Tablet/Mobile: stacked
 */

.scenario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.scenario__intro { display: flex; flex-direction: column; gap: 16px; }
.scenario__muted { color: var(--color-text-secondary); }
.scenario__num { color: var(--color-action-primary); }

.scenario__steps { display: flex; flex-direction: column; gap: 40px; }
.scenario__step { display: flex; flex-direction: column; gap: 12px; }
.scenario__text { display: flex; flex-direction: column; gap: 8px; }

.scenario__scene {
  display: grid;
  place-items: center;
  min-block-size: clamp(280px, 52vw, 400px); /* tablet 637:4320 scenes are ~400 tall */
  padding: 20px 16px;
  border-radius: 20px;
  background: var(--color-surface-subtle);
  font-size: 14px;
  line-height: 20px;
}

@media (min-width: 1024px) {
  .scenario {
    grid-template-columns: minmax(0, 529fr) minmax(0, 497fr);
    justify-content: space-between;
    column-gap: clamp(40px, 17.5vw, 254px);
    align-items: start;
  }

  .scenario__intro {
    position: sticky;
    inset-block-start: calc(var(--header-top) + 60px + 32px);
    max-inline-size: 529px;
  }
}

/* Steps stack on scroll: each card sticks a little lower than the previous one and the
   next card slides over it (animation-decisions.md 03 / 4). The pin ends with the list. */
@media (min-width: 768px) {
  .scenario__step {
    position: sticky;
    inset-block-start: calc(var(--header-top) + 60px + 32px + var(--n, 0) * 16px);
    padding-block-end: 8px;
    border-radius: 20px 20px 0 0; /* match the scene so stacked cards keep round corners */
    background: var(--color-surface-canvas);
  }
  .scenario__step:nth-child(2) { --n: 1; }
  .scenario__step:nth-child(3) { --n: 2; }
  .scenario__step:nth-child(4) { --n: 3; }
  .scenario__step:nth-child(5) { --n: 4; }
}

/* Scene pieces */
.sg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  inline-size: min(100%, 332px);
  padding: 16px;
  border-radius: 16px;
  background: var(--color-surface-canvas);
}

.sg-card--wide { inline-size: min(100%, 380px); }
.sg-card__label { font-size: 14px; line-height: 20px; }
.sg-card__label + .sg-grid + .sg-card__label { margin-block-start: 8px; }

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

.sg-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.sg-option.is-active,
.sg-chip.is-active { border-color: var(--color-action-primary); }

.sg-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  font-size: 11px;
  line-height: 14px;
}

.sg-flow { display: flex; align-items: center; gap: 8px; max-inline-size: 100%; }
.sg-flow__arrow { flex: none; }
.sg-flow__arrow { color: var(--color-action-primary); }

.sg-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 1 112px;
  min-inline-size: 0;
  padding: 16px 8px;
  border-radius: 16px;
  background: var(--color-surface-canvas);
  font-size: 14px;
  line-height: 20px;
}

.sg-role i {
  display: grid;
  place-items: center;
  inline-size: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface-subtle);
  font-size: 12px;
  font-style: normal;
}

.sg-statuses { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }

.sg-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  inline-size: 136px;
  padding: 16px 8px;
  border-radius: 16px;
  background: var(--color-surface-canvas);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.sg-status--blue { color: var(--color-action-primary); }
.sg-status--green { color: var(--color-accent-green); }

.sg-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: min(100%, 320px);
  padding: 12px;
  border-radius: 16px;
  background: var(--color-surface-canvas);
  font-size: 12px;
  line-height: 16px;
}

.sg-log__dots { display: flex; gap: 4px; margin-block-end: 4px; }
.sg-log__dots i { inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: #e7eaf0; }

.sg-log__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.sg-log__row i { inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.sg-log__row span { flex: 1; color: var(--color-text-primary); }
.sg-log__row b { font-weight: 500; }
.sg-log__row--green { color: var(--color-accent-green); }
.sg-log__row--yellow { color: var(--color-accent-yellow); }
.sg-log__row--red { color: var(--color-accent-red); }

/* Narrow phones: three role cards + two arrows must fit in ~300px */
@media (max-width: 420px) {
  .scenario__scene { padding-inline: 8px; }
  .sg-flow { gap: 4px; }
  .sg-flow__arrow { --icon-size: 18px; }
  .sg-role { padding-inline: 6px; font-size: 12px; line-height: 16px; }
}

/* styles/components/integrations-page.css */
/* 04 — Интеграции: list · developer tools · API code card · connection guide scenes */

/* List 4 × 3 (402:60868) — columns of 255 with ~87 gap @1440 */
.int-list { display: flex; flex-direction: column; gap: 20px; }

.int-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 24px 16px;
}

.int-list__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.int-list__item p { margin-block-start: 8px; }
.int-list__logo { block-size: 34px; inline-size: auto; max-inline-size: 100%; }
.int-list__muted { color: var(--color-text-secondary); }

@media (min-width: 768px) {
  .int-list { gap: 32px; }
  .int-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (min-width: 1024px) {
  .int-list { gap: 60px; }
  .int-list__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 6vw, 87px); }
}

/* Developer tools (402:61048) */
.dev-tools { display: flex; flex-direction: column; gap: 20px; }
.dev-tools__lead { max-inline-size: 636px; }

.dev-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}

.dev-tools__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-surface-subtle);
}

.dev-tools__title { display: flex; align-items: center; gap: 8px; }
.dev-tools__title .icon { color: var(--color-action-primary); }

@media (min-width: 1024px) {
  .dev-tools { gap: 60px; }
  .dev-tools__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .dev-tools__card { padding: 28px; }
}

/* API code card */
.code-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: 420px;
  padding: 16px;
  border-radius: 20px;
  background: var(--color-surface-canvas);
  font-size: 13px;
  line-height: 18px;
}

.code-card__line { display: flex; align-items: center; gap: 4px; }
.code-card__method { padding: 1px 6px; border-radius: 4px; background: var(--color-action-primary); color: var(--color-text-on-primary); }
.code-card__body, .code-card__body code { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-card__accent { color: var(--color-action-primary); }

/* Connection guide scenes (inside .process__scene) */
.gd { align-items: center; gap: 16px; padding-inline: 20px; font-size: 13px; line-height: 18px; }

.gd-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.gd-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--color-surface-canvas);
  white-space: nowrap;
}

.gd-pill .icon { color: var(--color-action-primary); }

.gd-doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: 92px;
  margin-inline-start: auto;
  padding: 10px;
  border: 1px solid #e7eaf0;
  border-radius: 12px;
  background: var(--color-surface-canvas);
}

.gd-doc i { inline-size: var(--w, 100%); block-size: 6px; border-radius: 4px; background: #e7eaf0; }
.gd-doc .gd-doc__head { inline-size: 60%; }
.gd-doc .gd-gap { visibility: hidden; }

.gd-keys { display: grid; gap: 6px; inline-size: min(100%, 250px); }
.gd-keys__label { font-size: 13px; }
.gd-keys__label + .gd-keys__row + .gd-keys__label { margin-block-start: 10px; }
.gd-keys__row { display: flex; gap: 6px; }
.gd-keys__field { flex: 1; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-surface-canvas); letter-spacing: 1px; }
.gd-keys__copy { display: grid; place-items: center; inline-size: 32px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-surface-canvas); }

.gd-events { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; inline-size: min(100%, 260px); }
.gd-events__list { display: flex; flex-direction: column; gap: 8px; align-self: stretch; padding-inline-start: 48px; margin-inline-start: 20px; }

.gd-events__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-surface-canvas);
}

.gd-events__list li::before { content: ''; inline-size: 6px; aspect-ratio: 1; border-radius: 50%; background: #d9d9d9; }
.gd-events__list li.is-active::before { background: var(--color-action-primary); }
/* Each event has its own dashed branch from under the webhook pill: down, a rounded turn, then
   across (client mock 2026-10-28). The active one is blue and drawn on top of the grey ones.
   Rows are 32px tall with 8px gaps; the pill sits 12px above the list. */
.gd-events__list li { --n: 0; min-block-size: 32px; }
.gd-events__list li:nth-child(2) { --n: 1; }
.gd-events__list li:nth-child(3) { --n: 2; }
.gd-events__list li::after {
  content: '';
  position: absolute;
  inset-block-end: 50%;
  inset-inline-start: -48px;
  inline-size: 40px;
  block-size: calc(12px + var(--n) * 40px + 16px);
  border-inline-start: 1.5px dashed #d5dde8;
  border-block-end: 1.5px dashed #d5dde8;
  border-end-start-radius: 20px;
}
.gd-events__list li.is-active::after { z-index: 1; border-color: var(--color-action-primary); }

.gd-log { inline-size: min(100%, 250px); }

/* styles/components/security-page.css */
/* 05 — Безопасность: payment data protection cards · control and protection grid */

.protect { display: flex; flex-direction: column; gap: 20px; }
.protect__title { text-align: center; }

.protect__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.protect__card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.protect__text { display: flex; flex-direction: column; gap: 8px; }
.protect__muted { color: var(--color-text-secondary); }

.protect__scene {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 231px; /* illustration canvas (art is cropped) */
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-subtle);
}

.protect__scene--bottom { align-items: end; }

@media (min-width: 768px) {
  .protect { gap: 32px; }
  .protect__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .protect__card:nth-child(odd):last-child { grid-column: 1 / -1; } /* tablet 637:*: encryption spans the row */
}
@media (min-width: 1024px) {
  .protect { gap: 60px; }
  .protect__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .protect__card:nth-child(odd):last-child { grid-column: auto; }
}

/* PCI DSS badge */
.pci { position: relative; inline-size: 160px; aspect-ratio: 1; }
.pci__ring { inline-size: 100%; block-size: 100%; font-family: var(--font-sans); }

.pci__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pci__center b { font-size: 16px; line-height: 20px; font-weight: 500; }
.pci__center small { max-inline-size: 90px; font-size: 10px; line-height: 12px; }

/* Token list window (321 wide, cropped bottom) */
.tokens {
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: min(100% - 40px, 321px);
  min-block-size: 183px;
  padding: 16px;
  border-radius: 24px 24px 0 0;
  background: var(--color-surface-canvas);
  font-size: 13px;
  line-height: 18px;
}

.tokens__title { font-size: 14px; line-height: 20px; }
.tokens__table { inline-size: 100%; border-collapse: collapse; }
.tokens__table th { padding-block-end: 8px; border-block-end: 1px solid var(--color-surface-subtle); font-weight: 400; text-align: start; }
.tokens__table td { padding-block: 5px; }

/* Encryption — card numbers pass a scanner line and come out masked */
.protect__scene--encrypt { place-items: center start; align-content: center; gap: 8px; }

.enc-row { display: flex; gap: 8px; margin-inline-start: -60px; white-space: nowrap; }
.enc-row:nth-child(2) { margin-inline-start: -110px; }

.enc-chip {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--color-surface-canvas);
  font-size: 13px;
  line-height: 18px;
}

.enc-scan {
  position: absolute;
  inset-block: 20px;
  inset-inline-start: 50%;
  inline-size: 4px;
  border-radius: 12px;
  background: var(--color-action-primary);
  box-shadow: 0 0 16px 4px rgb(0 136 255 / 0.55);
}

/* Control and protection (231:55415): title left, 2 × 2 grid right */
.control { display: grid; gap: 24px; }

.control__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px 24px;
}

.control__item { display: flex; flex-direction: column; gap: 12px; max-inline-size: 340px; }
.control__name { display: flex; align-items: center; gap: 12px; }
.control__name .icon { color: var(--color-action-primary); }

@media (min-width: 1024px) {
  .control {
    grid-template-columns: minmax(0, 434fr) minmax(0, 782fr);
    column-gap: 0;
    align-items: start;
  }

  .control__title { max-inline-size: 241px; }
  .control__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 60px; column-gap: 102px; }
}

/* styles/components/motion.css */
/*
 * Motion — only under html.motion (set in <head> when reduced motion is off).
 * Opacity + small transform; blur only for heading words (S-01 pattern).
 */

.motion [data-reveal]:not(.rv-head) {
  opacity: 0;
  translate: 0 16px;
}

.motion [data-reveal].is-in:not(.rv-head) {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 500ms var(--ease-out) var(--rv-delay, 0ms),
    translate 500ms var(--ease-out) var(--rv-delay, 0ms);
}

/* S-01 — heading words blur in, then the lead / CTA as one block */
.motion .rv-head .rv-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
}

.motion .rv-head > :not(h2) { opacity: 0; }

.motion .rv-head.is-in .rv-word {
  animation: rv-word 550ms cubic-bezier(0, 0, 0.58, 1) both;
  animation-delay: calc(var(--rv-delay, 0ms) + var(--i) * 120ms);
}

.motion .rv-head.is-in > :not(h2) {
  animation: rv-fade 400ms cubic-bezier(0, 0, 0.58, 1) both;
  animation-delay: calc(var(--rv-delay, 0ms) + var(--rv-lead-delay, 400ms));
}

@keyframes rv-word {
  to { opacity: 1; filter: blur(0); }
}

@keyframes rv-fade {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

/* H-01 — hero. The title stays hidden until it is split into words, so it never flashes
   as plain text before animating (prototype: .hero-intro-initializing) */
.motion [data-hero]:not(.is-in) h1 { visibility: hidden; }

.motion [data-hero] h1 .rv-word { display: inline-block; opacity: 0; filter: blur(10px); }
.motion [data-hero] :is(.hero-home__lead, .page-hero__lead, .hero-home__copy > .btn, .page-hero__inner > .btn),
.motion [data-hero] .hero-home__phone { opacity: 0; }

.motion [data-hero].is-in h1 .rv-word { animation: rv-word 550ms cubic-bezier(0, 0, 0.58, 1) both; animation-delay: calc(var(--i) * 120ms); }
.motion [data-hero].is-in :is(.hero-home__lead, .page-hero__lead, .hero-home__copy > .btn, .page-hero__inner > .btn) {
  animation: rv-fade 400ms cubic-bezier(0, 0, 0.58, 1) var(--rv-after-title) both;
}
.motion [data-hero].is-in .hero-home__phone {
  animation: rv-phone 700ms var(--ease-out) var(--rv-after-cta) both;
}

@keyframes rv-phone {
  from { opacity: 0; translate: 0 40px; }
  to { opacity: 1; translate: 0 0; }
}

/* Payments hub: dots enter from below one by one, then the mark */
.motion .payments__hub.is-in .payments__dots i,
.motion .payments__hub.is-in .payments__mark {
  animation: rv-fade 360ms var(--ease-out) both;
}
.motion .payments__hub .payments__dots i,
.motion .payments__hub .payments__mark { opacity: 0; }
.motion .payments__hub.is-in .payments__dots:first-child i:nth-child(1) { animation-delay: calc(var(--rv-delay) + 0ms); }
.motion .payments__hub.is-in .payments__dots:first-child i:nth-child(2) { animation-delay: calc(var(--rv-delay) + 90ms); }
.motion .payments__hub.is-in .payments__dots:first-child i:nth-child(3) { animation-delay: calc(var(--rv-delay) + 180ms); }
.motion .payments__hub.is-in .payments__dots:first-child i:nth-child(4) { animation-delay: calc(var(--rv-delay) + 270ms); }
.motion .payments__hub.is-in .payments__mark { animation-delay: calc(var(--rv-delay) + 360ms); }
.motion .payments__hub.is-in .payments__dots:last-child i:nth-child(1) { animation-delay: calc(var(--rv-delay) + 450ms); }
.motion .payments__hub.is-in .payments__dots:last-child i:nth-child(2) { animation-delay: calc(var(--rv-delay) + 540ms); }
.motion .payments__hub.is-in .payments__dots:last-child i:nth-child(3) { animation-delay: calc(var(--rv-delay) + 630ms); }
.motion .payments__hub.is-in .payments__dots:last-child i:nth-child(4) { animation-delay: calc(var(--rv-delay) + 720ms); }

/* Integrations logo field: one group fade */
.motion .logo-scene { opacity: 0; transition: opacity 360ms var(--ease-out); }
.motion .logo-scene.is-in { opacity: 1; }

/* Cursor stickers (home hero) */
.hero-home__cursor {
  position: absolute;
  inset: 0;
  z-index: 8; /* above copy and phone, as in the prototype */
  overflow: hidden;
  pointer-events: none;
}

.cursor-sticker {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 148px;
  block-size: 148px;
  background: center / contain no-repeat;
  will-change: transform, opacity;
}

/* styles/components/dle.css */
/* ── DataLife Engine only: system messages ({info}) and blog pagination ── */
.dle-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 120px 40px;
}

.dle-pagination {
  grid-column: 1 / -1; /* sits inside .blog-grid together with the cards */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.dle-pagination__pages { display: flex; gap: 8px; }
.dle-pagination a,
.dle-pagination span:not([aria-hidden]) { min-inline-size: 36px; padding: 6px 10px; border-radius: 12px; text-align: center; }
.dle-pagination a { color: var(--color-text-secondary); }
.dle-pagination a:hover { color: var(--color-action-primary); }
.dle-pagination__pages > span { background: var(--color-surface-subtle); }

/* Home «Безопасность» chips: tile colour by the chosen icon, stagger by position */
.assurance__chip--hm-security-encryption .assurance__tile { background: #f0eefc; }
.assurance__chip--hm-security-verify .assurance__tile { background: var(--color-accent-blue-light); }
.assurance__chip--hm-security-antifraud .assurance__tile { background: var(--color-accent-orange-light); }
@media (min-width: 768px) {
  .assurance__stack > .assurance__chip:nth-child(1):not([class*='--encryption']) { margin-inline-start: 67px; }
  .assurance__stack > .assurance__chip:nth-child(3):not([class*='--antifraud']) { margin-inline-start: 75px; }
}
@media (min-width: 1024px) {
  .assurance__stack > .assurance__chip:nth-child(1):not([class*='--encryption']) { margin-inline-start: 110px; }
  .assurance__stack > .assurance__chip:nth-child(3):not([class*='--antifraud']) { margin-inline-start: 120px; }
}

/* Image uploaded instead of an animated illustration */
.kg-picture { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

/* DLE: icons picked in the admin panel (data-icon = file name in images/icons) */
.kgi { display: inline-block; flex: none; inline-size: var(--icon-size, 24px); block-size: var(--icon-size, 24px); background: currentColor; -webkit-mask: var(--kgi) center / contain no-repeat; mask: var(--kgi) center / contain no-repeat; }
.kgi.is-color { background: var(--kgi) center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon=""] { display: none; }
.kgi[data-icon="16-arrow-back-up"] { --kgi: url("../images/icons/16-arrow-back-up.svg"); }
.kgi[data-icon="16-box"] { --kgi: url("../images/icons/16-box.svg"); }
.kgi[data-icon="16-calendar-time"] { --kgi: url("../images/icons/16-calendar-time.svg"); }
.kgi[data-icon="16-code"] { --kgi: url("../images/icons/16-code.svg"); }
.kgi[data-icon="16-coin"] { --kgi: url("../images/icons/16-coin.svg"); }
.kgi[data-icon="16-copy"] { --kgi: url("../images/icons/16-copy.svg"); }
.kgi[data-icon="16-credit-card"] { --kgi: url("../images/icons/16-credit-card.svg"); background: url("../images/icons/16-credit-card.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="16-cube"] { --kgi: url("../images/icons/16-cube.svg"); }
.kgi[data-icon="16-link"] { --kgi: url("../images/icons/16-link.svg"); }
.kgi[data-icon="16-rosette-discount-check-filled"] { --kgi: url("../images/icons/16-rosette-discount-check-filled.svg"); }
.kgi[data-icon="16-tool-filled"] { --kgi: url("../images/icons/16-tool-filled.svg"); }
.kgi[data-icon="16-webhook-variant-2"] { --kgi: url("../images/icons/16-webhook-variant-2.svg"); }
.kgi[data-icon="16-webhook"] { --kgi: url("../images/icons/16-webhook.svg"); }
.kgi[data-icon="20-alipay-circle-filled"] { --kgi: url("../images/icons/20-alipay-circle-filled.svg"); background: url("../images/icons/20-alipay-circle-filled.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-app-window"] { --kgi: url("../images/icons/20-app-window.svg"); }
.kgi[data-icon="20-arrow-undo-up-left"] { --kgi: url("../images/icons/20-arrow-undo-up-left.svg"); }
.kgi[data-icon="20-brand-telegram"] { --kgi: url("../images/icons/20-brand-telegram.svg"); }
.kgi[data-icon="20-building-store"] { --kgi: url("../images/icons/20-building-store.svg"); }
.kgi[data-icon="20-bybit-background"] { --kgi: url("../images/icons/20-bybit-background.svg"); background: url("../images/icons/20-bybit-background.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-case-round-bold"] { --kgi: url("../images/icons/20-case-round-bold.svg"); }
.kgi[data-icon="20-circle-dashed"] { --kgi: url("../images/icons/20-circle-dashed.svg"); }
.kgi[data-icon="20-credit-card"] { --kgi: url("../images/icons/20-credit-card.svg"); background: url("../images/icons/20-credit-card.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-cursor"] { --kgi: url("../images/icons/20-cursor.svg"); }
.kgi[data-icon="20-ethereum-circle-solid"] { --kgi: url("../images/icons/20-ethereum-circle-solid.svg"); background: url("../images/icons/20-ethereum-circle-solid.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-flag-en"] { --kgi: url("../images/icons/20-flag-en.svg"); background: url("../images/icons/20-flag-en.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-flag-ru"] { --kgi: url("../images/icons/20-flag-ru.svg"); background: url("../images/icons/20-flag-ru.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-flag-zh"] { --kgi: url("../images/icons/20-flag-zh.svg"); background: url("../images/icons/20-flag-zh.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-hourglass-high"] { --kgi: url("../images/icons/20-hourglass-high.svg"); }
.kgi[data-icon="20-info-square-rounded"] { --kgi: url("../images/icons/20-info-square-rounded.svg"); }
.kgi[data-icon="20-link"] { --kgi: url("../images/icons/20-link.svg"); }
.kgi[data-icon="20-loader-4"] { --kgi: url("../images/icons/20-loader-4.svg"); }
.kgi[data-icon="20-qrcode"] { --kgi: url("../images/icons/20-qrcode.svg"); }
.kgi[data-icon="20-rosette-discount-check"] { --kgi: url("../images/icons/20-rosette-discount-check.svg"); }
.kgi[data-icon="20-sbp"] { --kgi: url("../images/icons/20-sbp.svg"); background: url("../images/icons/20-sbp.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-usdc"] { --kgi: url("../images/icons/20-usdc.svg"); background: url("../images/icons/20-usdc.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-usdt"] { --kgi: url("../images/icons/20-usdt.svg"); background: url("../images/icons/20-usdt.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-vpn-connection-solid"] { --kgi: url("../images/icons/20-vpn-connection-solid.svg"); }
.kgi[data-icon="20-wechat-filled"] { --kgi: url("../images/icons/20-wechat-filled.svg"); background: url("../images/icons/20-wechat-filled.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="20-world-www"] { --kgi: url("../images/icons/20-world-www.svg"); }
.kgi[data-icon="24-arrow-back-up"] { --kgi: url("../images/icons/24-arrow-back-up.svg"); }
.kgi[data-icon="24-arrow-right"] { --kgi: url("../images/icons/24-arrow-right.svg"); }
.kgi[data-icon="24-arrows-diff"] { --kgi: url("../images/icons/24-arrows-diff.svg"); }
.kgi[data-icon="24-arrows-exchange-2"] { --kgi: url("../images/icons/24-arrows-exchange-2.svg"); }
.kgi[data-icon="24-building"] { --kgi: url("../images/icons/24-building.svg"); }
.kgi[data-icon="24-calendar-check"] { --kgi: url("../images/icons/24-calendar-check.svg"); background: url("../images/icons/24-calendar-check.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="24-check-circle-alt-02-filled"] { --kgi: url("../images/icons/24-check-circle-alt-02-filled.svg"); }
.kgi[data-icon="24-chevron-down"] { --kgi: url("../images/icons/24-chevron-down.svg"); }
.kgi[data-icon="24-chevron-right"] { --kgi: url("../images/icons/24-chevron-right.svg"); }
.kgi[data-icon="24-circle-check-filled"] { --kgi: url("../images/icons/24-circle-check-filled.svg"); }
.kgi[data-icon="24-circle-check"] { --kgi: url("../images/icons/24-circle-check.svg"); }
.kgi[data-icon="24-circle-dashed"] { --kgi: url("../images/icons/24-circle-dashed.svg"); }
.kgi[data-icon="24-copy-outline"] { --kgi: url("../images/icons/24-copy-outline.svg"); }
.kgi[data-icon="24-credit-card-pay"] { --kgi: url("../images/icons/24-credit-card-pay.svg"); }
.kgi[data-icon="24-credit-card"] { --kgi: url("../images/icons/24-credit-card.svg"); }
.kgi[data-icon="24-device-mobile-check"] { --kgi: url("../images/icons/24-device-mobile-check.svg"); }
.kgi[data-icon="24-file-search"] { --kgi: url("../images/icons/24-file-search.svg"); }
.kgi[data-icon="24-hand-click"] { --kgi: url("../images/icons/24-hand-click.svg"); }
.kgi[data-icon="24-history"] { --kgi: url("../images/icons/24-history.svg"); }
.kgi[data-icon="24-link-arrow"] { --kgi: url("../images/icons/24-link-arrow.svg"); }
.kgi[data-icon="24-link-plus"] { --kgi: url("../images/icons/24-link-plus.svg"); }
.kgi[data-icon="24-list-check"] { --kgi: url("../images/icons/24-list-check.svg"); }
.kgi[data-icon="24-loader-4"] { --kgi: url("../images/icons/24-loader-4.svg"); }
.kgi[data-icon="24-menu-2"] { --kgi: url("../images/icons/24-menu-2.svg"); }
.kgi[data-icon="24-message-chatbot"] { --kgi: url("../images/icons/24-message-chatbot.svg"); background: url("../images/icons/24-message-chatbot.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="24-minus"] { --kgi: url("../images/icons/24-minus.svg"); }
.kgi[data-icon="24-moneybag"] { --kgi: url("../images/icons/24-moneybag.svg"); }
.kgi[data-icon="24-plug-connected"] { --kgi: url("../images/icons/24-plug-connected.svg"); }
.kgi[data-icon="24-plus"] { --kgi: url("../images/icons/24-plus.svg"); }
.kgi[data-icon="24-qrcode"] { --kgi: url("../images/icons/24-qrcode.svg"); }
.kgi[data-icon="24-receipt"] { --kgi: url("../images/icons/24-receipt.svg"); }
.kgi[data-icon="24-repeat-off"] { --kgi: url("../images/icons/24-repeat-off.svg"); }
.kgi[data-icon="24-shield-check"] { --kgi: url("../images/icons/24-shield-check.svg"); }
.kgi[data-icon="24-shield-lock"] { --kgi: url("../images/icons/24-shield-lock.svg"); }
.kgi[data-icon="24-shopping-cart-copy"] { --kgi: url("../images/icons/24-shopping-cart-copy.svg"); }
.kgi[data-icon="24-stop-sign"] { --kgi: url("../images/icons/24-stop-sign.svg"); }
.kgi[data-icon="24-telegram-fill"] { --kgi: url("../images/icons/24-telegram-fill.svg"); background: url("../images/icons/24-telegram-fill.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="24-users"] { --kgi: url("../images/icons/24-users.svg"); }
.kgi[data-icon="24-whatsapp-solid"] { --kgi: url("../images/icons/24-whatsapp-solid.svg"); background: url("../images/icons/24-whatsapp-solid.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="24-x"] { --kgi: url("../images/icons/24-x.svg"); }
.kgi[data-icon="32-activity"] { --kgi: url("../images/icons/32-activity.svg"); }
.kgi[data-icon="32-api-variant-2"] { --kgi: url("../images/icons/32-api-variant-2.svg"); }
.kgi[data-icon="32-api"] { --kgi: url("../images/icons/32-api.svg"); }
.kgi[data-icon="32-arrow-back-up"] { --kgi: url("../images/icons/32-arrow-back-up.svg"); }
.kgi[data-icon="32-benefit-fee"] { --kgi: url("../images/icons/32-benefit-fee.svg"); }
.kgi[data-icon="32-benefit-payout"] { --kgi: url("../images/icons/32-benefit-payout.svg"); }
.kgi[data-icon="32-benefit-personal"] { --kgi: url("../images/icons/32-benefit-personal.svg"); }
.kgi[data-icon="32-benefit-security"] { --kgi: url("../images/icons/32-benefit-security.svg"); }
.kgi[data-icon="32-benefit-service"] { --kgi: url("../images/icons/32-benefit-service.svg"); }
.kgi[data-icon="32-binary"] { --kgi: url("../images/icons/32-binary.svg"); }
.kgi[data-icon="32-bitrix"] { --kgi: url("../images/icons/32-bitrix.svg"); background: url("../images/icons/32-bitrix.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-book-filled"] { --kgi: url("../images/icons/32-book-filled.svg"); }
.kgi[data-icon="32-check-circle-alt-02-filled"] { --kgi: url("../images/icons/32-check-circle-alt-02-filled.svg"); }
.kgi[data-icon="32-check-circle"] { --kgi: url("../images/icons/32-check-circle.svg"); }
.kgi[data-icon="32-circle-pending"] { --kgi: url("../images/icons/32-circle-pending.svg"); background: url("../images/icons/32-circle-pending.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-clipboard-data"] { --kgi: url("../images/icons/32-clipboard-data.svg"); }
.kgi[data-icon="32-code-dots"] { --kgi: url("../images/icons/32-code-dots.svg"); }
.kgi[data-icon="32-credit-card-fluent-emoji-flat"] { --kgi: url("../images/icons/32-credit-card-fluent-emoji-flat.svg"); background: url("../images/icons/32-credit-card-fluent-emoji-flat.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-credit-card-icon"] { --kgi: url("../images/icons/32-credit-card-icon.svg"); }
.kgi[data-icon="32-database"] { --kgi: url("../images/icons/32-database.svg"); }
.kgi[data-icon="32-device-airpods"] { --kgi: url("../images/icons/32-device-airpods.svg"); }
.kgi[data-icon="32-education-filled"] { --kgi: url("../images/icons/32-education-filled.svg"); }
.kgi[data-icon="32-flask"] { --kgi: url("../images/icons/32-flask.svg"); }
.kgi[data-icon="32-headset"] { --kgi: url("../images/icons/32-headset.svg"); }
.kgi[data-icon="32-link-boxicons"] { --kgi: url("../images/icons/32-link-boxicons.svg"); }
.kgi[data-icon="32-link-icon"] { --kgi: url("../images/icons/32-link-icon.svg"); }
.kgi[data-icon="32-link-variant-2"] { --kgi: url("../images/icons/32-link-variant-2.svg"); }
.kgi[data-icon="32-mail-24-filled"] { --kgi: url("../images/icons/32-mail-24-filled.svg"); }
.kgi[data-icon="32-percentage"] { --kgi: url("../images/icons/32-percentage.svg"); }
.kgi[data-icon="32-plug-connected"] { --kgi: url("../images/icons/32-plug-connected.svg"); }
.kgi[data-icon="32-qrcode"] { --kgi: url("../images/icons/32-qrcode.svg"); }
.kgi[data-icon="32-sbp"] { --kgi: url("../images/icons/32-sbp.svg"); background: url("../images/icons/32-sbp.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-search-alert"] { --kgi: url("../images/icons/32-search-alert.svg"); }
.kgi[data-icon="32-shield-check"] { --kgi: url("../images/icons/32-shield-check.svg"); }
.kgi[data-icon="32-shield-lock"] { --kgi: url("../images/icons/32-shield-lock.svg"); }
.kgi[data-icon="32-shop-fa7-solid"] { --kgi: url("../images/icons/32-shop-fa7-solid.svg"); }
.kgi[data-icon="32-shop-maki"] { --kgi: url("../images/icons/32-shop-maki.svg"); }
.kgi[data-icon="32-telegram-fill"] { --kgi: url("../images/icons/32-telegram-fill.svg"); background: url("../images/icons/32-telegram-fill.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-tilda-publishing"] { --kgi: url("../images/icons/32-tilda-publishing.svg"); }
.kgi[data-icon="32-usdt"] { --kgi: url("../images/icons/32-usdt.svg"); background: url("../images/icons/32-usdt.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-user-scan"] { --kgi: url("../images/icons/32-user-scan.svg"); }
.kgi[data-icon="32-user-solid"] { --kgi: url("../images/icons/32-user-solid.svg"); }
.kgi[data-icon="32-user"] { --kgi: url("../images/icons/32-user.svg"); }
.kgi[data-icon="32-verify-filled"] { --kgi: url("../images/icons/32-verify-filled.svg"); }
.kgi[data-icon="32-webhook"] { --kgi: url("../images/icons/32-webhook.svg"); }
.kgi[data-icon="32-webhooks-variant-2"] { --kgi: url("../images/icons/32-webhooks-variant-2.svg"); }
.kgi[data-icon="32-webhooks"] { --kgi: url("../images/icons/32-webhooks.svg"); }
.kgi[data-icon="32-whatsapp-solid"] { --kgi: url("../images/icons/32-whatsapp-solid.svg"); background: url("../images/icons/32-whatsapp-solid.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="32-wordpress"] { --kgi: url("../images/icons/32-wordpress.svg"); }
.kgi[data-icon="bn-business-building"] { --kgi: url("../images/icons/bn-business-building.svg"); background: url("../images/icons/bn-business-building.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-alipay"] { --kgi: url("../images/icons/bn-payout-alipay.svg"); background: url("../images/icons/bn-payout-alipay.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-bybit"] { --kgi: url("../images/icons/bn-payout-bybit.svg"); background: url("../images/icons/bn-payout-bybit.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-card"] { --kgi: url("../images/icons/bn-payout-card.svg"); background: url("../images/icons/bn-payout-card.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-sbp"] { --kgi: url("../images/icons/bn-payout-sbp.svg"); background: url("../images/icons/bn-payout-sbp.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-usdt"] { --kgi: url("../images/icons/bn-payout-usdt.svg"); background: url("../images/icons/bn-payout-usdt.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-payout-wechat"] { --kgi: url("../images/icons/bn-payout-wechat.svg"); background: url("../images/icons/bn-payout-wechat.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-security-3dsecure"] { --kgi: url("../images/icons/bn-security-3dsecure.svg"); background: url("../images/icons/bn-security-3dsecure.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-security-antifraud"] { --kgi: url("../images/icons/bn-security-antifraud.svg"); background: url("../images/icons/bn-security-antifraud.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-security-encryption"] { --kgi: url("../images/icons/bn-security-encryption.svg"); background: url("../images/icons/bn-security-encryption.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-security-monitoring"] { --kgi: url("../images/icons/bn-security-monitoring.svg"); background: url("../images/icons/bn-security-monitoring.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="bn-yandex-market"] { --kgi: url("../images/icons/bn-yandex-market.svg"); background: url("../images/icons/bn-yandex-market.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="brand-mark"] { --kgi: url("../images/icons/brand-mark.svg"); background: url("../images/icons/brand-mark.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-market"] { --kgi: url("../images/icons/hm-business-market.svg"); background: url("../images/icons/hm-business-market.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-saas"] { --kgi: url("../images/icons/hm-business-saas.svg"); background: url("../images/icons/hm-business-saas.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-services"] { --kgi: url("../images/icons/hm-business-services.svg"); background: url("../images/icons/hm-business-services.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-shop"] { --kgi: url("../images/icons/hm-business-shop.svg"); background: url("../images/icons/hm-business-shop.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-stop"] { --kgi: url("../images/icons/hm-business-stop.svg"); background: url("../images/icons/hm-business-stop.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-business-telegram"] { --kgi: url("../images/icons/hm-business-telegram.svg"); background: url("../images/icons/hm-business-telegram.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-security-antifraud"] { --kgi: url("../images/icons/hm-security-antifraud.svg"); background: url("../images/icons/hm-security-antifraud.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-security-encryption"] { --kgi: url("../images/icons/hm-security-encryption.svg"); background: url("../images/icons/hm-security-encryption.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="hm-security-verify"] { --kgi: url("../images/icons/hm-security-verify.svg"); background: url("../images/icons/hm-security-verify.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-billmanager"] { --kgi: url("../images/icons/il-billmanager.svg"); background: url("../images/icons/il-billmanager.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-dle"] { --kgi: url("../images/icons/il-dle.svg"); background: url("../images/icons/il-dle.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-hopebilling"] { --kgi: url("../images/icons/il-hopebilling.svg"); background: url("../images/icons/il-hopebilling.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-joomla"] { --kgi: url("../images/icons/il-joomla.svg"); background: url("../images/icons/il-joomla.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-opencart"] { --kgi: url("../images/icons/il-opencart.svg"); background: url("../images/icons/il-opencart.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-other"] { --kgi: url("../images/icons/il-other.svg"); background: url("../images/icons/il-other.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-simpla"] { --kgi: url("../images/icons/il-simpla.svg"); background: url("../images/icons/il-simpla.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-telegram"] { --kgi: url("../images/icons/il-telegram.svg"); background: url("../images/icons/il-telegram.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-tilda"] { --kgi: url("../images/icons/il-tilda.svg"); background: url("../images/icons/il-tilda.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-whmcs"] { --kgi: url("../images/icons/il-whmcs.svg"); background: url("../images/icons/il-whmcs.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-woocommerce"] { --kgi: url("../images/icons/il-woocommerce.svg"); background: url("../images/icons/il-woocommerce.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="il-xenforo"] { --kgi: url("../images/icons/il-xenforo.svg"); background: url("../images/icons/il-xenforo.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="logo"] { --kgi: url("../images/icons/logo.svg"); background: url("../images/icons/logo.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-1"] { --kgi: url("../images/icons/mp-line-1.svg"); background: url("../images/icons/mp-line-1.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-2"] { --kgi: url("../images/icons/mp-line-2.svg"); background: url("../images/icons/mp-line-2.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-3"] { --kgi: url("../images/icons/mp-line-3.svg"); background: url("../images/icons/mp-line-3.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-4"] { --kgi: url("../images/icons/mp-line-4.svg"); background: url("../images/icons/mp-line-4.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-5"] { --kgi: url("../images/icons/mp-line-5.svg"); background: url("../images/icons/mp-line-5.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="mp-line-6"] { --kgi: url("../images/icons/mp-line-6.svg"); background: url("../images/icons/mp-line-6.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="particles-banner"] { --kgi: url("../images/icons/particles-banner.svg"); }
.kgi[data-icon="particles-fee"] { --kgi: url("../images/icons/particles-fee.svg"); background: url("../images/icons/particles-fee.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="process-connector"] { --kgi: url("../images/icons/process-connector.svg"); background: url("../images/icons/process-connector.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="sl-market-curve-left"] { --kgi: url("../images/icons/sl-market-curve-left.svg"); background: url("../images/icons/sl-market-curve-left.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="sl-market-curve-right"] { --kgi: url("../images/icons/sl-market-curve-right.svg"); background: url("../images/icons/sl-market-curve-right.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="sl-product-thumb"] { --kgi: url("../images/icons/sl-product-thumb.svg"); background: url("../images/icons/sl-product-thumb.svg") center / contain no-repeat; -webkit-mask: none; mask: none; }
.kgi[data-icon="crypto-stack"] { inline-size: calc(var(--icon-size, 20px) * 2.2); -webkit-mask: none; mask: none; background: url("../images/icons/20-usdt.svg") 0 50% / auto 100% no-repeat, url("../images/icons/20-usdc.svg") 50% 50% / auto 100% no-repeat, url("../images/icons/20-ethereum-circle-solid.svg") 100% 50% / auto 100% no-repeat; }