:root {
  --color-bg-primary: #130b10;
  --color-bg-secondary: #211018;
  --color-bg-tertiary: #351722;
  --color-accent-primary: #ff3d6e;
  --color-accent-secondary: #ffb84d;
  --color-accent-tertiary: #8b5cf6;
  --color-text-primary: #fff7f8;
  --color-text-secondary: #f0b9c3;
  --color-text-tertiary: #a97984;
  --color-border: rgba(255, 61, 110, 0.2);
}

body {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 184, 77, 0.18), transparent 28%),
    radial-gradient(circle at 12% 45%, rgba(255, 61, 110, 0.18), transparent 30%),
    var(--color-bg-primary);
}

.navbar {
  background: rgba(19, 11, 16, 0.78);
}

.navbar__download-btn,
.hero__cta,
.cta-button {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3d6e, #ffb84d);
  color: #1c0b10;
  box-shadow: 0 18px 42px rgba(255, 61, 110, 0.32);
}

.hero {
  background:
    linear-gradient(115deg, rgba(19, 11, 16, 0.96), rgba(53, 23, 34, 0.9)),
    radial-gradient(circle at 70% 30%, rgba(255, 184, 77, 0.18), transparent 32%);
}

.hero__title {
  letter-spacing: 1px;
}

.phone-frame {
  border-color: rgba(255, 184, 77, 0.52);
  background: #090509;
  box-shadow: 0 28px 70px rgba(255, 61, 110, 0.28);
}

.floating-card,
.feature-item,
.benefit-item {
  border-radius: 24px;
  background: rgba(53, 23, 34, 0.74);
}

.features,
.cta-section {
  background: #1a0e15;
}

.benefits {
  background: linear-gradient(180deg, #130b10, #2a111a);
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 31px;
  }
}