/* ART DEVOPS — INTERACTIVE PROCESS */
.ad-process,.ad-process *{box-sizing:border-box}
.ad-process .ad-process-explorer{min-width:0;margin-bottom:48px}
.ad-process .ad-process-route{
position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;margin-bottom:32px}
.ad-process .ad-process-track{
position:absolute;top:71px;left:12.5%;right:12.5%;height:1px;
background:var(--border-glass);pointer-events:none;overflow:hidden}
.ad-process .ad-process-track span{
position:absolute;top:-1px;left:0;width:70px;height:3px;
background:linear-gradient(90deg,transparent,var(--neon-accent),transparent);
animation:adProcessFlow 5s linear infinite}
.ad-process .ad-process-track span:nth-child(2){animation-delay:-1.65s}
.ad-process .ad-process-track span:nth-child(3){animation-delay:-3.3s}
@keyframes adProcessFlow{
from{left:-70px}to{left:100%}}
.ad-process .ad-process-stage{
position:relative;display:flex;flex-direction:column;align-items:center;
gap:14px;min-width:0;margin:0;padding:10px 8px 18px;
background:transparent;border:0;border-radius:16px;
color:var(--text-muted);font:inherit;cursor:pointer;text-align:center}
.ad-process .ad-process-stage-number{
font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em}
.ad-process .ad-process-stage-point{
position:relative;display:flex;align-items:center;justify-content:center;
width:66px;height:66px;flex-shrink:0;
background:var(--bg-surface,var(--bg-main));color:var(--text-muted);
border:1px solid var(--border-glass);border-radius:20px;font-size:25px;
transition:color .25s,border-color .25s,box-shadow .25s,transform .25s}
.ad-process .ad-process-stage-title{
max-width:220px;color:var(--text-pure);font-family:var(--font-body);
font-size:15px;font-weight:800;line-height:1.5;overflow-wrap:anywhere}
.ad-process .ad-process-stage.is-active .ad-process-stage-number{
color:var(--neon-accent)}
.ad-process .ad-process-stage.is-active .ad-process-stage-point{
color:var(--neon-accent);border-color:var(--neon-accent);
box-shadow:0 0 28px var(--border-glass);transform:translateY(-3px)}
.ad-process .ad-process-stage:focus-visible{
outline:3px solid var(--neon-accent);outline-offset:3px}
.ad-process .ad-process-panels{display:grid;gap:22px}
.ad-process .ad-process-panel{
min-width:0;padding:clamp(24px,3.5vw,42px);
background:var(--bg-card);border:1px solid var(--border-glass);border-radius:24px}
.ad-process .ad-process-panel[hidden]{display:none}
.ad-process .ad-process-panel-heading{
display:flex;align-items:center;gap:18px;margin-bottom:30px;
padding-bottom:24px;border-bottom:1px solid var(--border-glass)}
.ad-process .ad-process-panel-symbol{
display:flex;align-items:center;justify-content:center;flex:0 0 48px;
width:48px;height:48px;color:var(--neon-accent);font-size:24px;
border:1px solid var(--border-glass);border-radius:14px}
.ad-process .ad-process-panel-heading h3{
min-width:0;margin:0;color:var(--text-pure);
font-family:var(--font-heading);font-size:clamp(19px,2.2vw,28px);
font-weight:800;line-height:1.4;letter-spacing:-.025em;overflow-wrap:anywhere}
.ad-process .ad-process-counter{
margin-left:auto;flex-shrink:0;color:var(--text-muted);
font-family:var(--font-mono);font-size:11px;white-space:nowrap}
.ad-process .ad-process-panel-columns{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.ad-process .ad-process-panel-columns h4{
display:flex;align-items:center;gap:10px;margin:0 0 14px;
color:var(--text-pure);font-family:var(--font-body);
font-size:15px;font-weight:800;line-height:1.5}
.ad-process .ad-process-panel-columns p{
margin:0;color:var(--text-muted);font-family:var(--font-body);
font-size:15px;line-height:1.85}
.ad-process .ad-process-result{
padding-left:30px;border-left:1px solid var(--border-glass)}
.ad-process .ad-process-result h4 i{color:var(--neon-accent)}
.ad-process .ad-process-panel-footer{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:24px;margin-top:32px;padding-top:24px;
border-top:1px solid var(--border-glass)}
.ad-process .ad-process-cta{max-width:100%;white-space:normal;text-align:center}
.ad-process .ad-process-mini-flow{display:flex;align-items:center}
.ad-process .ad-process-mini-flow>span{
width:12px;height:12px;border:1px solid var(--neon-accent);
border-radius:4px;animation:adProcessNodePulse 3s ease-in-out infinite}
.ad-process .ad-process-mini-flow>span:nth-of-type(2){animation-delay:.5s}
.ad-process .ad-process-mini-flow>span:nth-of-type(3){animation-delay:1s}
.ad-process .ad-process-mini-flow>i{
position:relative;width:56px;height:1px;background:var(--border-glass);overflow:hidden}
.ad-process .ad-process-mini-flow>i::after{
content:"";position:absolute;left:-16px;width:16px;height:1px;
background:var(--neon-accent);animation:adProcessFlow 2s linear infinite}
@keyframes adProcessNodePulse{
0%,100%{opacity:.4;box-shadow:none}
50%{opacity:1;box-shadow:0 0 12px var(--border-glass)}}
.ad-process .ad-process-panel.is-entering{animation:adProcessReveal .35s ease both}
@keyframes adProcessReveal{
from{opacity:0;transform:translateY(9px)}
to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
.ad-process .ad-process-stage:hover .ad-process-stage-point{
color:var(--neon-accent);border-color:var(--neon-accent);
transform:translateY(-3px)}}
@media(max-width:700px){
.ad-process .ad-process-explorer{margin-bottom:32px}
.ad-process .ad-process-route{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:24px}
.ad-process .ad-process-track{
top:28px;bottom:28px;left:29px;right:auto;width:1px;height:auto}
.ad-process .ad-process-track span{
left:-1px;top:0;width:3px;height:40px;
background:linear-gradient(180deg,transparent,var(--neon-accent),transparent);
animation-name:adProcessFlowVertical}
.ad-process .ad-process-stage{
display:grid;grid-template-columns:42px minmax(0,1fr) auto;
align-items:center;gap:14px;padding:9px;text-align:left}
.ad-process .ad-process-stage-number{grid-column:3;grid-row:1}
.ad-process .ad-process-stage-point{
grid-column:1;grid-row:1;width:42px;height:42px;border-radius:13px;font-size:19px}
.ad-process .ad-process-stage-title{
grid-column:2;grid-row:1;max-width:none;font-size:14px}
.ad-process .ad-process-stage.is-active .ad-process-stage-point{transform:none}
.ad-process .ad-process-panel{padding:24px 20px;border-radius:18px}
.ad-process .ad-process-panel-heading{gap:12px;margin-bottom:24px}
.ad-process .ad-process-panel-heading h3{font-size:19px}
.ad-process .ad-process-panel-symbol{display:none}
.ad-process .ad-process-counter{font-size:10px}
.ad-process .ad-process-panel-columns{grid-template-columns:minmax(0,1fr);gap:24px}
.ad-process .ad-process-result{
padding:24px 0 0;border-left:0;border-top:1px solid var(--border-glass)}
.ad-process .ad-process-panel-columns p{font-size:14px}
.ad-process .ad-process-panel-footer{gap:20px}
.ad-process .ad-process-cta{width:100%;justify-content:center}}
@keyframes adProcessFlowVertical{
from{top:-40px}to{top:100%}}
@media(prefers-reduced-motion:reduce){
.ad-process .ad-process-track span,
.ad-process .ad-process-mini-flow>span,
.ad-process .ad-process-mini-flow>i::after,
.ad-process .ad-process-panel.is-entering{animation:none}
.ad-process .ad-process-stage-point{transition:none}}