/* ============================================================
   SAINT — shared stylesheet (v7)
   Satu typeface aja di seluruh situs: Inter, buat heading & body.
   Hirarki dibangun dari weight & letter-spacing, bukan ganti jenis huruf.
   Palet: paper/ink monokrom + aksen olive/hijau tua (--accent), dipakai sparingly.
   Section terang dominan; gelap cuma di hero & 1 CTA penutup per halaman.
   ============================================================ */

:root {
  --paper: #F5F4F0;
  --ink: #14151C;
  --ink-70: rgba(20,21,28,0.7);
  --ink-50: rgba(20,21,28,0.5);
  --ink-30: rgba(20,21,28,0.3);
  --ink-12: rgba(20,21,28,0.12);
  --ink-06: rgba(20,21,28,0.06);
  --paper-70: rgba(245,244,240,0.7);
  --paper-50: rgba(245,244,240,0.5);
  --paper-30: rgba(245,244,240,0.3);
  --paper-20: rgba(245,244,240,0.2);
  --paper-12: rgba(245,244,240,0.12);

  /* aksen olive/hijau tua — dipakai sparingly: CTA, angka, underline eyebrow, hover.
     --accent = versi dasar (dipakai di atas --paper, kontras ~6.6:1).
     --accent-strong = lebih gelap, buat hover state di atas --paper (kontras ~9.3:1).
     --accent-light = versi lebih terang/sage, KHUSUS dipakai di atas --ink
     (section gelap: hero, CTA penutup) supaya tetap kebaca (kontras ~8.8:1). */
  --accent: #4F5B3E;
  --accent-strong: #3A4430;
  --accent-light: #A9BB8E;
  --accent-line: rgba(79,91,62,0.4);
  --accent-soft: rgba(79,91,62,0.12);
  --accent-line-dark: rgba(169,187,142,0.45);

  --font-heading: 'Inter', Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

::selection { background: var(--ink); color: var(--paper); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 6vw;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.navbar.scrolled { border-bottom-color: var(--ink-12); }

.nav-logo {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.nav-right { display: flex; align-items: center; gap: 30px; }

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}
.nav-links a {
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 9px 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  z-index: 110;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  padding: 24px;
  text-align: center;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 24px;
  letter-spacing: 0.05em;
}
.mobile-menu .mobile-cta {
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 14px 30px;
}

/* ---------- SECTION BASE ---------- */
/* scroll-margin-top: navbar-nya fixed (~72-84px tinggi), jadi tiap section yang
   jadi target anchor link (#layanan, #demo, #kontak, dst) butuh napas ini biar
   heading-nya nggak ketiban/ketutup navbar pas di-jump lewat klik nav. */
section { padding: 110px 0; scroll-margin-top: 88px; }
.section-dark { background: var(--ink); color: var(--paper); font-weight: 400; line-height: 1.7; }
.section-light { background: var(--paper); color: var(--ink); }

.eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 18px;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--accent);
  opacity: 1;
}
/* eyebrow juga muncul di section gelap (CTA penutup) — pakai varian terang di situ */
.section-dark .eyebrow::after { background: var(--accent-light); }

.section-sub {
  margin-top: 18px;
  font-size: 15px;
  max-width: 640px;
}
.section-dark .section-sub { color: var(--paper-70); }
.section-light .section-sub { color: var(--ink-70); }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- DOT-GRID TEXTURE (pure CSS, ringan) ---------- */
.dot-grid {
  background-image: radial-gradient(var(--ink-12) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}
.dot-grid-dark {
  background-image: radial-gradient(rgba(245,244,240,0.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 17px 40px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
  min-height: 44px;
}
.btn:hover { opacity: 0.78; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); opacity: 1; }

.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
}
.btn-outline-light:hover { background: var(--paper); color: var(--ink); opacity: 1; }

.btn-light, .contact-submit {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  padding: 17px 40px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  min-height: 44px;
}
.btn-light:hover, .contact-submit:hover { opacity: 0.82; }

.btn-accent {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-weight: 500;
}
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); opacity: 1; }

.btn-sm { padding: 12px 22px; font-size: 11px; letter-spacing: 0.14em; min-height: 40px; }

.badge-pill {
  display: inline-block;
  border: 1px solid var(--ink-30);
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.badge-pill-dark {
  border-color: var(--paper-30);
  color: var(--paper-70);
}
/* dipakai cuma di hero (dark), jadi pakai varian terang biar tetap kebaca */
.badge-pill-accent {
  border-color: var(--accent-line-dark);
  color: var(--accent-light);
}

/* ---------- HERO (dark, dipakai di semua halaman) ---------- */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 6vw 90px;
  position: relative;
  background: var(--ink);
  color: var(--paper);
}

.hero-fade {
  opacity: 0;
  animation: fadeInUp 1.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-fade.d1 { animation-delay: 0.1s; }
.hero-fade.d2 { animation-delay: 0.4s; }
.hero-fade.d3 { animation-delay: 0.68s; }
.hero-fade.d4 { animation-delay: 0.92s; }
.hero-fade.d5 { animation-delay: 1.2s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(44px, 8vw, 104px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 950px;
}

.hero-tagline {
  margin-top: 28px;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--paper-70);
  max-width: 620px;
}

.hero-badge { margin-top: 32px; }

.hero-ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Normal document flow (bukan absolute) — biar otomatis ikut ngalir di bawah
   badge + tombol CTA, bukan dipatok fixed dari bawah .hero. Ini yang mencegah
   dia numpuk ke tombol kedua begitu konten hero lebih tinggi dari ruang yang
   tersisa (kasus paling sering kejadian di layar HP sempit). */
.scroll-cue {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue span {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-30);
}
.scroll-cue .line {
  width: 1px;
  height: 40px;
  background: var(--paper-30);
  overflow: hidden;
  position: relative;
}
.scroll-cue .line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-light);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 0%; }
  100% { top: 100%; }
}

/* ---------- KENAPA AI SEKARANG (homepage, framing besar sebelum pain-point) ---------- */
.why-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.why-ai-copy h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; font-weight: 700; margin-bottom: 20px; }
.why-ai-copy h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin-bottom: 18px; }
.why-ai-copy p { font-size: 15px; color: var(--ink-70); line-height: 1.7; margin-top: 14px; }
.why-ai-copy p:first-of-type { margin-top: 0; }
.why-ai-copy em { font-style: italic; }
.why-ai-copy strong { color: var(--ink); font-weight: 600; }

/* ---------- PROBLEM / BENEFIT GRID (reusable, 6 or 3 items) ---------- */
.problem-head, .benefit-head { max-width: 660px; }
.problem-head h2, .benefit-head h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; font-weight: 700; }

.problem-grid, .benefit-grid {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 50px;
}

.problem-item .num, .benefit-item .num, .step-item .num, .trial-item .num {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}
.section-light .problem-item .num,
.section-light .benefit-item .num,
.section-light .step-item .num,
.section-light .trial-item .num { color: var(--accent-strong); }

.problem-item h3, .benefit-item h3 {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 13px;
  line-height: 1.3;
}
.problem-item p, .benefit-item p {
  font-size: 15px;
  max-width: 320px;
}
.section-dark .problem-item p, .section-dark .benefit-item p { color: var(--paper-70); }
.section-light .problem-item p, .section-light .benefit-item p { color: var(--ink-70); }

/* ---------- MANIFESTO ---------- */
.manifesto-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.manifesto-text {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.5;
  font-weight: 500;
  margin-top: 10px;
}
.manifesto-signoff {
  margin-top: 24px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
}
.section-dark .manifesto-signoff { color: var(--paper-70); }
.section-light .manifesto-signoff { color: var(--ink-50); }

/* ---------- SERVICE CARDS (homepage, 4 kartu) ---------- */
.services-head { max-width: 680px; }
.services-head h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; font-weight: 700; }

.service-grid {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
}
.service-card {
  background: var(--paper);
  padding: 36px 26px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.service-card:last-child { border-right: none; }

.service-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
  padding: 5px 10px;
  margin-bottom: 20px;
}

.service-card h3 { font-size: 19px; letter-spacing: 0.01em; font-weight: 600; margin-bottom: 10px; }
.service-card .tagline { font-size: 13.5px; color: var(--ink-70); margin-bottom: 20px; line-height: 1.55; }

.service-card ul { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }
.service-card li {
  font-size: 12.5px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink);
}
.service-card li::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}

.service-cta-row {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-cta-row .btn, .service-cta-row .btn-outline {
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 11.5px;
}

/* ---------- WHY SAINT ---------- */
.why-head { max-width: 680px; }
.why-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; font-weight: 700; }

.why-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-12);
  border: 1px solid var(--paper-30);
}
.why-card { background: var(--ink); padding: 32px 26px; }
.why-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--accent); }
.why-card p { font-size: 13.5px; color: var(--paper-70); line-height: 1.6; }

.section-light .why-grid { background: var(--ink-12); border-color: var(--ink-12); }
.section-light .why-card { background: var(--paper); }
.section-light .why-card h3 { color: var(--accent-strong); }
.section-light .why-card p { color: var(--ink-70); }

/* ---------- CALCULATOR ---------- */
.calc-wrap {
  margin-top: 60px;
  border: 1px solid var(--ink);
  padding: 44px 40px;
  background: var(--paper);
}
.calc-intro { max-width: 560px; }
.calc-intro h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.calc-intro p { font-size: 14px; color: var(--ink-70); }

.calc-questions { margin-top: 40px; display: flex; flex-direction: column; gap: 30px; }
.calc-q-label { font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.calc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-pill {
  border: 1px solid var(--ink-30);
  background: transparent;
  color: var(--ink);
  padding: 12px 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  min-height: 44px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.calc-pill:hover { border-color: var(--ink); }
.calc-pill.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.calc-result {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--ink-12);
  display: none;
}
.calc-result.visible { display: block; }
.calc-result-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 16px;
}
.calc-result-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.calc-result-card {
  border: 1px solid var(--ink-12);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-result-card h4 { font-size: 16px; font-weight: 600; }
.calc-result-card p { font-size: 13px; color: var(--ink-70); line-height: 1.55; flex: 1; }
.calc-result-card .btn-sm, .calc-result-card .btn-outline { align-self: flex-start; }
.calc-empty { font-size: 13.5px; color: var(--ink-50); }

/* ---------- STEPS / CARA KERJA (reusable) ---------- */
.steps-head { max-width: 640px; }
.steps-head h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; font-weight: 700; }

.steps-grid {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 46px 40px;
}
.step-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; line-height: 1.3; }
.step-item p { font-size: 14px; }
.section-dark .step-item p { color: var(--paper-70); }
.section-light .step-item p { color: var(--ink-70); }

/* ---------- DEMO (front-desk.html) ---------- */
.demo-head { text-align: center; max-width: 620px; margin: 0 auto; }
.demo-head h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; }
.demo-head p { margin-top: 18px; font-size: 15px; color: var(--ink-70); }

.demo-tabs {
  margin: 52px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--ink);
}
.demo-tab {
  padding: 13px 20px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: none;
  border-right: 1px solid var(--ink);
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 44px;
}
.demo-tab:last-child { border-right: none; }
.demo-tab:hover:not(.active) { background: var(--ink-06); }
.demo-tab.active { background: var(--ink); color: var(--paper); }

.demo-wrap { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }

.phone {
  width: 340px;
  height: 640px;
  background: var(--ink);
  padding: 10px;
  position: relative;
  max-width: 100%;
}
.phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 18px;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  z-index: 5;
}
.phone-screen { width: 100%; height: 100%; background: #E9E4DA; display: flex; flex-direction: column; overflow: hidden; }
.phone-statusbar {
  height: 26px; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; font-size: 11px; letter-spacing: 0.02em; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.phone-statusbar-icons { display: flex; align-items: center; opacity: 0.85; }
.chat-header { background: #075E54; padding: 16px 16px 14px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.chat-avatar {
  width: 36px; height: 36px; background: var(--paper); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 15px; border-radius: 50%; flex-shrink: 0;
}
.chat-name { color: var(--paper); font-size: 14px; font-weight: 500; }
.chat-status { color: rgba(245,244,240,0.7); font-size: 11px; margin-top: 2px; }

.chat-body { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }

.bubble-row { display: flex; flex-direction: column; max-width: 84%; }
.bubble-row.human { align-self: flex-end; align-items: flex-end; }
.bubble-row.saint { align-self: flex-start; align-items: flex-start; }

.bubble-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(10,10,10,0.5); margin-bottom: 3px; margin-left: 4px; }

.bubble { padding: 9px 12px; font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(8px); animation: bubbleIn 0.45s ease forwards; }
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }
.bubble-row.human .bubble { background: #DCF8C6; color: var(--ink); border-radius: 8px 0 8px 8px; }
.bubble-row.saint .bubble { background: #FFFFFF; color: var(--ink); border-radius: 0 8px 8px 8px; }
.bubble-time { display: block; text-align: right; font-size: 9px; color: rgba(10,10,10,0.3); margin-top: 4px; }

.bubble-tag {
  margin-top: 5px; margin-left: 4px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(10,10,10,0.75); border: 1px solid var(--accent-line); background: var(--accent-soft);
  opacity: 0; transform: translateY(4px); animation: bubbleIn 0.4s ease forwards; animation-delay: 0.15s;
}
.bubble-tag::before { content: ""; width: 4px; height: 4px; background: var(--accent-strong); border-radius: 50%; flex-shrink: 0; }

.typing-row { align-self: flex-start; }
.typing-bubble { background: #fff; padding: 12px 14px; border-radius: 0 8px 8px 8px; display: flex; gap: 4px; }
.typing-bubble span { width: 6px; height: 6px; background: rgba(10,10,10,0.35); border-radius: 50%; animation: typingBlink 1.3s infinite ease-in-out; }
.typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.chat-input-bar { flex-shrink: 0; background: #F0EDE6; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(10,10,10,0.08); }
.chat-input-fake { flex: 1; background: #fff; border-radius: 20px; padding: 9px 14px; font-size: 12px; color: rgba(10,10,10,0.3); }
.chat-send { width: 32px; height: 32px; background: #075E54; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-send svg { width: 14px; height: 14px; }

.demo-controls { margin-top: 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
#demoNextBtn:disabled { opacity: 0.3; cursor: not-allowed; }
.demo-restart { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); background: none; border: none; min-height: 44px; padding: 4px 6px; }
.demo-restart:hover { color: var(--ink); }

.demo-progress { margin-top: 20px; display: flex; gap: 6px; justify-content: center; }
.demo-progress span { width: 20px; height: 3px; background: var(--ink-12); transition: background 0.3s ease; }
.demo-progress span.done { background: var(--accent); }

.powered-by { margin-top: 22px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-30); }
.live-counter {
  margin-top: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-strong); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 7px; justify-content: center;
}
.live-counter::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }

/* ---------- PERBANDINGAN (manual vs Saint) ---------- */
.compare-head { max-width: 640px; }
.compare-head h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; font-weight: 700; }

.compare-wrap { margin-top: 66px; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { text-align: left; padding: 18px 22px; border: 1px solid var(--paper-30); font-size: 14px; vertical-align: top; }
.compare-table thead th { font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.03em; font-weight: 500; }
.compare-table tbody th { font-size: 13px; color: var(--paper-70); font-weight: 400; white-space: nowrap; }
.compare-table tbody td:first-child { color: var(--paper-70); }
.compare-table tbody td:last-child { color: var(--paper); }

.section-light .compare-table th, .section-light .compare-table td { border-color: var(--ink-12); }
.section-light .compare-table tbody th { color: var(--ink-50); }
.section-light .compare-table tbody td:first-child { color: var(--ink-50); }
.section-light .compare-table tbody td:last-child { color: var(--ink); font-weight: 400; }

/* ---------- TRIAL / RISK REVERSAL ---------- */
.trial-head { max-width: 640px; }
.trial-head h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; font-weight: 700; }

.trial-grid { margin-top: 66px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.trial-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.trial-item p { font-size: 13.5px; color: var(--ink-70); }

.trial-cta { margin-top: 60px; text-align: center; }
.trial-cta p { margin-top: 16px; font-size: 12px; color: var(--ink-50); }

/* ---------- PROCESS FLOW (website-builder / automation, arrow-style) ---------- */
.flow-strip {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-12);
  border-bottom: 1px solid var(--ink-12);
}
.flow-step {
  padding: 30px 20px;
  border-right: 1px solid var(--ink-12);
  position: relative;
}
.flow-step:last-child { border-right: none; }
.flow-step .flow-num {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--accent-strong);
  display: block;
  margin-bottom: 14px;
}
.flow-step h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.flow-step p { font-size: 12.5px; color: var(--ink-70); line-height: 1.55; }

/* ---------- SHOWCASE NOTE (website builder / studio, catatan kecil di bawah section) ---------- */
.showcase-note { margin-top: 26px; font-size: 13px; color: var(--ink-50); max-width: 620px; }
.showcase-note a { color: var(--accent-strong); border-bottom: 1px solid var(--accent-line); }

.self-showcase {
  margin-top: 60px;
  border: 1px solid var(--ink);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.self-showcase .eyebrow { margin-bottom: 6px; }
.self-showcase p { font-size: 15px; max-width: 640px; color: var(--ink-70); }
.self-showcase p strong { color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-head { max-width: 640px; }
.faq-head h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; font-weight: 700; }

.faq-list { margin-top: 56px; max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--ink-12); padding: 26px 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 400; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { font-size: 20px; font-weight: 300; transition: transform 0.3s ease; flex-shrink: 0; color: var(--accent-strong); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { margin-top: 16px; font-size: 14px; color: var(--ink-70); max-width: 640px; line-height: 1.65; }

/* ---------- CTA PENUTUP (dark, bookend di tiap halaman) ---------- */
.cta-final { text-align: center; }
.cta-final-inner { max-width: 620px; margin: 0 auto; }
.cta-final h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.2; }
.cta-final p { margin-top: 16px; font-size: 15px; color: var(--paper-70); }
.cta-final-actions { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta-final-note { margin-top: 20px; font-size: 12px; color: var(--paper-50); }

/* ---------- FOOTER ---------- */
footer { background: var(--paper); padding: 80px 6vw 46px; text-align: center; border-top: 1px solid var(--ink-12); }
.footer-logo { font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; }
.footer-tagline { margin-top: 14px; font-size: 13px; color: var(--ink-50); letter-spacing: 0.04em; }
.footer-links { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.footer-links a {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70);
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease;
}
.footer-links a:hover { color: var(--ink); border-color: var(--accent); }
.footer-copy { margin-top: 40px; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-30); }

/* ---------- FLOATING WHATSAPP BUTTON ----------
   Pakai Font Awesome (fa-brands fa-whatsapp) — icon library battle-tested,
   dijamin render sempurna, bukan hand-coded SVG lagi. Warna hijau/putih
   WhatsApp standar (#25D366), satu-satunya tempat di situs yang boleh
   pakai warna brand pihak ketiga apa adanya, bukan warna aksen Saint. */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 200;
  transition: transform 0.25s ease; box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(20,21,28,0.28);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float i { color: #fff; font-size: 30px; line-height: 1; }

.wa-icon-inline {
  color: #25D366; font-size: 16px; margin-right: 8px; vertical-align: -1px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 900px) {
  .why-ai-grid { grid-template-columns: 1fr; gap: 44px; }
  .problem-grid, .benefit-grid, .trial-grid { grid-template-columns: 1fr; gap: 44px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr; border: 1px solid var(--ink); }
  .service-card { border-right: none; border-bottom: 1px solid var(--ink); }
  .service-card:last-child { border-bottom: none; }
  .flow-strip { grid-template-columns: repeat(2, 1fr); }
  .flow-step { border-bottom: 1px solid var(--ink-12); }
  .flow-step:nth-child(2n) { border-right: none; }
  .calc-result-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  section { padding: 76px 0; }
  .hero { padding: 118px 6vw 60px; min-height: 88vh; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn, .hero-ctas .btn-outline, .hero-ctas .btn-accent { width: 100%; text-align: center; }
  .scroll-cue { margin-top: 36px; }

  .manifesto-text { font-size: 22px; }

  .steps-grid, .why-grid, .flow-strip { grid-template-columns: 1fr; }
  .flow-step { border-right: none; }

  .phone { width: 100%; max-width: 320px; height: 580px; }
  .demo-tabs { width: 100%; }
  .demo-tab { flex: 1 1 46%; padding: 12px 8px; font-size: 10px; }

  .calc-wrap { padding: 30px 22px; }
  .calc-pills { flex-direction: column; }
  .calc-pill { width: 100%; text-align: center; }

  .self-showcase { padding: 30px 24px; }

  .cta-final-actions { flex-direction: column; width: 100%; }
  .cta-final-actions .btn, .cta-final-actions .btn-accent, .cta-final-actions .btn-outline-light { width: 100%; text-align: center; }

  .demo-controls { flex-direction: column; gap: 14px; }

  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float i { font-size: 27px; }

  .faq-item summary { font-size: 15px; }
}

@media (max-width: 400px) {
  .hero-title { letter-spacing: -0.015em; }
  .service-card, .why-card { padding: 28px 20px; }
  .calc-pill { padding: 12px 16px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fade { animation: none; opacity: 1; }
  .bubble, .bubble-tag { animation: none; opacity: 1; transform: none; }
  .scroll-cue .line::after { animation: none; display: none; }
  .typing-bubble span { animation: none; opacity: 1; }
}