/* ── DX-SKIN: Hero atmosphere effect ── */
  .hero, .page-banner { overflow: hidden; }

  .dx-hero-atmos {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .dx-grain {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: dx-grain-shift 0.15s steps(1) infinite;
  }
  @keyframes dx-grain-shift {
    0%   { background-position: 0 0; }
    25%  { background-position: -50px -30px; }
    50%  { background-position: 30px -60px; }
    75%  { background-position: -70px 40px; }
    100% { background-position: 20px 10px; }
  }

  .dx-shard {
    position: absolute;
    top: 110%;
    width: 0;
    height: 0;
    border-style: solid;
    animation: dx-shard-rise linear infinite;
  }
  @keyframes dx-shard-rise {
    0%   { transform: translateX(0) rotate(0deg);            top: 110%; opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(var(--dx-x, 8vw)) rotate(720deg); top: -10%; opacity: 0; }
  }

  .dx-hero-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
  }

/* ── Carousel tech background effect ── */
  .hero-img-carousel { position: relative; }
  .dx-carousel-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.55;
  }
  .hero-img-track { position: relative; z-index: 1; }