#hero {
	  width: 100%;
	  height: 50vh;
	}
	.btn-default {
		color: #fff;
		background-color: #9ecad6;
		border-color: #9ecad6;
	}
	.btn-warning {
		color: #fff;
		background-color: #edb574;
		border-color: #edb574;
	}
	.btn-info {
		color: #fff;
		background-color: #495f43;
		border-color: #495f43;
	}	
.about .content ul i {
    font-size: 20px;
    padding-right: 4px;
    color: #FF9149;
} 	
.counts .counters span {
  font-size: 48px;
  display: block;
  color: #FF9149;
  font-weight: 700;
}
.why-us .content {
  padding: 30px;
  background: #FF9149;
  border-radius: 4px;
  color: #fff;
}
.why-us .icon-boxes .icon-box i {
  font-size: 32px;
  padding: 18px;
  color: #FF9149;
  margin-bottom: 30px;
  background: #f9ece7;
  border-radius: 50px;
}
.courses .course-content h4 {
  font-size: 14px;
  background: #FF9149;
  padding: 7px 14px;
  color: #fff;
  margin: 0;
}
#footer .social-links a {
    background: #FF9149;
}
#footer .social-links a:hover {
    background: #ffd7bc;
}
.back-to-top {
    background:#FF9149;
}
.back-to-top:hover {
    background:#ffd7bc;
}
a {
    color: #FF9149;
    text-decoration: none;
}

.capability-box{padding:30px;border-radius:15px;background:#fff;box-shadow:0 5px 25px rgba(0,0,0,.05); height:100%;transition:.3s; }

.capability-box:hover{transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.10); }
.feature-icon{width:80px;height:80px; border-radius:50%; background:#fff3e8; display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.feature-icon i{font-size:42px; color:#FFF;}
.capability-box h4{font-weight:700; margin-bottom:15px; }
.capability-box p{ margin-bottom:0; }
.workflow-box{margin-top:15px; }

.workflow-step{
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8f9fa;
    border-left:4px solid #f68b33;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:8px;
}

.workflow-step span{
    font-size:22px;
}

.workflow-step small{
    font-size:14px;
    font-weight:600;
    color:#333;
}

.workflow-arrow{
    text-align:center;
    color:#f68b33;
    font-size:18px;
    font-weight:bold;
    margin:2px 0;
}

.final-step{
    background:#fff3e8;
    border-left:4px solid #ff7a00;
}
.about .content ul li {
  padding-bottom: 5px;
}
#hero{
    position:relative;
    width:100%;
}

.hero-banner{
    width:100%;
    height:auto;
    display:block;
}

.hero-content{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    transform:translateY(-50%);
    color:#fff;
}
section {
  padding: 30px 0;
  overflow: hidden;
}


.workflow-container{
    max-width:100%;
}

.workflow-card{
    display:flex;
    align-items:center;
    padding:5px;
    margin-bottom:5px;
    border-radius:12px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    border-left:5px solid #FF9149;
}

.step-no{
    width:55px;
    height:55px;
    line-height:55px;
    text-align:center;
    border-radius:10px;
    color:#fff;
    font-weight:bold;
    font-size:22px;
    margin-right:15px;
}

.step-icon{
    font-size:38px;
    margin-right:15px;
}

.step-content h5{
    margin:0;
    font-size:16px;
    font-weight:700;
}

.step-content p{
    margin:3px 0 0;
    color:#666;
    font-size:13px;
    line-height:1.4;
}

.workflow-arrow{
    text-align:center;
    font-size:18px;
    color:#748dae;
    margin:0px 0;
}

/* Theme Colors */

.card-blue .step-no{
    background:#4A7DFF;
}

.card-green .step-no{
    background:#4CAF50;
}

.card-orange .step-no{
    background:#FF9800;
}

.card-purple .step-no{
    background:#8E44AD;
}

.card-cyan .step-no{
    background:#00ACC1;
}

.card-pink .step-no{
    background:#E91E63;
}
 
:root {
  --kd-leaf:      #3E8E5A;   /* hijau daun */
  --kd-leaf-dark: #2F6B44;   /* hijau daun tua */
  --kd-lime:      #A8D65C;   /* hijau lime ceria */
  --kd-sun:       #FFC845;   /* kuning matahari (tetap, aman dgn hijau) */
  --kd-teal:      #2AA6A6;   /* teal laut — pengganti oranye */
  --kd-lavender:  #8E7CC3;   /* ungu bunga liar — aksen sekunder */
  --kd-sky:       #6EC1E4;   /* biru langit */
  --kd-wood:      #8B5E3C;   /* cokelat kayu (netral, tetap dipakai utk teks) */
  --kd-sand:      #FDF6E3;   /* krem pasir */
  --kd-cream:     #FFF9EC;   /* krem lembut */
  --kd-ink:       #2E3A2F;   /* teks hijau gelap */
  --kd-shadow:    0 10px 30px rgba(62,142,90,.15);
}

body {
  background: #FFF;
  color: var(--kd-ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- HERO ---------- */
#hero {
  position: relative;
  background: linear-gradient(180deg, #F9FDFF 0%, #E4F8FF 45%, var(--kd-sand) 100%);
  overflow: hidden;
}
#hero .hero-banner {
  opacity: .35;
  mix-blend-mode: multiply;
  object-fit: cover;
}
#hero .hero-content h1 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 3px 0 rgba(255,255,255,.6);
}
#hero .hero-content h1::before { content: "🧭 "; }
#hero .hero-content h2 {
  color: #ffffff;   /* dulu cokelat, kini teal agar ceria */
  font-weight: 600;
}
.btn-get-started {
  background: #c4d6c4;
  color: #fff !important;
  border-radius: 30px;
  padding: 12px 32px;
  font-weight: 700;
  box-shadow: var(--kd-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-get-started:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 34px rgba(62,142,90,.28);
}

/* ---------- SECTION TITLES ---------- */
.section-title h2 {
  color: var(--kd-leaf-dark);
  font-weight: 800;
}
.section-title h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 5px;
  margin: 12px auto 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--kd-lime), var(--kd-sun), var(--kd-teal));
}
.section-title p { color: var(--kd-teal); }

/* ---------- WORKFLOW CARDS ---------- */
.workflow-container { margin-top: 18px; }
.workflow-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border-left: 6px solid var(--kd-leaf);
  box-shadow: var(--kd-shadow);
  position: relative;
  transition: transform .2s ease;
}
.workflow-card:hover { transform: translateX(4px); }
.workflow-card .step-no {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: var(--kd-leaf);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.workflow-card .step-icon { font-size: 22px; }
.workflow-card h5 { margin: 0 0 4px; color: var(--kd-leaf-dark); font-weight: 700; font-size: 15px; }
.workflow-card p  { margin: 0; font-size: 13px; color: #5a6a5c; }
.workflow-arrow { text-align: center; color: var(--kd-lime); font-size: 20px; line-height: 1; margin: 4px 0; }

/* variasi warna kartu — oranye diganti teal & lavender */
.card-blue     { border-left-color: var(--kd-sky);      }
.card-blue     .step-no { background: var(--kd-sky);      }
.card-green    { border-left-color: var(--kd-leaf);     }
.card-green    .step-no { background: var(--kd-leaf);     }
.card-orange   { border-left-color: var(--kd-teal);     } /* dulu oranye -> teal */
.card-orange   .step-no { background: var(--kd-teal);     }
.card-purple   { border-left-color: var(--kd-lavender); }
.card-purple   .step-no { background: var(--kd-lavender); }
.card-cyan     { border-left-color: #4FB3A9;            }
.card-cyan     .step-no { background: #4FB3A9;            }
.card-pink     { border-left-color: #E8735A;            }
.card-pink     .step-no { background: #E8735A;            }

/* ---------- ABOUT CONTENT ---------- */
.about .content h3 {
  color: var(--kd-leaf-dark);
  font-weight: 800;
}
.about .content h3::before { content: "🌿 "; }
.about .content b { color: var(--kd-teal); }   /* dulu oranye -> teal */
.about .content ul { list-style: none; padding-left: 0; }
.about .content ul li {
  padding: 6px 0 6px 4px;
  border-bottom: 1px dashed rgba(139,94,60,.15);
}
.about .content ul li i { color: var(--kd-lime); margin-right: 6px; }

/* ---------- COUNTERS ---------- */
.counts {
  background: linear-gradient(135deg, #EAF6E2 0%, #FDF6E3 60%, #E4F4FB 100%) !important;
}
.counters .col-lg-2 { padding: 18px 8px; }
.counters span.purecounter {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--kd-leaf-dark);
}
.counters p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--kd-teal);   /* dulu cokelat -> teal */
}

/* ---------- CAPABILITY / ICON BOXES ---------- */
.capability-box {
  background: #fff;
  border-radius: 20px;
  padding: 26px 22px;
  height: 100%;
  border: 2px solid transparent;
  box-shadow: var(--kd-shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.capability-box:hover {
  transform: translateY(-6px);
  border-color: var(--kd-lime);
}
.feature-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 28px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--kd-lime), var(--kd-leaf));
  color: #fff;
  box-shadow: 0 8px 20px rgba(62,142,90,.25);
}
/* variasi ikon infrastruktur — oranye diganti teal & lavender */
.translation-icon { background: linear-gradient(135deg, var(--kd-sky), var(--kd-teal)); }
.embedding-icon   { background: linear-gradient(135deg, var(--kd-wood), var(--kd-lavender)); }
.emotion-icon     { background: linear-gradient(135deg, var(--kd-sun), var(--kd-teal)); }
.cluster-icon     { background: linear-gradient(135deg, var(--kd-lime), var(--kd-leaf)); }
.human-icon       { background: linear-gradient(135deg, var(--kd-teal), var(--kd-leaf)); }
.naming-icon      { background: linear-gradient(135deg, var(--kd-sun), var(--kd-lime)); }

.capability-box h4 { color: var(--kd-leaf-dark); font-weight: 800; font-size: 18px; }
.capability-box h6 {
  color: var(--kd-teal);   /* dulu oranye -> teal */
  font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .5px;
}
.capability-box p  { color: #5a6a5c; font-size: 14px; }

/* ---------- SECTION BACKGROUNDS ---------- */
.why-us { background: #ffff; }
.features { background: linear-gradient(180deg, #F3FAEC 0%, var(--kd-cream) 100%); }

/* ---------- DECOR: daun & kompas halus ---------- */
#about, #why-us, #infrastructure { position: relative; }
#about::before {
  content: "🍃";
  position: absolute;
  top: 20px; right: 30px;
  font-size: 46px;
  opacity: .25;
  transform: rotate(-18deg);
}
#why-us::before {
  content: "🧭";
  position: absolute;
  bottom: 20px; left: 26px;
  font-size: 48px;
  opacity: .18;
}
#infrastructure::before {
  content: "🌱";
  position: absolute;
  top: 24px; left: 30px;
  font-size: 44px;
  opacity: .22;
  transform: rotate(12deg);
}

/* ---------- LOGO TEKS ---------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--kd-leaf-dark);
  font-size: 22px;
  text-decoration: none;
}
.brand-logo .logo-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--kd-lime), var(--kd-leaf));
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(62,142,90,.35);
}
.brand-logo .logo-text small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--kd-teal);   /* dulu oranye -> teal */
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .workflow-card { margin-bottom: 4px; }
  #hero .hero-content h1 { font-size: 30px; }
}