:root {
  --color-bg-primary: #eef8f4;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #dcefe8;
  --color-accent-primary: #0f766e;
  --color-accent-secondary: #2563eb;
  --color-accent-tertiary: #14b8a6;
  --color-text-primary: #10201f;
  --color-text-secondary: #49635f;
  --color-text-tertiary: #79918d;
  --color-border: rgba(15, 118, 110, 0.16);
  --color-border-light: rgba(15, 118, 110, 0.1);
}

html,
body {
  background: #eef8f4;
}

.navbar {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(15, 118, 110, 0.12);
}

.navbar__logo {
  color: #0f766e;
}

.hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.11), transparent 28%),
    linear-gradient(180deg, #f7fffc, #e5f5ef);
}

.hero__title .highlight,
.benefits h2 {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar__download-btn,
.hero__cta,
.cta-button {
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
}

.phone-frame {
  background: #ffffff;
  border-color: #d6eee5;
  box-shadow: 0 24px 70px rgba(15, 118, 110, 0.18);
}

.floating-card,
.feature-item,
.benefit-item {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 118, 110, 0.14);
  box-shadow: 0 20px 45px rgba(15, 118, 110, 0.08);
}

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

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