.process{

padding:180px 8%;

background:#050C12;

position:relative;

}

.process-container{

max-width:1100px;
margin:auto;

}

/* HEADER */

.process-header{

max-width:620px;

margin-bottom:120px;

}

.process-eyebrow{

font-size:.7rem;

letter-spacing:3px;

color:var(--accent);

display:block;

margin-bottom:16px;

}

.process-title{

font-size:2.2rem;

margin-bottom:14px;

}

.process-intro{

color:var(--text-soft);

}


/* SYSTEM LAYOUT */

.process-system{

position:relative;

height:800px;

}


/* CENTRAL LINE */

.process-line{

position:absolute;

left:50%;

top:0;
bottom:0;

width:2px;

background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,.08),
transparent
);

transform:translateX(-50%);

}


/* NODES */

.process-node{

position:absolute;

display:flex;
align-items:center;

gap:30px;

}

.node-dot{

width:14px;
height:14px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 12px rgba(38,166,154,.8);

}


/* CARD */

.process-card{

background:rgba(255,255,255,.02);

border:1px solid var(--border-soft);

border-radius:14px;

padding:24px;

max-width:300px;

transition:all .35s var(--transition);

}

.process-card:hover{

transform:translateY(-6px);

border-color:rgba(38,166,154,.35);

box-shadow:0 20px 40px rgba(0,0,0,.4);

}

.process-number{

font-size:.75rem;

letter-spacing:2px;

color:var(--accent);

display:block;

margin-bottom:8px;

}

.process-card h3{

margin-bottom:10px;

font-size:1.1rem;

}

.process-card p{

font-size:.9rem;

color:var(--text-soft);

}

/* NODE POSITIONS */

.node-1{

top:0;
left:50%;

transform:translateX(-50%);

flex-direction:column;

}

.node-2{

top:180px;
left:10%;

}

.node-3{

top:350px;
right:10%;

}

.node-4{

top:520px;
left:10%;

}

.node-5{

top:690px;
left:50%;

transform:translateX(-50%);

flex-direction:column;

}

.node-1{
top:0;
left:55%;
transform:translateX(-50%);
flex-direction:column;
}

.node-3{
top:350px;
right:14%;
}

.process-system{
height:860px;
}

.process-flow{

position:absolute;

left:50%;
top:0;

width:8px;
height:100%;

transform:translateX(-50%);

pointer-events:none;

}

.process-flow span{

position:absolute;

width:6px;
height:6px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 10px rgba(38,166,154,.8);

animation:processFlow 6s linear infinite;

}

.process-flow span:nth-child(2){
animation-delay:2s;
}

.process-flow span:nth-child(3){
animation-delay:4s;
}

@keyframes processFlow{

0%{
top:-20px;
opacity:0;
}

15%{
opacity:1;
}

85%{
opacity:1;
}

100%{
top:100%;
opacity:0;
}

}

.node-dot{

width:14px;
height:14px;

border-radius:50%;

background:var(--accent);

box-shadow:0 0 12px rgba(38,166,154,.8);

animation:nodePulse 3s ease-in-out infinite;

}

@keyframes nodePulse{

0%{
box-shadow:0 0 6px rgba(38,166,154,.5);
}

50%{
box-shadow:0 0 18px rgba(38,166,154,1);
}

100%{
box-shadow:0 0 6px rgba(38,166,154,.5);
}

}

.process-card{

opacity:0;
transform:translateY(40px) scale(.97);

transition:

opacity .8s ease,
transform .8s var(--transition);

}

.process-visible .process-card{

opacity:1;
transform:translateY(0) scale(1);

}

.process-card{
position:relative;
overflow:hidden;
}

/* SPOTLIGHT */

.process-card::before{

content:"";

position:absolute;

inset:0;

background: radial-gradient(
220px circle at var(--x, 50%) var(--y, 50%),
rgba(38,166,154,.12),
transparent 40%
);

opacity:0;

transition:opacity .25s ease;

pointer-events:none;

}

.process-card:hover::before{

opacity:1;

}

.process-card:hover{

transform:translateY(-6px) scale(1.02);

border-color:rgba(38,166,154,.35);

box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.process-line{

position:absolute;

left:50%;

top:0;

width:2px;
height:100%;

background:rgba(255,255,255,.08);

transform:translateX(-50%) scaleY(0);

transform-origin:top;

transition:transform .2s linear;

}

.process-node.active .node-dot{

transform:scale(1.6);

box-shadow:0 0 25px rgba(38,166,154,1);

}