:root {
  --color-bg-primary: #fff7fb;
  --color-bg-secondary: #fff0f7;
  --color-bg-tertiary: #ffe2ef;
  --color-accent-primary: #ec4899;
  --color-accent-secondary: #f59e0b;
  --color-accent-tertiary: #7c3aed;
  --color-text-primary: #2b1622;
  --color-text-secondary: #765066;
  --color-text-tertiary: #a56f8d;
  --color-border: rgba(236, 72, 153, 0.18);
}

html,
body {
  background: #fff7fb;
}

.navbar {
  background: rgba(255, 247, 251, 0.86);
}

.navbar__logo {
  color: #ec4899;
}

.hero {
  background:
    radial-gradient(circle at 18% 26%, rgba(245, 158, 11, 0.16), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(124, 58, 237, 0.12), transparent 26%),
    linear-gradient(180deg, #fff7fb, #fff0f7);
}

.hero__title {
  color: #2b1622;
}

.hero__title .highlight {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar__download-btn,
.hero__cta,
.cta-button {
  border-radius: 18px;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  color: #fff;
}

.hero__visual {
  transform: rotate(-1deg);
}

.phone-frame {
  border-color: rgba(236, 72, 153, 0.38);
  background: #fff;
  box-shadow: 0 24px 72px rgba(236, 72, 153, 0.2);
}

.floating-card,
.feature-item,
.benefit-item {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(236, 72, 153, 0.18);
}

.feature-item:nth-child(2) {
  transform: translateY(24px);
}

.features,
.cta-section,
.footer {
  background: #fff0f7;
}

.benefits {
  background: linear-gradient(180deg, #fff7fb, #fff4df);
}

@media (max-width: 768px) {
  .feature-item:nth-child(2) {
    transform: none;
  }
}