/* Tinted glass retains the five role colours. */
.roles-grid{position:relative;isolation:isolate;padding-top:8px;padding-bottom:12px}
.roles-grid::before{content:"";position:absolute;z-index:-1;inset:18% -12px 5%;border-radius:45%;background:linear-gradient(105deg,#c7e8ff80,#e4d5fa70,#c3e9e080,#ffe1bd70,#deedbe80);filter:blur(32px);pointer-events:none}
.roles-grid .role-card{overflow:hidden;border:1px solid var(--role-border);border-top-color:#ffffffed;background:linear-gradient(125deg,#ffffffd9 0%,#ffffff35 37%,#ffffff88 38%,#ffffff15 64%),color-mix(in srgb,var(--role-bg) 76%,transparent);backdrop-filter:blur(18px) saturate(115%);box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffb3,inset 0 -1px 0 #ffffffa6,0 8px 24px #2536480a;transition:box-shadow .3s,border-color .3s,background .3s}
.role-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 10%,#ffffff5c 26%,transparent 43%);opacity:.65}
.role-card>*{position:relative}
.roles-grid .role-description,.roles-grid .role-card h3{text-shadow:0 1px 0 #ffffffdb}
.roles-grid .role-scene{width:68px;height:68px;margin-bottom:18px;border:1px solid #ffffffd9;border-radius:19px;background:linear-gradient(145deg,#ffffffb8,var(--role-icon-bg));box-shadow:inset 0 1px 0 #fff,0 4px 10px #25364808;color:var(--role-accent)}
.role-scene svg{width:53px;height:53px;overflow:visible}
.role-scene svg *{transform-box:fill-box;transform-origin:center}
.team-intro-card{background:linear-gradient(125deg,#ffffffd9,#eaf8ff9e 45%,#ffffffb3),var(--soft);box-shadow:inset 0 1px 0 white,inset 1px 0 0 white,0 8px 24px #007eb50a;backdrop-filter:blur(16px)}
@media(hover:hover) and (pointer:fine){
 .roles-grid .role-card:hover{background:linear-gradient(125deg,#ffffffeb,#ffffff55 37%,#ffffffa6 38%,#ffffff26 64%),var(--role-hover);border-color:var(--role-accent);box-shadow:inset 0 1px 0 #fff,0 12px 30px #2536481a}
 .roles-grid .role-card:hover .role-scene{color:var(--role-accent);background:linear-gradient(145deg,white,var(--role-icon-bg))}
}
.role-card:is(:hover,.is-animating) .anim-search{animation:search-around 2s ease-in-out both}
.role-card:is(:hover,.is-animating) .anim-lines{animation:draw-lines 2s ease both;stroke-dasharray:50}
.role-card:is(:hover,.is-animating) .anim-task{animation:move-task 2s ease both}
.role-card:is(:hover,.is-animating) .anim-check{animation:draw-check 2s ease both;stroke-dasharray:40}
.role-card:is(:hover,.is-animating) .anim-links{animation:draw-lines 2s ease both;stroke-dasharray:70}
.role-card:is(:hover,.is-animating) .anim-left{animation:build-block 1.5s ease both}
.role-card:is(:hover,.is-animating) .anim-right{animation:build-block 1.5s .25s ease both}
.role-card:is(:hover,.is-animating) .anim-code{animation:draw-lines 2s ease both;stroke-dasharray:90}
.role-card:is(:hover,.is-animating) .anim-scan{animation:scan-check 2s ease both}
@keyframes search-around{0%,100%{transform:translate(0,0)}35%{transform:translate(-9px,-8px)}65%{transform:translate(-9px,5px)}}
@keyframes draw-lines{0%{stroke-dashoffset:90;opacity:.3}70%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes move-task{0%{transform:translateX(0)}65%,100%{transform:translateX(17px)}}
@keyframes draw-check{0%,35%{stroke-dashoffset:40;opacity:0}75%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes build-block{0%{transform:translateY(7px) scale(.65);opacity:.2}70%,100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes scan-check{0%{transform:translateY(-8px);opacity:0}25%{opacity:.7}65%{transform:translateY(12px);opacity:.7}100%{transform:translateY(12px);opacity:0}}
@media(prefers-reduced-motion:reduce){.role-scene svg *{animation:none!important}.roles-grid .role-card{transition:none}}