.page-hero{
  background:#0f1f3d;   /* same navy as index */
  padding:70px 0;
  color:#ffffff;
}

.hero-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.hero-title{
  margin:0;
  font-size:clamp(2rem, 2.5vw + 1rem, 3rem);
  font-weight:900;
  letter-spacing:1px;
}

.hero-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:rgba(255,255,255,.8);
}

.hero-breadcrumb a{
  color:rgba(255,255,255,.8);
  text-decoration:none;
  transition:.2s ease;
}

.hero-breadcrumb a:hover{
  color:#ffffff;
}

.hero-breadcrumb .current{
  color:#ffffff;
  font-weight:700;
}


/* ==============================
   PAGE SECTION
================================= */

.w-page{
  padding:90px 0;
}

.w-grid{
  display:grid;
  grid-template-columns:1fr;
}

.w-main{
  background:#ffffff;
  padding:60px;
  border-radius:14px;
  box-shadow:0 15px 45px rgba(0,0,0,0.05);
}


/* ==============================
   HEADINGS & TEXT
================================= */

.w-heading{
  font-size:32px;
  margin-bottom:20px;
  font-weight:800;
  color:#0f1f3d;
  position:relative;
}

.w-heading::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background:#2563eb;
  margin-top:10px;
  border-radius:3px;
}

.w-subhead{
  font-size:22px;
  margin:50px 0 20px;
  font-weight:700;
  color:#1e293b;
}

.w-lead{
  font-size:17px;
  margin-bottom:20px;
  color:#4b5563;
}

.w-main p{
  color:#4b5563;
  line-height:1.8;
  margin-bottom:18px;
}

.w-note{
  margin-top:25px;
  padding:20px;
  background:#f1f5f9;
  border-left:4px solid #2563eb;
  border-radius:8px;
}

.w-muted{
  margin-bottom:25px;
  color:#6b7280;
}


/* ==============================
   PROCESS SECTION
================================= */

.w-process{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:30px;
}

.w-step{
  background:#ffffff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  border:1px solid #e5e7eb;
  transition:.3s ease;
}

.w-step:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(0,0,0,0.08);
}

.w-step h4{
  margin-bottom:12px;
  font-size:18px;
  color:#0f1f3d;
  font-weight:700;
}


/* ==============================
   TECHNOLOGY SECTION
================================= */

.w-tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:35px;
}

.w-tech-panel{
  background:#ffffff;
  padding:40px 30px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,0.05);
  border:1px solid #e5e7eb;
  transition:.3s ease;
}

.w-tech-panel:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 55px rgba(0,0,0,0.08);
}

.w-tech-icon{
  font-size:30px;
  margin-bottom:18px;
  color:#2563eb;
}

.w-tech-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:18px;
  color:#0f172a;
}

.w-lang-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:15px;
}

.w-lang{
  background:#e2e8f0;
  padding:7px 14px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  color:#1e293b;
}

.w-tech-note{
  font-size:14px;
  color:#6b7280;
}


/* ==============================
   CTA SECTION
================================= */

.w-cta{
  margin-top:70px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.w-btn{
  padding:14px 30px;
  font-size:14px;
  border-radius:30px;
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
  display:inline-block;
}

.w-btn-main{
  background:navy;
  color:#ffffff;
}

.w-btn-main:hover{
  background:#1d4ed8;
}

.w-btn-outline{
  border:2px solid #2563eb;
  color:#2563eb;
}

.w-btn-outline:hover{
  background:#2563eb;
  color:#ffffff;
}


/* ==============================
   RESPONSIVE
================================= */

@media (max-width: 900px){

  .hero-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
  }

  .hero-title{
    font-size:28px;
  }

  .w-main{
    padding:35px;
  }

  .w-cta{
    flex-direction:column;
  }

  .w-btn{
    width:100%;
    text-align:center;
  }

}