.ds-hero{padding:120px 0 92px;background:radial-gradient(1000px 460px at 82% -10%,rgba(var(--cx-violet-rgb),.20),transparent 60%),radial-gradient(900px 500px at 8% 6%,rgba(var(--cx-accent-rgb),.22),transparent 55%),var(--cx-charcoal);border-bottom:1px solid var(--cx-n700);}
.ds-hero__crumb{font-family:var(--cx-fmono);font-size:.78rem;letter-spacing:.1em;color:var(--cx-n500);text-transform:uppercase;margin-bottom:22px;}
.ds-hero__crumb a{color:var(--cx-n500);text-decoration:none;}
.ds-hero__crumb a:hover{color:var(--cx-accent);}
.ds-hero__meta{font-family:var(--cx-fmono);font-size:.78rem;letter-spacing:.06em;color:var(--cx-n500);margin-top:30px;}
/* Image hero variant: cool photo/render behind, dark left gradient keeps the headline readable */
.ds-hero--img{position:relative;background-size:cover;background-position:center center;background-repeat:no-repeat;}
.ds-hero--img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--cx-charcoal) 20%,rgba(var(--cx-ink-deep-rgb), .80) 48%,rgba(var(--cx-ink-deep-rgb), .40) 78%,rgba(var(--cx-ink-deep-rgb), .28) 100%);}
/* Edge vignette melts the photo into the obsidian ground (~25-30% darker at the
   corners), then a faint accent radial keeps a hint of brand glow up top. */
.ds-hero--img::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(125% 130% at 72% 40%,rgba(var(--cx-ink-deep-rgb),0) 40%,rgba(var(--cx-ink-deep-rgb),.32) 66%,rgba(var(--cx-ink-deep-rgb),.62) 100%),radial-gradient(1100px 480px at 78% -8%,rgba(var(--cx-accent-rgb),.10),transparent 60%);}
.ds-hero--img .ds-wrap{position:relative;z-index:1;}