:root {
  --bg-primary: #050407;
  --bg-secondary: #0a080e;
  --bg-surface: #100d16;
  --bg-elevated: #17121e;
  --border-default: #27232f;
  --border-hover: #45354f;
  --border-active: #76518b;
  --purple-deep: #24132f;
  --purple-dark: #3a1d4f;
  --purple-primary: #56306c;
  --purple-hover: #76518b;
  --purple-soft: #a990b5;
  --text-primary: #f1edf4;
  --text-secondary: #d3cdd7;
  --text-muted: #99919f;
  --text-disabled: #66606c;
  --metallic: #beb5c3;
  --status-info: #6970a8;
  --status-success: #7c9b8b;
  --status-warning: #b79768;
  --status-error: #a75a68;
  --container: 1280px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 78% 12%, rgba(86, 48, 108, .17) 0, rgba(36, 19, 47, .08) 27%, transparent 53%),
    linear-gradient(135deg, #050407 0%, #09070c 55%, #0d0912 100%);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open,
body.modal-open { overflow: hidden; }

button,
input,
select { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

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

button { color: inherit; }

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

::selection { color: var(--text-primary); background: rgba(118, 81, 139, .42); }

:focus-visible {
  outline: 2px solid var(--purple-soft);
  outline-offset: 4px;
  border-radius: 8px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--text-primary);
  background: var(--purple-dark);
  border-radius: 10px;
  transform: translateY(-150%);
}

.skip-link:focus-visible { transform: translateY(0); }

@media (hover: none) and (pointer: coarse) {
  .skip-link,
  .skip-link:focus,
  .skip-link:focus-visible { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: 48px;
}

.section { position: relative; padding-block: 120px; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .12;
  animation: ambientMove 16s ease-in-out infinite alternate;
}

.ambient-one { top: 4vh; right: -28vw; background: var(--purple-primary); }
.ambient-two { bottom: -30vw; left: -30vw; background: var(--purple-deep); animation-delay: -7s; }

@keyframes ambientMove {
  to { transform: translate3d(-4vw, 3vh, 0) scale(1.08); }
}

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 { color: var(--text-primary); }

h1 {
  margin-bottom: 28px;
  max-width: 780px;
  font-size: clamp(48px, 5.6vw, 80px);
  font-weight: 550;
  line-height: .98;
  letter-spacing: -.052em;
}

h1 span {
  color: var(--text-secondary);
  background: linear-gradient(180deg, #f5f2f6 0%, #c7c0cb 48%, #8a828f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -.04em;
}

h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--metallic);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 28px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--purple-primary), var(--metallic));
}

.micro {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.large-text { font-size: 18px; line-height: 1.7; }

.section-heading,
.catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 54px;
}

.section-heading h2,
.catalog-head h2 { max-width: 800px; margin-bottom: 0; }

.section-heading > p,
.catalog-head > p {
  max-width: 450px;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 17px;
}

.btn {
  min-height: 54px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.btn-primary {
  color: var(--text-primary);
  background: linear-gradient(135deg, #3a1d4f 0%, #56306c 55%, #6c477d 100%);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 14px 40px rgba(86, 48, 108, .22), inset 0 1px rgba(255, 255, 255, .13);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(86, 48, 108, .3), inset 0 1px rgba(255, 255, 255, .16);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  color: var(--text-secondary);
  background: rgba(10, 8, 14, .54);
  border-color: var(--border-hover);
}

.btn-secondary:hover {
  color: var(--text-primary);
  background: rgba(58, 29, 79, .2);
  border-color: var(--purple-hover);
  transform: translateY(-2px);
}

.btn-compact { min-height: 44px; padding-inline: 20px; font-size: 14px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-weight: 600;
  transition: color 200ms ease;
}

.text-link:hover { color: var(--purple-soft); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 76px;
  background: rgba(5, 4, 7, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--purple-dark), var(--purple-soft));
  opacity: .68;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  will-change: transform;
}

.site-header.scrolled { box-shadow: 0 16px 50px rgba(0, 0, 0, .22); }

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text-primary); font-weight: 600; letter-spacing: -.025em; }
.brand b { color: var(--metallic); font-weight: 500; }

.brand-mark {
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: var(--metallic);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark circle { fill: var(--purple-primary); stroke: var(--purple-soft); }

.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 38px; }
.desktop-nav a,
.login-link { color: var(--text-muted); font-size: 14px; transition: color 180ms ease; }
.desktop-nav a:hover,
.login-link:hover { color: var(--text-primary); }
.header-actions { display: flex; align-items: center; gap: 22px; }

.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: none;
  place-items: center;
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 18px;
  height: 1px;
  background: var(--text-primary);
  transition: transform 220ms ease, top 220ms ease;
}

.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 25px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 90;
  inset: 64px 0 0;
  padding: 54px 28px 34px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(5, 4, 7, .98);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { padding: 14px 0; color: var(--text-primary); font-size: clamp(26px, 7vw, 38px); font-weight: 500; letter-spacing: -.035em; }
.mobile-menu p { color: var(--text-disabled); font-size: 13px; }

.hero {
  min-height: 720px;
  padding: 64px 0 72px;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
  gap: 54px;
  align-items: center;
}

.hero-copy { position: relative; z-index: 2; }

.partner-proof {
  width: max-content;
  max-width: 100%;
  margin-bottom: 26px;
  padding: 10px 14px 10px 10px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(16, 13, 22, .66);
  border: 1px solid rgba(190, 181, 195, .12);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(12px);
}

.proof-logos { display: flex; padding-left: 7px; }
.proof-logos i {
  width: 30px;
  height: 30px;
  padding: 4px;
  margin-left: -7px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f4f2f5;
  border: 1px solid rgba(190, 181, 195, .28);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
}

.proof-logos img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.partner-proof > div:last-child { display: flex; flex-direction: column; }
.partner-proof strong { color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.partner-proof span { color: var(--text-disabled); font-size: 9px; }

.hero-lead {
  max-width: 610px;
  margin-bottom: 34px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.hero-note span { width: 6px; height: 6px; border: 1px solid var(--purple-soft); border-radius: 50%; box-shadow: 0 0 12px rgba(169, 144, 181, .45); }

.hero-visual {
  min-height: 560px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1200px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shift-x: 0px;
  --shift-y: 0px;
}

.hero-visual::before {
  position: absolute;
  width: 78%;
  height: 72%;
  content: "";
  background: rgba(86, 48, 108, .18);
  border-radius: 50%;
  filter: blur(80px);
}

.hero-visual::after {
  position: absolute;
  width: 72%;
  height: 78%;
  content: "";
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .055), transparent 42%),
    rgba(15, 11, 20, .25);
  border: 1px solid rgba(190, 181, 195, .08);
  border-radius: 34px;
  transform: rotate(13deg) skewY(-4deg);
  backdrop-filter: blur(2px);
}

.preview-shell {
  width: min(100%, 500px);
  padding: 20px;
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, rgba(23, 18, 30, .96), rgba(8, 6, 11, .98));
  border: 1px solid rgba(190, 181, 195, .17);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .54);
  transform: translate3d(var(--shift-x), var(--shift-y), 0) rotateY(calc(-5deg + var(--tilt-x))) rotateX(calc(2deg + var(--tilt-y)));
  transition: transform 280ms var(--ease), border-color 280ms ease;
  will-change: transform;
}

.hero-visual:hover .preview-shell { border-color: rgba(190, 181, 195, .24); }

.preview-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 18px; }
.preview-top > div { display: flex; flex-direction: column; gap: 3px; }
.preview-top strong { color: var(--text-secondary); font-size: 14px; font-weight: 600; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 6px 9px;
  color: var(--text-secondary);
  background: rgba(124, 155, 139, .1);
  border: 1px solid rgba(124, 155, 139, .24);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.status i { width: 5px; height: 5px; background: var(--status-success); border-radius: 50%; }
.status-new { background: rgba(105, 112, 168, .1); border-color: rgba(105, 112, 168, .3); }
.status-new i { background: var(--status-info); }
.status-limited { background: rgba(183, 151, 104, .08); border-color: rgba(183, 151, 104, .27); }
.status-limited i { background: var(--status-warning); }

.preview-card {
  padding: 27px;
  background: linear-gradient(145deg, rgba(20, 16, 27, .96), rgba(10, 8, 14, .98));
  border: 1px solid var(--border-default);
  border-radius: 18px;
}

.preview-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 26px;
  display: grid;
  place-items: center;
  color: var(--metallic);
  background: linear-gradient(145deg, rgba(86, 48, 108, .23), rgba(23, 18, 30, .55));
  border: 1px solid var(--border-hover);
  border-radius: 13px;
}

.preview-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.preview-brand { margin-bottom: 26px; }
.preview-card h2 { margin: 10px 0 13px; font-size: 26px; line-height: 1.18; letter-spacing: -.035em; }
.preview-card > p { margin: 0 0 26px; color: var(--text-muted); font-size: 13px; }

.preview-metrics { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; margin-bottom: 23px; }
.preview-metrics div { padding: 13px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); border-radius: 11px; }
.preview-metrics span { display: block; margin-bottom: 4px; color: var(--text-disabled); font-size: 10px; }
.preview-metrics strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.progress-row { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; }
.progress { height: 3px; margin: 8px 0 20px; overflow: hidden; background: var(--border-default); border-radius: 8px; }
.progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--purple-dark), var(--purple-soft)); }
.preview-button { width: 100%; min-height: 46px; }

.orbital {
  position: absolute;
  border: 1px solid rgba(190, 181, 195, .1);
  border-radius: 50%;
  transform: rotate(-24deg);
}

.orbital-a { width: 560px; height: 280px; }
.orbital-b { width: 640px; height: 390px; border-color: rgba(86, 48, 108, .16); transform: rotate(32deg); }
.orbital-a { animation: orbitA 16s ease-in-out infinite alternate; }
.orbital-b { animation: orbitB 18s ease-in-out infinite alternate; }

@keyframes orbitA { to { transform: rotate(-17deg) scale(1.035); opacity: .68; } }
@keyframes orbitB { to { transform: rotate(38deg) scale(.97); opacity: .78; } }

.floating-chip {
  position: absolute;
  z-index: 3;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(10, 8, 14, .9);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
}

.floating-chip > span { color: var(--purple-soft); font-size: 11px; font-weight: 600; }
.floating-chip div { display: flex; flex-direction: column; }
.floating-chip small { color: var(--text-disabled); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.floating-chip b { color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.chip-one { top: 15%; left: -2%; animation: floatChip 8s ease-in-out infinite; }
.chip-two { right: -6%; bottom: 13%; animation: floatChip 9s ease-in-out -3s infinite; }

@keyframes floatChip { 50% { transform: translateY(-9px); } }

.hero-brand-node {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 7px;
  color: var(--text-muted);
  background: rgba(8, 6, 11, .82);
  border: 1px solid rgba(190, 181, 195, .16);
  border-radius: 16px;
  box-shadow: 0 24px 65px rgba(0, 0, 0, .48);
  backdrop-filter: blur(18px);
}

.hero-brand-node .brand-tile { width: 44px; height: 44px; padding: 7px; border-radius: 12px; }
.hero-brand-node small { padding-right: 3px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.node-vtb { top: 4%; right: 4%; animation: floatChip 10s ease-in-out -2s infinite; }
.node-tbank { right: -3%; bottom: 25%; animation: floatChip 11s ease-in-out -6s infinite; }
.node-ozon { bottom: 4%; left: 7%; animation: floatChip 9s ease-in-out -4s infinite; }

.trust-bar { border-block: 1px solid rgba(255, 255, 255, .055); background: rgba(10, 8, 14, .58); }
.trust-list { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; }
.trust-list span { position: relative; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.trust-list span:not(:last-child)::after { position: absolute; top: 50%; right: -26px; width: 3px; height: 3px; content: ""; background: var(--purple-hover); border-radius: 50%; }

.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.category-card {
  min-height: 240px;
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(20, 16, 27, .83), rgba(10, 8, 14, .94));
  border: 1px solid var(--border-default);
  border-radius: 18px;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  overflow: hidden;
}

.category-card::before,
.offer-card::before,
.benefit-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(169, 144, 181, .095), transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.category-card:hover::before,
.offer-card:hover::before,
.benefit-card:hover::before { opacity: 1; }

.category-card > *,
.offer-card > *,
.benefit-card > * { position: relative; z-index: 1; }

.category-card:hover { transform: translateY(-4px); border-color: var(--border-hover); background: linear-gradient(145deg, rgba(28, 20, 37, .9), rgba(12, 9, 16, .97)); }
.category-card .line-icon { margin-bottom: 38px; }
.category-card h3 { padding-right: 30px; font-size: 21px; }
.category-card p { max-width: 310px; margin: 0; color: var(--text-muted); font-size: 14px; }
.category-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px; color: var(--text-disabled); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.category-meta b { color: var(--metallic); font-size: 18px; font-weight: 400; transition: transform 200ms ease; }
.category-card:hover .category-meta b { transform: translate(3px, -3px); }

.line-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--metallic);
  background: rgba(86, 48, 108, .1);
  border: 1px solid var(--border-default);
  border-radius: 11px;
}

.line-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.catalog-section {
  background:
    radial-gradient(circle at 18% 45%, rgba(58, 29, 79, .13), transparent 31%),
    var(--bg-secondary);
  border-block: 1px solid rgba(255, 255, 255, .035);
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.filters-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filters-scroll::-webkit-scrollbar { display: none; }

.filter-button {
  min-height: 42px;
  padding: 0 16px;
  flex: 0 0 auto;
  color: var(--text-muted);
  background: rgba(16, 13, 22, .72);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.filter-button:hover { color: var(--text-primary); border-color: var(--border-hover); }
.filter-button.active { color: var(--text-primary); background: rgba(86, 48, 108, .2); border-color: var(--border-active); }

.select-wrap { min-width: 235px; position: relative; }
.select-wrap select {
  width: 100%;
  min-height: 44px;
  padding: 0 42px 0 15px;
  color: var(--text-secondary);
  appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.select-wrap svg { position: absolute; top: 50%; right: 14px; width: 17px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }

.offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.offer-card {
  min-height: 440px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(20, 16, 27, .96), rgba(10, 8, 14, .98));
  border: 1px solid var(--border-default);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  position: relative;
  overflow: hidden;
}

.offer-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .42), 0 18px 55px rgba(86, 48, 108, .1);
}

.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 31px; }

.brand-tile {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  padding: 10px;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  background:
    linear-gradient(145deg, rgba(var(--brand-rgb), .27), rgba(var(--brand-rgb), .06)),
    var(--bg-secondary);
  border: 1px solid rgba(var(--brand-rgb), .52);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(var(--brand-rgb), .12),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  isolation: isolate;
  transition: transform 220ms var(--ease), box-shadow 220ms ease, border-color 220ms ease;
}

.brand-tile::before {
  position: absolute;
  z-index: -1;
  inset: -15px;
  content: "";
  background: radial-gradient(circle, rgba(var(--brand-rgb), .2), transparent 66%);
  filter: blur(8px);
  opacity: .62;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms var(--ease);
}

.brand-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .28));
}

.brand-tile b {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
}

.brand-tile-large { width: 58px; height: 58px; padding: 11px; border-radius: 16px; }
.offer-card:hover .brand-tile { transform: translateY(-2px); border-color: var(--brand-color); box-shadow: 0 17px 42px rgba(var(--brand-rgb), .21), inset 0 1px 0 rgba(255, 255, 255, .12); }
.offer-card:hover .brand-tile::before { opacity: .92; transform: scale(1.12); }

.offer-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.offer-brand > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-brand span { overflow: hidden; color: var(--text-disabled); font-size: 10px; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.offer-brand strong { overflow: hidden; color: var(--text-secondary); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.offer-card h3 { max-width: 520px; margin-bottom: 13px; }
.offer-description { max-width: 550px; margin-bottom: 23px; color: var(--text-muted); font-size: 14px; }

.offer-condition {
  margin: -10px 0 22px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-secondary);
  background: rgba(183, 151, 104, .055);
  border: 1px solid rgba(183, 151, 104, .18);
  border-radius: 10px;
  font-size: 11px;
}

.offer-condition i { width: 5px; height: 5px; margin-top: 6px; flex: 0 0 auto; background: var(--status-warning); border-radius: 50%; }

.offer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 29px; }
.offer-tags span { padding: 6px 9px; color: var(--text-muted); background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; font-size: 11px; }

.offer-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 18px;
  align-items: end;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.offer-metric span { display: block; margin-bottom: 5px; color: var(--text-disabled); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.offer-metric strong { color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.reward strong { color: var(--text-primary); font-size: 18px; }
.offer-bottom .btn { min-height: 44px; padding-inline: 18px; }
.catalog-disclaimer { max-width: 920px; margin: 22px 0 0; color: var(--text-disabled); font-size: 12px; }
.catalog-more { min-height: 34px; margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.catalog-more .btn { min-height: 46px; }
.catalog-more .btn span { color: var(--purple-soft); }
.catalog-more small { color: var(--text-disabled); font-size: 11px; }

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps::before { position: absolute; top: 57px; left: 16%; right: 16%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--border-hover), transparent); }
.step-card { min-height: 300px; padding: 30px; position: relative; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 18px; }
.step-number { width: 54px; height: 54px; margin-bottom: 72px; display: grid; place-items: center; position: relative; z-index: 1; color: var(--purple-soft); background: var(--bg-secondary); border: 1px solid var(--border-hover); border-radius: 50%; font-size: 12px; font-weight: 600; }
.step-card p { margin: 0; color: var(--text-muted); font-size: 14px; }

.why-section { background: rgba(10, 8, 14, .5); border-block: 1px solid rgba(255, 255, 255, .035); }
.why-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 100px; align-items: center; }
.why-copy > p:not(.eyebrow) { max-width: 650px; color: var(--text-muted); }
.why-copy .large-text { color: var(--text-secondary) !important; }

.flow-card { padding: 26px; background: linear-gradient(135deg, rgba(28, 16, 37, .75), rgba(10, 8, 14, .95)); border: 1px solid var(--border-default); border-radius: 24px; }
.flow-node { padding: 20px; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; background: rgba(5, 4, 7, .45); border: 1px solid rgba(255, 255, 255, .06); border-radius: 13px; }
.flow-node span { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; color: var(--text-muted); border: 1px solid var(--border-default); border-radius: 50%; font-size: 10px; }
.flow-node strong { color: var(--text-primary); font-size: 14px; }
.flow-node small { color: var(--text-disabled); font-size: 11px; }
.flow-node.active { background: rgba(58, 29, 79, .22); border-color: var(--border-hover); }
.flow-node.active span { color: var(--purple-soft); border-color: var(--border-active); }
.flow-line { height: 60px; padding-left: 36px; position: relative; display: flex; align-items: center; gap: 16px; color: var(--text-disabled); font-size: 10px; }
.flow-line i { width: 1px; height: 100%; background: linear-gradient(var(--border-default), var(--purple-hover), var(--border-default)); }

.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-default); border-radius: 24px; overflow: hidden; }
.benefit-card { min-height: 265px; padding: 32px; position: relative; overflow: hidden; background: rgba(16, 13, 22, .7); border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.benefit-card:nth-child(3n) { border-right: 0; }
.benefit-card:nth-child(n+4) { border-bottom: 0; }
.benefit-card > span { display: block; margin-bottom: 65px; color: var(--purple-soft); font-size: 11px; }
.benefit-card h3 { font-size: 20px; }
.benefit-card p { margin: 0; color: var(--text-muted); font-size: 13px; }

.bank-showcase-panel {
  padding: 72px;
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 80px;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1025 0%, #321742 52%, #140b1c 100%);
  border: 1px solid rgba(190, 181, 195, .14);
  border-radius: 24px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
}

.showcase-copy { position: relative; z-index: 2; }
.showcase-copy h2 { font-size: clamp(38px, 4.2vw, 58px); }
.showcase-copy > p:not(.eyebrow) { max-width: 600px; color: var(--text-secondary); font-size: 17px; }
.showcase-copy .text-link { margin-top: 14px; }
.bot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.brand-universe {
  min-height: 440px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.brand-universe::before {
  position: absolute;
  width: 72%;
  height: 72%;
  content: "";
  background: rgba(169, 144, 181, .14);
  border-radius: 50%;
  filter: blur(62px);
}

.universe-rings,
.universe-rings i { position: absolute; inset: 0; }
.universe-rings i {
  margin: auto;
  width: 82%;
  height: 52%;
  border: 1px solid rgba(190, 181, 195, .13);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.universe-rings i:nth-child(2) { width: 66%; height: 82%; border-color: rgba(169, 144, 181, .14); transform: rotate(24deg); }
.universe-rings i:nth-child(3) { width: 46%; height: 46%; border-style: dashed; opacity: .55; animation: universeSpin 24s linear infinite; }
@keyframes universeSpin { to { transform: rotate(360deg); } }

.universe-core {
  width: 144px;
  height: 144px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(28, 21, 36, .97), rgba(7, 5, 10, .98));
  border: 1px solid rgba(190, 181, 195, .22);
  border-radius: 35px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .48), 0 0 60px rgba(86, 48, 108, .18);
  transform: rotate(-3deg);
}
.universe-core .brand-mark { width: 30px; margin-bottom: 9px; color: var(--metallic); fill: none; stroke: currentColor; stroke-width: 1.5; }
.universe-core .brand-mark circle { fill: var(--purple-primary); }
.universe-core strong { color: var(--text-primary); font-size: 28px; line-height: 1; }
.universe-core span { margin-top: 5px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.universe-logo {
  width: 70px;
  height: 70px;
  padding: 11px;
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(246, 244, 247, .96);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 19px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .42), 0 0 34px rgba(var(--brand-rgb), .19);
  animation: logoFloat 8s ease-in-out infinite;
}
.universe-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ul-alfa { top: 8%; left: 17%; }
.ul-vtb { top: 7%; right: 13%; animation-delay: -2s; }
.ul-tbank { top: 43%; right: 1%; animation-delay: -5s; }
.ul-ozon { right: 20%; bottom: 2%; animation-delay: -7s; }
.ul-psb { bottom: 4%; left: 17%; animation-delay: -3s; }
.ul-uralsib { top: 47%; left: 0; animation-delay: -6s; }
@keyframes logoFloat { 50% { transform: translateY(-10px) rotate(2deg); } }

.bot-section { padding-top: 50px; }
.bot-grid { display: grid; grid-template-columns: .9fr 1fr; gap: 100px; align-items: center; }
.bot-mock { width: min(100%, 480px); margin-inline: auto; padding: 18px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 24px; box-shadow: 0 34px 90px rgba(0, 0, 0, .4); }
.bot-head { padding: 6px 4px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bot-avatar { width: 42px; height: 42px; padding: 6px; color: var(--metallic); background: var(--purple-deep); border: 1px solid var(--border-hover); border-radius: 50%; }
.bot-avatar svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.bot-avatar circle { fill: var(--purple-primary); }
.bot-head > div:nth-child(2) { display: flex; flex-direction: column; }
.bot-head strong { color: var(--text-primary); font-size: 13px; }
.bot-head span { color: var(--text-disabled); font-size: 10px; }
.bot-head > i { width: 6px; height: 6px; margin-left: auto; background: var(--status-success); border-radius: 50%; }
.bot-message { margin-top: 18px; padding: 22px; background: linear-gradient(145deg, rgba(58, 29, 79, .22), rgba(10, 8, 14, .9)); border: 1px solid var(--border-hover); border-radius: 15px 15px 15px 5px; }
.bot-message > span { color: var(--purple-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.bot-message > strong { display: block; margin: 8px 0; color: var(--text-primary); font-size: 16px; }
.bot-message > p { color: var(--text-muted); font-size: 12px; }
.bot-message > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bot-message button { min-height: 38px; padding: 0 10px; color: var(--text-secondary); background: rgba(255, 255, 255, .035); border: 1px solid var(--border-default); border-radius: 9px; font-size: 10px; }
.bot-copy > p { max-width: 620px; color: var(--text-muted); }
.bot-copy .large-text { color: var(--text-secondary); }

.faq-section { background: var(--bg-secondary); border-block: 1px solid rgba(255, 255, 255, .035); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: start; }
.faq-intro { position: sticky; top: 116px; }
.faq-intro h2 { font-size: clamp(38px, 4.2vw, 58px); }
.faq-intro > p:not(.eyebrow) { max-width: 420px; color: var(--text-muted); }
.faq-intro .text-link { margin-top: 12px; }
.faq-list { border-top: 1px solid var(--border-default); }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-question { width: 100%; min-height: 82px; padding: 20px 2px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; text-align: left; font-size: 16px; font-weight: 500; }
.faq-question:hover { color: var(--text-primary); }
.faq-plus { width: 28px; height: 28px; flex: 0 0 auto; position: relative; border: 1px solid var(--border-default); border-radius: 50%; transition: border-color 200ms ease, transform 200ms ease; }
.faq-plus::before,
.faq-plus::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; content: ""; background: var(--metallic); transform: translate(-50%, -50%); transition: transform 220ms ease; }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-question[aria-expanded="true"] .faq-plus { border-color: var(--border-active); transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { max-width: 700px; margin: 0; padding: 0 48px 24px 2px; color: var(--text-muted); font-size: 14px; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.final-section { padding-bottom: 120px; }
.final-cta { min-height: 470px; padding: 76px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; background: linear-gradient(135deg, #110a17, #2a1537 52%, #0b0710); border: 1px solid rgba(190, 181, 195, .14); border-radius: 24px; }
.final-cta > *:not(.final-arcs) { position: relative; z-index: 2; }
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 { max-width: 820px; }
.final-cta > p:not(.eyebrow) { color: var(--text-muted); font-size: 17px; }
.final-cta > div:not(.final-arcs) { display: flex; gap: 10px; margin-top: 22px; }
.final-arcs { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.final-arcs i { position: absolute; width: 78%; height: 150%; border: 1px solid rgba(190, 181, 195, .08); border-radius: 50%; transform: rotate(25deg); }
.final-arcs i:nth-child(2) { width: 57%; border-color: rgba(118, 81, 139, .16); transform: rotate(-32deg); }
.final-arcs i:nth-child(3) { width: 100%; height: 100%; background: radial-gradient(circle, rgba(86, 48, 108, .17), transparent 58%); border: 0; }

.site-footer { background: #050407; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-main { padding-block: 66px 54px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.footer-brand p { max-width: 380px; margin: 22px 0 0; color: var(--text-muted); font-size: 13px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.footer-links h3 { margin-bottom: 17px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.footer-links a { display: block; margin: 10px 0; color: var(--text-secondary); font-size: 13px; transition: color 180ms ease; }
.footer-links a:hover { color: var(--purple-soft); }
.footer-legal { padding-block: 25px 34px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--text-disabled); font-size: 11px; }
.footer-legal > p { max-width: 950px; }
.footer-legal > div { display: flex; justify-content: space-between; gap: 20px; }
.footer-legal a { color: var(--text-muted); }

.legal-page { min-height: 100vh; background: var(--bg-primary); }
.legal-header { height: 76px; border-bottom: 1px solid var(--border-default); }
.legal-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.legal-back { color: var(--text-muted); font-size: 13px; }
.legal-back:hover { color: var(--text-primary); }
.legal-main { width: min(100%, 860px); margin-inline: auto; padding: 86px 28px 120px; }
.legal-main .eyebrow { margin-bottom: 18px; }
.legal-main h1 { max-width: 760px; font-size: clamp(42px, 7vw, 72px); }
.legal-updated { margin-bottom: 54px; color: var(--text-disabled); font-size: 12px; }
.legal-main h2 { margin: 42px 0 14px; font-size: 22px; letter-spacing: -.02em; }
.legal-main p,
.legal-main li { color: var(--text-muted); font-size: 15px; }
.legal-main ul { padding-left: 22px; }
.legal-main a { color: var(--purple-soft); }

.modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms; }
.modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 1, 3, .82); backdrop-filter: blur(12px); }
.modal-panel { width: min(100%, 840px); max-height: min(90vh, 900px); padding: 42px; position: relative; overflow-y: auto; background: linear-gradient(145deg, #17121e, #09070c); border: 1px solid var(--border-hover); border-radius: 24px; box-shadow: 0 40px 110px rgba(0, 0, 0, .65); transform: translateY(18px) scale(.985); transition: transform 260ms var(--ease); }
.modal.open .modal-panel { transform: none; }
.modal-close { width: 42px; height: 42px; position: absolute; z-index: 2; top: 22px; right: 22px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; }
.modal-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.modal-heading { padding-right: 50px; }
.modal-brand { margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.modal-brand > div { display: flex; flex-direction: column; gap: 3px; }
.modal-brand strong { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.modal-heading h2 { max-width: 680px; margin: 12px 0 18px; font-size: clamp(34px, 5vw, 52px); }
.modal-heading > p { color: var(--text-muted); }
.modal-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }
.modal-summary div { padding: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border-default); border-radius: 12px; }
.modal-summary span { display: block; margin-bottom: 6px; color: var(--text-disabled); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.modal-summary strong { color: var(--text-primary); font-size: 14px; }
.modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 34px 0; }
.modal-block h3 { font-size: 17px; }
.modal-block ul,
.modal-block ol { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 13px; }
.modal-block li { margin-bottom: 9px; padding-left: 4px; }
.modal-notice { padding: 18px; margin-bottom: 25px; background: rgba(183, 151, 104, .07); border: 1px solid rgba(183, 151, 104, .24); border-radius: 12px; }
.modal-notice strong { display: block; margin-bottom: 6px; color: var(--status-warning); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.modal-notice p { margin: 0; color: var(--text-muted); font-size: 12px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: 60ms; }
.delay-2 { transition-delay: 120ms; }
.delay-3 { transition-delay: 180ms; }

@media (max-width: 1200px) {
  .container { padding-inline: 28px; }
  .desktop-nav { gap: 20px; margin-right: 24px; }
  .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 25px; }
  .chip-one { left: -1%; }
  .chip-two { right: -1%; }
  .why-grid,
  .bot-grid { gap: 60px; }
  .bank-showcase-panel { padding: 58px; gap: 52px; }
}

@media (max-width: 992px) {
  .section { padding-block: 88px; }
  .desktop-nav,
  .login-link,
  .header-actions > .btn { display: none; }
  .menu-toggle,
  .mobile-menu { display: grid; }
  .header-actions { gap: 0; }
  .hero { min-height: auto; padding-top: 78px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 800px; }
  .hero-visual { width: min(100%, 650px); margin-inline: auto; }
  .section-heading,
  .catalog-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-list { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .offer-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .step-card { min-height: auto; display: grid; grid-template-columns: 64px 1fr; gap: 24px; }
  .step-number { margin-bottom: 0; }
  .why-grid,
  .bot-grid,
  .faq-layout,
  .bank-showcase-panel { grid-template-columns: 1fr; }
  .why-grid,
  .bot-grid,
  .faq-layout { gap: 54px; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .benefit-card:nth-child(3n) { border-right: 1px solid var(--border-default); }
  .benefit-card:nth-child(2n) { border-right: 0; }
  .benefit-card:nth-child(n+4) { border-bottom: 1px solid var(--border-default); }
  .benefit-card:nth-child(n+5) { border-bottom: 0; }
  .bank-showcase-panel { gap: 34px; }
  .faq-intro { position: static; }
  .footer-main { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .container { padding-inline: 18px; }
  .site-header { height: 64px; }
  .hero { padding: 64px 0; }
  h1 { font-size: clamp(44px, 13vw, 64px); }
  h2 { font-size: clamp(34px, 10vw, 50px); }
  .hero-lead { font-size: 16px; }
  .hero-visual { min-height: 520px; }
  .preview-shell { transform: none; }
  .floating-chip { display: none; }
  .orbital-a { width: 440px; }
  .orbital-b { width: 500px; }
  .category-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 220px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .select-wrap { width: 100%; }
  .offer-card { min-height: 420px; padding: 24px; }
  .offer-bottom { grid-template-columns: 1fr 1fr; }
  .offer-bottom .btn { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
  .why-grid { gap: 42px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card,
  .benefit-card:nth-child(2n),
  .benefit-card:nth-child(3n),
  .benefit-card:nth-child(n+4) { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .benefit-card:last-child { border-bottom: 0; }
  .benefit-card > span { margin-bottom: 42px; }
  .bank-showcase-panel { padding: 38px 24px; }
  .brand-universe { min-height: 390px; }
  .final-cta { min-height: 430px; padding: 54px 22px; }
  .final-cta > div:not(.final-arcs) { width: 100%; flex-direction: column; }
  .footer-links { grid-template-columns: 1fr 1fr; row-gap: 35px; }
  .modal { padding: 0; align-items: end; }
  .modal-panel { max-height: 94vh; padding: 30px 20px; border-radius: 24px 24px 0 0; }
  .modal-close { top: 17px; right: 17px; }
  .modal-summary { grid-template-columns: 1fr; }
  .modal-columns { grid-template-columns: 1fr; gap: 26px; }
  .legal-header { height: 64px; }
  .legal-main { padding: 64px 18px 88px; }
}

@media (max-width: 480px) {
  .section { padding-block: 64px; }
  .hero-actions,
  .bot-actions { flex-direction: column; }
  .hero-actions .btn,
  .bot-actions .btn,
  .modal-actions .btn { width: 100%; }
  .hero-visual { min-height: 470px; }
  .hero-brand-node { display: none; }
  .partner-proof { width: 100%; align-items: flex-start; }
  .partner-proof strong { font-size: 10px; }
  .preview-shell { padding: 12px; }
  .preview-card { padding: 20px; }
  .preview-card h2 { font-size: 22px; }
  .preview-metrics { grid-template-columns: 1fr; }
  .orbital { display: none; }
  .trust-list { min-height: 66px; }
  .category-card { padding: 24px; }
  .offer-card { padding: 21px; }
  .offer-category > span:last-child { max-width: 150px; }
  .step-card { padding: 23px; grid-template-columns: 1fr; gap: 4px; }
  .step-number { margin-bottom: 30px; }
  .flow-card { padding: 16px; }
  .bank-showcase-panel { padding-inline: 18px; }
  .brand-universe { min-height: 340px; }
  .universe-core { width: 112px; height: 112px; border-radius: 28px; }
  .universe-logo { width: 56px; height: 56px; padding: 8px; border-radius: 15px; }
  .bot-message > div { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-legal > div { flex-direction: column; }
  .modal-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Compact product showcase */

[hidden] { display: none !important; }
.ambient { animation: none; }
.section { padding-block: 82px; }

.compact-heading { margin-bottom: 34px; }
.compact-heading h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(34px, 4vw, 52px); }
.catalog-head.compact-heading {
  margin-bottom: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.catalog-head.compact-heading > p { max-width: 300px; margin: 0 0 7px; color: var(--text-muted); font-size: 14px; }

.hero {
  min-height: 650px;
  padding: 54px 0 62px;
  overflow: hidden;
}
.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(440px, .86fr);
  gap: 56px;
}
.hero-copy h1 {
  max-width: 660px;
  margin-bottom: 26px;
  font-size: clamp(50px, 5.3vw, 74px);
  line-height: 1.01;
}
.hero-lead { max-width: 620px; margin-bottom: 28px; }
.hero-partner-note {
  margin-bottom: 28px;
  padding-left: 14px;
  position: relative;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .025em;
}
.hero-partner-note::before {
  width: 2px;
  position: absolute;
  inset-block: 1px;
  left: 0;
  content: "";
  background: linear-gradient(180deg, var(--purple-soft), var(--purple-primary));
  border-radius: 2px;
}
.hero-note { margin-top: 14px; }

.hero-offer-stack {
  width: 100%;
  min-height: 500px;
  position: relative;
  animation: stackShift 12s ease-in-out infinite alternate;
}
@keyframes stackShift { to { transform: translateY(-5px); } }
.hero-offer-card {
  position: absolute;
  background: linear-gradient(145deg, rgba(20, 16, 27, .98), rgba(8, 6, 11, .99));
  border: 1px solid var(--border-default);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .45);
}
.hero-card-back {
  width: 330px;
  min-height: 142px;
  padding: 20px;
  border-radius: 18px;
}
.hero-card-back > div { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; }
.hero-card-back img { width: 34px; height: 34px; padding: 4px; object-fit: contain; background: #f2f0f3; border-radius: 9px; }
.hero-card-back > strong { display: block; margin-top: 17px; color: var(--text-secondary); font-size: 14px; }
.hero-card-back > b { position: absolute; right: 20px; bottom: 18px; color: var(--text-primary); font-size: 17px; }
.hero-card-alfa { top: 30px; left: 5px; transform: rotate(-3deg); opacity: .7; }
.hero-card-ozon { top: 2px; right: 4px; transform: rotate(3deg); opacity: .74; }
.hero-card-main {
  z-index: 2;
  width: min(100%, 500px);
  min-height: 355px;
  top: 112px;
  right: 18px;
  padding: 28px;
  border-color: rgba(190, 181, 195, .2);
  border-radius: 22px;
}
.hero-card-main::before {
  position: absolute;
  inset: -1px;
  z-index: -1;
  content: "";
  background: radial-gradient(circle at 82% 16%, rgba(86, 48, 108, .18), transparent 40%);
  border-radius: inherit;
  pointer-events: none;
}
.hero-card-head,
.hero-card-head > div,
.hero-card-footer { display: flex; align-items: center; }
.hero-card-head { justify-content: space-between; gap: 18px; }
.hero-card-head > div { gap: 12px; min-width: 0; }
.hero-card-head img { width: 48px; height: 48px; padding: 7px; object-fit: contain; background: #f3f1f4; border-radius: 13px; }
.hero-card-head > div > span { min-width: 0; display: flex; flex-direction: column; }
.hero-card-head small { color: var(--text-muted); font-size: 10px; }
.hero-card-head b { overflow: hidden; color: var(--text-primary); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.hero-card-reward { margin: 34px 0 24px; }
.hero-card-reward > span,
.hero-card-main p > span,
.hero-card-footer div > span { display: block; margin-bottom: 4px; color: var(--text-disabled); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.hero-card-reward strong { color: var(--text-primary); font-size: 38px; font-weight: 550; letter-spacing: -.04em; }
.hero-card-main p { margin: 0; color: var(--text-muted); font-size: 12px; }
.hero-card-footer { margin-top: 24px; padding-top: 22px; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.hero-card-footer div strong { color: var(--text-secondary); font-size: 11px; }
.hero-card-footer .btn { min-height: 46px; padding-inline: 17px; font-size: 11px; }

.categories { padding-top: 74px; }
.category-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.category-card {
  min-height: 168px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
}
.category-card .line-icon { margin: 0; }
.category-card h3 {
  max-width: 190px;
  margin: 24px 0 16px;
  grid-column: 1 / -1;
  align-self: end;
  font-size: 17px;
}
.category-meta {
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}
.category-meta strong { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.category-meta b { font-size: 17px; }
.category-layout-2 .line-icon,
.category-layout-4 .line-icon { justify-self: end; }
.category-layout-2 h3,
.category-layout-4 h3 { margin-left: auto; text-align: right; }
.category-layout-2 { background: linear-gradient(155deg, rgba(10, 8, 14, .95), rgba(36, 19, 47, .45)); }
.category-layout-3 { background: linear-gradient(25deg, rgba(10, 8, 14, .96), rgba(58, 29, 79, .2)); }

.catalog-section { padding-block: 82px; }
.catalog-toolbar { margin: 0 0 24px; }
.offer-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.offer-card {
  min-height: 332px;
  padding: 23px;
}
.offer-top { margin-bottom: 25px; }
.offer-card .brand-tile { width: 46px; height: 46px; padding: 8px; border-radius: 12px; }
.offer-card h3 { margin-bottom: 12px; font-size: 19px; }
.offer-description {
  min-height: 44px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.offer-bottom {
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.reward strong { font-size: 21px; }
.offer-bottom .btn { min-height: 42px; padding-inline: 15px; }
.catalog-more { margin-top: 22px; }
.catalog-expand-button { min-width: 230px; }
.catalog-disclaimer { margin-top: 16px; }

.how-section { padding-block: 72px; }
.compact-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
}
.compact-steps::before {
  position: absolute;
  top: 22px;
  right: 14%;
  left: 14%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--border-default), var(--purple-hover), var(--border-default));
}
.compact-step {
  position: relative;
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 15px;
}
.compact-step > span {
  width: 45px;
  height: 45px;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--purple-soft);
  background: var(--bg-secondary);
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  font-size: 10px;
}
.compact-step h3 { margin: 2px 0 4px; font-size: 16px; }
.compact-step p { margin: 0; color: var(--text-muted); font-size: 12px; }

.why-section { padding-block: 74px; }
.why-grid { grid-template-columns: 1fr 1fr; gap: 70px; }
.why-copy h2 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 50px); }
.why-copy .large-text { margin: 0; font-size: 16px; }
.compact-flow { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1fr; align-items: center; gap: 12px; }
.compact-flow > span { color: var(--purple-soft); font-size: 18px; }
.compact-flow > div {
  min-height: 106px;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(16, 13, 22, .55);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  text-align: center;
}
.compact-flow > div.active { background: rgba(58, 29, 79, .2); border-color: var(--border-hover); }
.compact-flow img,
.compact-flow .brand-mark { width: 30px; height: 30px; object-fit: contain; }
.compact-flow img { padding: 3px; background: #f1eff2; border-radius: 8px; }
.compact-flow .brand-mark { color: var(--metallic); fill: none; stroke: currentColor; stroke-width: 1.5; }
.compact-flow .brand-mark circle { fill: var(--purple-primary); }
.compact-flow i { width: 24px; height: 24px; border: 1px solid var(--metallic); border-radius: 50%; opacity: .7; }
.compact-flow strong { color: var(--text-secondary); font-size: 11px; font-weight: 600; }

.benefits-section { padding-block: 68px; }
.compact-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.compact-benefit {
  min-height: 132px;
  padding: 23px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(16, 13, 22, .62);
  border: 1px solid var(--border-default);
  border-radius: 17px;
  transition: transform 220ms ease, border-color 220ms ease;
}
.compact-benefit:hover { transform: translateY(-3px); border-color: var(--border-hover); }
.compact-benefit .line-icon { flex: 0 0 auto; }
.compact-benefit h3 { margin: 1px 0 6px; font-size: 16px; }
.compact-benefit p { margin: 0; color: var(--text-muted); font-size: 12px; }

.bank-showcase { padding-block: 64px; }
.banks-row {
  min-height: 290px;
  padding: 50px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
  background: linear-gradient(135deg, rgba(28, 16, 37, .72), rgba(10, 8, 14, .94));
  border: 1px solid var(--border-default);
  border-radius: 24px;
}
.showcase-copy h2 { margin-bottom: 15px; font-size: clamp(34px, 3.7vw, 50px); }
.showcase-copy > p:not(.eyebrow) { margin: 0; font-size: 14px; }
.bank-logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.bank-logo-strip span {
  aspect-ratio: 1;
  padding: 14px;
  display: grid;
  place-items: center;
  background: rgba(244, 242, 245, .94);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
}
.bank-logo-strip img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }

.bot-section { padding-block: 72px; }
.bot-grid { grid-template-columns: .75fr 1fr; gap: 75px; }
.bot-mock { width: min(100%, 380px); padding: 15px; border-radius: 20px; }
.bot-message { margin-top: 14px; padding: 19px; }
.bot-message > p { margin-bottom: 14px; }
.bot-message > div { grid-template-columns: 1fr; }
.bot-copy h2 { margin-bottom: 17px; font-size: clamp(36px, 4.2vw, 54px); }
.bot-copy .large-text { margin: 0; font-size: 16px; }

.faq-section { padding-block: 76px; }
.faq-layout { grid-template-columns: .55fr 1.45fr; gap: 75px; }
.faq-intro h2 { margin-bottom: 15px; font-size: clamp(36px, 4vw, 52px); }
.faq-question { min-height: 67px; padding-block: 15px; font-size: 14px; }
.faq-more-button {
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.final-section { padding-block: 70px; }
.final-cta { min-height: 345px; padding: 58px; }
.final-cta h2 { max-width: 720px; font-size: clamp(38px, 4.6vw, 60px); }

@media (max-width: 1200px) {
  .hero-grid { grid-template-columns: 1fr 440px; gap: 28px; }
  .hero-card-main { right: 0; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .bank-logo-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .hero { padding-top: 72px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 720px; }
  .hero-offer-stack { width: min(100%, 580px); min-height: 480px; margin-inline: auto; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid,
  .banks-row { grid-template-columns: 1fr; }
  .why-grid { gap: 40px; }
  .banks-row { gap: 35px; }
  .bank-logo-strip { grid-template-columns: repeat(6, 1fr); }
  .faq-layout { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 768px) {
  .section { padding-block: 62px; }
  .hero { padding: 54px 0 52px; }
  .hero-copy h1 { font-size: clamp(38px, 10vw, 52px); }
  .hero-partner-note { margin-bottom: 22px; }
  .hero-offer-stack { min-height: 435px; }
  .hero-card-back { width: 280px; min-height: 120px; padding: 16px; }
  .hero-card-alfa { left: 0; }
  .hero-card-ozon { right: 0; }
  .hero-card-main { width: calc(100% - 12px); min-height: 330px; top: 88px; padding: 22px; }
  .hero-card-reward { margin: 25px 0 18px; }
  .hero-card-footer { align-items: stretch; flex-direction: column; }
  .hero-card-footer .btn { width: 100%; }
  .category-grid,
  .offer-grid,
  .compact-benefits { grid-template-columns: 1fr; }
  .category-card { min-height: 150px; }
  .catalog-head.compact-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .offer-card { min-height: 300px; }
  .compact-steps { grid-template-columns: 1fr; gap: 26px; }
  .compact-steps::before { top: 20px; bottom: 20px; left: 22px; width: 1px; height: auto; background: linear-gradient(var(--border-default), var(--purple-hover), var(--border-default)); }
  .compact-step { min-height: 50px; }
  .compact-flow { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 7px; }
  .compact-flow > div { min-height: 94px; padding: 12px 7px; }
  .compact-flow strong { font-size: 9px; }
  .banks-row { padding: 32px 24px; }
  .bank-logo-strip { grid-template-columns: repeat(3, 1fr); }
  .bot-grid { grid-template-columns: 1fr; gap: 44px; }
  .final-cta { min-height: 330px; padding: 44px 22px; }
}

@media (max-width: 480px) {
  .hero-offer-stack { min-height: 420px; }
  .hero-card-head .status { display: none; }
  .hero-card-head b { font-size: 13px; }
  .hero-card-reward strong { font-size: 33px; }
  .category-meta { grid-template-columns: 1fr auto auto; }
  .compact-flow { margin-inline: -6px; }
  .compact-flow > span { font-size: 13px; }
  .compact-flow img,
  .compact-flow .brand-mark { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-offer-stack { animation: none; }
}

/* Showcase-only model: offer and payout, all work continues in personal messages */

.hero-payout-board {
  width: min(100%, 530px);
  margin-left: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 85% 0%, rgba(86, 48, 108, .2), transparent 38%),
    linear-gradient(145deg, rgba(20, 16, 27, .98), rgba(8, 6, 11, .99));
  border: 1px solid rgba(190, 181, 195, .18);
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .46);
}
.payout-board-head,
.payout-board-foot,
.payout-preview-row { display: flex; align-items: center; justify-content: space-between; }
.payout-board-head {
  padding: 5px 5px 17px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px;
  font-weight: 600;
}
.payout-board-head small { color: var(--text-disabled); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.payout-preview-row {
  min-height: 79px;
  padding: 13px 5px;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}
.payout-preview-row > span { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 12px; }
.payout-preview-row img {
  width: 40px;
  height: 40px;
  padding: 6px;
  flex: 0 0 auto;
  object-fit: contain;
  background: #f1eff2;
  border-radius: 11px;
}
.payout-preview-row > strong { flex: 0 0 auto; color: var(--text-primary); font-size: 19px; font-weight: 600; }
.payout-board-foot { padding: 17px 5px 4px; color: var(--text-disabled); font-size: 10px; }

.category-card {
  min-height: 190px;
  grid-template-rows: auto 1fr auto auto;
  cursor: pointer;
}
.category-card:hover { transform: translateY(-3px); }
.category-card .line-icon {
  width: 42px;
  height: 42px;
  justify-self: start;
  background: linear-gradient(145deg, rgba(86, 48, 108, .16), rgba(16, 13, 22, .72));
  border-color: rgba(190, 181, 195, .16);
  border-radius: 12px;
}
.category-card .line-icon svg { width: 21px; height: 21px; }
.category-card h3 {
  margin-left: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.category-card h3 small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .025em;
}
.category-total {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.category-total small {
  color: var(--text-disabled);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.category-total strong {
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.category-meta {
  margin-top: 8px;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.category-meta b { display: block; color: var(--purple-soft); font-size: 15px; }

.offer-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.offer-group {
  padding: 23px;
  background: linear-gradient(145deg, rgba(20, 16, 27, .88), rgba(9, 7, 12, .97));
  border: 1px solid var(--border-default);
  border-radius: 20px;
}
.offer-group-head,
.offer-group-head > div { display: flex; align-items: center; }
.offer-group-head { min-height: 50px; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.offer-group-head > div { gap: 11px; }
.offer-group-head > div > span:not(.line-icon) { display: flex; flex-direction: column; }
.offer-group-head > div > .line-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
}
.offer-group-head > div > .line-icon svg {
  width: 20px;
  height: 20px;
  margin: 0;
  display: block;
}
.offer-group-head h3 { margin: 0; font-size: 16px; }
.offer-group-head > div small { color: var(--text-disabled); font-size: 9px; }
.offer-group-total { display: flex; align-items: flex-end; flex-direction: column; }
.offer-group-total small { color: var(--text-disabled); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.offer-group-total strong { color: var(--text-primary); font-size: 16px; font-weight: 600; white-space: nowrap; }
.offer-list-row {
  min-height: 71px;
  padding: 11px 2px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  transition: background 180ms ease;
}
.offer-list-row:last-child { border-bottom: 0; }
.offer-list-row:hover { background: rgba(169, 144, 181, .035); }
.offer-row-logo {
  width: 42px;
  height: 42px;
  padding: 6px;
  display: grid;
  place-items: center;
  background: rgba(244, 242, 245, .95);
  border-radius: 11px;
  box-shadow: 0 9px 25px rgba(var(--brand-rgb), .11);
}
.offer-row-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.offer-row-name { min-width: 0; display: flex; flex-direction: column; }
.offer-row-name strong,
.offer-row-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-row-name strong { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.offer-row-name small { color: var(--text-disabled); font-size: 9px; }
.offer-row-reward { display: flex; align-items: flex-end; flex-direction: column; }
.offer-row-reward small { color: var(--text-disabled); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.offer-row-reward strong { color: var(--text-primary); font-size: 16px; font-weight: 600; white-space: nowrap; }
.catalog-contact {
  margin-top: 20px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(58, 29, 79, .16);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
}
.catalog-contact p { margin: 0; display: flex; flex-direction: column; }
.catalog-contact p strong { color: var(--text-primary); font-size: 14px; }
.catalog-contact p span { color: var(--text-muted); font-size: 11px; }
.catalog-contact .btn { min-height: 46px; flex: 0 0 auto; }

@media (max-width: 992px) {
  .hero-payout-board { margin-inline: auto; }
}

@media (max-width: 768px) {
  .offer-showcase { grid-template-columns: 1fr; }
  .catalog-contact { align-items: stretch; flex-direction: column; }
  .catalog-contact .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero-payout-board { padding: 13px; border-radius: 18px; }
  .payout-preview-row { min-height: 70px; }
  .payout-preview-row > span { font-size: 10px; }
  .payout-preview-row img { width: 36px; height: 36px; }
  .payout-preview-row > strong { font-size: 16px; }
  .offer-group { padding: 17px; }
  .offer-group-head { align-items: flex-start; }
  .offer-group-head h3 { font-size: 14px; }
  .offer-group-total strong { font-size: 13px; }
  .offer-list-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .offer-row-logo { width: 38px; height: 38px; }
}

/* Spacious motion direction — inspired by the references, adapted to the product */

:root {
  --container: 1320px;
  --space-section: clamp(112px, 10vw, 168px);
}

body {
  background:
    radial-gradient(circle at 83% 9%, rgba(102, 55, 131, .17), transparent 32%),
    radial-gradient(circle at 8% 47%, rgba(58, 29, 79, .11), transparent 27%),
    linear-gradient(145deg, #050407 0%, #09070d 51%, #0c0811 100%);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .16;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

main { overflow: hidden; }
.section { padding-block: var(--space-section); }

.site-header {
  height: 82px;
  background: rgba(5, 4, 7, .62);
  transition: height 320ms var(--ease), background 320ms ease, box-shadow 320ms ease;
}

.site-header.scrolled {
  height: 72px;
  background: rgba(5, 4, 7, .86);
}

.desktop-nav { gap: 28px; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--purple-soft);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease);
}
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hero {
  min-height: max(820px, calc(100svh - 82px));
  padding: clamp(90px, 10vh, 150px) 0 clamp(116px, 13vh, 180px);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -1;
  width: 920px;
  height: 920px;
  top: 45%;
  right: -330px;
  content: "";
  background: radial-gradient(circle, rgba(100, 53, 129, .18), rgba(58, 29, 79, .06) 41%, transparent 69%);
  transform: translateY(-50%);
  pointer-events: none;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(510px, .97fr);
  gap: clamp(54px, 7vw, 108px);
}

.hero-copy { padding-block: 30px; }

.hero-copy h1 {
  max-width: 760px;
  margin-bottom: 34px;
  font-size: clamp(58px, 6.2vw, 92px);
  line-height: .98;
}

.hero-copy h1 span { display: block; }
.hero-lead { max-width: 650px; margin-bottom: 40px; font-size: 19px; line-height: 1.75; }
.hero-partner-note { margin-bottom: 34px; }
.hero-actions { gap: 14px; }
.hero-actions .btn { min-height: 58px; padding-inline: 29px; }
.hero-note { margin-top: 21px; }

.hero-stage {
  min-height: 620px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1200px;
  --stage-x: 0px;
  --stage-y: 0px;
  --stage-scroll: 0px;
  --stage-rotate: 0deg;
}

.hero-orb {
  position: absolute;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .38) 0 2%, transparent 8%),
    radial-gradient(circle at 35% 28%, #a889ba 0, #6e4481 17%, #3d1c51 48%, #14091d 74%, #09060d 100%);
  box-shadow:
    inset -48px -54px 84px rgba(0, 0, 0, .56),
    inset 18px 16px 50px rgba(255, 255, 255, .08),
    0 45px 110px rgba(50, 22, 68, .5),
    0 0 105px rgba(104, 61, 128, .24);
  transform: translate3d(calc(0px - var(--stage-x)), calc(0px - var(--stage-y) - var(--stage-scroll)), -30px);
  animation: orbBreathe 7s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-orb::after {
  position: absolute;
  width: 82%;
  height: 15%;
  right: 9%;
  bottom: -8%;
  content: "";
  background: rgba(69, 34, 86, .48);
  border-radius: 50%;
  filter: blur(22px);
  transform: rotate(-4deg);
}

.hero-orb i {
  position: absolute;
  inset: -8%;
  border: 1px solid rgba(190, 181, 195, .13);
  border-radius: 50%;
  transform: rotateX(69deg) rotateZ(12deg);
}

.hero-orb i:nth-child(2) {
  inset: -15%;
  border-color: rgba(118, 81, 139, .16);
  transform: rotateY(69deg) rotateZ(-24deg);
  animation: orbitTurn 18s linear infinite;
}

.hero-orb i:nth-child(3) {
  inset: 10%;
  border-style: dashed;
  opacity: .42;
  animation: orbitTurn 22s linear infinite reverse;
}

@keyframes orbBreathe {
  to { transform: translate3d(calc(0px - var(--stage-x)), calc(-9px - var(--stage-y) - var(--stage-scroll)), -30px) scale(1.018); }
}

@keyframes orbitTurn { to { rotate: 1turn; } }

.hero-stage .hero-payout-board {
  width: min(100%, 515px);
  margin: 0;
  position: relative;
  z-index: 3;
  background:
    radial-gradient(circle at 85% 0%, rgba(133, 83, 158, .17), transparent 36%),
    linear-gradient(145deg, rgba(20, 16, 27, .91), rgba(8, 6, 11, .94));
  border-color: rgba(224, 213, 229, .2);
  box-shadow: 0 44px 110px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(19px);
  transform: translate3d(var(--stage-x), calc(var(--stage-y) + var(--stage-scroll)), 28px) rotateY(var(--stage-rotate)) rotateZ(-1.2deg);
  transition: transform 500ms var(--ease), border-color 300ms ease;
  will-change: transform;
}

.hero-stage:hover .hero-payout-board { border-color: rgba(224, 213, 229, .29); }

.payout-preview-row {
  margin-inline: -5px;
  padding-inline: 10px;
  border-radius: 12px;
  transition: background 650ms ease, transform 650ms var(--ease), opacity 650ms ease;
}

.payout-preview-row.is-active {
  background: linear-gradient(90deg, rgba(118, 81, 139, .2), rgba(118, 81, 139, .035));
  transform: translateX(7px);
}

.payout-preview-row.is-active > strong { color: #fff; }

.stage-note {
  position: absolute;
  z-index: 4;
  padding: 11px 15px;
  color: var(--text-secondary);
  background: rgba(11, 8, 15, .82);
  border: 1px solid rgba(190, 181, 195, .17);
  border-radius: 999px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  backdrop-filter: blur(16px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .025em;
  animation: noteFloat 6s ease-in-out infinite;
}

.stage-note::before {
  width: 6px;
  height: 6px;
  margin-right: 8px;
  display: inline-block;
  content: "";
  background: var(--purple-soft);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(169, 144, 181, .65);
}

.stage-note-one { top: 8%; right: 1%; }
.stage-note-two { bottom: 7%; left: -2%; animation-delay: -3s; }
@keyframes noteFloat { 50% { transform: translateY(-10px); } }

.hero-scroll-cue {
  position: absolute;
  bottom: 35px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-disabled);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero-scroll-cue i {
  width: 1px;
  height: 34px;
  position: relative;
  overflow: hidden;
  background: rgba(190, 181, 195, .14);
}

.hero-scroll-cue i::after {
  position: absolute;
  inset: -100% 0 100%;
  content: "";
  background: var(--purple-soft);
  animation: scrollCue 2.2s ease-in-out infinite;
}

@keyframes scrollCue { 55%, 100% { transform: translateY(200%); } }

.partner-ticker {
  min-height: 86px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(10, 8, 14, .82);
  border-block: 1px solid rgba(255, 255, 255, .065);
}

.partner-ticker-track {
  width: max-content;
  display: flex;
  animation: tickerMove 34s linear infinite;
}

.partner-ticker-track > div { display: flex; align-items: center; }
.partner-ticker span {
  padding-inline: 32px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .045em;
  white-space: nowrap;
  text-transform: uppercase;
}
.partner-ticker i { width: 5px; height: 5px; background: var(--purple-hover); border-radius: 50%; }
@keyframes tickerMove { to { transform: translateX(-50%); } }

.compact-heading.spacious-heading,
.catalog-head.compact-heading {
  margin-bottom: clamp(56px, 6vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .52fr);
  gap: 72px;
  align-items: end;
}

.compact-heading.spacious-heading > p,
.catalog-head.compact-heading > p {
  max-width: 430px;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.75;
}

.compact-heading h2,
.catalog-head.compact-heading h2 { font-size: clamp(44px, 5vw, 68px); }

.categories { padding-top: var(--space-section); }
.category-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.category-card {
  min-height: 270px;
  padding: 34px;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .15);
}
.category-card h3 { max-width: 360px; margin-top: 44px; font-size: 24px; }
.category-total strong { font-size: 24px; }
.category-layout-2,
.category-layout-4 { transform: none; }
.category-layout-2:hover,
.category-layout-4:hover { transform: translateY(-6px); }

.catalog-section {
  padding-block: var(--space-section);
  background:
    radial-gradient(circle at 82% 14%, rgba(75, 40, 94, .16), transparent 27%),
    radial-gradient(circle at 7% 76%, rgba(58, 29, 79, .11), transparent 28%),
    rgba(7, 5, 10, .72);
}
.offer-showcase { gap: 28px; }
.offer-group {
  padding: 32px;
  border-radius: 25px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .19);
  transition: transform 420ms var(--ease), border-color 300ms ease, box-shadow 420ms ease;
}
.offer-group:nth-child(even) { transform: translateY(48px); }
.offer-group:hover {
  border-color: var(--border-hover);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .31), 0 22px 70px rgba(58, 29, 79, .08);
}
.offer-group:nth-child(even):hover { transform: translateY(40px); }
.offer-list-row { min-height: 82px; }
.catalog-contact { margin-top: 82px; padding: 30px 34px; border-radius: 20px; }
.catalog-contact p strong { font-size: 16px; }
.catalog-contact p span { margin-top: 4px; font-size: 13px; }

.how-section { padding-block: var(--space-section); }
.how-section .compact-heading { margin-bottom: 76px; }
.compact-steps { gap: 38px; }
.compact-steps::before { display: none; }
.compact-step {
  min-height: 210px;
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-top: 1px solid var(--border-hover);
}
.compact-step > span {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  transition: color 280ms ease, background 280ms ease, transform 280ms var(--ease);
}
.compact-step:hover > span { color: var(--text-primary); background: var(--purple-dark); transform: rotate(-8deg) scale(1.05); }
.compact-step h3 { margin-bottom: 10px; font-size: 22px; }
.compact-step p { max-width: 320px; font-size: 14px; line-height: 1.7; }

.why-section { padding-block: var(--space-section); }
.why-grid { gap: clamp(70px, 9vw, 130px); }
.why-copy h2 { font-size: clamp(44px, 5vw, 68px); }
.why-copy .large-text { font-size: 18px; line-height: 1.85; }
.compact-flow { gap: 18px; }
.compact-flow > div { min-height: 150px; border-radius: 22px; }
.compact-flow > div.active { transform: translateY(-14px); box-shadow: 0 27px 70px rgba(58, 29, 79, .15); }

.benefits-section { padding-block: clamp(70px, 7vw, 106px); }
.compact-benefits { gap: 22px; }
.compact-benefit { min-height: 180px; padding: 31px; border-radius: 22px; }
.compact-benefit h3 { font-size: 19px; }
.compact-benefit p { max-width: 280px; font-size: 13px; line-height: 1.65; }

.bank-showcase { padding-block: var(--space-section); }
.banks-row {
  min-height: 540px;
  padding: clamp(54px, 7vw, 92px);
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(60px, 8vw, 120px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 50%, rgba(118, 81, 139, .22), transparent 32%),
    linear-gradient(135deg, rgba(28, 16, 37, .82), rgba(10, 8, 14, .96));
}
.showcase-copy h2 { font-size: clamp(44px, 5vw, 68px); }
.showcase-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; }
.bank-logo-window {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.bank-logo-strip {
  width: max-content;
  display: flex;
  grid-template-columns: none;
  gap: 18px;
  animation: bankMarquee 26s linear infinite;
}
.bank-logo-strip span {
  width: 92px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 18px;
  border-radius: 22px;
}
@keyframes bankMarquee { to { transform: translateX(calc(-50% - 9px)); } }

.bot-section { padding-block: var(--space-section); }
.bot-grid { gap: clamp(75px, 11vw, 160px); }
.bot-mock {
  width: min(100%, 450px);
  padding: 21px;
  border-radius: 28px;
  transform: rotate(-2deg);
  animation: botFloat 7s ease-in-out infinite;
}
.bot-message { padding: 27px; }
.bot-message > strong { font-size: 18px; line-height: 1.45; }
.bot-copy h2 { font-size: clamp(46px, 5.2vw, 70px); }
.bot-copy .large-text { font-size: 18px; line-height: 1.8; }
@keyframes botFloat { 50% { transform: translateY(-9px) rotate(-1.2deg); } }

.faq-section { padding-block: var(--space-section); }
.faq-layout { gap: clamp(70px, 10vw, 140px); }
.faq-intro h2 { font-size: clamp(46px, 5vw, 68px); }
.faq-question { min-height: 88px; font-size: 16px; }

.final-section { padding-block: clamp(110px, 10vw, 160px); }
.final-cta { min-height: 520px; padding: clamp(58px, 8vw, 100px); border-radius: 30px; }
.final-cta h2 { max-width: 900px; font-size: clamp(46px, 5.6vw, 76px); }

.reveal {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(48px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
.reveal.in { opacity: 1; filter: none; transform: none; }
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 190ms; }
.delay-3 { transition-delay: 280ms; }

@media (max-width: 1200px) {
  .desktop-nav { gap: 19px; margin-right: 24px; }
  .desktop-nav a { font-size: 13px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 500px; gap: 36px; }
  .hero-copy h1 { font-size: clamp(54px, 6vw, 76px); }
  .stage-note-one { right: -1%; }
  .stage-note-two { left: 0; }
  .banks-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
  :root { --space-section: 112px; }
  .site-header,
  .site-header.scrolled { height: 70px; }
  .mobile-menu { inset: 70px 0 0; }
  .hero { min-height: auto; padding: 112px 0 120px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { max-width: 790px; }
  .hero-stage { width: min(100%, 680px); min-height: 620px; margin-inline: auto; }
  .hero-orb { width: min(70vw, 540px); }
  .compact-heading.spacious-heading,
  .catalog-head.compact-heading { grid-template-columns: 1fr; gap: 24px; }
  .category-layout-2,
  .category-layout-4 { transform: none; }
  .category-layout-2:hover,
  .category-layout-4:hover { transform: translateY(-3px); }
  .offer-group:nth-child(even),
  .offer-group:nth-child(even):hover { transform: none; }
  .catalog-contact { margin-top: 36px; }
  .banks-row { grid-template-columns: 1fr; min-height: 580px; }
}

@media (max-width: 768px) {
  :root { --space-section: 92px; }
  body::before { background-size: 48px 48px; }
  .container { padding-inline: 22px; }
  .hero { padding: 82px 0 98px; }
  .hero-copy { padding: 0; }
  .hero-copy h1 { margin-bottom: 27px; font-size: clamp(43px, 12vw, 62px); }
  .hero-copy h1 span { margin-top: 5px; }
  .hero-lead { margin-bottom: 32px; font-size: 16px; }
  .hero-actions .btn { min-height: 54px; }
  .hero-stage { min-height: 510px; }
  .hero-orb { width: min(91vw, 460px); }
  .stage-note { display: none; }
  .hero-stage .hero-payout-board { transform: translate3d(0, var(--stage-scroll), 28px) rotateZ(-.7deg); }
  .hero-scroll-cue span { display: none; }
  .partner-ticker { min-height: 72px; }
  .partner-ticker span { padding-inline: 24px; font-size: 10px; }
  .compact-heading.spacious-heading,
  .catalog-head.compact-heading { margin-bottom: 48px; }
  .compact-heading h2,
  .catalog-head.compact-heading h2 { font-size: clamp(38px, 10.5vw, 54px); }
  .compact-heading.spacious-heading > p,
  .catalog-head.compact-heading > p { font-size: 14px; }
  .category-grid { grid-template-columns: 1fr; gap: 16px; }
  .category-card { min-height: 225px; padding: 27px; }
  .category-card h3 { margin-top: 34px; font-size: 21px; }
  .offer-showcase { gap: 18px; }
  .offer-group { padding: 23px; }
  .catalog-contact { padding: 25px; }
  .how-section .compact-heading { margin-bottom: 50px; }
  .compact-steps { gap: 22px; }
  .compact-step { min-height: auto; padding: 24px 0 28px; gap: 28px; }
  .compact-flow > div { min-height: 112px; }
  .compact-flow > div.active { transform: translateY(-7px); }
  .compact-benefit { min-height: 150px; }
  .banks-row { min-height: 520px; padding: 45px 25px; gap: 65px; }
  .bank-logo-strip span { width: 80px; padding: 15px; border-radius: 18px; }
  .bot-mock { transform: rotate(-1deg); }
  .final-cta { min-height: 440px; }
}

@media (max-width: 480px) {
  .hero { padding-top: 70px; }
  .hero-stage { min-height: 455px; margin-inline: -5px; width: calc(100% + 10px); }
  .hero-stage .hero-payout-board { padding: 14px; }
  .payout-preview-row { transform: none !important; }
  .hero-scroll-cue { bottom: 22px; }
  .category-card { min-height: 210px; }
  .offer-list-row { min-height: 75px; }
  .catalog-contact { margin-top: 28px; }
  .banks-row { min-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb,
  .hero-orb i,
  .stage-note,
  .hero-scroll-cue i::after,
  .partner-ticker-track,
  .bank-logo-strip,
  .bot-mock { animation: none !important; }
  .hero-stage .hero-payout-board,
  .hero-orb { transform: none !important; }
  .partner-ticker-track { transform: translateX(-18%); }
  .bank-logo-strip { transform: translateX(-12%); }
  .reveal { opacity: 1; filter: none; transform: none; }
}

/* Interactive offer album */

.hero-stage { min-height: 650px; }

.hero-album {
  width: min(100%, 590px);
  min-height: 634px;
  padding: 17px 18px 16px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 75% 34%, rgba(120, 73, 144, .25), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(52, 72, 128, .16), transparent 28%),
    linear-gradient(145deg, rgba(28, 20, 37, .97), rgba(8, 6, 12, .985));
  border: 1px solid rgba(224, 213, 229, .2);
  border-radius: 29px;
  box-shadow:
    0 46px 120px rgba(0, 0, 0, .56),
    0 24px 80px rgba(70, 35, 90, .19),
    inset 0 1px rgba(255, 255, 255, .045);
  isolation: isolate;
  transform: translate3d(var(--stage-x), calc(var(--stage-y) + var(--stage-scroll)), 0) rotateY(var(--stage-rotate));
  transition: transform 500ms var(--ease), border-color 300ms ease;
  will-change: transform;
}

.hero-album::before,
.hero-album::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.hero-album::before {
  width: 430px;
  height: 430px;
  top: 70px;
  right: -210px;
  background: rgba(111, 58, 135, .18);
  border-radius: 50%;
  filter: blur(70px);
}

.hero-album::after {
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.hero-stage:hover .hero-album { border-color: rgba(224, 213, 229, .29); }

.album-progress {
  height: 3px;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.album-progress-segment {
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}

.album-progress-segment i {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #d4bfdc, #805499);
  border-radius: inherit;
}

.album-progress-segment.is-done i { width: 100%; }
.album-progress-segment.is-active i { width: 100%; }

.album-toolbar {
  min-height: 60px;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.album-toolbar p {
  margin: 0;
  color: var(--text-disabled);
  font-size: 10px;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.album-toolbar p > span { color: var(--purple-soft); }
.album-toolbar p strong { color: var(--text-secondary); font-weight: 600; }
.album-toolbar > div { display: flex; gap: 6px; }

.album-control {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.album-control:hover {
  color: var(--text-primary);
  background: rgba(118, 81, 139, .17);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.album-pause { display: flex; align-items: center; justify-content: center; gap: 3px; }
.album-pause i { width: 2px; height: 10px; display: block; background: currentColor; border-radius: 2px; }
.hero-album.is-paused .album-pause i { display: none; }
.hero-album.is-paused .album-pause::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.album-viewport {
  height: 465px;
  position: relative;
  z-index: 3;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.album-viewport:active { cursor: grabbing; }
.album-viewport:focus-visible { outline: 1px solid var(--purple-soft); outline-offset: 4px; }

.album-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 298px 1fr;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(64px, 0, -80px) rotateY(-6deg);
  transition: opacity 580ms var(--ease), transform 680ms var(--ease), visibility 580ms;
  pointer-events: none;
}

.album-slide.is-before { transform: translate3d(-64px, 0, -80px) rotateY(6deg); }
.album-slide.is-after { transform: translate3d(64px, 0, -80px) rotateY(-6deg); }
.album-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.album-card-scene {
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.album-card-scene::after {
  width: 55%;
  height: 30px;
  position: absolute;
  top: 250px;
  content: "";
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  filter: blur(20px);
  transform: translateY(var(--card-shadow-y, 0));
  transition: transform 400ms var(--ease), opacity 400ms ease;
}

.bank-card {
  --card-rx: -3deg;
  --card-ry: 6deg;
  --glare-x: 45%;
  --glare-y: 25%;
  width: 330px;
  aspect-ratio: 1.586;
  padding: 23px 24px 20px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  box-shadow:
    -23px 34px 55px rgba(0, 0, 0, .42),
    0 25px 60px rgba(0, 0, 0, .24),
    inset 0 1px rgba(255, 255, 255, .2);
  transform-style: preserve-3d;
  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateZ(22px);
  transition: transform 280ms var(--ease), box-shadow 280ms ease;
  will-change: transform;
}

.bank-card::before,
.bank-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.bank-card::before {
  width: 230px;
  height: 230px;
  top: -130px;
  right: -80px;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
  filter: blur(1px);
}

.bank-card::after {
  width: 180%;
  height: 70px;
  right: -40%;
  bottom: -40px;
  background: rgba(255, 255, 255, .08);
  filter: blur(20px);
  transform: rotate(-12deg);
}

.bank-card-glare {
  position: absolute;
  z-index: 4;
  inset: 0;
  opacity: .8;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, .3), transparent 28%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.bank-card-alfa { background: linear-gradient(145deg, #020203 0%, #101014 56%, #050506 100%); }
.bank-card-tbank { color: #fff; background: linear-gradient(145deg, #020203 0%, #111113 58%, #050506 100%); }
.bank-card-manager { background: linear-gradient(135deg, #24142e 0%, #5a3270 60%, #a177b0 135%); }

.bank-card-top,
.bank-card-bottom {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateZ(24px);
}

.bank-card-top small {
  color: currentColor;
  opacity: .72;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.bank-card-logo {
  width: 39px;
  height: 39px;
  padding: 6px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .94);
  border-radius: 11px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .18);
}

.bank-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.bank-card-top .brand-mark { width: 38px; height: 38px; stroke: currentColor; }

.bank-card-chip {
  width: 39px;
  height: 29px;
  margin-top: 27px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  background: linear-gradient(135deg, #e9d59b, #9d8552);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 7px;
  transform: translateZ(17px);
}

.bank-card-chip i { border-right: 1px solid rgba(66, 48, 20, .3); }
.bank-card-chip i:last-child { border-right: 0; }
.bank-card-number {
  margin-top: 21px;
  position: relative;
  z-index: 3;
  color: currentColor;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .1em;
  transform: translateZ(28px);
}
.bank-card-manager .bank-card-number { font-size: 13px; letter-spacing: .115em; }

.bank-card-bottom { margin-top: auto; }
.bank-card-bottom span,
.bank-card-bottom b { color: currentColor; font-size: 8px; letter-spacing: .075em; text-transform: uppercase; }
.bank-card-bottom b { opacity: .72; font-weight: 600; }

.album-slide-copy {
  padding: 5px 9px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(150px, .7fr);
  gap: 22px;
  align-items: end;
  opacity: 0;
  border-top: 1px solid rgba(255, 255, 255, .075);
  transform: translateY(10px);
  transition: opacity 120ms ease, transform 420ms var(--ease);
}

.album-slide.is-active .album-slide-copy {
  opacity: 1;
  transform: none;
  transition-delay: 180ms;
}

.album-slide-copy .micro { margin-bottom: 10px; }
.album-slide-copy h2 {
  margin: 0;
  max-width: 310px;
  font-size: 28px;
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.album-reward { display: flex; align-items: flex-end; flex-direction: column; text-align: right; }
.album-reward > span {
  color: var(--text-disabled);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.album-reward > strong {
  margin: 4px 0 2px;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}
.album-reward > small { color: var(--text-disabled); font-size: 8px; }
.album-reward-manager > strong { max-width: 190px; font-size: 16px; line-height: 1.25; }

.album-footer {
  min-height: 72px;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.album-tabs { min-width: 0; display: flex; gap: 6px; }
.album-tabs span {
  min-height: 34px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-disabled);
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  font-size: 9px;
  user-select: none;
}
.album-tabs span.is-active {
  color: var(--text-primary);
  background: rgba(118, 81, 139, .18);
  border-color: var(--border-active);
}

.album-footer > p {
  margin: 0 3px 8px 0;
  flex: 0 0 auto;
  color: var(--text-disabled);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.album-footer > p span { margin-right: 5px; color: var(--purple-soft); }

.catalog-scope-note {
  margin: -28px 0 42px;
  padding: 24px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(110deg, rgba(58, 29, 79, .2), rgba(16, 13, 22, .7));
  border: 1px solid var(--border-hover);
  border-radius: 19px;
}

.catalog-scope-note > div { display: flex; align-items: center; gap: 18px; }
.catalog-scope-note p { margin: 0; display: flex; flex-direction: column; }
.catalog-scope-note p strong { color: var(--text-primary); font-size: 14px; }
.catalog-scope-note p small { margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.catalog-scope-note .text-link { flex: 0 0 auto; font-size: 13px; }

.catalog-scope-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
}
.catalog-scope-icon i { position: absolute; width: 4px; height: 4px; background: var(--purple-soft); border-radius: 50%; }
.catalog-scope-icon i:first-child { transform: translate(-7px, 2px); }
.catalog-scope-icon i:nth-child(2) { transform: translate(0, -6px); }
.catalog-scope-icon i:last-child { transform: translate(7px, 3px); }

@media (max-width: 1200px) {
  .hero-album { width: min(100%, 550px); }
}

@media (max-width: 992px) {
  .hero-stage { min-height: 650px; }
  .hero-album { width: min(100%, 590px); }
}

@media (max-width: 768px) {
  .hero-stage { min-height: 604px; }
  .hero-album {
    min-height: 584px;
    padding: 14px 15px;
    border-radius: 24px;
    transform: none;
  }
  .album-toolbar { min-height: 54px; }
  .album-toolbar p { font-size: 9px; }
  .album-control { width: 31px; height: 31px; }
  .album-viewport { height: 430px; }
  .album-slide { grid-template-rows: 270px 1fr; }
  .bank-card { width: min(86%, 310px); padding: 20px 21px 18px; border-radius: 21px; }
  .album-card-scene::after { top: 228px; }
  .bank-card-chip { margin-top: 21px; }
  .bank-card-number { margin-top: 17px; }
  .album-slide-copy { padding-inline: 3px; grid-template-columns: 1fr minmax(130px, .65fr); gap: 14px; }
  .album-slide-copy h2 { font-size: 24px; }
  .album-reward > strong { font-size: 24px; }
  .album-reward-manager > strong { font-size: 14px; }
  .album-footer { min-height: 66px; }
  .album-tabs { gap: 4px; }
  .album-tabs span { min-height: 32px; padding-inline: 10px; }
  .album-footer > p { display: none; }
  .catalog-scope-note { margin-top: -16px; align-items: flex-start; flex-direction: column; gap: 20px; }
}

@media (max-width: 480px) {
  .hero-stage { min-height: 567px; }
  .hero-album { width: 100%; min-height: 550px; padding: 12px; border-radius: 21px; }
  .album-progress { gap: 5px; }
  .album-toolbar p strong { display: block; margin-top: 3px; }
  .album-viewport { height: 397px; }
  .album-slide { grid-template-rows: 238px 1fr; }
  .bank-card { width: min(88%, 278px); padding: 17px 18px 15px; border-radius: 19px; }
  .album-card-scene::after { top: 200px; }
  .bank-card-logo { width: 34px; height: 34px; }
  .bank-card-chip { width: 34px; height: 25px; margin-top: 17px; }
  .bank-card-number { margin-top: 14px; font-size: 14px; }
  .bank-card-manager .bank-card-number { font-size: 11px; }
  .bank-card-bottom span,
  .bank-card-bottom b { font-size: 7px; }
  .album-slide-copy {
    padding-top: 8px;
    grid-template-columns: 1fr;
    gap: 7px;
    align-content: start;
  }
  .album-slide-copy .micro { margin-bottom: 6px; font-size: 8px; }
  .album-slide-copy h2 { font-size: 21px; }
  .album-reward { align-items: flex-start; text-align: left; }
  .album-reward > strong { font-size: 21px; }
  .album-reward-manager > strong { max-width: 260px; font-size: 13px; }
  .album-footer { min-height: 58px; align-items: center; }
  .album-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .album-tabs span { min-width: 0; padding: 0 4px; font-size: 8px; }
  .catalog-scope-note { margin-bottom: 30px; padding: 22px; }
  .catalog-scope-note > div { align-items: flex-start; }
  .catalog-scope-icon { width: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-album,
  .bank-card,
  .album-slide { transform: none !important; }
  .album-progress-segment.is-active i { animation: none !important; width: 100%; }
}

/* Consistent category-card geometry and interaction */

.category-grid .category-card.reveal.in { transform: translateY(0); }
.category-grid .category-card.reveal.in:hover { transform: translateY(-6px); }
.category-grid .category-card .line-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 0;
}
.category-grid .category-card h3 {
  margin-left: 0;
  text-align: left;
}

.guided-scroll-target { scroll-margin-top: 82px; }

/* Platform-safe vector arrows */

.ui-arrow,
.flow-arrow,
.category-arrow,
.album-touch-icon {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-arrow { width: 18px; height: 18px; }
.btn .ui-arrow { transition: transform 220ms var(--ease); }
.btn:hover .ui-arrow-up-right,
.text-link:hover .ui-arrow-up-right { transform: translate(2px, -2px); }
.text-link .ui-arrow { width: 17px; height: 17px; }
.footer-telegram { display: inline-flex; align-items: center; gap: 7px; }
.footer-telegram .ui-arrow { width: 15px; height: 15px; }
.legal-back { display: inline-flex; align-items: center; gap: 7px; }
.legal-back .ui-arrow { width: 15px; height: 15px; }
.flow-arrow { width: 20px; height: 20px; color: var(--text-disabled); }
.category-arrow { width: 18px; height: 18px; color: var(--purple-soft); transition: transform 220ms var(--ease); }
.category-card:hover .category-arrow { transform: translate(3px, 3px); }
.album-touch-icon { width: 17px; height: 17px; }

/* Timed album: arrows are the only manual slide controls */

.hero-album { --album-duration: 6000ms; }
.album-progress-segment.is-active i {
  width: 0;
  animation: albumProgress var(--album-duration) linear forwards;
}
.hero-album.is-tilting-card .album-progress-segment.is-active i { animation-play-state: paused; }
@keyframes albumProgress { to { width: 100%; } }
.album-viewport { cursor: default; }
.bank-card {
  touch-action: pan-y;
  cursor: grab;
}
.bank-card.is-tilting {
  cursor: grabbing;
  transition: none;
}
.bank-card-platinum {
  color: #17181b;
  background:
    linear-gradient(116deg, transparent 16%, rgba(255, 255, 255, .58) 30%, rgba(255, 255, 255, .08) 43%, transparent 57%),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, .08) 0 1px, rgba(33, 35, 41, .035) 1px 3px),
    linear-gradient(145deg, #777a81 0%, #c7c9ce 24%, #f1f1f2 43%, #9a9da4 64%, #d8d9dc 82%, #6f7279 112%);
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    -23px 34px 55px rgba(0, 0, 0, .42),
    0 25px 60px rgba(0, 0, 0, .24),
    inset 0 1px rgba(255, 255, 255, .78),
    inset 0 -1px rgba(37, 39, 44, .35);
}

/* One geometry for every category icon and title */

.category-grid .category-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  align-items: start;
}
.category-grid .category-card .line-icon {
  width: 48px;
  height: 48px;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 0;
}
.category-grid .category-card .line-icon svg {
  width: 22px;
  height: 22px;
}
.category-grid .category-card h3 {
  min-height: 48px;
  margin: 0 !important;
  padding: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-content: center;
  text-align: left;
}
.category-grid .category-card .category-total {
  margin-top: 42px;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
}
.category-grid .category-card .category-meta {
  grid-column: 1 / -1;
  grid-row: 3;
}

@media (max-width: 768px) {
  :root { --space-section: 76px; }
  html { scroll-padding-top: 72px; }

  .section { padding-block: 76px; }
  .container { padding-inline: 20px; }
  .hero {
    padding: 46px 0 82px;
    background:
      radial-gradient(circle at 78% 40%, rgba(104, 58, 128, .17), transparent 34%),
      linear-gradient(180deg, transparent, rgba(12, 9, 16, .52));
  }
  .hero-grid { gap: 44px; }
  .hero-copy h1 {
    max-width: 12ch;
    margin-bottom: 24px;
    font-size: clamp(42px, 12vw, 58px);
    line-height: .98;
    text-wrap: balance;
  }
  .hero-lead { max-width: 34ch; line-height: 1.7; }
  .hero-actions { gap: 10px; }
  .hero-stage {
    width: 100%;
    min-height: 622px;
    margin: 0;
  }
  .hero-album {
    width: 100%;
    min-height: 622px;
    padding: 13px 14px;
    border-radius: 26px;
    transform: none;
  }
  .album-toolbar { min-height: 58px; }
  .album-toolbar p { max-width: 190px; font-size: 9px; line-height: 1.45; }
  .album-toolbar p strong { display: inline; }
  .album-control {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }
  .album-control .ui-arrow { width: 20px; height: 20px; }
  .album-viewport { height: 465px; }
  .album-slide {
    grid-template-rows: 292px 1fr;
    transform: translate3d(34px, 0, -70px) rotateY(-5deg);
  }
  .album-slide.is-before { transform: translate3d(-34px, 0, -70px) rotateY(5deg); }
  .album-slide.is-active { transform: translate3d(0, 0, 0); }
  .album-card-scene {
    perspective: 900px;
    perspective-origin: 50% 42%;
  }
  .album-card-scene::after {
    width: 62%;
    top: 247px;
    opacity: .78;
    transform: translateY(0) scaleX(.9);
  }
  .bank-card {
    --card-rx: 0deg;
    --card-ry: 0deg;
    width: min(84vw, 310px);
    padding: 20px 21px 18px;
    border-radius: 22px;
    border-color: rgba(255, 255, 255, .13);
    box-shadow:
      0 28px 46px rgba(0, 0, 0, .42),
      0 10px 22px rgba(0, 0, 0, .2),
      inset 0 1px rgba(255, 255, 255, .12);
    transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateZ(12px);
  }
  .bank-card::before,
  .bank-card::after { display: none; }
  .bank-card-glare { opacity: .12; }
  .bank-card.is-tilting .bank-card-glare { opacity: .3; }
  .album-slide-copy {
    padding: 9px 4px 0;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .7fr);
    gap: 14px;
  }
  .album-slide-copy h2 { font-size: 23px; }
  .album-reward > strong { font-size: 23px; }
  .album-footer {
    min-height: 78px;
    padding-top: 7px;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }
  .album-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .album-tabs span { min-width: 0; min-height: 31px; padding-inline: 4px; }
  .album-footer > p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 8px;
  }

  .categories { padding-top: 76px; }
  .category-grid { gap: 13px; }
  .category-grid .category-card {
    min-height: 188px;
    padding: 22px;
    border-radius: 21px;
  }
  .category-grid .category-card .line-icon {
    width: 46px;
    height: 46px;
  }
  .category-grid .category-card h3 {
    min-height: 46px;
    font-size: 19px;
  }
  .category-grid .category-card .category-total { margin-top: 28px; }
  .category-grid .category-card .category-meta { margin-top: 12px; }
  .category-card:active {
    border-color: var(--border-hover);
    transform: scale(.985) !important;
  }

  .catalog-section {
    background:
      radial-gradient(circle at 90% 12%, rgba(86, 48, 108, .16), transparent 23%),
      linear-gradient(180deg, rgba(7, 5, 10, .9), rgba(12, 9, 16, .82));
  }
  .offer-showcase { gap: 14px; }
  .offer-group { padding: 20px; border-radius: 22px; }
  .offer-list-row { min-height: 72px; }
  .catalog-scope-note { border-radius: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .album-progress-segment.is-active i {
    width: 100%;
    animation: none;
  }
}

@media (max-width: 420px) {
  .container { padding-inline: 17px; }
  .hero { padding-top: 38px; }
  .hero-stage { min-height: 604px; }
  .hero-album { min-height: 604px; padding-inline: 11px; border-radius: 23px; }
  .album-viewport { height: 448px; }
  .album-slide { grid-template-rows: 274px 1fr; }
  .bank-card {
    width: min(82vw, 286px);
    padding: 18px 19px 16px;
  }
  .album-card-scene::after { top: 230px; }
  .album-slide-copy {
    padding-top: 8px;
    grid-template-columns: 1fr;
    gap: 6px;
    align-content: center;
  }
  .album-slide-copy .micro { margin-bottom: 5px; }
  .album-slide-copy h2 { font-size: 20px; }
  .album-reward {
    align-items: flex-start;
    text-align: left;
  }
  .album-reward > strong { font-size: 20px; }
  .album-reward > small { display: none; }
  .album-footer { min-height: 75px; }
  .category-grid .category-card { min-height: 180px; padding: 20px; }
}

/* Streamlined content rhythm and offer selection */

:root { --space-section: clamp(88px, 8vw, 124px); }

body.selection-open { overflow: hidden; }
body.manager-open { overflow: hidden; }

.header-manager-short { display: none; }
.nav-external::after {
  content: "↗";
  margin-left: 5px;
  color: var(--text-disabled);
  font-size: 11px;
}

.hero-community {
  margin: -12px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-community > a {
  min-width: 190px;
  min-height: 58px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  color: var(--text-secondary);
  background: rgba(16, 13, 22, .66);
  border: 1px solid rgba(190, 181, 195, .13);
  border-radius: 14px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.hero-community > a:hover {
  color: var(--text-primary);
  background: rgba(23, 18, 30, .9);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.hero-community > a > i {
  width: 7px;
  height: 7px;
  background: var(--purple-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(86, 48, 108, .16);
}
.hero-community > a:nth-child(2) > i { background: var(--status-success); box-shadow: 0 0 0 4px rgba(124, 155, 139, .12); }
.hero-community > a:nth-child(3) > i { background: #8f6aa4; box-shadow: 0 0 0 4px rgba(112, 69, 138, .15); }
.hero-community span { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; line-height: 1.35; }
.hero-community small { color: var(--text-disabled); font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.hero-community .ui-arrow { color: var(--text-disabled); }

.manager-picker {
  position: fixed;
  z-index: 380;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.manager-picker.is-open { visibility: visible; pointer-events: auto; }
.manager-picker-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(3, 2, 5, .84);
  border: 0;
  opacity: 0;
  cursor: default;
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease;
}
.manager-picker.is-open .manager-picker-backdrop { opacity: 1; }
.manager-picker-card {
  position: relative;
  width: min(540px, 100%);
  padding: 36px;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 100% 0, rgba(86, 48, 108, .23), transparent 46%),
    #100c15;
  border: 1px solid var(--border-default);
  border-radius: 26px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .58);
  opacity: 0;
  transform: translateY(15px) scale(.985);
  transition: opacity 220ms ease, transform 300ms var(--ease);
}
.manager-picker.is-open .manager-picker-card { opacity: 1; transform: none; }
.manager-picker-card > .eyebrow { margin-bottom: 12px; }
.manager-picker-card > h2 {
  max-width: 430px;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(31px, 5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.manager-picker-card > p:not(.eyebrow):not(.manager-picker-note) {
  max-width: 460px;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.manager-picker-close {
  width: 42px;
  height: 42px;
  padding: 0;
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border-default);
  border-radius: 13px;
  cursor: pointer;
}
.manager-picker-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.manager-picker-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.manager-options { margin-top: 27px; display: grid; gap: 10px; }
.manager-option {
  min-height: 72px;
  padding: 11px 14px 11px 11px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}
.manager-option:hover {
  background: rgba(86, 48, 108, .16);
  border-color: rgba(118, 81, 139, .45);
  transform: translateX(3px);
}
.manager-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  background: linear-gradient(145deg, rgba(118, 81, 139, .82), rgba(47, 23, 62, .9));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.manager-option:nth-child(2) .manager-avatar { background: linear-gradient(145deg, rgba(92, 94, 137, .82), rgba(35, 27, 54, .95)); }
.manager-option:nth-child(3) .manager-avatar { background: linear-gradient(145deg, rgba(84, 117, 102, .82), rgba(26, 48, 39, .95)); }
.manager-option > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.manager-option strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.manager-option small { color: var(--text-disabled); font-size: 10px; }
.manager-option b { color: var(--purple-soft); font-size: 11px; font-weight: 600; }
.manager-picker-note {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-disabled);
  font-size: 10px;
}
.manager-picker-note i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--status-success); border-radius: 50%; }

.hero {
  min-height: min(760px, calc(100svh - 40px));
  padding: clamp(92px, 10vh, 124px) 0 clamp(104px, 12vh, 140px);
}
.hero-grid.hero-grid-condensed {
  max-width: 1360px;
  grid-template-columns: minmax(0, 1200px);
}
.hero-grid-condensed .hero-copy {
  max-width: 1200px;
  padding-block: 20px;
}
.hero-grid-condensed .hero-copy h1 {
  max-width: 1200px;
  font-size: clamp(62px, 6.2vw, 92px);
}
.hero-grid-condensed .hero-lead { max-width: 720px; }

.compact-heading.spacious-heading,
.catalog-head.compact-heading { margin-bottom: clamp(42px, 5vw, 64px); }

.category-card,
.category-grid .category-card {
  min-height: 228px;
  padding: 29px;
}
.category-grid .category-card .category-total { margin-top: 30px; }

.offer-showcase { gap: 22px; }
.offer-group { padding: 26px; }
.offer-group:nth-child(even),
.offer-group:nth-child(even):hover { transform: none; }
.offer-list-row {
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr) auto 38px;
  gap: 11px;
}
.offer-select-button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border-default);
  border-radius: 11px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}
.offer-select-button:hover {
  color: var(--text-primary);
  background: rgba(86, 48, 108, .2);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.offer-select-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-select-check { display: none; }
.offer-select-button.is-selected {
  color: var(--text-primary);
  background: var(--purple);
  border-color: rgba(255, 255, 255, .17);
}
.offer-select-button.is-selected .offer-select-plus { display: none; }
.offer-select-button.is-selected .offer-select-check { display: block; }

.catalog-contact { margin-top: 46px; }
.catalog-contact button { border: 0; font: inherit; cursor: pointer; }

.how-section .compact-heading { margin-bottom: 54px; }
.compact-steps { gap: 28px; }
.compact-step { min-height: 170px; gap: 27px; }

.benefits-section { padding-block: clamp(60px, 6vw, 84px); }
.compact-benefit { min-height: 156px; }

.banks-row { min-height: 460px; }
.bot-grid { gap: clamp(64px, 9vw, 120px); }
.faq-layout { gap: clamp(56px, 8vw, 104px); }
.faq-intro h2 { font-size: clamp(42px, 4.4vw, 58px); }
.faq-question { min-height: 76px; }
.final-section { padding-block: clamp(84px, 8vw, 116px); }
.final-cta { min-height: 420px; padding: clamp(48px, 7vw, 76px); }

.selection-bar[hidden],
.selection-clear[hidden] { display: none; }
.selection-bar {
  position: fixed;
  z-index: 180;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100% - 48px));
  min-height: 76px;
  padding: 11px 12px 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #120e17;
  border: 1px solid var(--border-hover);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  animation: selectionBarIn 360ms var(--ease) both;
}
@keyframes selectionBarIn {
  from { opacity: 0; transform: translateY(18px); }
}
.selection-bar > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.selection-bar-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--purple-soft);
  background: rgba(86, 48, 108, .2);
  border-radius: 12px;
}
.selection-bar-icon svg,
.selection-empty svg,
.selection-close svg,
.selection-item button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selection-bar p { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.selection-bar p strong { color: var(--text-primary); font-size: 13px; }
.selection-bar p span { color: var(--text-muted); font-size: 10px; }
.selection-bar .btn { min-height: 44px; }

.selection-drawer {
  position: fixed;
  z-index: 300;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.selection-drawer.is-open { visibility: visible; pointer-events: auto; }
.selection-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(3, 2, 5, .72);
  border: 0;
  opacity: 0;
  cursor: default;
  transition: opacity 280ms ease;
}
.selection-drawer.is-open .selection-backdrop { opacity: 1; }
.selection-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(470px, 100%);
  height: 100%;
  padding: 34px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--text-primary);
  background: #0e0a12;
  border-left: 1px solid var(--border-default);
  box-shadow: -24px 0 80px rgba(0, 0, 0, .32);
  transform: translateX(100%);
  transition: transform 360ms var(--ease);
}
.selection-drawer.is-open .selection-panel { transform: none; }
.selection-panel-head {
  padding-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--border-default);
}
.selection-panel-head .eyebrow { margin-bottom: 10px; }
.selection-panel-head h2 { margin: 0; font-size: 34px; }
.selection-close {
  width: 42px;
  height: 42px;
  padding: 0;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 13px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.selection-close:hover { color: var(--text-primary); background: var(--surface-raised); border-color: var(--border-hover); }
.selection-list {
  min-height: 0;
  padding-block: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.selection-item {
  width: 100%;
  max-width: 100%;
  min-height: 77px;
  padding-block: 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 32px;
  gap: 11px;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.selection-item-logo {
  width: 42px;
  height: 42px;
  padding: 6px;
  display: grid;
  place-items: center;
  background: rgba(244, 242, 245, .96);
  border-radius: 11px;
}
.selection-item-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.selection-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.selection-item strong,
.selection-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-item strong { color: var(--text-secondary); font-size: 12px; }
.selection-item small { color: var(--text-disabled); font-size: 9px; }
.selection-item b { color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.selection-item button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-disabled);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.selection-item button:hover { color: var(--text-primary); background: var(--surface-raised); }
.selection-item button svg { width: 16px; height: 16px; }
.selection-empty {
  min-height: 100%;
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.selection-empty > span {
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  color: var(--purple-soft);
  background: rgba(86, 48, 108, .15);
  border: 1px solid var(--border-default);
  border-radius: 18px;
}
.selection-empty strong { font-size: 15px; }
.selection-empty p { max-width: 260px; margin: 7px 0 0; color: var(--text-muted); font-size: 12px; }
.selection-panel-foot { padding-top: 22px; border-top: 1px solid var(--border-default); }
.selection-panel-foot > p { margin: 0 0 16px; color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.selection-panel-foot .selection-notice {
  padding: 12px 14px;
  color: var(--text-secondary);
  background: rgba(86, 48, 108, .16);
  border: 1px solid rgba(118, 81, 139, .34);
  border-radius: 12px;
}
.selection-notice[hidden] { display: none; }
.selection-panel-foot .btn { width: 100%; }
.selection-clear {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.selection-clear:hover { color: var(--text-primary); }

.age-gate {
  position: fixed;
  z-index: 340;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  visibility: hidden;
  pointer-events: none;
}
.age-gate.is-open { visibility: visible; pointer-events: auto; }
.age-gate-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: rgba(3, 2, 5, .82);
  border: 0;
  opacity: 0;
  cursor: default;
  transition: opacity 240ms ease;
}
.age-gate.is-open .age-gate-backdrop { opacity: 1; }
.age-gate-card {
  position: relative;
  width: min(460px, 100%);
  padding: 34px;
  color: var(--text-secondary);
  background:
    radial-gradient(circle at 100% 0, rgba(86, 48, 108, .2), transparent 45%),
    #100c15;
  border: 1px solid var(--border-default);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity 240ms ease, transform 300ms var(--ease);
}
.age-gate.is-open .age-gate-card { opacity: 1; transform: none; }
.age-gate-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  color: var(--purple-soft);
  background: rgba(86, 48, 108, .18);
  border: 1px solid rgba(118, 81, 139, .3);
  border-radius: 15px;
}
.age-gate-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.age-gate-card .eyebrow { margin-bottom: 12px; }
.age-gate-card h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.age-gate-card > p:not(.eyebrow):not(.age-gate-summary) {
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.age-gate-summary {
  margin: 20px 0 0;
  padding: 12px 14px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  font-size: 12px;
}
.age-gate-actions { margin-top: 24px; display: grid; gap: 10px; }
.age-gate-actions .btn { width: 100%; min-height: 50px; }
.age-gate-return {
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  color: var(--text-disabled);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.age-gate-return:hover { color: var(--text-primary); }

@media (max-width: 992px) {
  :root { --space-section: 84px; }
  .desktop-nav,
  .menu-toggle,
  .mobile-menu { display: none; }
  .header-actions,
  .header-actions > .btn { display: inline-flex; }
  .hero {
    min-height: auto;
    padding: 76px 0 96px;
  }
  .hero-grid.hero-grid-condensed { grid-template-columns: 1fr; }
  .hero-grid-condensed .hero-copy h1 { max-width: 13ch; font-size: clamp(48px, 8vw, 74px); }
  .offer-group { padding: 23px; }
}

@media (max-width: 768px) {
  :root { --space-section: 68px; }
  .section { padding-block: 68px; }
  .hero { padding: 52px 0 76px; }
  .hero-grid-condensed .hero-copy { padding-block: 10px; }
  .hero-community { margin: -5px 0 25px; }
  .hero-community > a { min-width: 0; flex: 1 1 calc(50% - 5px); }
  .hero-community > a:last-child:nth-child(odd) { flex-basis: 100%; }
  .hero-grid-condensed .hero-copy h1 { max-width: 12ch; font-size: clamp(39px, 11vw, 52px); }
  .compact-heading.spacious-heading,
  .catalog-head.compact-heading { margin-bottom: 38px; }
  .category-grid .category-card { min-height: 176px; padding: 20px; }
  .category-grid .category-card .category-total { margin-top: 22px; }
  .offer-showcase { gap: 14px; }
  .catalog-contact { margin-top: 28px; }
  .how-section .compact-heading { margin-bottom: 38px; }
  .compact-step { min-height: 148px; }
  .benefits-section { padding-block: 56px; }
  .compact-benefit { min-height: 142px; }
  .banks-row { min-height: auto; }
  .faq-intro h2 { font-size: 40px; }
  .faq-question { min-height: 70px; }
  .final-section { padding-block: 72px; }
  .final-cta { min-height: 360px; }
  .selection-bar {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    min-height: 68px;
    border-radius: 18px;
  }
  .selection-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(84svh, 720px);
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-default);
    border-left: 0;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
  }
  .selection-panel-head h2 { font-size: 29px; }
  .age-gate {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    place-items: end center;
  }
  .age-gate-card { padding: 26px 22px 20px; border-radius: 22px; }
  .age-gate-icon { width: 46px; height: 46px; margin-bottom: 20px; }
  .manager-picker {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    place-items: end center;
  }
  .manager-picker-card { padding: 28px 22px 22px; border-radius: 24px; }
  .manager-picker-close { top: 17px; right: 17px; }
}

@media (max-width: 480px) {
  .header-manager-full { display: none; }
  .header-manager-short { display: inline; }
  .site-header .brand { gap: 7px; font-size: 14px; }
  .site-header .brand-mark { width: 29px; height: 29px; }
  .site-header .header-actions > .btn { min-height: 42px; padding-inline: 14px; font-size: 11px; }
  .hero-community { display: grid; grid-template-columns: 1fr; }
  .hero-community > a { min-height: 54px; }
  .offer-group { padding: 17px; }
  .offer-list-row {
    grid-template-columns: 38px minmax(0, 1fr) auto 34px;
    gap: 8px;
  }
  .offer-select-button { width: 34px; height: 34px; }
  .offer-row-reward strong { font-size: 14px; }
  .selection-bar-icon { width: 38px; height: 38px; }
  .selection-bar .btn { min-height: 42px; padding-inline: 15px; }
  .selection-item { grid-template-columns: 38px minmax(0, 1fr) auto 30px; gap: 8px; }
  .selection-item-logo { width: 38px; height: 38px; }
  .manager-option { min-height: 67px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .manager-avatar { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .selection-bar { animation: none; }
  .selection-panel,
  .selection-backdrop,
  .age-gate-card,
  .age-gate-backdrop,
  .manager-picker-card,
  .manager-picker-backdrop { transition: none; }
}