:root {
  --bg: #09030d;
  --bg-2: #140611;
  --panel: rgba(24, 10, 18, 0.72);
  --panel-strong: rgba(30, 12, 22, 0.9);
  --text: #fff4ea;
  --muted: #e6cbbf;
  --accent-fire: #ff7a18;
  --accent-gold: #ffb347;
  --accent-violet: #b86cff;
  --line: rgba(255, 190, 120, 0.18);
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
  --radius: 24px;
  --container: 1180px;
}
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(rgba(8,2,10,0.48), rgba(8,2,10,0.78)),
    url('../images/hero/background.webp') center center / cover no-repeat;

  pointer-events: none;
}
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background:
    linear-gradient(rgba(8,2,10,0.48), rgba(8,2,10,0.78)),
    /* url('../images/hero/background.webp') center center / cover no-repeat fixed, */
    radial-gradient(circle at top left, rgba(255, 122, 24, 0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(184, 108, 255, 0.16), transparent 28%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 140, 40, 0.12), transparent 18%),
    radial-gradient(circle at 86% 10%, rgba(185, 108, 255, 0.12), transparent 20%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.08; margin: 0 0 14px; }
h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
p { margin: 0; color: var(--muted); }