* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #07111f;
  color: #f5f7fb;
  line-height: 1.6;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 8%;
  background: rgba(5, 15, 30, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #00a8ff;
  color: #07111f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

nav a {
  color: #d7e3f4;
  text-decoration: none;
  margin-left: 24px;
  font-size: 15px;
}

nav a:hover {
  color: #00a8ff;
}

.hero {
  min-height: 72vh;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  padding: 80px 8%;
  background:
    radial-gradient(circle at top right, rgba(0, 168, 255, 0.25), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2443 100%);
}

.eyebrow {
  color: #4fc3ff;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}

h1 {
  font-size: 54px;
  line-height: 1.05;
  margin-bottom: 24px;
  max-width: 850px;
}

.hero-text {
  font-size: 19px;
  color: #c9d7ea;
  max-width: 760px;
  margin-bottom: 34px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.btn {
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.primary {
  background: #00a8ff;
  color: #07111f;
}

.secondary {
  border: 1px solid #4fc3ff;
  color: #f5f7fb;
}

.hero-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.hero-card h2 {
  color: #ffffff;
  margin-bottom: 16px;
  font-size: 26px;
}

.hero-card p {
  color: #c9d7ea;
  margin-bottom: 18px;
}

.hero-card ul {
  padding-left: 20px;
  color: #e6eef8;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 56px 8%;
  background: #09182c;
}

.highlights div {
  padding: 28px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.highlights h3 {
  color: #4fc3ff;
  font-size: 28px;
  margin-bottom: 10px;
}

footer {
  text-align: center;
  padding: 28px;
  color: #8fa6c4;
  background: #06101e;
}

.site-footer{

padding:70px 20px;

text-align:center;

background:#061626;

border-top:1px solid rgba(255,255,255,.08);

margin-top:80px;

}

.footer-content{

max-width:900px;

margin:auto;

}

.site-footer h3{

font-size:34px;

margin-bottom:10px;

color:#ffffff;

}

.footer-title{

font-size:18px;

color:#4fc3ff;

margin-bottom:8px;

}

.footer-tagline{

font-size:16px;

color:#d7e4f5;

margin-bottom:35px;

letter-spacing:1px;

}

.footer-divider{

width:120px;

height:2px;

background:#4fc3ff;

margin:35px auto;

}

.footer-quote{

font-size:20px;

font-style:italic;

color:#ffffff;

max-width:700px;

margin:auto;

margin-bottom:35px;

line-height:1.8;

}

.footer-version{

color:#8ea7bf;

margin-bottom:15px;

font-size:15px;

}

.footer-copy{

color:#6d8195;

font-size:14px;

}

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

  h1 {
    font-size: 38px;
  }

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

  .navbar {
    flex-direction: column;
    gap: 18px;
  }

  nav a {
    margin: 0 10px;
  }
}

.page-header{

padding:80px 10%;
text-align:center;

background:#0a2242;

}

.page-header h1{

font-size:52px;
margin-bottom:15px;

}

.page-header p{

font-size:20px;
color:#c8d7ea;

}

.about-container{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

padding:80px 10%;

}

.about-container p{

margin-bottom:25px;

font-size:18px;

color:#d6e1f0;

}

.profile-card{

background:rgba(255,255,255,.07);

padding:35px;

border-radius:18px;

}

.profile-card table{

width:100%;

border-spacing:0 18px;

}

.profile-card td:first-child{

color:#58b8ff;

font-weight:bold;

width:40%;

}

.philosophy{

padding:70px 10%;

background:#09182c;

}

.philosophy h2{

text-align:center;

margin-bottom:45px;

font-size:40px;

}

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.card{

background:rgba(255,255,255,.06);

padding:35px;

border-radius:18px;

}

.card h3{

margin-bottom:18px;

color:#58b8ff;

}

.timeline {
  width: 80%;
  margin: auto;
  padding: 80px 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  margin-bottom: 80px;
}

.year {
  font-size: 38px;
  font-weight: bold;
  color: #4fc3ff;
}

.content {
  background: rgba(255, 255, 255, 0.05);
  padding: 35px;
  border-left: 5px solid #4fc3ff;
  border-radius: 10px;
}

.content h2 {
  margin-bottom: 10px;
}

.content h3 {
  margin-bottom: 20px;
  color: #8fd2ff;
}

.content p {
  line-height: 1.8;
  color: #d7e4f5;
}

.tech-line {
  margin-top: 20px;
  color: #4fc3ff !important;
  font-weight: 600;
}

@media (max-width: 900px) {
  .timeline {
    width: 90%;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .year {
    font-size: 30px;
  }
}


.projects-grid {
  width: 84%;
  margin: auto;
  padding: 80px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.project-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.project-card h2 {
  color: #ffffff;
  margin-bottom: 18px;
}

.project-card p {
  color: #d7e4f5;
  margin-bottom: 18px;
  line-height: 1.7;
}

.featured-project {
  grid-column: span 2;
  border-left: 6px solid #4fc3ff;
  background:
    radial-gradient(circle at top right, rgba(0, 168, 255, 0.2), transparent 35%),
    rgba(255, 255, 255, 0.07);
}

.project-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(79, 195, 255, 0.18);
  color: #4fc3ff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.quote-section {
  text-align: center;
  padding: 70px 10%;
  background: #09182c;
}

.quote-section blockquote {
  font-size: 34px;
  line-height: 1.35;
  color: #ffffff;
  max-width: 900px;
  margin: auto;
}

.quote-section p {
  color: #8fd2ff;
  margin-top: 20px;
}

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

  .featured-project {
    grid-column: span 1;
  }

  .quote-section blockquote {
    font-size: 26px;
  }
}

.case-hero {
  padding: 90px 10%;
  background:
    radial-gradient(circle at top right, rgba(0, 168, 255, 0.25), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2443 100%);
}

.case-hero h1 {
  font-size: 54px;
  max-width: 1000px;
  margin: 18px 0;
}

.case-hero h2 {
  color: #8fd2ff;
  font-size: 26px;
  margin-bottom: 24px;
}

.case-hero p {
  max-width: 900px;
  color: #d7e4f5;
  font-size: 19px;
  margin-bottom: 32px;
}

.case-section {
  padding: 76px 10%;
}

.case-section.alt {
  background: #09182c;
}

.case-section h2 {
  font-size: 40px;
  margin-bottom: 26px;
}

.case-section p {
  color: #d7e4f5;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.objective-list {
  padding-left: 24px;
  color: #d7e4f5;
  font-size: 18px;
  line-height: 2;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.solution-grid div {
  background: rgba(255,255,255,.06);
  padding: 30px;
  border-radius: 16px;
}

.solution-grid h3 {
  color: #4fc3ff;
  margin-bottom: 12px;
}

.architecture-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 34px;
  overflow-x: auto;
}

.architecture-box pre {
  color: #d7e4f5;
  font-size: 18px;
  line-height: 1.7;
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.roadmap div {
  background: rgba(255,255,255,.06);
  border-left: 4px solid #4fc3ff;
  padding: 24px;
  border-radius: 14px;
}

.roadmap strong {
  color: #4fc3ff;
  font-size: 20px;
}

@media (max-width: 900px) {
  .case-hero h1 {
    font-size: 38px;
  }

  .solution-grid,
  .roadmap {
    grid-template-columns: 1fr;
  }
}

.resume-container{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

padding:80px 10%;

}

.resume-card{

background:rgba(255,255,255,.06);

padding:35px;

border-radius:18px;

}

.resume-card table{

width:100%;

border-spacing:0 18px;

}

.resume-card td:first-child{

font-weight:bold;

color:#4fc3ff;

}

.resume-section{

padding:70px 10%;

}

.resume-section.alt{

background:#09182c;

}

.skill-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-top:40px;

}

.skill-grid div{

background:rgba(255,255,255,.06);

padding:18px;

text-align:center;

border-radius:12px;

}

.timeline-mini{

display:grid;

gap:30px;

margin-top:40px;

}

.timeline-mini div{

background:rgba(255,255,255,.06);

padding:30px;

border-left:5px solid #4fc3ff;

border-radius:12px;

}

.timeline-mini h3{

margin-bottom:12px;

color:#4fc3ff;

}

@media(max-width:900px){

.resume-container{

grid-template-columns:1fr;

}

.skill-grid{

grid-template-columns:1fr 1fr;

}

}

.architecture-diagram {
  margin-top: 42px;
  padding: 42px;
  background:
    radial-gradient(circle at top right, rgba(79, 195, 255, 0.18), transparent 35%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  text-align: center;
}

.arch-layer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.arch-box {
  padding: 22px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(79, 195, 255, 0.35);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

.arch-box span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #bcd8f2;
  font-weight: 400;
}

.arch-arrow {
  color: #4fc3ff;
  font-size: 34px;
  font-weight: 800;
  margin: 18px 0;
}

.arch-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 28px 0;
}

.arch-box.ai {
  background: rgba(0, 168, 255, 0.16);
}

.arch-box.api {
  background: rgba(44, 123, 229, 0.18);
}

.arch-box.portal {
  background: rgba(79, 195, 255, 0.12);
}

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

  .architecture-diagram {
    padding: 26px;
  }
}

.downloads-section{

padding:80px 10%;

text-align:center;

}

.downloads-intro{

max-width:700px;

margin:auto;

margin-bottom:60px;

}

.downloads-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.download-card{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

border-radius:18px;

padding:40px;

transition:.3s;

}

.download-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(0,0,0,.25);

}

.download-icon{

font-size:48px;

margin-bottom:20px;

}

.download-card h3{

margin-bottom:18px;

color:#4fc3ff;

}

.download-card p{

line-height:1.7;

margin-bottom:28px;

color:#d7e4f5;

}

@media(max-width:900px){

.downloads-grid{

grid-template-columns:1fr;

}

}

.contact-hero {
  padding: 90px 10%;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(0, 168, 255, 0.25), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2443 100%);
}

.contact-hero h1 {
  font-size: 52px;
  margin-bottom: 24px;
}

.contact-hero p {
  max-width: 900px;
  margin: auto;
  color: #d7e4f5;
  font-size: 20px;
  line-height: 1.8;
}

.contact-grid {
  width: 84%;
  margin: auto;
  padding: 80px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.contact-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 34px;
  text-align: center;
  transition: .3s;
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.contact-icon {
  font-size: 44px;
  margin-bottom: 18px;
}

.contact-card h3 {
  color: #4fc3ff;
  margin-bottom: 12px;
}

.contact-card p {
  color: #d7e4f5;
  margin-bottom: 24px;
}

@media (max-width: 1000px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .contact-hero h1 {
    font-size: 38px;
  }
}

.exec-architecture {
  margin-top: 42px;
  padding: 42px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(79,195,255,.18), transparent 35%),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
}

.arch-title-block {
  text-align: center;
  margin-bottom: 38px;
}

.arch-title-block h3 {
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 8px;
}

.arch-title-block p {
  color: #8fd2ff;
  font-size: 15px;
}

.exec-layer {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(79,195,255,.25);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
}

.exec-layer h4,
.exec-services h4 {
  color: #4fc3ff;
  margin-bottom: 18px;
  font-size: 20px;
}

.exec-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.exec-row span {
  background: rgba(79,195,255,.12);
  border: 1px solid rgba(79,195,255,.35);
  border-radius: 999px;
  padding: 10px 16px;
  color: #ffffff;
  font-weight: 600;
}

.exec-main-box {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.exec-main-box small {
  display: block;
  margin-top: 8px;
  color: #bfd8ee;
  font-weight: 400;
}

.exec-arrow {
  text-align: center;
  color: #4fc3ff;
  font-size: 36px;
  font-weight: 800;
  margin: 18px 0;
}

.exec-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.exec-services div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(79,195,255,.25);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
}

.exec-services p {
  color: #d7e4f5;
  line-height: 1.8;
  margin-bottom: 0;
}

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

  .exec-architecture {
    padding: 26px;
  }
}

.knowledge-hero {
  padding: 90px 10%;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(0, 168, 255, 0.25), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2443 100%);
}

.knowledge-hero h1 {
  font-size: 56px;
  margin: 22px 0;
}

.knowledge-hero p {
  max-width: 900px;
  margin: auto;
  color: #d7e4f5;
  font-size: 20px;
  line-height: 1.8;
}

.knowledge-grid {
  width: 84%;
  margin: auto;
  padding: 80px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
}

.knowledge-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 38px;
  transition: .3s;
}

.knowledge-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.knowledge-icon {
  font-size: 46px;
  margin-bottom: 18px;
}

.knowledge-card h2 {
  color: #4fc3ff;
  margin-bottom: 16px;
}

.knowledge-card p {
  color: #d7e4f5;
  line-height: 1.7;
  margin-bottom: 26px;
}

.principles-section {
  padding: 90px 10%;
  background: #09182c;
  text-align: center;
}

.principles-section h2 {
  font-size: 42px;
  margin-bottom: 50px;
}

.principles-section blockquote {
  max-width: 900px;
  margin: 0 auto 38px auto;
  font-size: 25px;
  line-height: 1.6;
  color: #ffffff;
}

.journey-flow {
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.journey-flow span {
  background: rgba(79,195,255,.12);
  border: 1px solid rgba(79,195,255,.35);
  border-radius: 999px;
  padding: 12px 18px;
  color: #ffffff;
  font-weight: 700;
}

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

  .knowledge-hero h1 {
    font-size: 40px;
  }

  .principles-section blockquote {
    font-size: 21px;
  }
}

.adr-hero {
  padding: 90px 10%;
  background:
    radial-gradient(circle at top right, rgba(0,168,255,.22), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2443 100%);
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: #8fd2ff;
  text-decoration: none;
  font-weight: 700;
}

.adr-hero h1 {
  font-size: 56px;
  margin: 22px 0 8px;
}

.adr-hero h2 {
  color: #8fd2ff;
  font-size: 30px;
  margin-bottom: 24px;
}

.adr-hero p {
  max-width: 900px;
  color: #d7e4f5;
  font-size: 20px;
  line-height: 1.8;
}

.adr-summary {
  padding: 70px 10%;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.summary-grid div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(79,195,255,.25);
  border-radius: 16px;
  padding: 24px;
}

.summary-grid strong {
  display: block;
  color: #4fc3ff;
  margin-bottom: 10px;
}

.summary-grid span {
  color: #ffffff;
}

.adr-section {
  padding: 70px 10%;
}

.adr-section.alt {
  background: #09182c;
}

.adr-section h2 {
  font-size: 38px;
  margin-bottom: 24px;
}

.adr-section h3 {
  color: #4fc3ff;
  margin: 24px 0 12px;
}

.adr-section p {
  color: #d7e4f5;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.adr-card-grid,
.adr-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}

.adr-card-grid div,
.adr-comparison div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 28px;
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.related-links a {
  background: rgba(79,195,255,.12);
  border: 1px solid rgba(79,195,255,.35);
  border-radius: 999px;
  padding: 12px 18px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 900px) {
  .summary-grid,
  .adr-card-grid,
  .adr-comparison {
    grid-template-columns: 1fr;
  }

  .adr-hero h1 {
    font-size: 40px;
  }
}

/* ===========================
   Breadcrumb
=========================== */

.breadcrumb-section{
    background:#081522;
    padding:18px 10%;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.breadcrumb{
    font-size:15px;
    color:#9fb8d4;
}

.breadcrumb a{
    color:#7fc8ff;
    text-decoration:none;
}

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

.breadcrumb span{
    margin:0 10px;
    opacity:.5;
}

.breadcrumb strong{
    color:white;
}

/* ===========================
   ADR Specification
=========================== */

.adr-specification{

    margin-bottom:45px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(79,195,255,.20);

    border-radius:18px;

    overflow:hidden;

}

.spec-title{

    background:#0d2f55;

    padding:14px 24px;

    color:white;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:13px;

}

.spec-grid{

    display:flex;

    justify-content:space-around;

    padding:24px;

    flex-wrap:wrap;

    gap:30px;

}

.spec-grid div{

    text-align:center;

}

.spec-grid label{

    display:block;

    color:#8fb9d8;

    font-size:13px;

    text-transform:uppercase;

    margin-bottom:8px;

}

.spec-grid span{

    color:white;

    font-size:20px;

    font-weight:700;

}

.accepted{

    color:#4ade80 !important;

}

.adr-number-subtitle{

    text-transform:uppercase;

    letter-spacing:4px;

    color:#7fc8ff;

    font-size:14px;

    margin-top:-10px;

    margin-bottom:24px;

}

.architecture-quote{

    border-left:5px solid #4fc3ff;

    padding:30px;

    background:rgba(79,195,255,.05);

    font-size:24px;

    line-height:1.8;

    font-style:italic;

    border-radius:0 12px 12px 0;

}

.continue-text{

    max-width:700px;

    margin:0 auto 35px;

    text-align:center;

    color:#d7e4f5;

    line-height:1.8;

    font-size:18px;

}

.adr-ending{

    width:120px;

    margin:80px auto;

    border:none;

    border-top:1px solid rgba(255,255,255,.15);

}

.adr-purpose {
  max-width: 900px;
  margin-top: 20px;
  color: #8fd2ff;
  font-size: 18px;
  line-height: 1.8;
  font-style: italic;
}

.workflow-diagram {
  margin-top: 42px;
  padding: 42px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(79,195,255,.18), transparent 35%),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  text-align: center;
}

.workflow-box {
  max-width: 760px;
  margin: auto;
  padding: 24px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(79,195,255,.30);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.workflow-box span {
  display: block;
  margin-top: 8px;
  color: #bfd8ee;
  font-size: 14px;
  font-weight: 400;
}

.workflow-arrow {
  color: #4fc3ff;
  font-size: 34px;
  font-weight: 800;
  margin: 18px 0;
}

.workflow-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 28px 0;
}

.workflow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.workflow-steps div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 28px;
}

.workflow-steps h3 {
  color: #4fc3ff;
  margin-bottom: 14px;
}

.workflow-steps p {
  color: #d7e4f5;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .workflow-split,
  .workflow-steps {
    grid-template-columns: 1fr;
  }

  .workflow-diagram {
    padding: 26px;
  }
}

.career-intro {
  max-width: 850px;
  margin: 20px auto 0;
  color: #d7e4f5;
  font-size: 20px;
  line-height: 1.7;
}

.competency-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 34px;
}

.competency-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 28px;
}

.competency-card h3 {
  color: #4fc3ff;
  margin-bottom: 12px;
}

.competency-card p {
  color: #d7e4f5;
  line-height: 1.7;
}

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

.featured-badge{
    display:inline-block;
    background:#d4af37;
    color:#fff;
    font-size:0.75rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:20px;
    margin-bottom:12px;
    letter-spacing:0.5px;
    text-transform:uppercase;
}