:root {
  --canvas: #1d1f24;
  --surface: #272a30;
  --surface-deep: #16181c;
  --heading: #fafafa;
  --body: #d8d9dd;
  --muted-soft: #9a9da6;
  --hairline: #353841;
  --accent: #4ee6b3;
  --accent-foreground: #0f3a2c;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--canvas);
  color: var(--body);
  font-family: 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }

.text-heading { color: var(--heading) !important; }
.text-muted-soft { color: var(--muted-soft) !important; }
.text-accent { color: var(--accent) !important; }

.bg-surface { background-color: var(--surface) !important; }
.bg-canvas { background-color: var(--canvas) !important; }
.border-hairline { border-color: var(--hairline) !important; }

.card-deep {
  background-color: var(--surface-deep);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
}

.btn-accent {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border: 1px solid var(--accent);
  border-radius: .65rem;
  font-weight: 500;
  padding: .55rem 1rem;
}
.btn-accent:hover { filter: brightness(1.1); color: var(--accent-foreground); }

.btn-outline-hairline {
  border: 1px solid var(--hairline);
  color: var(--heading);
  border-radius: .65rem;
  padding: .55rem 1rem;
  font-weight: 500;
}
.btn-outline-hairline:hover { background-color: var(--surface); color: var(--heading); }

.pill {
  display: inline-block;
  width: 1rem; height: 1rem;
  background: rgba(15, 58, 44, .35);
  border-radius: 4px;
}

.feature-icon {
  width: 2.5rem; height: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: .55rem;
  display: flex; align-items: center; justify-content: center;
}
.feature-icon span {
  width: 1rem; height: 1rem;
  background: rgba(78, 230, 179, .4);
  border-radius: 999px;
}

.navbar .nav-link {
  color: var(--muted-soft);
  font-weight: 500;
  font-size: .9rem;
  transition: color .15s ease;
}
.navbar .nav-link:hover { color: var(--accent); }

.link-muted { color: var(--muted-soft); text-decoration: none; }
.link-muted:hover { color: var(--heading); }

.navbar-toggler {
  border-color: var(--hairline);
}
.navbar-toggler-icon {
  filter: invert(1) opacity(.7);
}

h1.display-2 { font-size: clamp(2.75rem, 6vw, 4.75rem); }