:root {
  --site-bg-base: #060709;
  --site-red: #c91724;
  --site-red-soft: #ff7b84;
  --text-muted: #cbc4c7;
  --muted: #cbc4c7;
  --card: rgba(13, 15, 18, 0.8);
  --card-bg: rgba(13, 15, 18, 0.8);
  --border: rgba(201, 23, 36, 0.18);
  --card-border: rgba(201, 23, 36, 0.18);
  --header-bg: linear-gradient(180deg, rgba(16, 18, 22, 0.8), rgba(7, 8, 10, 0.68));
  --header-border: rgba(255, 255, 255, 0.06);
  --header-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  --header-link-color: rgba(244, 245, 247, 0.92);
  --header-link-hover: #ffffff;
  --header-accent: var(--site-red);
  --footer-bg: linear-gradient(180deg, rgba(13, 15, 18, 0.16) 0%, rgba(3, 4, 6, 0.96) 100%);
  --footer-border: rgba(255, 107, 118, 0.16);
  --footer-text: var(--muted);
  --site-background:
    radial-gradient(1200px 760px at 14% 18%, rgba(201, 23, 36, 0.11) 0%, rgba(201, 23, 36, 0.05) 22%, transparent 48%),
    radial-gradient(900px 560px at 84% 12%, rgba(255, 123, 132, 0.05) 0%, transparent 34%),
    radial-gradient(760px 420px at 50% 0%, rgba(255, 255, 255, 0.038) 0%, transparent 42%),
    radial-gradient(700px 420px at 50% 38%, rgba(255, 255, 255, 0.018) 0%, transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.22) 76%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, #101217 0%, #0a0c10 42%, #050608 100%);
}

html {
  background: var(--site-bg-base);
}

body {
  background-color: var(--site-bg-base);
  background-image: var(--site-background);
  background-attachment: fixed;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#particle-canvas {
  opacity: 0.68;
  filter: saturate(0.84) blur(0.2px);
}

.footer-section {
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}