/* Hero skins — same hero markup & text, different look per page.
   Add to a page hero:  class="untree_co-hero hero-skin hero-skin--<name>"
   Names: glow | dots | accent | fade | sweep                                */

.untree_co-hero.hero-skin { position: relative; isolation: isolate; overflow: hidden; }
.untree_co-hero.hero-skin > .container { position: relative; z-index: 1; }
.untree_co-hero.hero-skin::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* glow — warm gold radial light, top-right */
.hero-skin--glow::before {
  background: radial-gradient(640px 360px at 88% -14%, rgba(252, 221, 141, .16), transparent 70%);
}

/* dots — subtle purple dotted texture fading downward */
.hero-skin--dots::before {
  background-image: radial-gradient(rgba(140, 104, 205, .22) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 5%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 5%, transparent 80%);
}

/* accent — bottom-left purple glow + a gold accent bar on the left edge */
.hero-skin--accent::before {
  background: radial-gradient(520px 300px at 8% 120%, rgba(140, 104, 205, .22), transparent 70%);
}
.hero-skin--accent::after {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px;
  border-radius: 6px; background: linear-gradient(180deg, #fcdd8d, #e0b53a); z-index: 1;
}

/* fade — cool purple top fade + a gold hairline along the very top */
.hero-skin--fade { border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, #fcdd8d, #e0b53a, transparent) 1; }
.hero-skin--fade::before {
  background: linear-gradient(180deg, rgba(140, 104, 205, .14), transparent 55%);
}

/* sweep — a soft diagonal gold light sweep across the hero */
.hero-skin--sweep::before {
  background: linear-gradient(125deg, transparent 38%, rgba(252, 221, 141, .10) 50%, transparent 62%);
}