:root {
  --bg: #eef0f3;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --ink: #2b323c;
  --heading: #1c222b;
  --muted: #6d7886;
  --line: #d9dee5;
  --nav-bg: #171c22;
  --nav-ink: #cfd6de;
  --accent: #e0233f;
  --accent-soft: rgba(224, 35, 63, 0.12);
  --accent-ink: #ffffff;
  --hero-bg: #0f1216;
  --hero-ink: #f4f6f9;
  --hero-muted: #b9c2cd;
  --hero-accent: #ff5461;
  --hero-glow: rgba(224, 35, 63, 0.32);
  --hero-glow2: rgba(120, 140, 190, 0.18);
  --hero-pattern: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 26px);
  --band-a: #e6e9ee;
  --band-b: #cdd3dc;
  --chip: #e8ebf0;
  --footer-bg: #0c0f13;
  --footer-ink: #98a1ad;
  --footer-accent: #ff5461;
}

.hero {
  background:
    radial-gradient(1000px 520px at 82% 10%, rgba(224, 35, 63, 0.26), transparent 55%),
    radial-gradient(760px 460px at 8% 96%, rgba(150, 175, 220, 0.14), transparent 55%),
    linear-gradient(150deg, #232a33, #0c0f13 72%);
}

:root {
  --bling: #ff5461;
  --bling2: #dbe3ec;
  --grad1: #f6f8fb;
  --grad2: #8f9aab;
}

.hero .sweep {
  position: absolute;
  top: 0; bottom: 0;
  width: 240px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: sweep 7s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes sweep {
  0% { left: -30%; }
  55%, 100% { left: 130%; }
}