/* =========================================================
   PRACTICEGRID — SERVICES PAGE CSS
   Uses global tokens from root.css
========================================================= */
html{
scroll-behavior:smooth;
}
/* =========================================================
1. HERO
========================================================= */
.pg-sticky{
position:sticky;
top:0;
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
.pg-hero{
height:300vh;
position:relative;
background: var(--bg-primary);
scroll-snap-type:y mandatory;
}
.pg-stage{
position:absolute;
scroll-snap-align:center;
top:0;
left:0;
width:100%;
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
opacity:0;
padding: var(--space-xl) var(--space-md);
transform:translateY(40px) scale(.96);
transition:opacity .6s ease, transform .6s ease;
text-align:center;
z-index:0;
backdrop-filter:none;
pointer-events:none;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.pg-stage.active{
opacity:1;
transform:translateY(0) scale(1);
z-index:5;
pointer-events:auto;
}
.pg-stage > *{
max-width:900px;
width:100%;
}
.stage-pipeline .node{
opacity:0;
transform:translateY(20px);
transition:.4s;
}
.stage-pipeline.active .node{
opacity:1;
transform:translateY(0);
}
.stage-pipeline .pipeline{
max-width:900px;
}
/* PIPELINE VISUAL */
.pipeline{
display:flex;
gap: var(--space-md);
flex-wrap:wrap;
justify-content:center;
margin-top: var(--space-lg);
}
.node{
padding: var(--space-sm) var(--space-md);
border-radius:40px;
background:var(--bg-elevated);
border:1px solid var(--border-default);
animation:pulseNode 3s infinite ease-in-out;
}
@keyframes pulseNode{
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}
.node.ai{
background:var(--gradient-primary);
color:var(--text-primary);
}
.node.success{
background:var(--success);
color:var(--text-primary);
}
.node:hover{
box-shadow: none;
transform:translateY(-2px);
}
/* HERO STAGE BACKGROUNDS */
.stage-intro,
.stage-pipeline,
.stage-cta{
background:
linear-gradient(rgba(5,10,25,.15), rgba(5,10,25,.25)),
url("../images/hero-intro.jpg");
background-size:cover;
background-position:center;
animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{
0%{background-size:100%}
100%{background-size:110%}
}
/* REVENUE COUNTER */
.revenue-live{
margin: var(--space-lg) 0;
}
.revenue-live span{
display:block;
color:var(--text-secondary);
margin-bottom: var(--space-sm);
}
.revenue-live h3{
background:linear-gradient(90deg,#fff,#c4b5fd,#93c5fd);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* =========================================================
2. REVENUE LEAKAGE CALCULATOR
========================================================= */
/* CALCULATOR SECTION CONTAINER */
.calc-section{
position:relative;
overflow:hidden;
}
.calc-section .section-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-lg);
  align-items: center;
}
.rcm-calculator{
background:transparent;
padding: var(--space-lg);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
}
.calc-grid{
display:grid;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.calc-grid input{
padding:16px;
border-radius:12px;
border:1px solid var(--border-default);
background:var(--bg-primary);
color:var(--text-primary);
}
.calc-grid input:focus{
border-color:var(--primary);
box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.calc-result{
margin-top: var(--space-sm);
gap: var(--space-sm);
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
.calc-result h3{
margin-top: var(--space-xs);
}
.calc-field{
display:flex;
flex-direction:column;
gap: var(--space-xs);
}
.calc-field label{
color:var(--text-secondary);
}
.calc-field input{
padding:12px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.15);
color:white;
}
.calc-result a{
margin-top: var(--space-md);
display:inline-block;
}
.calc-impact{
display:flex;
align-items:center;
justify-content:center;
}
.impact-box{
background: transparent;
border: 1px solid var(--border-default);
border-radius:var(--radius-sm);
padding: var(--space-lg);
width:100%;
max-width:420px;
text-align:center;
box-shadow:var(--shadow-soft);
}
.impact-title{
color:var(--text-secondary);
margin-bottom:10px;
}
.impact-number{
margin-bottom: var(--space-md);
background:linear-gradient(90deg,#fff,#c4b5fd,#93c5fd);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
transition:transform .3s ease;
}
.impact-number.animate{
transform:scale(1.08);
}
.impact-breakdown{
display:flex;
flex-direction:column;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.impact-row{
display:flex;
justify-content:space-between;
color:var(--text-secondary);
}
.impact-row strong{
color:var(--text-primary);
}
.impact-message{
margin-bottom:20px;
color:var(--text-secondary);
}
.impact-cta{
margin-top:10px;
display:inline-block;
}
/* ======================================
3. RCM INFRASTRUCTURE
====================================== */
.rcm-infrastructure{
position:relative;
border-radius:24px;
padding:40px 28px 28px;
background: linear-gradient(180deg,rgba(59,130,246,0.04) 0%,rgba(59,130,246,0.02) 40%,transparent 100%),var(--bg-primary);
}
/* INFRA TITLE */
.infra-title{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
background: var(--secondary);
border: 1px solid var(--secondary);
color: var(--text-primary);
padding:8px 22px;
border-radius:6px;
}

/* GRID LAYOUT */
.rcm-layout{
padding: var(--space-xs) var(--space-xs) 0;
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:auto auto auto;
gap: var(--space-sm);
grid-template-areas:
"claim claim recovery recovery"
"patient intelligence recovery recovery"
"patient documentation documentation credentialing";
}
/* Assign areas */
.claim{grid-area:claim;}
.recovery{grid-area:recovery;}
.patient{grid-area:patient;}
.intelligence{grid-area:intelligence;}
.documentation{grid-area:documentation;}
.credentialing{grid-area:credentialing;}
/* CARDS */
.rcm-card{
height:100%;
position:relative;
border:1px solid var(--border-default);
border-radius:6px;
padding: var(--space-md) var(--space-sm);
background: rgba(255,255,255,0.02);
backdrop-filter: blur(6px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
opacity:0;
transform:translateY(30px) scale(.96);
transition:opacity 1s ease,transform 1s ease;
}
.rcm-card.show{
opacity:1;
transform:translateY(0) scale(1);
}
.claim.show{ transition-delay:.2s; }
.patient.show{ transition-delay:.4s; }
.documentation.show{ transition-delay:.6s; }
.recovery.show{ transition-delay:.8s; }
.intelligence.show{ transition-delay:1s; }
.credentialing.show{ transition-delay:1.2s; }

.rcm-card:hover{
transform:translateY(-6px);
border-color: var(--secondary);
}
/* CENTERED TITLE */
.rcm-card-title{
position:absolute;
font-size: 12px;
line-height: 1;
top:-16px;
left:50%;
transform:translateX(-50%);
background: var(--secondary);
border: 1px solid var(--border-strong);
color:var(--text-primary);
padding: var(--space-xs) var(--space-md);
border-radius:6px;
border:none;
}
/* ITEMS */
.rcm-item{
display:flex;
flex-direction:column;
align-items:center;
gap: var(--space-xs);
margin: var(--space-xs) 0;
font-size: 12px;
line-height: 1;
}
/* LARGE ICON */
.rcm-item svg{
width:28px;
height:28px;
stroke: var(--secondary);
stroke-width:1;
opacity: 0.9;
animation:rcmPulse 6s infinite;
}
@keyframes rcmPulse{
0%{transform:scale(1); opacity:.8}
50%{transform:scale(1.15); opacity:1}
100%{transform:scale(1); opacity:.8}
}
/* TEXT */
.rcm-item span{
color:var(--text-primary);
}
/* ROW */
.rcm-row{
display:flex;
gap: var(--space-sm);
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
/* =========================================================
4. RCM SERVICES LAYOUT + STICKY NAV
========================================================= */
.rcm-services{
min-height: auto;
position:relative;
}
.services-content{
position:relative;
padding-left: var(--space-lg);
}
.services-content::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background: var(--gradient-accent);
opacity:.5;
border-radius:10px;
}
.services-layout{
display:grid;
grid-template-columns:300px 1fr;
gap: var(--space-xl);
align-items:start;
}
.services-nav{
position:sticky;
top:120px;
height:fit-content;
display:flex;
gap: var(--space-sm);
padding: var(--space-lg);
background: transparent;
border-radius:20px;
border: 1px solid var(--border-default);
display:flex;
flex-direction:column;
}
.services-nav h4{
margin-bottom:10px;
text-transform:uppercase;
color:var(--text-secondary);
}
.services-nav a{
text-decoration:none;
color:var(--text-secondary);
padding: var(--space-xs) 0;
display:flex;
align-items:center;
gap: var(--space-sm);
transition:.3s;
position:relative;
}
.services-nav a::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--primary);
opacity:.3;
}
.services-nav a:hover{
color:white;
transform:translateX(4px);
}
.services-nav a.active{
color:white;
font-weight:600;
}
.services-nav a.active::before{
opacity:1;
}
.services-nav svg{
width:16px;
height:16px;
}
.rcm-phase{
position:relative;
background: transparent;
padding: var(--space-lg);
border-radius:20px;
margin-bottom: var(--space-lg);
border: 1px solid var(--border-default);
}
.rcm-phase::before{
content:"";
position:absolute;
left:-43px;
top:40px;
width:14px;
height:14px;
border-radius:50%;
background:var(--primary);
}
.rcm-phase::after{
left:117px;
top:30px;
}
.phase-header{
margin-bottom: var(--space-lg);
}
.phase-header h2{
margin-bottom: var(--space-sm);
}
.phase-header p{
max-width:650px;
color:var(--text-secondary);
}
.phase-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap: var(--space-md);
}
.service-card{
background: transparent;
border: 1px solid var(--border-default);
border-radius:20px;
padding: var(--space-lg);
display:flex;
flex-direction:column;
gap: var(--space-sm);
transition:.35s;
position:relative;
overflow:hidden;
cursor:pointer;
}
.service-card::before{
content:"";
position:absolute;
inset:0;
transparent 60%);
opacity:.25;
transition:.3s;
}
.service-card:hover::before{
opacity:.5;
}
.service-card:hover{
transform:translateY(-10px);
border:1px solid rgba(99,102,241,.45);
box-shadow: var(--shadow-soft);
}
.service-icon{
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background: var(--gradient-accent);
box-shadow: none;
}
.service-icon svg{
width:22px;
height:22px;
stroke:white;
transition:all .4s ease;
}
.service-card:hover svg{
transform:scale(1.25) rotate(6deg);
}
.service-card:hover .service-icon{
transform:scale(1.1);
}
.service-card h3{
margin-top: var(--space-xs);
}
.service-card p{
line-height:1.6;
color:var(--text-secondary);
}
.reveal{
opacity:0;
transform:translateY(20px);
transition:opacity .5s ease, transform .5s ease;
will-change:transform,opacity;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
.phase-number{
margin-right:12px;
opacity:1;
}
.phase-progress{
position:absolute;
left:0;
top:0;
width:5px;
height:0%;
background:linear-gradient(#6366f1,#3b82f6);
transition:height .2s;
}
.pipeline-title{
margin-bottom: var(--space-md);
}
.pipeline-title h3{
margin-bottom: var(--space-xs);
}
.pipeline-title p{
color:var(--text-secondary);
}
/* =========================================================
RESPONSIVE BREAKPOINTS
Desktop First → Downscale
========================================================= */

/* ===============================
<= 1200px (Large tablets / small laptops)
================================ */
@media (max-width:1200px){

/* HERO */
.pg-stage{
padding: var(--space-lg) var(--space-md);
}

/* CALCULATOR */
.calc-section .section-inner{
grid-template-columns:1fr;
gap: var(--space-xl);
text-align:center;
}

/* INFRA GRID */
.rcm-layout{
grid-template-columns:repeat(2,1fr);
grid-template-areas:
"claim recovery"
"patient intelligence"
"documentation credentialing";
}

/* SERVICES */
.services-layout{
grid-template-columns:260px 1fr;
gap: var(--space-lg);
}

}


/* ===============================
<= 992px (Tablets)
================================ */
@media (max-width:992px){

.pg-hero{
height:auto;
}
.pg-sticky{
position:relative;
height:auto;
display:block;
}
/* CRITICAL FIX */
.pg-stage{
position:relative;
opacity:1 !important;
transform:none !important;
pointer-events:auto;
height:auto;
margin-bottom: var(--space-xl);
z-index:1;
}
/* STACK CLEANLY */
.pg-stage:not(:first-child){
margin-top:40px;
}
/* DISABLE SCROLL SNAP */
.pg-hero{
scroll-snap-type:none;
}
/* PIPELINE */
.pipeline{
gap: var(--space-sm);
}
/* INFRA */
.rcm-infrastructure{
padding:30px 20px;
}
/* SERVICES LAYOUT STACK */
.services-layout{
grid-template-columns:1fr;
}
/* NAV → HORIZONTAL SCROLL */
.services-nav{
position:relative;
top:auto;
flex-direction:row;
overflow-x:auto;
white-space:nowrap;
gap: var(--space-md);
padding: var(--space-md);
scrollbar-width:none;
}

.services-nav h4{
display:none;
}
.services-nav::-webkit-scrollbar{
display:none;
}
.services-nav a{
flex-shrink:0;
padding:8px 12px;
border:1px solid var(--border-default);
border-radius:20px;
flex:0 0 auto;
white-space:nowrap;
}

/* TIMELINE FIX */
.services-content{
padding-left:0;
}
.services-content::before{
display:none;
}
.rcm-phase::before{
display:none;
}
.rcm-card{
opacity:1 !important;
transform:none !important;
}
}


/* ===============================
<= 768px (Mobile landscape)
================================ */
@media (max-width:768px){
.stage-intro,
.stage-pipeline,
.stage-cta{
background-size:cover !important;
background-position:center top;
animation:none; /* 🔥 IMPORTANT */
}
/* HERO TEXT */
.pg-stage h1{
font-size:clamp(28px,5vw,36px);
}
.pg-stage p{
font-size:14px;
}

/* PIPELINE NODES */
.node{
font-size:12px;
padding:8px 12px;
}

/* CALCULATOR */
.rcm-calculator{
padding: var(--space-md);
}
.calc-grid input{
padding:12px;
}

/* IMPACT BOX */
.impact-box{
padding: var(--space-md);
}

/* INFRA GRID → SINGLE COLUMN */
.rcm-layout{
grid-template-columns:1fr;
grid-template-areas:
"claim"
"recovery"
"patient"
"intelligence"
"documentation"
"credentialing";
}

/* CARDS */
.rcm-card{
padding: var(--space-md);
}

/* SERVICES */
.rcm-phase{
padding: var(--space-md);
}

.phase-grid{
grid-template-columns:1fr;
}

/* SERVICE CARD */
.service-card{
padding: var(--space-md);
}

}


/* ===============================
<= 576px (Small phones)
================================ */
@media (max-width:576px){

/* GLOBAL SPACING */
.pg-stage{
padding: var(--space-md) var(--space-sm);
}

/* TEXT SCALE */
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:18px;
}

/* BUTTON / CTA */
.calc-result a,
.impact-cta{
width:100%;
text-align:center;
}

/* NAV PILLS */
.services-nav{
gap:8px;
padding:10px;
}

.services-nav a{
font-size:12px;
padding:6px 10px;
}

/* SERVICE ICON */
.service-icon{
width:40px;
height:40px;
}

.service-icon svg{
width:18px;
height:18px;
}

/* REDUCE ANIMATIONS (performance) */
.node{
animation:none;
}
.rcm-item svg{
animation:none;
}

}


/* ===============================
<= 400px (Extra small devices)
================================ */
@media (max-width:400px){

/* EXTRA COMPACT */
.pg-stage{
padding:12px;
}

.service-card{
padding:12px;
}

.calc-grid{
gap:8px;
}

}