:root {
  --bg:        #0A0605;
  --bg-deep:   #150D08;
  --panel:     #1C130D;
  --border:    #2E2015;
  --border2:   #3D2A1A;
  /* accent = local / offline lane (ember) */
  --accent:    #E8935A;
  --accent2:   #C4713A;
  --accent-rgb: 232,147,90;
  /* accent-b = cloud lane (ethereal violet) */
  --accent-b:  #9B94D4;
  --accent-b2: #7A72B0;
  --accent-b-rgb: 155,148,212;
  --text:      #EAE0D0;
  --dim:       #8A7560;
  --dimmer:    #4A3D30;
  --ok:        #7AA05A;
  --fail:      #A05A5A;
}

body.angerboda-page {
  background:
    radial-gradient(ellipse 90% 65% at 50% 15%, rgba(116, 38, 12, 0.22), transparent 70%),
    #080302;
}

.angerboda-page #angerboda-fluid-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  pointer-events: none;
  filter: saturate(1.18) contrast(1.06);
}

.angerboda-page #film-canvas {
  z-index: 1;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.angerboda-page .page {
  z-index: 2;
}

.angerboda-page .hero-title {
  text-shadow:
    0 2px 18px rgba(8, 2, 0, 0.85),
    0 0 30px rgba(232, 96, 38, 0.16);
}

.angerboda-page .center-panel,
.angerboda-page .product-stat,
.angerboda-page .flow,
.angerboda-page .overlay-demo {
  backdrop-filter: blur(3px);
}