*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{
background:#f7f9fc;
color:#333;
}

/* NAVBAR */

.navbar{
background:#0c1b2a;
padding:15px 60px;
display:flex;
justify-content:space-between;
align-items:center;
color:white;
}

.nav-links a{
color:white;
text-decoration:none;
margin:0 15px;
font-size:15px;
}

/* HERO */

.hero{
padding:50px 20px;
color:white;
text-align:center;
}

.hero h1{
font-size:42px;
margin-bottom:20px;
}

.hero p{
max-width:800px;
margin:auto;
font-size:18px;
line-height:1.7;
opacity:.9;
}

.hero button{
margin-top:30px;
padding:14px 30px;
border:none;
border-radius:6px;
background:#2f80ed;
color:white;
font-size:16px;
cursor:pointer;
}

/* SECTION */

.section{
padding:90px 60px;
text-align:center;
}

.section h2{
font-size:34px;
margin-bottom:20px;
}

.section p{
max-width:850px;
margin:auto;
line-height:1.7;
color:#666;
}

/* ADVANTAGE CARDS */

.adv-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:60px;
}

.adv-card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
transition:.3s;
}

.adv-card:hover{
transform:translateY(-5px);
}

.adv-card h3{
margin-bottom:10px;
}


.step{
padding:25px;
border-radius:10px;
background:#f5f8ff;
}

.step-number{
font-size:26px;
font-weight:700;
color:#2f80ed;
margin-bottom:10px;
}

/* INDUSTRIES */

.industries{
margin-top:40px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.industry{
padding:12px 25px;
background:white;
border-radius:30px;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}

/* CTA */

.cta{
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
color:white;
text-align:center;
padding:90px 60px;
}

.cta h2{
font-size:32px;
margin-bottom:20px;
}

.cta button{
padding:14px 30px;
background:#2f80ed;
border:none;
border-radius:6px;
color:white;
font-size:16px;
cursor:pointer;
}

/* RESPONSIVE */

@media(max-width:1000px){

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

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

}



.card{
position:absolute;
width:200px;
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
text-align:center;
}

.discovery{
    position:absolute;
width:200px;
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
text-align:center;
left:40px;
top:180px;
}

.design{
left:300px;
top:30px;
}

.development{
left:520px;
top:210px;
}

.testing{
left:760px;
top:30px;
}

.deployment{
left:1000px;
top:200px;
}

.card h3{
color:#2f80ed;
margin-bottom:8px;
}

.card p{
font-size:14px;
color:#555;
}


.case-section{
padding:100px 8%;
background:#f8fafc;
}

.case-heading{
text-align:center;
font-size:38px;
font-weight:700;
margin-bottom:10px;
color:#1f2937;
}

.case-subheading{
text-align:center;
margin-bottom:60px;
color:#6b7280;
}

.case-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:40px;
max-width:1200px;
margin:auto;
}

.case-card{
flex:0 0 calc(33.333% - 40px);
}

/* responsive */
@media (max-width:1000px){
.case-card{
flex:0 0 calc(50% - 40px);
}
}

@media (max-width:600px){
.case-card{
flex:0 0 100%;
}
} 


.case-card{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 10px 35px rgba(0,0,0,0.08);
transition:0.3s;
}

.case-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.case-img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;
}

.case-card h3{
font-size:20px;
margin-bottom:10px;
color:#2563eb;
}

.case-card h4{
font-size:14px;
margin-top:10px;
font-weight:600;
color:#111827;
}

.case-card p{
font-size:14px;
color:#4b5563;
line-height:1.6;
}

.case-card ul{
margin-top:10px;
padding-left:18px;
}

.case-card li{
font-size:14px;
margin-bottom:5px;
color:#374151;
}

body.dark-mode .case-card li{
    color:#cbd5f5 !important;
}

body.dark-mode .industry,
body.dark-mode .adv-card{

background:#12163a ;
border:1px solid #1f2937;
color:#e5e7eb;

box-shadow:
0 10px 30px rgba(0,0,0,0.4);
}

body.dark-mode .case-section{
background:#0f172a;
}



.process-section.keep-light{
  padding: 90px 20px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  text-align: center;
  overflow: hidden;
}

.process-section.keep-light h2{
  color: #fff;
  font-size: 36px;
  margin-bottom: 50px;
}

/* DESKTOP */
.process-desktop{
  display: block;
}

.process-desktop-wrap{
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 360px;
}

.process-line{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.process-line path{
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
}

.runner{
  fill: #ffffff;
}

.process-card{
  position: absolute;
  width: 210px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.process-card h3{
  color: #4a67d6;
  font-size: 18px;
  margin: 0 0 10px;
}

.process-card p{
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.p-discovery{
  left: -39px;
  top: 246px;
}

.p-design{
  left: 261px;
  top: 133px;
}

.p-development{
  left: 495px;
  top: 289px;
}

.p-testing{
  left: 810px;
  top: 85px;
}

.p-deployment{
  left: 1010px;
  top: 246px;
}

/* MOBILE */
.process-mobile{
  display: none;
}

.process-mobile-card{
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.process-mobile-card h3{
  color: #4a67d6;
  font-size: 18px;
  margin: 8px 0 10px;
}

.process-mobile-card p{
  color: #555;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.step-no{
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #3b6fd8;
  font-weight: 700;
}

.mobile-arrow{
  color: #fff;
  font-size: 28px;
  line-height: 1;
  margin: 10px 0;
}

/* BREAKPOINT */
@media (max-width: 768px){
  .process-section.keep-light{
    padding: 70px 16px;
  }

  .process-section.keep-light h2{
    font-size: 28px;
    margin-bottom: 30px;
  }

  .process-desktop{
    display: none;
  }

  .process-mobile{
    display: block;
  }

  .process-card{
position:relative !important;
left:auto !important;
top:auto !important;
width:90%;
max-width:320px;
margin:auto;
}


.process-line{
display:none;
}

.process-desktop{
display:none;
}

.process-mobile{
display:block;
}
}