/* ═══════════════════════════════════════════════════════════
   bg-clean.css — HANLIAN AUTO Premium Background
   Rich atmospheric gradients + subtle noise texture
   ═══════════════════════════════════════════════════════════ */

body { background-color: #fafafa; }

.bg-clean {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}

/* SVG noise texture — rich, subtle grain */
.bg-clean::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px 256px;
}

/* Atmospheric brand glows — deep red + blue */
.bg-clean-glow { position: absolute; inset: 0; z-index: 0; }
.bg-clean-glow::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -15%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse at 40% 30%, rgba(196,30,58,0.025) 0%, transparent 70%);
}
.bg-clean-glow::after {
  content: '';
  position: absolute;
  top: 30%;
  right: -20%;
  width: 50%;
  height: 120%;
  background: radial-gradient(ellipse at 60% 40%, rgba(6,130,219,0.018) 0%, transparent 70%);
}

/* Top accent line — subtle */
.bg-clean-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,30,58,0.4) 20%,
    rgba(196,30,58,0.4) 50%,
    transparent 100%
  );
}

main { position: relative; z-index: 2; }