html {
  scroll-padding-top: var(--header-height-desktop);
}

@media (max-width: 767.98px) {
  html {
    scroll-padding-top: var(--header-height-mobile);
  }
}

.ruletka-page {
  background:
    radial-gradient(circle at 0% 0%, rgba(199, 155, 255, 0.22), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(245, 200, 76, 0.18), transparent 60%),
    #06040a;
}

.hero-ruletka {
  position: relative;
}

.hero-ruletka-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--grid-gap-xl);
  align-items: center;
}

@media (max-width: 1023.98px) {
  .hero-ruletka-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero-ruletka-content {
  max-width: 640px;
}

.hero-eyebrow {
  margin-bottom: var(--space-xs);
}

.hero-ruletka-lead {
  margin-top: var(--space-sm);
}

.hero-ruletka-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero-ruletka-cta .btn {
  max-width: 100%;
}

.hero-ruletka-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.hero-highlight-item {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 200, 76, 0.45);
  background: radial-gradient(circle at 0 0, rgba(245, 200, 76, 0.14), transparent 60%), rgba(12, 8, 22, 0.9);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.hero-ruletka-media {
  max-width: 520px;
  margin-left: auto;
}

@media (max-width: 1023.98px) {
  .hero-ruletka-media {
    max-width: 460px;
    margin: 0 auto;
  }
}

.hero-ruletka-figure {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9);
}

.hero-ruletka-image {
  object-fit: cover;
}

.section-flow-grid,
.section-audience-grid {
  align-items: center;
}

.section-flow-text,
.section-flow-media,
.section-audience-text,
.section-audience-media {
  min-width: 0;
}

.section-flow-text h2,
.section-audience-text h2 {
  margin-bottom: var(--space-sm);
}

.section-flow-figure,
.section-audience-figure {
  box-shadow: var(--shadow-soft);
}

.feature-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap-sm);
}

.feature-list-item {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: radial-gradient(circle at 0 0, rgba(199, 155, 255, 0.12), transparent 55%), rgba(12, 8, 22, 0.96);
}

.feature-label {
  display: block;
  font-size: var(--font-size-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

.feature-note {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.audience-pills {
  margin-top: var(--space-lg);
}

.audience-card {
  padding: var(--space-md);
}

.section-audience-image,
.section-flow-image {
  object-fit: cover;
}

.section-why-header {
  max-width: var(--container-sm);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.section-why-intro {
  margin-top: var(--space-sm);
}

.section-why-grid {
  margin-bottom: var(--space-xl);
}

.why-card {
  padding: var(--space-md);
}

.section-why-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(245, 200, 76, 0.4);
  background:
    radial-gradient(circle at 0% 0%, rgba(199, 155, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(245, 200, 76, 0.25), transparent 55%),
    rgba(12, 8, 22, 0.96);
  box-shadow: var(--shadow-soft);
}

.section-why-cta-text {
  flex: 1 1 260px;
  min-width: 0;
}

.section-why-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.section-why-cta-actions .btn {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .section-why-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-why-cta-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.hero-ruletka,
.section-flow,
.section-audience,
.section-why {
  position: relative;
  z-index: 1;
}

.hero-ruletka::after,
.section-flow::before,
.section-audience::before,
.section-why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
}

.hero-ruletka::after {
  background: radial-gradient(circle at 50% 120%, rgba(245, 200, 76, 0.16), transparent 65%);
}

.section-flow::before {
  background: radial-gradient(circle at 0% 0%, rgba(199, 155, 255, 0.12), transparent 60%);
}

.section-audience::before {
  background: radial-gradient(circle at 100% 0%, rgba(245, 200, 76, 0.12), transparent 60%);
}

.section-why::before {
  background: radial-gradient(circle at 50% 0%, rgba(199, 155, 255, 0.1), transparent 65%);
}

.hero-ruletka-inner,
.section-flow > .container,
.section-audience > .container,
.section-why > .container {
  position: relative;
  z-index: 2;
}