:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-soft: #eef3f9;
  --border: rgba(11, 16, 32, 0.08);
  --border-strong: rgba(11, 16, 32, 0.14);
  --text: #334155;
  --text-muted: #64748b;
  --heading: #0b1020;
  --accent: #0b1020;
  --accent-strong: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --shadow-xl: 0 28px 80px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.07);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --navbar-height: 88px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.09), transparent 24%),
    radial-gradient(circle at top right, rgba(11, 16, 32, 0.04), transparent 22%),
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 52%, #eef3f8 100%);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

main {
  display: block;
}

.site-shell {
  overflow-x: clip;
}

.btn:focus-visible,
.btn:active:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.24);
}

.content-section,
.hero-section {
  scroll-margin-top: calc(var(--navbar-height) + 16px);
}