:root {
  --color-bg-primary: #06151a;
  --color-bg-secondary: #0b2228;
  --color-bg-tertiary: #123640;
  --color-accent-primary: #22d3ee;
  --color-accent-secondary: #a3e635;
  --color-accent-tertiary: #38bdf8;
  --color-text-primary: #f4feff;
  --color-text-secondary: #b6d8df;
  --color-text-tertiary: #79a6af;
  --color-border: rgba(34, 211, 238, 0.2);
}

.navbar {
  background: rgba(6, 21, 26, 0.82);
}

.hero {
  background:
    linear-gradient(135deg, rgba(6, 21, 26, 0.96), rgba(11, 34, 40, 0.94)),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.07) 0 1px, transparent 1px 72px);
}

.hero::before {
  background: radial-gradient(circle, rgba(163, 230, 53, 0.14) 0%, transparent 68%);
}

.hero::after {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.14) 0%, transparent 68%);
}

.hero__container {
  gap: 88px;
}

.hero__cta,
.navbar__download-btn,
.cta-button {
  border-radius: 10px;
  background: linear-gradient(135deg, #22d3ee, #a3e635);
  color: #06151a;
  box-shadow: 0 16px 36px rgba(34, 211, 238, 0.28);
}

.phone-frame {
  transform: rotate(2deg);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 24px 70px rgba(34, 211, 238, 0.22);
}

.floating-card {
  border-radius: 10px;
  background: rgba(11, 34, 40, 0.78);
}

.feature-item,
.benefit-item {
  border-radius: 12px;
}

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

.benefits {
  background: linear-gradient(135deg, #06151a, #102f26);
}

@media (max-width: 768px) {
  .hero__container {
    gap: 48px;
  }
}