:root {
  --color-bg-primary: #050816;
  --color-bg-secondary: #10172a;
  --color-bg-tertiary: #1e293b;
  --color-accent-primary: #f97316;
  --color-accent-secondary: #06b6d4;
  --color-accent-tertiary: #eab308;
  --color-text-primary: #fffdf8;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #8fa0b8;
  --color-border: rgba(249, 115, 22, 0.2);
}

.navbar {
  background: rgba(5, 8, 22, 0.78);
}

.hero {
  background:
    linear-gradient(180deg, rgba(5, 8, 22, 0.98), rgba(15, 23, 42, 0.95)),
    radial-gradient(circle at 68% 26%, rgba(6, 182, 212, 0.18), transparent 30%);
}

.hero::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.14) 0%, transparent 68%);
}

.hero__title {
  font-weight: 800;
}

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

.navbar__download-btn,
.hero__cta,
.cta-button {
  border-radius: 8px;
  background: linear-gradient(135deg, #f97316, #06b6d4);
  color: #050816;
}

.phone-frame {
  border-color: #243044;
  box-shadow:
    0 26px 80px rgba(6, 182, 212, 0.2),
    0 0 0 1px rgba(249, 115, 22, 0.16);
}

.floating-card {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(249, 115, 22, 0.18);
}

.feature-item,
.benefit-item {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.72), rgba(5, 8, 22, 0.72));
}

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

.benefits {
  background: linear-gradient(135deg, #050816, #111827);
}