/* Soft brand color at the edges leaves a quiet, readable area for the copy. */
.hero{--hero-glow:#83cfb776;--hero-cool:#81cbea88;--hero-paper:#f5faf7;background:#f5faf7}
.hero[data-slide='1']{--hero-glow:#75c8d977;--hero-cool:#95d4ee99;--hero-paper:#f3f9fc}
.hero[data-slide='2']{--hero-glow:#8bbf9277;--hero-cool:#77c7bd88;--hero-paper:#f4f9f3}
.hero:after{background:radial-gradient(ellipse at 1% 8%,var(--hero-glow),transparent 34%),radial-gradient(ellipse at 12% 104%,var(--hero-cool),transparent 40%),linear-gradient(90deg,var(--hero-paper) 0%,var(--hero-paper) 31%,color-mix(in srgb,var(--hero-paper) 94%,transparent) 39%,color-mix(in srgb,var(--hero-paper) 68%,transparent) 47%,transparent 66%)}
.hero:before{content:'';position:absolute;inset:0 auto 0 0;width:52%;z-index:1;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 104px,#ffffff80 105px,#ffffff80 106px,transparent 107px 210px);mask-image:linear-gradient(90deg,#0008,transparent 90%)}
.hero-content{z-index:2}
.hero .button.secondary{background:#ffffff70;backdrop-filter:blur(8px)}
.hero .button.secondary:hover{background:#fff}
.hero .hero-controls{padding:10px 15px;border:1px solid #ffffffd9;border-radius:16px;background:#ffffff69;box-shadow:0 5px 24px #15544808;backdrop-filter:blur(10px)}
@media(max-width:980px) and (min-width:651px){.hero:after{background:radial-gradient(ellipse at 0% 0%,var(--hero-glow),transparent 45%),radial-gradient(ellipse at 0% 100%,var(--hero-cool),transparent 55%),linear-gradient(90deg,var(--hero-paper) 0%,color-mix(in srgb,var(--hero-paper) 96%,transparent) 35%,color-mix(in srgb,var(--hero-paper) 72%,transparent) 60%,transparent 100%)}}
@media(max-width:650px){.hero,.hero[data-slide]{background:radial-gradient(ellipse at 0% 0%,var(--hero-glow),transparent 45%),radial-gradient(ellipse at 100% 48%,var(--hero-cool),transparent 50%),var(--hero-paper)}.hero:before{width:100%;mask-image:linear-gradient(#0005,transparent 60%)}.hero .hero-controls{padding:9px 8px;gap:8px;flex-wrap:wrap}.hero-controls .hero-pages{gap:7px}.hero-controls .hero-page{font-size:12px}.hero-controls .round-control{width:35px;min-height:40px;height:40px}.hero-controls .hero-navigation{gap:4px;margin-left:auto}}

/* Explicit layers and a feathered image edge blend all carousel scenes. */
.hero{isolation:isolate}
.hero:after{z-index:1}
.hero:before{z-index:2}
.hero .hero-content{z-index:3}
.hero-image,.hero-scene{z-index:0}
@media(min-width:651px){.hero-image,.hero-scene{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#00000014 8%,#00000059 18%,#000000c2 32%,#000 44%);mask-image:linear-gradient(90deg,transparent 0%,#00000014 8%,#00000059 18%,#000000c2 32%,#000 44%)}}