/* =========================================================
PRACTICEGRID — WHO WE SERVE
Dark SaaS System
========================================================= */

/* ======================================
1. HERO
====================================== */
.serve-hero{
position: relative;
min-height: calc(100vh - var(--nav-height));
padding-top: 120px;
padding-bottom: 80px;
background:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(59,130,246,.18), transparent 40%),
    #000000;
overflow:visible;
}
.hero-grid{
min-height: 100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.hero-visual{
position: relative;
display:flex;
justify-content:center;
align-items:center;
min-height:420px;
z-index: 2;
}
.hero-content h1{
color: var(--text-primary);
margin-bottom:25px;
}
.hero-content p{
max-width:540px;
margin-bottom:30px;
}
.hero-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:35px;
}
.hero-tags span{
padding:8px 16px;
background:rgba(20,25,55,.6);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
font-size:13px;
backdrop-filter:blur(10px);
}
#hero-universe{
position:absolute;
inset:0;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
overflow:hidden;
}
.serve-hero .container{
position:relative;
z-index:2;
}
.orbit-system{
position:relative;
width:420px;
height:420px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
perspective:1000px;
transform-style:preserve-3d;
transition:transform .2s ease;
z-index:3;
}
.engine-icon{
width:38px;
height:38px;
stroke:white;
animation:engineSpin 6s linear infinite;
filter:drop-shadow(0 0 6px rgba(255,255,255,.6));
}
@keyframes engineSpin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.orbit-core{
position:absolute;
width:180px;
height:180px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
background:
radial-gradient(circle at 30% 30%, #818cf8, transparent 60%),
linear-gradient(145deg,#6366f1,#3b82f6);
transform:translateZ(60px);
box-shadow:
0 0 60px rgba(99,102,241,.8),
0 0 120px rgba(99,102,241,.45),
0 0 200px rgba(99,102,241,.2);
animation:enginePulse 4s infinite ease-in-out;
z-index:10;
border:1px solid rgba(255,255,255,.15);
}
@keyframes engineOrbit{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.orbit-core h4{
font-size:inherit;
font-weight:inherit;
margin-top:6px;
line-height:1.3;
}
.orbit{
position:absolute;
border-radius:50%;
border:1px dashed rgba(99,102,241,.35);
display:flex;
align-items:center;
justify-content:center;
}
.orbit1{
width:220px;
height:220px;
animation:orbitRotate 16s linear infinite;
transform:translateZ(20px);
}
.orbit2{
width:320px;
height:320px;
animation:orbitRotate 24s linear infinite reverse;
transform:translateZ(0px);
}
.orbit3{
width:420px;
height:420px;
animation:orbitRotate 36s linear infinite;
transform:translateZ(-30px);
}
@keyframes orbitRotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.orbit span{
position:absolute;
background:rgba(20,25,55,.65);
border:1px solid rgba(255,255,255,.08);
padding:8px 14px;
border-radius:20px;
font-size:13px;
backdrop-filter:blur(10px);
transition:.35s;
}
.orbit span:hover{
transform:scale(1.15);
border:1px solid rgba(99,102,241,.5);
box-shadow:
0 0 20px rgba(99,102,241,.6);
}
.orbit1 span:nth-child(1){top:-10px}
.orbit1 span:nth-child(2){bottom:-10px}
.orbit2 span:nth-child(1){top:-10px}
.orbit2 span:nth-child(2){left:-10px}
.orbit2 span:nth-child(3){right:-10px}
.orbit3 span:nth-child(1){top:-10px}
.orbit3 span:nth-child(2){left:-10px}
.orbit3 span:nth-child(3){right:-10px}
.orbit3 span:nth-child(4){bottom:-10px}
.orbit-system:hover .orbit-core{
box-shadow:
0 0 80px rgba(99,102,241,.9),
0 0 160px rgba(99,102,241,.5),
0 0 260px rgba(99,102,241,.25);
}
.particle-system{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:4;
}
.data-particle{
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#6366f1;
box-shadow:
0 0 6px #6366f1,
0 0 12px #6366f1,
0 0 18px rgba(99,102,241,.7);
opacity:.9;
transform-style:preserve-3d;
animation:particleMove linear infinite;
}
@keyframes particleMove{
0%{transform:rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);opacity:0;}
10%{opacity:1;}
90%{opacity:1;}
100%{transform:rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);opacity:0;}
}
.data-lines{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}
.data-lines line{
stroke:#6366f1;
stroke-width:1.5;
stroke-dasharray:6 6;
animation:dataFlow 4s linear infinite;
opacity:.7;
}
@keyframes dataFlow{
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:40}
}

/* ==================================================================================================================
2. ECOSYSTEM NETWORK — STRIPE STYLE
================================================================================================================== */
.ecosystem-network{
position:relative;
max-width:900px;
min-height:520px;
margin:auto;
z-index:2;
overflow:visible;
}
.section-inner,
.ecosystem-network {
  position: relative;
  z-index: 2;
}
/* STRIPE STYLE DOT GRID */
.ecosystem{
position:relative;
overflow:hidden;
isolation: isolate;
}
.section-frame.ecosystem-frame {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 0;
}
.ecosystem-frame::before{
content:"";
position:absolute;
inset: 0;
background-image:
radial-gradient(rgba(99,102,241,0.55) 1.2px, transparent 1.2px);
background-size: 24px 24px;
opacity: 0.85;
filter: drop-shadow(0 0 4px rgba(99,102,241,0.15));
z-index:0;
pointer-events: none;
}
.ecosystem-frame::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at center,rgba(5,10,25,0) 50%,rgba(5,10,25,0.18) 75%,rgba(5,10,25,0.35) 100%);
pointer-events:none;
z-index:1;
}
/* CORE */
.eco-core{
text-align:center;
gap:4px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:140px;
height:140px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:22px;
background:
radial-gradient(circle at 30% 20%, #6366f1, transparent 70%),
linear-gradient(160deg,#1e2b6f,#1a1f55);
box-shadow:
0 0 40px rgba(99,102,241,.6),
0 0 100px rgba(99,102,241,.35);
border:1px solid rgba(255,255,255,.12);
}
.eco-core h3{
margin:0;
font-size:20px;
}
.eco-core span{
font-size:13px;
}
.eco-core i{
width:26px;
height:26px;
margin-bottom:8px;
}
.eco-core.data-glow{
box-shadow:
0 0 60px rgba(99,102,241,.9),
0 0 120px rgba(99,102,241,.6),
0 0 200px rgba(59,130,246,.5);
}
/* NODES */
.eco-node{
position:absolute;
width:160px;
height:56px;
display:flex;
align-items:center;
gap:10px;
padding:12px 16px;
background:var(--secondary);
border-radius:8px;
font-size:14px;
box-shadow:
0 8px 20px rgba(0,0,0,.45),
0 0 20px rgba(99,102,241,.2);
border:1px solid rgba(255,255,255,.12);
transition:.3s;
}
.eco-node i{
width:22px;
height:22px;
}
.eco-node:hover{
transform:translateY(-3px);
box-shadow:
0 20px 40px rgba(0,0,0,.6),
0 0 40px rgba(99,102,241,.5);
}
/* LEFT SIDE */
.node-sdk{
top:80px;
left:60px;
}
.node-market{
top:220px;
left:40px;
}
.node-orchestration{
top:360px;
left:80px;
}
/* RIGHT SIDE */
.node-events{
top:80px;
right:60px;
}
.node-pipeline{
top:220px;
right:40px;
}
.node-management{
top:360px;
right:80px;
}
/* CONNECTION LINES */
.eco-lines{
overflow:visible;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:5;
}
.eco-lines path{
stroke:#6366f1;
stroke-dasharray:3 8;
stroke-width:1.4;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.75;
fill:none;
filter:drop-shadow(0 0 8px rgba(99,102,241,.5));
animation:dataFlow 6s linear infinite;
}
@keyframes dataFlow{
0%{stroke-dashoffset:0}
100%{stroke-dashoffset:-60}
}
.eco-lines path.active{
stroke:#8b9cff;
filter:
drop-shadow(0 0 12px #6366f1)
drop-shadow(0 0 30px #6366f1);
}
/* ==================================================================================================================
3. ORG CARDS
================================================================================================================== */
/* SECTION HEADERS */
.org-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:36px;
}
/* CARD */
.org-card{
display:block;
background:transparent;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
overflow:hidden;
transition:.35s ease;
text-decoration:none;
color:white;
position:relative;
}
.org-card:hover{
transform:translateY(-10px);
border:1px solid rgba(99,102,241,.55);
}
.org-card::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
padding:1px;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
opacity:.35;
pointer-events:none;
}
.org-card:hover .org-image img{
transform:scale(1.05);
}
/* IMAGE */
.org-image{
position:relative;
height:180px;
overflow:hidden;
}
.org-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.org-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.45));
}
/* ICON */
.org-icon{
position:absolute;
top:150px;
left:24px;
width:50px;
height:50px;
background:var(--secondary);
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 10px 25px rgba(0,0,0,.6),
0 0 20px rgba(99,102,241,.4);
border:1px solid rgba(255,255,255,.15);
}
.org-icon svg{
color:white;
width:24px;
height:24px;
}
/* CONTENT */
.org-content{
padding:46px 28px 30px;
}
.org-content h3{
font-size:inherit;
margin-bottom:10px;
font-weight:inherit;
color:var(--secondary);
}
.org-content p{
font-size:15px;
line-height:1.7;
opacity:.9;
margin-bottom:18px;
}

/* ======================================
4. SPECIALTY CARDS
====================================== */
.serve-specialties::before{
content:"";
position:absolute;
top:-60px;
left:50%;
transform:translateX(-50%);
width:300px;
height:1px;
background:transparent;
opacity:.6;
}
.serve-specialties{
background: transparent;
position:relative;
overflow:hidden;
}

/* GRID */
.specialty-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
/* CARD BASE */
.specialty-card{
position:relative;
background:transparent;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
overflow:hidden;
transition:.35s ease;
text-decoration:none;
color:white;
display:flex;
flex-direction:column;
}
/* HOVER EFFECT */
.specialty-card:hover{
transform:translateY(-10px);
border:1px solid rgba(99,102,241,.55);
}
/* IMAGE */
.specialty-image{
height:170px;
overflow:hidden;
position:relative;
}
.specialty-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}
.specialty-card:hover .specialty-image img{
transform:scale(1.08);
}
/* ICON */
.specialty-icon{
position:absolute;
top:140px;
left:24px;
width:48px;
height:48px;
background:var(--secondary);
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.15);
}
.specialty-icon svg{
width:22px;
height:22px;
stroke-width:2;
color:white;
}
/* CONTENT */
.specialty-content{
padding:34px 26px 28px;
}
.specialty-content h3{
font-size:inherit;
font-weight:inherit;
margin-bottom:10px;
color:var(--secondary);
}
.specialty-content p{
font-size:15px;
opacity:.9;
line-height:1.6;
}
/* LARGE ADDITIONAL CARD */
.specialty-large{
grid-column:span 3;
flex-direction:row;
align-items:center;
min-height:180px;
}
.specialty-large .specialty-image{
width:40%;
height:100%;
}
.specialty-large .specialty-content{
padding:40px;
}
.specialty-large .specialty-icon{
top:30px;
left:30px;
}
.specialty-large:hover{
transform:none;
box-shadow:0 8px 30px rgba(0,0,0,0.06);
}
/* GRADIENT EDGE GLOW */
.specialty-card::after{
content:"";
position:absolute;
inset:0;
border-radius:18px;
padding:1px;
background:linear-gradient(
120deg,
rgba(59,130,246,0.2),
rgba(59,130,246,0),
rgba(59,130,246,0.2)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:opacity .3s ease;
}
.specialty-card:hover::after{
opacity:1;
}
/* SCROLL REVEAL */
.specialty-card{
opacity:0;
transform:translateY(30px);
}
.specialty-card.show{
opacity:1;
transform:translateY(0);
transition:all .6s ease;
}