/* ===== Bumi Homecare - Company Profile ===== */

:root{
  --teal-900:#063E42;
  --teal-800:#0A5459;
  --teal-700:#0B7D84;
  --teal-600:#0E9BA3;
  --teal-500:#14BFC9;
  --teal-400:#3ECCD4;
  --teal-300:#7FDEE3;
  --teal-200:#BEEFF1;
  --teal-100:#E3FAFB;
  --teal-50:#F2FDFD;
  --green-700:#237A2A;
  --green-600:#2E9B36;
  --green-500:#3CBF45;
  --green-400:#66CE6D;
  --green-300:#9BE0A0;
  --green-100:#E9FBEA;
  --ink-900:#12201F;
  --ink-700:#2B3A39;
  --ink-500:#5B6B6A;
  --ink-300:#8FA09E;
  --ink-100:#D7E1E0;
  --cream-100:#FBF9F4;
  --cream-50:#FFFDF9;--white:#FFFFFF;

  --color-primary:var(--teal-500);
  --color-primary-hover:var(--teal-600);
  --color-primary-active:var(--teal-700);
  --color-primary-soft:var(--teal-100);
  --color-accent:var(--green-500);
  --color-accent-hover:var(--green-600);
  --color-accent-soft:var(--green-100);
  --surface-page:var(--cream-100);
  --surface-card:var(--white);
  --surface-sunken:var(--teal-50);
  --surface-inverse:var(--teal-800);
  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-on-primary:var(--white);
  --text-link:var(--teal-600);
  --text-link-hover:var(--teal-700);
  --border-subtle:var(--ink-100);
  --border-strong:var(--teal-300);
  --focus-ring:var(--teal-400);

  --font-display:'Plus Jakarta Sans', sans-serif;
  --radius-l:18px;
  --shadow-s:0 2px 8px rgba(6,62,66,0.08);
  --shadow-m:0 6px 20px rgba(6,62,66,0.10);
  --shadow-l:0 16px 40px rgba(6,62,66,0.14);
  --gradient-primary:linear-gradient(135deg, var(--teal-500), var(--teal-700));
  --gradient-soft:linear-gradient(180deg, var(--teal-50), var(--cream-100));
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surface-page);
  font-family:'Plus Jakarta Sans', sans-serif;
  color:var(--text-body);
}

/* ---------- Navbar ---------- */
.navbar-custom{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:12px;
  padding:14px clamp(16px,4vw,32px);
  background:rgba(255,253,249,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;z-index:20;
}
.navbar-custom .logo{ 
  height:3rem; 
}
.nav-links{ display:flex;gap:clamp(14px,2.5vw,28px);align-items:center;flex-wrap:wrap;justify-content:flex-end; }
.nav-links a[data-navlink]{ color:var(--text-body);font-weight:600;font-size:0.9375rem;text-decoration:none; }
.btn-cta{
  background:var(--color-primary);color:#fff !important;font-weight:600;font-size:0.875rem;
  padding:10px 20px;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-s);
}
@media (max-width:680px){
  .nav-links a[data-navlink]{ display:none; }
}

#btn-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	white-space: nowrap;
	color: #000;
	background-color: var(--surface-card);
	border-radius: var(--radius-l);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-m);
	position: fixed;
	bottom: 3rem;
	right: 2rem;
	transition: .3s;
	z-index: 99;
	animation: goyang 2s linear infinite;
}

#btn-wa:hover {
	background-color: #d5d5d5;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#btn-wa img {
	height: 1.6rem;
	width: 1.6rem;
	margin-right: 5px;
}

/* ---------- Hero ---------- */
.hero-section{
  max-width:1160px;margin:0 auto;
  padding:clamp(48px,8vw,72px) clamp(16px,4vw,32px) 56px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px;align-items:center;
}
.hero-eyebrow{
  color:var(--color-primary-active);font-weight:600;font-size:0.875rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.hero-title{
  font-family:var(--font-display);font-size:clamp(2.25rem,3vw + 1rem,3.25rem);
  margin:16px 0 20px;color:var(--text-heading);line-height:1.12;
}
.hero-desc{
  font-size:1.125rem;
  color:var(--text-muted);
  line-height:1.6;
  max-width:520px;
  margin:0 0 32px;
  text-align:justify;
}
.hero-actions{ display:flex;gap:14px;flex-wrap:wrap; }
.btn-primary-pill{
  background:var(--color-primary);color:#fff !important;font-weight:600;
  padding:14px 26px;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-m);
}
.btn-outline-pill{
  background:transparent;color:var(--teal-700) !important;font-weight:600;
  padding:14px 26px;border-radius:999px;text-decoration:none;border:1px solid var(--border-strong);
}

.hero-card{
  background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  padding:24px;
}
.hero-card-slider .hero-card-slide { 
  display:flex;
  flex-direction:column;
  gap:16px; 
}
.hero-card-slider img { 
  width:100%;
  aspect-ratio: 4/5;
  object-fit:cover;
  border-radius:18px;
  display:block; 
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
.hero-card-slider .founder-name{ font-family:var(--font-display);font-weight:600;color:var(--text-heading);font-size:1.0625rem; }
.hero-card-slider .founder-role{ color:var(--color-primary-active);font-size:0.8125rem;font-weight:600;margin-bottom:8px; }
.hero-card-slider .founder-quote{ color:var(--text-muted);font-size:0.9375rem;line-height:1.6;margin:0; }
.hero-card-slider .slick-dots{ bottom:-28px; }
.hero-card-slider .slick-dots li button:before{ font-size:9px;color:var(--color-primary-active);opacity:.3; }
.hero-card-slider .slick-dots li.slick-active button:before{ opacity:1; }
.hero-card-slider.slick-initialized{ padding-bottom:20px; }

/* ---------- Section heading (shared) ---------- */
.section-heading{ text-align:center;max-width:640px;margin:0 auto 48px; }
.section-heading .eyebrow{
  color:var(--color-primary-active);font-weight:600;font-size:0.875rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.section-heading h2{
  font-family:var(--font-display);font-size:clamp(1.5rem,1.5vw + 1rem,2rem);
  margin:12px 0 12px;color:var(--text-heading);
}
.section-heading p{ color:var(--text-muted);font-size:1.125rem;margin:0; }

/* ---------- Penjelasan ---------- */
#penjelasan { 
  background:var(--gradient-soft);
  margin-top: 3rem;
  padding: 5rem 0;
}

#penjelasan h2 {
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
  margin-bottom: 2rem;
  width: clamp(70%, 53.73% + 3.61vw, 100%);
}

#penjelasan .slider-penjelasan {
  margin-bottom: 5rem;
}

#penjelasan .slider-penjelasan .slick-track {
  display: flex;
}

#penjelasan .slider-penjelasan .card {
  padding: clamp(1rem, 0.46rem + 1.93vw, 2rem);
  border-radius: 1rem;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 clamp(0.5rem, 0.23rem + 0.96vw, 1rem);
}

#penjelasan .slider-penjelasan .card p {
  margin-bottom: 0;
  text-align: center;
}

#penjelasan .penjelasan-text {
  display: flex;
  justify-content: center;
}

#penjelasan .penjelasan-text p {
  max-width: 70%;
  text-align: center;
}

#penjelasan img {
  width: 70%;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

#penjelasan .text {
  margin-bottom: 5rem;
}

#penjelasan .text h3 {
  margin-bottom: 2rem;
}

@media (max-width: 576px) {
  #penjelasan img {
    width: 90%;
  }

  #penjelasan .text {
    margin: 3rem 0 2rem;
  }

  #penjelasan .text p {
    text-align: justify;
  }
}

/* ---------- Layanan ---------- */
.layanan-section { 
  max-width:1160px;
  margin:0 auto;
  padding:clamp(48px,8vw,64px) clamp(16px,4vw,32px); 
  background:var(--gradient-soft);
}

.layanan-section .kolom-text {
  z-index: 2;
}

.layanan-section .kolom-gambar {
  z-index: 1;
}

.layanan-section .text .eyebrow,
.layanan-section .row .card .eyebrow {
  color:var(--color-primary-active);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:.08em;
}

.layanan-section .text h3 {
  margin:1rem 0;
}

.layanan-section .layanan-img {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  height: fit-content;
}

.layanan-section .position-relative .card-bawah-gambar {
  position: absolute;
  bottom: 4rem;
  right: 0;
  border-left: 3px solid var(--color-primary-active);
  padding: 1rem 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  width: 55%;
}

.layanan-section .position-relative .card-bawah-gambar p:first-child {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
}

.layanan-section .position-relative .card-bawah-gambar p:nth-child(2) {
  font-size: 0.8rem;
}

.layanan-section .layanan-img-1 {
  width: 70%;
}

.layanan-section .layanan-img-2 {
  width: 90%;
}

.layanan-section .kolom {
  margin-bottom: 5rem;
}

.layanan-section .slider-hospital-companion {
  width: 120%;
}

.layanan-section .slider-hospital-companion .slick-track {
  display: flex;
}

.layanan-section .slider-hospital-companion .card {
  padding: 1rem 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  margin: 0 .5rem;
  height: auto;
  display: flex;
  align-items: center;
}

.layanan-section .slider-hospital-companion .card p {
  margin-bottom: 0;
}

.layanan-section .slider-hospital-companion .card p:first-child {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
}

.layanan-section .slider-hospital-companion .card p:nth-child(2) {
  font-size: 0.8rem;
}

.layanan-section .row .card.of-ocp-card {
  padding: 1rem 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  height: 10rem;
  margin-bottom: 1.5rem;
}

.layanan-section .row .card.of-ocp-card .eyebrow {
  font-size: 0.75rem;
}

.layanan-section .row .card.of-ocp-card p:nth-child(2) {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
}

.layanan-section .row .card.of-ocp-card p:nth-child(3) {
  font-size: 0.8rem;
}

@media (max-width: 576px) {
  .layanan-section .layanan-img-1 {
    width: 90%;
  }

  .layanan-section .row p {
    text-align: justify;
  }

  .layanan-section .slider-hospital-companion {
    width: 100%;
  }
}

.target-market-section {
  background: var(--gradient-soft);
  padding: 5rem 0;
}

.target-market-section h2 {
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.target-market-section .card {
  padding: 1rem 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  min-height: 10rem;
  margin: 0 1rem;
}

.target-market-section .card h3 {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
  font-size: 1rem;
}

.target-market-section .card p:nth-child(2) {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.kenapa-section {
  margin-bottom: 5rem;
}

.kenapa-section .eyebrow {
  color:var(--color-primary-active);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:.08em;
}

.kenapa-section h2 {
  margin:1rem 0 3rem;
  color:var(--text-heading);
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.kenapa-section h2 span {
  margin-left: 5rem;
}

.kenapa-section .row .card {
  padding: 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  min-height: 14rem;
  margin-bottom: 1.5rem;
}

.kenapa-section .row .card .card-icon {
  background: var(--color-primary-soft);
  display: inline-block;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.kenapa-section .row .card .card-icon img {
  height: 1.8rem;
  color: var(--color-primary-active);
}

.kenapa-section .row .card h3 {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
  font-size: 1rem;
}

.kenapa-section .row .card p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .kenapa-section h2 span {
    margin-left: 0;
  }

  .kenapa-section .row .card {
    min-height: 16rem;
    padding: 1.5rem .8rem;
  }
}

.cara-kerja-section {
  background: var(--gradient-soft);
  padding: 5rem 0;
}

.cara-kerja-section h2 {
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.cara-kerja-section .card {
  padding: 1rem 1.5rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  min-height: 12rem;
  margin: 0 .5rem;
}

.cara-kerja-section .card .step-number {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1.5rem;
  text-align: left;
  margin-bottom: .5rem;
  display: inline-block;
}

.cara-kerja-section .card h3 {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: .5rem;
  font-size: 1rem;
  text-align: left;
}

.cara-kerja-section .card p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.meyakinkan-section .card-utama {
  padding: 3rem 3rem 1rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
  display: flex;
  align-items: center;
  min-height: 12rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-m);
}

.meyakinkan-section .card-utama h2 {
  color: var(--text-heading);
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.meyakinkan-section .card-utama p {
  margin-bottom: 2rem;
}

.meyakinkan-section .card-pertanyaan {
  margin-bottom: 1.5rem;
  border-radius: var(--radius-l);
  padding: 1.5rem;
  background: var(--surface-card);
  min-height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meyakinkan-section .card-pertanyaan p {
  margin-bottom: 0;
  text-align: center;
}

.tagline-section {
  margin: 5rem 0;
  background: var(--gradient-soft);
  padding: 5rem 0;
}

.tagline-section .text-tagline {
  width: 90%;
}

.tagline-section .text-tagline .eyebrow {
  color:var(--color-primary-active);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:.08em;
}

.tagline-section .text-tagline h2 {
  margin:1rem 0 3rem;
  color:var(--text-heading);
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.tagline-section img {
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
}

.tagline-section .text-tagline .card {
  padding: .5rem;
  background: var(--surface-card);
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  margin: 2rem 0  3rem;
}

.tagline-section .text-tagline .card p {
  margin-bottom: 0;
  text-align: center;
  font-size: 0.8rem;
}

@media (max-width: 576px) {
  .tagline-section .text-tagline .row-card {
    margin-bottom: 2rem;
  }

  .tagline-section .text-tagline .card {
    margin-bottom: 0;
  }
  .tagline-section img {
    margin-bottom: 3rem;
  }
}

.family-update-section .text-utama {
  margin-bottom: 3rem;
  text-align: center;
}

.family-update-section .text-utama .eyebrow {
  color:var(--color-primary-active);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:.08em;
}

.family-update-section .text-utama h2 {
  margin:1rem 0;
  color:var(--text-heading);
  font-size: clamp(1.5rem, 1.23rem + 0.96vw, 2rem);
}

.family-update-section .card {
  padding: 3rem 2rem; 
  background: var(--surface-card);
  border-radius: var(--radius-l);
}

.family-update-section .card p {
  font-weight: 800;
}

.family-update-section .card>.list-group,
.family-update-section .card .list-group-flush>.list-group-item:first-child {
  border-top-width: 0;
  border-top: 0;
}

.family-update-section .card .list-group-flush>.list-group-item {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.family-update-section .card .list-group-flush>.list-group-item:last-child {
  border-bottom-width: 1px;
}

.family-update-section .card .jam {
  font-weight: 800;
  color: var(--color-primary);
  margin-right: 1rem;
}

.brand-philosophy-section {
  padding: 5rem 0;
}

.brand-philosophy-section .eyebrow {
  color:var(--color-primary-active);
  font-weight:600;
  font-size:0.875rem;
  letter-spacing:.08em;
}

.brand-philosophy-section .text-utama {
  width: 70%;
  margin-top: 3rem;
}

.brand-philosophy-section .text-utama h2 {
  margin:1rem 0 1.5rem;
  color:var(--text-heading);
  font-size: 2.5rem;
  font-weight: 800;
}

.brand-philosophy-section .card {
  padding: 3rem 2rem;
  background: var(--surface-card);
  border-radius: var(--radius-l);
}

.brand-philosophy-section .card h3 {
  font-size: 1.5rem;
  margin-top: .5rem;
}

.brand-philosophy-section .card .bottom-card p {
  margin: 1rem 0 .5rem 3rem;
}

.brand-philosophy-section .card .bottom-card p span {
  margin-right: 1rem;
}

@media (max-width: 576px) {
  .brand-philosophy-section .text-utama {
    margin-top: 0;
    width: 90%;
  }

  .brand-philosophy-section .text-utama h2 {
    margin-bottom: 2rem;
  }

  .brand-philosophy-section .card {
    padding: 3rem 1rem;
  }

  .brand-philosophy-section .text-utama p {
    text-align: justify;
    margin-bottom: 3rem;
  }

  .brand-philosophy-section .card .bottom-card p {
    margin: 1rem 0 .5rem 1rem;
  }

  .brand-philosophy-section .card .bottom-card p span {
    font-size: 0.8rem;
    margin-right: .5rem;
  }

  .brand-philosophy-section .card .bottom-card p span:nth-child(2){
    display: inline-block;
  }
}

.cta-section {
  background: var(--surface-inverse);
  color: var(--teal-100);
  padding: 5rem 0;
  text-align: center;
}

.cta-section .text-utama {
  width: 50%;
}

.cta-section .text-utama h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-weight: 800;
}

.cta-section .text-utama p {
  margin-bottom: 3rem;
}

@media (max-width: 576px) {
  .cta-section .text-utama {
      width: 90%;
  }
}

/* ---------- Testimoni ---------- */
.testimoni-section{ max-width:1160px;margin:0 auto;padding:clamp(48px,8vw,64px) clamp(16px,4vw,32px); }
.testimoni-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px; }
.testimoni-card{
  background:var(--surface-card);border-radius:var(--radius-l);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-m);padding:28px;display:flex;flex-direction:column;gap:16px;
}
.testimoni-card p.quote{ margin:0;color:var(--text-body);font-size:1rem;line-height:1.6; }
.testimoni-author{ display:flex;align-items:center;gap:12px;margin-top:auto; }
.testimoni-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--color-primary-soft);color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);
}
.testimoni-name{ font-weight:600;font-size:0.9375rem;color:var(--text-heading); }
.testimoni-role{ color:var(--text-muted);font-size:0.8125rem; }

/* ---------- Syarat & Ketentuan ---------- */
.tnc-section{ background:var(--surface-sunken);padding:clamp(48px,8vw,64px) clamp(16px,4vw,32px); }
.tnc-inner{ max-width:760px;margin:0 auto; }
.tnc-heading{ text-align:center;margin-bottom:40px; }
.tnc-card{
  background:var(--surface-card);border-radius:var(--radius-l);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-m);padding:32px;
}
.tnc-item{ display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-subtle); }
.tnc-item:last-child{ border-bottom:none; }
.tnc-item i{ color:var(--color-accent);flex-shrink:0;margin-top:2px;font-size:1.2rem; }
.tnc-item p{ margin:0;color:var(--text-body);font-size:0.9375rem;line-height:1.55; }

/* ---------- FAQ ---------- */
.faq-section{ max-width:760px;margin:0 auto;padding:clamp(48px,8vw,64px) clamp(16px,4vw,32px); }
.faq-heading{ text-align:center;margin-bottom:32px; }
.faq-item{ border-bottom:1px solid var(--border-subtle);padding:20px 0; }
.faq-question{
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;color:var(--text-heading);
}
.faq-question i{ color:var(--color-primary);flex-shrink:0;transition:transform .25s ease; }
.faq-item.open .faq-question i{ transform:rotate(45deg); }
.faq-answer{ color:var(--text-muted);margin-top:14px;margin-bottom:0;font-size:1rem;line-height:1.6;display:none; }
.faq-item.open .faq-answer{ display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface-inverse);color:var(--teal-100);padding:48px clamp(16px,4vw,32px) 24px; }
.site-footer-inner{ max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px; }
.site-footer img{ height:40px;display:block; }
.site-footer .footer-desc{ margin-top:12px;color:var(--teal-200);font-size:0.9375rem;max-width:280px; }
.footer-contact{ color:var(--teal-200);font-size:0.9375rem; }
.footer-copyright{
  text-align:center;color:var(--teal-300);font-size:0.75rem;margin-top:32px;
  border-top:1px solid rgba(255,255,255,0.12);padding-top:20px;
}

/* ---------- Scroll reveal animation ---------- */
[data-reveal], [data-reveal-hero]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
[data-reveal].is-visible, [data-reveal-hero].is-visible{
  opacity:1;
  transform:translateY(0);
}