.process-section{
position:relative;
padding:120px 0 130px;
overflow:hidden;
background:
radial-gradient(circle at 84% 16%, rgba(95,201,223,.12), transparent 18%),
radial-gradient(circle at 12% 80%, rgba(17,143,166,.10), transparent 18%);
}

.process-section::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(1,51,58,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(1,51,58,.03) 1px, transparent 1px);
background-size:48px 48px;
mask-image:none;
opacity:0;
pointer-events:none;
}

.process-shell{
position:relative;
z-index:1;
min-width:0;
}

.process-heading{
max-width:760px;
margin:0 auto 62px;
text-align:center;
}

.process-kicker{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 16px;
margin-bottom:20px;
border-radius:999px;
background:rgba(17,143,166,.08);
border:1px solid rgba(95,201,223,.16);
color:#d7f6fb;
font-size:14px;
}

.process-kicker::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#6fdbe9;
box-shadow:0 0 12px rgba(111,219,233,.72);
}

.process-title{
margin:0 0 16px;
font-size:clamp(32px, 4vw, 46px);
line-height:1.2;
color:#fff;
}

.process-text{
margin:0;
font-size:17px;
line-height:1.9;
color:rgba(232,244,247,.76);
}

.process-timeline{
position:absolute;
top:52%;
left:50%;
width:min(100% - 140px, 980px);
height:4px;
transform:translate(-50%, -50%);
border-radius:999px;
background:linear-gradient(90deg, rgba(38,189,216,.36), rgba(151,243,255,.95), rgba(38,189,216,.36));
box-shadow:0 0 18px rgba(38,189,216,.28);
overflow:hidden;
}

.process-timeline::after{
content:"";
position:absolute;
top:0;
left:-25%;
width:25%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
box-shadow:0 0 16px rgba(255,255,255,.8);
animation:processBeam 3.2s linear infinite;
}

.process-grid{
position:relative;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:28px;
min-width:0;
}

.process-card{
position:relative;
display:flex;
flex-direction:column;
min-height:290px;
padding:32px 26px 28px;
border-radius:28px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.10);
box-shadow:0 22px 46px rgba(0,0,0,.16);
backdrop-filter:blur(10px);
transition:transform .35s ease, box-shadow .35s ease;
overflow:hidden;
min-width:0;
}

.process-card::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background:linear-gradient(90deg, #26bdd8, #97f3ff, #26bdd8);
box-shadow:0 0 14px rgba(38,189,216,.38);
}

.process-card::after{
content:"";
position:absolute;
top:0;
left:-24%;
width:24%;
height:2px;
background:linear-gradient(90deg, rgba(41,183,208,0), rgba(210,252,255,.98), rgba(41,183,208,0));
box-shadow:0 0 10px rgba(151,243,255,.58);
border-radius:0;
filter:blur(.5px);
animation:processCardBeam 3.6s linear infinite;
}

.process-card:hover{
transform:translateY(-10px);
box-shadow:0 30px 64px rgba(14,52,59,.12);
}

.process-card-featured{
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border-color:rgba(255,255,255,.10);
box-shadow:0 28px 70px rgba(0,0,0,.22);
}

.process-card-featured h3{
color:#fff;
}

.process-card-featured p{
color:rgba(232,244,247,.76);
}

.process-card-featured .process-step{
color:rgba(255,255,255,.22);
}

.process-card-featured .process-icon{
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border-color:rgba(255,255,255,.08);
color:#89ebf6;
}

.process-step{
display:block;
margin-bottom:18px;
font-size:14px;
font-weight:800;
letter-spacing:.08em;
color:rgba(255,255,255,.22);
}

.process-icon{
display:flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
margin-bottom:24px;
border-radius:22px;
background:linear-gradient(180deg, rgba(17,143,166,.08), rgba(95,201,223,.04));
border:1px solid rgba(17,143,166,.08);
color:#1598b0;
}

.process-icon svg{
width:34px;
height:34px;
stroke-width:1.8;
}

.process-icon svg path,
.process-icon svg line,
.process-icon svg circle,
.process-icon svg rect,
.process-icon svg polyline{
stroke-dasharray:120;
stroke-dashoffset:120;
animation:processDraw 4.4s ease-in-out infinite;
}

.process-card h3{
margin:0 0 14px;
font-size:22px;
line-height:1.3;
color:#fff;
overflow-wrap:anywhere;
}

.process-card p{
margin:0;
font-size:15px;
line-height:1.95;
color:rgba(232,244,247,.72);
}

@keyframes processBeam{
from{
transform:translateX(0);
}
to{
transform:translateX(500%);
}
}

@keyframes processCardBeam{
from{
transform:translateX(0);
}
to{
transform:translateX(520%);
}
}

@keyframes processDraw{
0%{
stroke-dashoffset:120;
opacity:.42;
}
40%{
stroke-dashoffset:0;
opacity:1;
}
75%{
stroke-dashoffset:0;
opacity:1;
}
100%{
stroke-dashoffset:120;
opacity:.42;
}
}

@media (max-width: 1100px){
.process-timeline{
display:none;
}

.process-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 900px){
.process-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 767px){
.process-section{
padding:88px 0;
}

.process-heading{
margin-bottom:36px;
}

.process-card{
min-height:auto;
padding:26px 22px 24px;
border-radius:24px;
}
}