/* Generated from artifacts/tokens.json — do NOT edit by hand.
   Source of truth: Figma file UcHwdSqTISb3SLK2EJpjCV.
   Color Variables: 8 groups (Purple-Gray, Amber, Orange, White, Blue, Success, Danger, Purple-Alpha).
   Spacing/Radius: FLOAT Variables in Figma.
   Typography: Figma Text Styles. */

:root {
  /* ── Base colors ─────────────────────────────────────────── */
  /* Purple-Gray */
  --color-purple-gray-50:  #edebf7;
  --color-purple-gray-100: #dbd7ef;
  --color-purple-gray-200: #c4bdde;
  --color-purple-gray-300: #aca2cc;
  --color-purple-gray-400: #9488bb;
  --color-purple-gray-500: #75699c;
  --color-purple-gray-600: #564b7d;
  --color-purple-gray-700: #382c5e;
  --color-purple-gray-800: #190e40;
  --color-purple-gray-900: #110832;

  /* Amber */
  --color-amber-500: #ffb646;

  /* Orange */
  --color-orange-500-a15: rgba(255, 152, 49, 0.15);

  /* White */
  --color-white-100: #ffffff;
  --color-white-a15: rgba(255, 255, 255, 0.15);
  --color-white-a06: rgba(255, 255, 255, 0.06);

  /* Blue */
  --color-blue-400: #5970ff;
  --color-blue-500: #4b51f3;
  --color-blue-600: #3e43d8;

  /* Success */
  --color-success-500: #39df92;

  /* Danger */
  --color-danger-500: #eb3d6e;

  /* Purple-Alpha */
  --color-purple-alpha-200-a50:        rgba(179, 178, 218, 0.5);
  --color-purple-alpha-400-a40:        rgba(148, 136, 187, 0.4);
  --color-purple-alpha-900-a50:        rgba(17, 8, 50, 0.5);
  --color-purple-alpha-purple-500-a24: rgba(74, 57, 147, 0.24);
  --color-purple-alpha-modal-a50:      rgba(36, 28, 66, 0.5);

  /* ── Semantic aliases ────────────────────────────────────── */
  --color-bg-default:       var(--color-purple-gray-900);
  --color-bg-surface:       var(--color-purple-gray-800);
  --color-bg-glass:         var(--color-white-a15);
  --color-bg-input:         var(--color-purple-alpha-900-a50);
  --color-bg-scrim:         var(--color-purple-alpha-900-a50);
  --color-bg-modal:         var(--color-purple-alpha-modal-a50);

  --color-text-primary:      var(--color-purple-gray-100);
  --color-text-secondary:    var(--color-purple-gray-400);
  --color-text-muted:        var(--color-purple-alpha-400-a40);
  --color-text-muted-footer: var(--color-purple-alpha-200-a50);
  --color-text-inverse:      var(--color-white-100);
  --color-text-accent:       var(--color-amber-500);
  --color-text-danger:       var(--color-danger-500);

  --color-border-focus:  var(--color-blue-500);
  --color-border-danger: var(--color-danger-500);

  --color-action-primary:         var(--color-blue-500);
  --color-action-primary-hover:   var(--color-blue-400);
  --color-action-primary-pressed: var(--color-blue-600);

  --color-status-success: var(--color-success-500);
  --color-status-danger:  var(--color-danger-500);

  --color-accent-amber:     var(--color-amber-500);
  --color-accent-chip-bg:   var(--color-orange-500-a15);
  --color-accent-purple-bg: var(--color-purple-alpha-purple-500-a24);

  /* ── Spacing (px) — name == value ────────────────────────── */
  --space-0:   0;
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-100: 100px;
  --space-120: 120px;

  /* ── Radii — name == value (none/full kept as semantic) ──── */
  --radius-none: 0;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-18:   18px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-focus:    0 0 0 4px rgba(75, 81, 243, 0.35);
  --shadow-text-cta: 0 3px 0 rgba(0, 0, 0, 0.25);

  /* ── Font families ───────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

/* Global page defaults — DS colors only, no hardcode. */
html {
  scroll-behavior: smooth; /* Плавный scroll для href="#anchor" и scrollIntoView. */
}

html, body, #root {
  margin: 0;
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
._tag_1tluq_1 {
  /* Typography — textStyles['Body/S'] applied inline in HeadlineTag.tsx (Figma Text Style "Body/S"). */
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-8);
  background: var(--color-accent-chip-bg);
  color: var(--color-text-accent);
  white-space: nowrap;
}
._button_1r19t_1 {
  width: 349px;
  height: 120px;
  padding: var(--space-8);
  border-radius: var(--radius-24);
  /* Border = Paint Style "Button/Primary/Border" из Figma: SOLID #423962, opacity 0.3. */
  border: 3px solid rgba(66, 57, 98, 0.3);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column; /* Figma: flex-col — чтобы flex:1 на .inner растягивал её по вертикали. */
  align-items: center;
  justify-content: center;
  /* isolation: isolate — изолирует stacking context, чтобы filter transition на .inner
     не вызывал compositor-артефакты на соседних элементах (визуальные засветы вне button). */
  isolation: isolate;
  overflow: hidden;
}

/* size=medium — Figma "Button/Primary, size=medium". */
._button_1r19t_1[data-size='m'] {
  width: 233px;
  height: 80px;
  padding: var(--space-6);
  border-radius: var(--radius-16);
}

/* TODO: вернуть когда понадобится тактильность.
.button:active,
.button[data-state='pressed'] {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}
*/

._button_1r19t_1:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

._inner_1r19t_11 {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
  width: 100%;
  border-radius: var(--radius-18);
  /* Gradient не интерполируется в браузерах → анимируем через filter
     (brightness/saturate), который даёт плавный smooth state-switch.
     Базовый gradient = Initial state из Figma (Paint Style "Button/Primary/Fill/Initial").
     Hover/Pressed эффекты получены через CSS-фильтр, а не подмену gradient'a. */
  transition: filter 240ms ease-out;
  background:
    radial-gradient(
      ellipse 118% 125% at 50% 125%,
      #dc62ff 0%,
      #af4afd 9.5%,
      #8231fb 19%,
      #521ed3 35%,
      #3c1994 52.5%,
      #301674 61.25%,
      #251354 70%,
      #220e4d 84.6%,
      #220e4d 100%
    );
}

/* size=medium: inner без вертикального padding, радиус меньше. */
._button_1r19t_1[data-size='m'] ._inner_1r19t_11 {
  padding: 0;
  border-radius: var(--radius-12);
}

._button_1r19t_1:hover ._inner_1r19t_11,
._button_1r19t_1[data-state='hover'] ._inner_1r19t_11 {
  filter: brightness(1.18) saturate(1.08);
}

._button_1r19t_1:active ._inner_1r19t_11,
._button_1r19t_1[data-state='pressed'] ._inner_1r19t_11 {
  filter: brightness(0.78);
  transition: filter 80ms ease-out;
}

._label_1r19t_86 {
  /* Typography — via textStyles['Button'] applied inline in PrimaryButton.tsx (Figma Text Style "Button"). */
  color: var(--color-text-inverse);
  text-shadow: var(--shadow-text-cta);
  white-space: nowrap;
}
._button_1kgro_1 {
  /* Typography — inline textStyle in SecondaryButton.tsx (large=Body/S, medium=Body/XXS). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-28);
  border: none;
  border-radius: var(--radius-12);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background 120ms ease-out;
}

/* size=medium — Figma "Button/Secondary, size=medium" (96×36). */
._button_1kgro_1[data-size='m'] {
  padding: 0 var(--space-12);
  border-radius: var(--radius-8);
  height: 36px;
}

._button_1kgro_1[data-state='hover'],
._button_1kgro_1:hover {
  background: var(--color-action-primary-hover);
}

._button_1kgro_1[data-state='pressed'],
._button_1kgro_1:active {
  background: var(--color-action-primary-pressed);
}

._button_1kgro_1:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
._icon_45yvh_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0; /* убирает baseline-зазор у inline SVG */
}

._icon_45yvh_1 > svg {
  display: block;
  width: 100%;
  height: 100%;
}
._wrapper_1yl1u_1 {
  position: relative;
  width: 100%;
  max-width: 769px;
}

._input_1yl1u_7 {
  /* Typography — textStyles['Body/L'] applied inline in Input.tsx (Figma Text Style "Body/L"). */
  width: 100%;
  height: 120px; /* fixed — matches PrimaryButton height для align в формах. */
  padding: 0 var(--space-40); /* 40 horizontal only; vertical центрит сам <input>. */
  border-radius: var(--radius-24);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  border: 2px solid transparent;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

/* size=medium — Figma "Input, size=medium" (h 80, pad 32, radius 16). */
._wrapper_1yl1u_1[data-size='m'] ._input_1yl1u_7 {
  height: 80px;
  padding: 0 var(--space-32);
  border-radius: var(--radius-16);
}

._input_1yl1u_7::placeholder {
  color: var(--color-text-muted);
}

/* When status icon is present, reserve right padding so text doesn't overlap the 32px icon. */
._wrapper_1yl1u_1[data-state='filled'] ._input_1yl1u_7,
._wrapper_1yl1u_1[data-state='error'] ._input_1yl1u_7 {
  padding-right: 88px; /* 40 (right edge) + 32 (icon) + 16 (gap) */
}

/* size=medium: shorter right reserve — 32 (right edge) + 32 (icon) + 16 (gap). */
._wrapper_1yl1u_1[data-size='m'][data-state='filled'] ._input_1yl1u_7,
._wrapper_1yl1u_1[data-size='m'][data-state='error'] ._input_1yl1u_7 {
  padding-right: 80px;
}

._wrapper_1yl1u_1[data-state='hover'] ._input_1yl1u_7,
._input_1yl1u_7:hover {
  border-color: transparent;
}

._wrapper_1yl1u_1[data-state='active'] ._input_1yl1u_7,
._input_1yl1u_7:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

._wrapper_1yl1u_1[data-state='error'] ._input_1yl1u_7 {
  border-color: var(--color-border-danger);
}

._statusIcon_1yl1u_57 {
  position: absolute;
  top: 50%;
  right: var(--space-40); /* matches input pad (large=40, medium=32 — see [data-size='m'] override). */
  transform: translateY(-50%);
  pointer-events: none;
}

._wrapper_1yl1u_1[data-size='m'] ._statusIcon_1yl1u_57,
._wrapper_1yl1u_1[data-size='m'] ._statusIconButton_1yl1u_66 {
  right: var(--space-32);
}

/* SVG-иконки status/success и status/error используют fill="currentColor",
   поэтому цвет задаём через CSS color на wrapper'е с icon-классом. */
._wrapper_1yl1u_1[data-state='filled'] ._statusIcon_1yl1u_57 {
  color: var(--color-status-success); /* green #39df92 */
}

._wrapper_1yl1u_1[data-state='error'] ._statusIcon_1yl1u_57 {
  color: var(--color-status-danger); /* red/pink #eb3d6e */
}

/* Clickable status icon (clear button) — used when Input gets onClear prop in error state. */
._statusIconButton_1yl1u_66 {
  position: absolute;
  top: 50%;
  right: var(--space-40); /* matches input pad (large=40, medium=32 — see [data-size='m'] override). */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-status-danger); /* propagates to inner SVG via currentColor */
  transition: opacity 120ms ease-out;
}

._statusIconButton_1yl1u_66:hover {
  opacity: 0.75;
}

._statusIconButton_1yl1u_66:focus-visible {
  outline: 2px solid var(--color-status-danger);
  outline-offset: 2px;
  border-radius: 50%;
}

._error_1yl1u_110 {
  /* Typography — textStyles['Caption'] applied inline in Input.tsx (Figma Text Style "Caption"). */
  position: absolute;
  left: 0;
  bottom: -28px;
  margin: 0;
  color: var(--color-text-danger);
}
._logo_1qzoy_1 {
  color: var(--color-text-accent); /* SVG uses currentColor */
}

._large_1qzoy_5 {
  width: 136px;
  height: 47px;
}

._small_1qzoy_10 {
  width: 90px;
  height: 31px;
}
._card_1s43p_1 {
  /* Width контролирует родитель; default = Card/Game size=large.
     Размер-специфичные значения — в [data-size='m'] / [data-size='s'] блоках. */
  width: 100%;
  background: var(--color-bg-surface);
  border-radius: var(--radius-32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._card_1s43p_1[data-size='m'] { border-radius: var(--radius-24); }
._card_1s43p_1[data-size='s'] { border-radius: var(--radius-18); }

._head_1s43p_15 {
  padding: var(--space-32);
  display: flex;
  gap: var(--space-20);
  align-items: center;
}

._card_1s43p_1[data-size='m'] ._head_1s43p_15,
._card_1s43p_1[data-size='s'] ._head_1s43p_15 {
  padding: var(--space-24);
  gap: var(--space-12);
}

._name_1s43p_28 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

._card_1s43p_1[data-size='m'] ._name_1s43p_28 { gap: var(--space-8); }
._card_1s43p_1[data-size='s'] ._name_1s43p_28 { gap: var(--space-4); }

._headline_1s43p_39 {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

._card_1s43p_1[data-size='m'] ._headline_1s43p_39,
._card_1s43p_1[data-size='s'] ._headline_1s43p_39 {
  gap: var(--space-8);
}

._title_1s43p_50 {
  /* Typography — textStyles[size-specific] applied inline in GameCard.tsx. */
  margin: 0;
  color: var(--color-text-accent);
  white-space: nowrap;
}

._subhead_1s43p_57 {
  /* Typography — textStyles[size-specific] applied inline in GameCard.tsx. */
  margin: 0;
  color: var(--color-text-primary);
}

._preview_1s43p_63 {
  height: 453px;
  padding: 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

._card_1s43p_1[data-size='m'] ._preview_1s43p_63,
._card_1s43p_1[data-size='s'] ._preview_1s43p_63 {
  height: 280px;
  padding: 0 var(--space-12) var(--space-12);
}

._banner_1s43p_78 {
  /* Border accent #361c70 — local constant for Banner/Game frame in Figma. */
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  border: 1px solid #361c70;
  border-radius: var(--radius-32);
  overflow: hidden;
  background: var(--color-bg-surface);
}

._card_1s43p_1[data-size='s'] ._banner_1s43p_78 { border-radius: var(--radius-12); }

._bannerImg_1s43p_91 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._chip_1am0j_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-8);
  background: transparent;
  border: none;
  cursor: pointer;
  /* Unselected default — muted purple-gray (matches Figma) */
  color: var(--color-purple-gray-500);

  /* Caption text style */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.015em;
  white-space: nowrap;

  transition: background-color 0.12s ease, color 0.12s ease;
}

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

/* SELECTED branch — uses action/primary token series */
._chip_1am0j_1[data-selected="true"] {
  background: var(--color-action-primary);
  color: var(--color-text-primary);
}
._chip_1am0j_1[data-selected="true"]:hover,
._chip_1am0j_1[data-selected="true"][data-state="hover"] {
  background: var(--color-action-primary-hover);
}
._chip_1am0j_1[data-selected="true"]:active,
._chip_1am0j_1[data-selected="true"][data-state="pressed"] {
  background: var(--color-action-primary-pressed);
}

/* UNSELECTED branch — transparent default, subtle purple-tint on hover */
._chip_1am0j_1[data-selected="false"]:hover,
._chip_1am0j_1[data-selected="false"][data-state="hover"] {
  background: var(--color-accent-purple-bg);
}
/* unselected/pressed is same as initial (transparent) by design */
._group_1ecqx_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-20);
}
._header_16p0p_1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 20px gutter on both sides until mobile breakpoint (Figma Container 1400 + 20px outer). */
  padding: 0 var(--space-20);
  box-sizing: border-box;
  /* Sticky — sits at the top while page scrolls. */
  position: sticky;
  top: 0;
  z-index: 100;
  /* Smooth transition into glass on scroll. */
  transition: background 200ms ease, backdrop-filter 200ms ease;
}

/* Glass view — Figma "Header / view=glass" + Paint Style "Block/Header/Glass".
   Linear gradient Purple-Gray/800 (100% → 70% alpha) + BACKGROUND_BLUR radius=12. */
._header_16p0p_1[data-view="glass"] {
  background: linear-gradient(
    to bottom,
    var(--color-purple-gray-800),
    rgba(25, 14, 64, 0.7)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

._row_16p0p_29 {
  width: 100%;
  max-width: 1400px;
  padding: var(--space-20) 0;
  display: flex;
  align-items: center;
  gap: var(--space-80);
  /* Logo + Nav пакуются слева (Figma Container primaryAxis=MIN, Row HUG w=662). */
}

._nav_16p0p_39 {
  display: flex;
  align-items: center;
  gap: var(--space-48); /* 48 (округлено с 50) */
}

._link_16p0p_45 {
  /* Typography — textStyles['Nav/Regular'] / textStyles['Nav/Active'] applied inline in Header.tsx
     (Figma Text Styles "Nav/Regular" / "Nav/Active"). */
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 120ms ease-out;
}

._link_16p0p_45[data-active='true'] {
  color: var(--color-text-primary);
}

._link_16p0p_45:hover {
  color: var(--color-text-primary);
}

/* ── tablet-1024 (viewport ≤ 1279) ───────────────────────────
   Figma "Header / Resize=tablet". Row gap 80→64, nav font 20. (gutter — глобальный, см. .header) */
@media (max-width: 1279px) {
  ._row_16p0p_29 {
    gap: var(--space-64);
  }

  ._link_16p0p_45 {
    font-size: 20px !important;
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Figma "Header / Resize=mobile". Nav скрывается (см. Header.tsx),
   Logo центрируется. Outer pad 0, row pad 16/0/16/0.
   Sticky отключён — на mobile хедер скроллится вместе со страницей. */
@media (max-width: 767px) {
  ._header_16p0p_1 {
    padding: 0;
    position: relative;
  }

  ._row_16p0p_29 {
    padding: var(--space-16) 0;
    justify-content: center;
    gap: 0;
  }
}
/* Hero — fluid layout от 1024 до 1400 viewport, snap typography через useResize hook. */

._hero_1164e_3 {
  position: relative;
  /* isolation:isolate — создаёт stacking context. .glow с z-index:-1 опускается
     ниже всех остальных детей .hero (header, copy, button, game-frames),
     но остаётся выше фона .hero. */
  isolation: isolate;
  width: 100%;
  background: var(--color-bg-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48); /* 48 */
  padding: 140px var(--space-20) var(--space-80); /* outer gutter 20 always */
  box-sizing: border-box;
}

/* Tablet 1024-1279 — padding-top 120 (140 base - 20). */
@media (min-width: 1024px) and (max-width: 1279px) {
  ._hero_1164e_3 {
    padding-top: 120px;
  }
}

/* Glow — Hero/Glow/Alt 400×337 native, растягивается в большой блюр (не pixelated).
   Положение: внутри .heroBanner, центрирован translate'ом — скейлится в центр.
   Размер интерполируется: 1019×859 @ viewport 1024 → 1426×1201 @ viewport 1920.
   Bleed за границы banner и .hero — by design (нет overflow:hidden). */
._glow_1164e_5 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(1019px, calc(553.84px + 45.4vw), 1426px);
  height: clamp(859px, calc(467.83px + 38.16vw), 1201px);
  transform: translate(-50%, -50%);
  z-index: -1; /* под всеми siblings — благодаря isolation:isolate на .hero не уходит за пределы Hero. */
  pointer-events: none;
  user-select: none;
  /* Inline-noise SVG для обоих pseudo (squid / plinko) — DRY через CSS var. */
  --noise: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.675' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

._glowImg_1164e_44 {
  display: block;
  width: 100%;
  height: 100%;
  /* Два слоя складываются в один .glow контейнер — crossfade по data-active. */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

._glowImg_1164e_44[data-active="true"] {
  opacity: 1;
}

/* Film-grain noise overlay — две версии masked по форме каждого glow.
   ::after = squid, ::before = plinko. Кроссфейдятся в такт с .glowImg по data-game на .glow. */
._glow_1164e_5::after,
._glow_1164e_5::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 600ms ease;
}

._glow_1164e_5::after {
  /* squid glow shape */
  -webkit-mask-image: url(/assets/hero-glow-alt-DQr3MO79.png);
          mask-image: url(/assets/hero-glow-alt-DQr3MO79.png);
}
._glow_1164e_5::before {
  /* plinko glow shape */
  -webkit-mask-image: url(/assets/hero-glow-alt-2-DhQbuKhC.png);
          mask-image: url(/assets/hero-glow-alt-2-DhQbuKhC.png);
}

._glow_1164e_5[data-game="squid"]::after   { opacity: 1; }
._glow_1164e_5[data-game="plinko"]::before { opacity: 1; }

._container_1164e_92 {
  width: 100%;
  /* Контент Hero ограничен 1400 — выравнивание с Header и общим page container.
     Background и glow самой .hero — full-bleed (за счёт того что position: absolute и .hero без max-width). */
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Layout: fluid flex split. copyColumn:heroBanner = 636:684 (desktop proportions).
   gap — линейная интерполяция 40 → 80 в диапазоне viewport 1024 → 1920. */
._layout_1164e_104 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(40px, calc(-5.71px + 4.464vw), 80px);
}

._copyColumn_1164e_111 {
  flex: 636 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, calc(13.71px + 1.786vw), 48px); /* 32@1024 → 48@1920 */
}

._copyStack_1164e_120 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, calc(22.86px + 0.893vw), 40px); /* 32@1024 → 40@1920 */
}

._heading_1164e_128 {
  margin: 0;
  color: var(--color-text-primary);
  /* Typography — Display/XL ↔ Display/M через useResize hook (Hero.tsx). */
}

._subtitle_1164e_134 {
  margin: 0;
  color: var(--color-text-secondary);
  /* Typography — Subtitle ↔ Subtitle/M через useResize hook (Hero.tsx). */
}

/* Banner: flex-grows pro rata, aspect-ratio удерживает пропорции 684/700 = 0.977.
   Game-frames внутри — абсолютно позиционированные с % для масштаба вместе с banner. */
._heroBanner_1164e_27 {
  position: relative;
  flex: 684 1 0;
  min-width: 0;
  aspect-ratio: 684 / 700;
}

/* Banner/Hint overlay — fixed Figma sizing (220×45), нижний-правый угол banner'а.
   Figma: x=435 y=655 в banner 684×700 → right=29, bottom=0. Desktop only. */
._bannerHint_1164e_151 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(140px, 18vw, 220px);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* Tablet 768-1023 — banner hint смаленький фикс. */
@media (max-width: 1023px) {
  ._bannerHint_1164e_151 {
    width: 140px;
  }
}


._gameFrame_1164e_169 {
  position: absolute;
  background: var(--color-bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Padding/radius: интерполяция 12→16 и 24→32 в 1024→1920. */
  padding: clamp(12px, calc(7.43px + 0.446vw), 16px);
  border-radius: clamp(24px, calc(14.86px + 0.893vw), 32px);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  /* Button reset + анимация swap (position, size, opacity, transform). */
  border: 0;
  color: inherit;
  font: inherit;
  cursor: default; /* disabled */
  transition:
    left      450ms cubic-bezier(0.4, 0, 0.2, 1),
    top       450ms cubic-bezier(0.4, 0, 0.2, 1),
    width     450ms cubic-bezier(0.4, 0, 0.2, 1),
    height    450ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 450ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity   200ms ease-out;
}

/* Front frame — большой, слева, полная прозрачность. z-index выше → перекрывает back. */
._gameFrame_1164e_169[data-position='front'] {
  left: 0;
  top: 0;
  width: 60.96%;   /* 417/684 desktop ≈ 295/494 tablet-1024 */
  height: 100%;
  opacity: 1;
  z-index: 2;
}

/* Back frame — меньше, справа, вертикально центрирован, 7% прозрачности. */
._gameFrame_1164e_169[data-position='back'] {
  left: 49.12%;    /* 336/684 desktop ≈ 240/494 tablet-1024 ≈ 190/444 tablet-768 ≈ 188/388 mobile */
  top: 50%;
  transform: translateY(-50%);
  width: 50.88%;   /* 348/684 ≈ 254/494 */
  height: 83%;     /* 581/700 ≈ 424/495 */
  opacity: 0.93;
  z-index: 1;
}

/* DISABLED: .gameFrame[data-position='back']:hover,
.gameFrame[data-position='back']:focus-visible {
  opacity: 1;
}  */

._gameFrame_1164e_169:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 4px;
}

._gameFrameImg_1164e_226 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-18);
}


/* Iframe wrapper — рендерит iframe в "родном" размере и скейлит через container query */
._gameIframeWrapper_1164e_236 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  /* border-radius задаётся через inline style в ScaledIframe */
  background: #1b173d;
}

/* Скрытый iframe (продолжает работать в фоне) */
._hiddenIframe_1164e_246 {
  visibility: hidden;
  pointer-events: none;
}

/* ── tablet-768 (viewport ≤ 1023) ──────────────────────────────
   Figma "Hero / Resize=tablet-768".
   Layout flip: copy + banner перестают быть side-by-side, банер уезжает вниз.
   Banner 444×495 (aspect 444/495 = 0.897), game-frames в новых %. */
@media (max-width: 1023px) {
  ._hero_1164e_3 {
    padding: 140px var(--space-16) var(--space-64);
    gap: var(--space-40);
  }

  ._layout_1164e_104 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }

  ._copyColumn_1164e_111 {
    flex: none;
    width: 100%;
    gap: var(--space-32);
    align-items: center; /* button + копи-блок центрируются по горизонтали */
  }

  ._copyStack_1164e_120 {
    gap: var(--space-32);
    align-items: center; /* heading/subtitle тоже по центру */
  }

  ._heading_1164e_128,
  ._subtitle_1164e_134 {
    text-align: center;
  }

  ._heroBanner_1164e_27 {
    flex: none;
    width: 444px;
    max-width: 100%;
    aspect-ratio: 444 / 495;
    align-self: center;
  }

  ._gameFrame_1164e_169[data-position='front'] {
    width: 66.44%;   /* 295/444 */
    height: 100%;
  }

  ._gameFrame_1164e_169[data-position='back'] {
    left: 42.79%;    /* 190/444 */
    width: 57.21%;   /* 254/444 */
    height: 85.66%;  /* 424/495 */
    /* top: 50% + translateY(-50%) наследуется из дефолта */
  }

  /* Glow size — Figma tablet-768 spec 940×792. Позиция остаётся centered-on-banner из дефолта. */
  ._glow_1164e_5 {
    width: 940px;
    height: 792px;
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Figma "Hero / Resize=mobile". Banner перемещается НАД copy
   (через order:-1). Banner 388×403 (aspect 388/403 = 0.962). */
@media (max-width: 767px) {
  ._hero_1164e_3 {
    padding: 100px 0 var(--space-48);
    gap: var(--space-8);
  }

  ._container_1164e_92 {
    padding: 0 var(--space-16);
  }

  ._layout_1164e_104 {
    gap: var(--space-32);
  }

  ._copyColumn_1164e_111 {
    gap: var(--space-24);
  }

  ._copyStack_1164e_120 {
    gap: var(--space-24);
  }

  ._heroBanner_1164e_27 {
    order: -1; /* banner first, copy second — match Figma mobile order */
    /* Fluid: 388px @ viewport 420 (Figma mobile) → 444px @ viewport 768 (Figma tablet-768).
       max-width:100% — fallback на очень узких viewport'ах (<388). */
    width: clamp(388px, calc(320.4px + 16.1vw), 444px);
    max-width: 100%;
    align-self: center;
    aspect-ratio: 388 / 403;
  }

  ._gameFrame_1164e_169[data-position='front'] {
    width: 61.86%;   /* 240/388 */
    height: 100%;
  }

  ._gameFrame_1164e_169[data-position='back'] {
    left: 48.45%;    /* 188/388 */
    width: 51.55%;   /* 200/388 */
    height: 82.88%;  /* 334/403 */
    /* top: 50% + translateY(-50%) наследуется из дефолта */
  }

  /* Glow на mobile — переезд в правый-верхний угол + Figma mobile spec 984×829.
     Хардкод offsets — на viewport 420 центр glow попадает примерно на (462, 0). */
  ._glow_1164e_5 {
    left: auto;
    right: -550px;
    top: -480px;
    transform: none;
    width: 984px;
    height: 829px;
  }

  /* Border-radius scale-down — Figma mobile spec outer=18, inner=12.
     Fluid clamp: 12→18 outer, 6→12 inner в диапазоне viewport 320→420.
     Ниже 320 — лочится на минимуме, чтобы на узких экранах углы не выглядели слишком круглыми. */
  ._gameFrame_1164e_169 {
    border-radius: clamp(12px, calc(-7.2px + 6vw), 18px);
  }

  ._gameFrameImg_1164e_226 {
    border-radius: clamp(6px, calc(-13.2px + 6vw), 12px);
  }
}
/* Feature-Strip — desktop only (1920px design). Адаптив намеренно не делается. */

._section_9bipg_3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-20); /* 20 */
  box-sizing: border-box;
}

._container_9bipg_12 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--color-accent-purple-bg); /* Purple-Alpha/Purple-500-24% */
  /* backdrop-filter был тут из Figma (blur 31.4px), но на непрозрачном dark page bg
     он визуально ничего не делает + вызывает Chromium compositor-артефакты
     (проекция filter'а с button hover из Hero выше). Убран. */
  border-radius: var(--radius-18); /* 18 */
  padding: var(--space-32); /* 32 */
  box-sizing: border-box;
  isolation: isolate;
}

._row_9bipg_26 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._item_9bipg_33 {
  display: flex;
  align-items: center;
  gap: var(--space-24); /* 24 */
  flex-shrink: 0;
}

._label_9bipg_40 {
  /* Typography — textStyles[Nav/Regular | Nav/Regular/S] applied inline in FeatureStrip.tsx. */
  width: 180px;
  margin: 0;
  white-space: pre-line; /* поддержка \n в label */
  color: var(--color-text-primary);
}

/* ── tablet-1024 (viewport ≤ 1279) ─────────────────────────────
   Figma "Feature-Strip / Resize=tablet-1024".
   Container: pad 32→20/24, height 124→80.
   Item: icon 60→40, gap 24→12, label HUG (width auto). */
@media (max-width: 1279px) {
  ._container_9bipg_12 {
    padding: var(--space-20) var(--space-24);
  }

  ._item_9bipg_33 {
    gap: var(--space-12);
  }

  ._label_9bipg_40 {
    width: auto;
  }
}

/* ── tablet-768 (viewport ≤ 1023) ──────────────────────────────
   Figma "Feature-Strip / Resize=tablet-768".
   Items flip horizontal→vertical (icon сверху, text снизу).
   Container radius 18→24, pad 20×4. */
@media (max-width: 1023px) {
  ._section_9bipg_3 {
    padding: 0 var(--space-16);
  }

  ._container_9bipg_12 {
    padding: var(--space-20);
    border-radius: var(--radius-24);
  }

  ._item_9bipg_33 {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  ._label_9bipg_40 {
    text-align: center;
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Marquee: items дублируются 2x в JSX, animation translateX 0 → -50% (ширина одного набора).
   Контент бесконечно едет справа налево. Items flip обратно в horizontal layout. */
@media (max-width: 767px) {
  ._section_9bipg_3 {
    padding: 0;
  }

  ._container_9bipg_12 {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    padding: var(--space-20) 0;
  }

  ._row_9bipg_26 {
    width: max-content;
    justify-content: flex-start;
    gap: var(--space-32); /* фиксированный gap между items (а не space-between). */
    padding: 0 var(--space-16);
    animation: _featureStripMarquee_9bipg_1 28s linear infinite;
  }

  ._row_9bipg_26:hover {
    animation-play-state: paused;
  }

  ._item_9bipg_33 {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
    flex-shrink: 0;
  }

  ._label_9bipg_40 {
    text-align: left;
    width: auto;
    white-space: pre-line;
  }
}

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

/* Уважение системной настройки "уменьшить движение" — отключаем анимацию. */
@media (prefers-reduced-motion: reduce) {
  ._row_9bipg_26 { animation: none; }
}
._backdrop_1px7l_1 {
  position: fixed;
  inset: 0;
  background: var(--color-bg-scrim);
  /* Figma: BACKGROUND_BLUR radius=16 on variant frame */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  /* 'safe center' = center if it fits, otherwise stick to start so content stays scrollable. */
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  z-index: 1000;
  /* Open/close fade. Duration synced with ANIM_MS в DemoModal.tsx. */
  opacity: 0;
  transition: opacity 200ms ease;
}
._backdrop_1px7l_1[data-visible] {
  opacity: 1;
}

._modal_1px7l_22 {
  position: relative;
  background: var(--color-bg-modal);
  padding: var(--space-16);
  border-radius: var(--radius-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  box-sizing: border-box;
  flex-shrink: 0;
  /* Sizes are fixed Figma values per resize variant — no max-* clamps. */
  /* Figma: GLASS effect (radius=4, depth=20, light from -45°). CSS approximation: */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--color-white-a06);
  box-shadow: inset 0 1px 0 var(--color-white-a06);
  /* Open/close: subtle scale + fade. Duration synced with ANIM_MS в DemoModal.tsx. */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 200ms ease, transform 200ms ease;
}
._modal_1px7l_22[data-visible] {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  ._backdrop_1px7l_1,
  ._modal_1px7l_22 {
    transition: none;
  }
}

/* Modal-Body sizes — exact from Figma (panel inside viewport, NOT viewport itself). */
._modal_1px7l_22[data-resize="desktop"][data-mode="full"]               { width: 1275px; height: 815px; }
._modal_1px7l_22[data-resize="desktop"][data-mode="mobile-preview"]     { width: 429px;  height: 816px; }
._modal_1px7l_22[data-resize="tablet-1024"][data-mode="full"]           { width: 943px;  height: 624px; }
._modal_1px7l_22[data-resize="tablet-1024"][data-mode="mobile-preview"] { width: 381px;  height: 736px; }
._modal_1px7l_22[data-resize="tablet-768"][data-mode="full"]            { width: 736px;  height: 509px; }
._modal_1px7l_22[data-resize="tablet-768"][data-mode="mobile-preview"]  { width: 543px;  height: 802px; }
._modal_1px7l_22[data-resize="mobile"][data-mode="full"] {
  /* Adaptive: 16px gutter on each side of the viewport, capped at 400px (Figma size). */
  width: calc(100vw - 32px);
  max-width: 400px;
  height: 708px;
  /* Buffer for floating Close above + scrim safe area below */
  max-height: calc(100vh - 88px);
}

/* Mobile: Close lives OUTSIDE Modal-Body, above its top-right (per Figma).
   Modal-Body itself contains only the game slot. */

._toolbar_1px7l_74 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0 var(--space-12) var(--space-16);
  flex-shrink: 0;
}

._closeBtn_1px7l_82,
._closeBtnFloating_1px7l_83 {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease;
}
._closeBtn_1px7l_82:hover,
._closeBtnFloating_1px7l_83:hover  { color: var(--color-text-primary); }
._closeBtn_1px7l_82:focus-visible,
._closeBtnFloating_1px7l_83:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-8);
}

/* Mobile floating Close — sits above Modal-Body, right-aligned to its right edge.
   Figma: Modal-Toolbar (y=-56, h=56) holds Close at (368,12) inside w=400 toolbar.
   Close-top = -56 + 12 = -44 from Modal-Body top, close-right = 400 = Modal-Body right edge. */
._closeBtnFloating_1px7l_83 {
  position: absolute;
  top: -44px;
  right: 0;
}

._slot_1px7l_112 {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius-18);
  overflow: hidden;
}
._reveal_e08sk_1 {
  opacity: 0;
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  will-change: opacity, transform;
}
._reveal_e08sk_1[data-from="left"]   { transform: translateX(-24px); }
._reveal_e08sk_1[data-from="right"]  { transform: translateX(24px);  }
._reveal_e08sk_1[data-from="top"]    { transform: translateY(-24px); }
._reveal_e08sk_1[data-from="bottom"] { transform: translateY(24px);  }

._reveal_e08sk_1[data-in="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  ._reveal_e08sk_1 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Games-Section — desktop only (1920px design). */

/* Card cell layout — fits Figma flex:1 0 0, растягивает GameCard. Reveal-анимация — lib/Reveal. */
._cardCell_krl3u_4 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
._cardCell_krl3u_4 > * { width: 100%; }

._section_krl3u_12 {
  width: 100%;
  background: var(--color-bg-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80); /* 80 */
  padding: var(--space-80) var(--space-20) var(--space-40); /* 20 outer gutter — выровнено с Hero/Feature-Strip. */
  box-sizing: border-box;
}

._headlineBlock_krl3u_23 {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32); /* 32 */
}

._heading_krl3u_32 {
  /* Typography — textStyles['Display/L'] applied inline in GamesSection.tsx. */
  margin: 0;
  color: var(--color-text-primary);
  text-align: center;
  width: 100%;
}

._cardsBlock_krl3u_40 {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32); /* 32 */
}

._row_krl3u_48 {
  width: 100%;
  display: flex;
  gap: var(--space-32); /* 32 */
  justify-content: center;
  align-items: stretch;
}

/* Each GameCard takes equal share — Figma flex:1 0 0. */
._row_krl3u_48 > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ── tablet-1024 (viewport ≤ 1279) ─────────────────────────────
   Figma "Games-Section / Resize=tablet-1024".
   Padding 64/20/40, outer gap 64, headline-block + cards-block gap 24. */
@media (max-width: 1279px) {
  ._section_krl3u_12 {
    padding: var(--space-64) var(--space-20) var(--space-40);
    gap: var(--space-64);
  }

  ._headlineBlock_krl3u_23 {
    gap: var(--space-24);
  }

  ._cardsBlock_krl3u_40 {
    gap: var(--space-24);
  }

  ._row_krl3u_48 {
    gap: var(--space-24);
  }
}

/* ── tablet-768 (viewport ≤ 1023) ──────────────────────────────
   Figma "Games-Section / Resize=tablet-768".
   Padding 48/16, outer gap 48, cards gaps 16. Card size 's' (JS). */
@media (max-width: 1023px) {
  ._section_krl3u_12 {
    padding: var(--space-48) var(--space-16);
    gap: var(--space-48);
  }

  ._cardsBlock_krl3u_40 {
    gap: var(--space-16);
  }

  ._row_krl3u_48 {
    gap: var(--space-16);
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Figma "Games-Section / Resize=mobile". 4 карты в одну колонку.
   Outer pad 8 sides, gaps между карточками 8. */
@media (max-width: 767px) {
  ._section_krl3u_12 {
    padding: var(--space-48) var(--space-8);
    gap: var(--space-32);
  }

  ._headlineBlock_krl3u_23 {
    gap: var(--space-20);
  }

  ._cardsBlock_krl3u_40 {
    gap: var(--space-16);
  }

  ._row_krl3u_48 {
    flex-direction: column;
    gap: var(--space-16);
  }

  /* Override desktop `flex: 1 1 0` — в column направлении это коллапсит карты в 0 высоту.
     Возвращаем auto-height по контенту, full-width. */
  ._row_krl3u_48 > * {
    flex: 0 0 auto;
    width: 100%;
  }
}
/* Performance-Section — desktop only (1920px design). */

._section_147ya_3 {
  width: 100%;
  background: var(--color-bg-default); /* purple-gray/900 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-100) var(--space-20); /* 20 outer gutter — выровнено с Hero/Feature-Strip. */
  box-sizing: border-box;
}

._block_147ya_14 {
  width: 100%;
  max-width: 1400px;
  display: flex;
  gap: var(--space-40); /* 40 */
  align-items: flex-start;
  justify-content: center;
}

/* ── Left: headline + heading + subhead ─────────────────── */
._headlineBlock_147ya_24 {
  width: 600px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-32); /* 32 */
}

._heading_147ya_34 {
  /* Typography — textStyles['Display/L'] applied inline. */
  margin: 0;
  color: var(--color-text-primary);
  width: 100%;
}

._subhead_147ya_41 {
  /* Typography — textStyles['Body/XL'] applied inline. */
  margin: 0;
  color: var(--color-text-secondary);
  width: 100%;
}

/* ── Right: 2×2 tiles grid ──────────────────────────────── */
._tilesGrid_147ya_49 {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* 16 */
  align-items: center;
}

._tilesRow_147ya_58 {
  width: 100%;
  display: flex;
  gap: var(--space-20); /* 20 */
  align-items: stretch;
}

._tile_147ya_49 {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-surface); /* purple-gray/800 */
  border-radius: var(--radius-32); /* 32 */
  padding: var(--space-80) var(--space-40); /* 80 top/bottom, 40 sides */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32); /* 32 */
  /* Reveal — staggered fade-in from below. transition-delay приходит inline (per-index). */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  will-change: opacity, transform;
}

._tilesGrid_147ya_49[data-in="true"] ._tile_147ya_49 {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  ._tile_147ya_49 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

._tileImg_147ya_95 {
  display: block;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  /* mix-blend-lighten уже запечён в PNG при экспорте — повторно не применяем. */
}

._tileText_147ya_103 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* 16 */
  text-align: center;
}

._tileTitle_147ya_111 {
  /* Typography — textStyles['Heading/L'] applied inline. */
  margin: 0;
  color: var(--color-text-primary);
  width: 100%;
}

._tileSubtitle_147ya_118 {
  /* Typography — textStyles['Body/XS'] applied inline. */
  margin: 0;
  color: var(--color-text-secondary);
  width: 100%;
}

/* ── tablet-1024 (viewport ≤ 1279) ─────────────────────────────
   Figma "Performance-Section / Resize=tablet-1024".
   Outer pad 100→64. Block gap 40→32, headline w 600→380, gap 32→24.
   Tiles-grid gap 16→12, tiles-row gap 20→12.
   Tile pad 80/40→32/16, gap 32→16. Tile img 150→120. tileText gap 16→8. */
@media (max-width: 1279px) {
  ._section_147ya_3 {
    padding: var(--space-64) var(--space-20);
    box-sizing: border-box;
  }

  ._block_147ya_14 {
    gap: var(--space-32);
  }

  ._headlineBlock_147ya_24 {
    width: 380px;
    gap: var(--space-24);
  }

  ._tilesGrid_147ya_49 {
    gap: var(--space-16);
  }

  ._tilesRow_147ya_58 {
    gap: var(--space-12);
  }

  ._tile_147ya_49 {
    padding: var(--space-32) var(--space-16);
    gap: var(--space-16);
    border-radius: var(--radius-24);
  }

  ._tileImg_147ya_95 {
    width: 120px;
    height: 120px;
  }

  ._tileText_147ya_103 {
    gap: var(--space-8);
  }
}

/* ── tablet-768 (viewport ≤ 1023) ──────────────────────────────
   Figma "Performance-Section / Resize=tablet-768".
   Block flip horizontal→vertical: headline сверху, tiles снизу.
   Outer pad 20/16, tile pad 32/16 → 24/16. */
@media (max-width: 1023px) {
  ._section_147ya_3 {
    padding: var(--space-20) var(--space-16);
  }

  ._block_147ya_14 {
    flex-direction: column;
    gap: var(--space-48);
  }

  ._headlineBlock_147ya_24 {
    width: 100%;
  }

  ._tilesGrid_147ya_49 {
    width: 100%;
  }

  ._tile_147ya_49 {
    padding: var(--space-24) var(--space-16);
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Figma "Performance-Section / Resize=mobile". Outer pad 0/16, block gap 32.
   Headline gap 20. Tile pad 20/12, gap 12, radius 12. Tile img 100. */
@media (max-width: 767px) {
  ._section_147ya_3 {
    padding: 0 var(--space-16);
  }

  ._block_147ya_14 {
    gap: var(--space-32);
  }

  ._headlineBlock_147ya_24 {
    gap: var(--space-20);
  }

  ._tilesRow_147ya_58 {
    gap: var(--space-16);
  }

  ._tile_147ya_49 {
    padding: var(--space-20) var(--space-12);
    gap: var(--space-12);
    border-radius: var(--radius-12);
  }

  ._tileImg_147ya_95 {
    width: 100px;
    height: 100px;
  }

  ._tileText_147ya_103 {
    gap: var(--space-6);
  }
}
/* Feedback-Section — desktop only (1920px design). */

._section_1xk2c_3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-20); /* 20 — outer "frame" gutter */
  box-sizing: border-box;
}

._inner_1xk2c_11 {
  /* Block/Feedback/Glow — в Figma это rotated radial gradient.
     CSS radial-gradient не поддерживает rotation, поэтому здесь визуальное
     приближение: warm spot в bottom-left, fading в deep purple вверх-вправо. */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  border-radius: var(--radius-32); /* 32 */
  padding: var(--space-100) 160px var(--space-40); /* pt 100 / px 160 / pb 40 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Layer 1: SVG fractalNoise (зернистость, шум) поверх — blend overlay даёт film-grain эффект.
     Layer 2: warm-glow radial gradient.
     Noise opacity внутри SVG (0.4) контролирует силу зерна. */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.675' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>") repeat,
    radial-gradient(
      ellipse 150% 200% at 0% 100%,
      rgba(246, 190, 93, 1) 0%,
      rgba(232, 157, 88, 1) 5.7%,
      rgba(204, 127, 102, 1) 11.5%,
      rgba(157, 93, 124, 1) 17.4%,
      rgba(124, 75, 136, 1) 23%,
      rgba(95, 62, 142, 1) 28.8%,
      rgba(54, 37, 120, 1) 35.8%,
      rgba(40, 26, 93, 1) 41.1%,
      rgba(25, 14, 65, 1) 46.5%,
      rgba(25, 14, 65, 1) 100%
    );
  background-blend-mode: soft-light, normal;
}

._content_1xk2c_46 {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80); /* 80 */
}

._heading_1xk2c_55 {
  /* Typography — textStyles['Display/L'] applied inline. */
  margin: 0;
  color: var(--color-text-primary);
  text-align: center;
  width: 100%;
}

._form_1xk2c_63 {
  width: 100%;
  max-width: 1000px;
  display: flex;
  gap: var(--space-24); /* 24 */
  align-items: flex-start;
  justify-content: center;
}

._emailInput_1xk2c_72 {
  /* Override Input.wrapper max-width (769px) — здесь нужно растягиваться flex'ом. */
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

._hint_1xk2c_79 {
  /* Typography — textStyles['Body/M'] applied inline. */
  margin: 0;
  color: var(--color-text-muted-footer);
  text-align: center;
  width: 100%;
}

._emailLink_1xk2c_87 {
  color: inherit;
  text-decoration: none;
  transition: text-decoration-color 120ms ease-out;
}

._emailLink_1xk2c_87:hover,
._emailLink_1xk2c_87:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px; /* небольшой отступ — выглядит легче чем стандартный */
}

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

/* ── tablet-1024 (viewport ≤ 1279) ─────────────────────────────
   Figma "Feedback-Section / Resize=tablet-1024".
   Inner pad 100/160/40 → 64/64/32. Content gap 80 → 64. Form gap 24 → 16. */
@media (max-width: 1279px) {
  ._inner_1xk2c_11 {
    padding: var(--space-64) var(--space-64) var(--space-32);
  }

  ._content_1xk2c_46 {
    gap: var(--space-64);
  }

  ._form_1xk2c_63 {
    gap: var(--space-16);
  }
}

/* ── tablet-768 (viewport ≤ 1023) ──────────────────────────────
   Figma "Feedback-Section / Resize=tablet-768".
   Inner pad 64/64/32 → 64/40/32, radius 32→24, content gap 64→40, form items центрируются. */
@media (max-width: 1023px) {
  ._inner_1xk2c_11 {
    padding: var(--space-64) var(--space-40) var(--space-32);
    border-radius: var(--radius-24);
  }

  ._content_1xk2c_46 {
    gap: var(--space-40);
  }

  ._form_1xk2c_63 {
    justify-content: center;
  }

  ._emailInput_1xk2c_72 {
    flex: none;
    width: 399px;
    max-width: 100%;
  }
}

/* ── mobile (viewport ≤ 767) ──────────────────────────────────
   Figma "Feedback-Section / Resize=mobile". Outer pad 16, inner pad 40/20/24,
   inner radius 12. Form flip vertical: input + button stack 100% width, gap 12. */
@media (max-width: 767px) {
  ._section_1xk2c_3 {
    padding: var(--space-16);
  }

  ._inner_1xk2c_11 {
    padding: var(--space-40) var(--space-20) var(--space-24);
    border-radius: var(--radius-12);
    /* Mobile: градиент сверху-по-центру, распространяется вниз. Цветовые стопы те же
       что в дефолте (warm orange → deep purple), меняется только origin: at 0% 100% → at 50% 0%. */
    background:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.675' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>") repeat,
      radial-gradient(
        ellipse 150% 200% at 50% -50%,
        rgba(246, 190, 93, 1) 0%,
        rgba(232, 157, 88, 1) 5.7%,
        rgba(204, 127, 102, 1) 11.5%,
        rgba(157, 93, 124, 1) 17.4%,
        rgba(124, 75, 136, 1) 23%,
        rgba(95, 62, 142, 1) 28.8%,
        rgba(54, 37, 120, 1) 35.8%,
        rgba(40, 26, 93, 1) 41.1%,
        rgba(25, 14, 65, 1) 46.5%,
        rgba(25, 14, 65, 1) 100%
      );
    background-blend-mode: soft-light, normal;
  }

  ._content_1xk2c_46 {
    gap: var(--space-32);
  }

  ._form_1xk2c_63 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  ._emailInput_1xk2c_72 {
    width: 100%;
  }

  /* Error message в Input позиционируется bottom:-28px (out of layout flow).
     В column form gap=12 не вмещает overlap — добавляем margin-bottom когда в error state. */
  ._emailInput_1xk2c_72[data-state='error'] {
    margin-bottom: var(--space-24);
  }

  /* PrimaryButton size=m default 233px — override на full width в mobile form.
     button[data-size] селектор (0,2,1) > PrimaryButton's .button[data-size='m'] (0,2,0). */
  ._form_1xk2c_63 button[data-size] {
    width: 100%;
  }
}
._overlay_1o6dt_1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-bg-default);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

._overlay_1o6dt_1._hidden_1o6dt_15 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

._content_1o6dt_21 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

._logo_1o6dt_28 {
  animation: _pulse_1o6dt_1 2s ease-in-out infinite;
}

._progressContainer_1o6dt_32 {
  width: 280px;
  height: 4px;
  background: var(--color-border-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

._progressBar_1o6dt_40 {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

@keyframes _pulse_1o6dt_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
._page_u2kqo_1 {
  min-height: 100vh;
  background: var(--color-bg-default);
  padding-bottom: var(--space-80);
}

._content_u2kqo_7 {
  overflow-x: hidden;
  margin-top: -80px;
}

._content_u2kqo_7 > * + * {
  margin-top: var(--space-48);
}

@media (max-width: 1279px) {
  ._content_u2kqo_7 > * + * { margin-top: 0; }
}


/* ── Hero ──────────────────────────────────────────────────── */
._hero_u2kqo_22 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-16);
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr);
  gap: var(--space-80); /* 80 */
  align-items: center;
}

._heroCopy_u2kqo_33 {
  display: flex;
  flex-direction: column;
  gap: var(--space-48); /* 50 */
  align-items: flex-start;
}

._title_u2kqo_40 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 80px;
  line-height: 0.9;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}

._subtitle_u2kqo_50 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

._actions_u2kqo_60 {
  display: flex;
  gap: var(--space-24); /* 24 */
  align-items: center;
  flex-wrap: wrap;
}

/* ── Hero glass panels ─────────────────────────────────────── */
._heroPanel_u2kqo_68 {
  position: relative;
  min-height: 700px;
}

._frameLarge_u2kqo_73,
._frameSmall_u2kqo_74 {
  position: absolute;
  background: var(--color-bg-glass);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-32); /* 32 (округлено с 36) */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

._frameLarge_u2kqo_73 {
  left: 0;
  top: 0;
  width: 417px;
  height: 700px;
}

._frameSmall_u2kqo_74 {
  right: 0;
  top: 59px;
  width: 348px;
  height: 581px;
}

._framePlaceholder_u2kqo_99 {
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0.7;
}

/* ── Catalog ───────────────────────────────────────────────── */
._catalog_u2kqo_106 {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

._sectionTitle_u2kqo_116 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: var(--color-text-primary);
}

._grid_u2kqo_125 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

._cell_u2kqo_131 {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-purple-alpha-purple-500-a24);
  border-radius: var(--radius-18);
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

._cellWide_u2kqo_141 {
  grid-column: span 3;
}

._cellLabel_u2kqo_145 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._cellInner_u2kqo_154 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 120px;
}

._gameCardGrid_u2kqo_161 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 679px));
  gap: var(--space-24);
  justify-content: center;
}

@media (max-width: 1500px) {
  ._gameCardGrid_u2kqo_161 { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  ._hero_u2kqo_22  { grid-template-columns: 1fr; }
  ._heroPanel_u2kqo_68 { min-height: 0; height: 480px; }
  ._frameLarge_u2kqo_73  { width: 60%; }
  ._frameSmall_u2kqo_74  { width: 36%; }
  ._grid_u2kqo_125  { grid-template-columns: 1fr 1fr; }
  ._cellWide_u2kqo_141 { grid-column: span 2; }
}

@media (max-width: 700px) {
  ._title_u2kqo_40 { font-size: 48px; }
  ._subtitle_u2kqo_50 { font-size: 20px; }
  ._grid_u2kqo_125 { grid-template-columns: 1fr; }
  ._cellWide_u2kqo_141 { grid-column: span 1; }
  ._frameLarge_u2kqo_73, ._frameSmall_u2kqo_74 { position: static; width: 100%; height: 280px; }
  ._heroPanel_u2kqo_68 { height: auto; display: flex; flex-direction: column; gap: var(--space-16); }
}