:root {
  --primary: #243B4A;
  --primary-light: #3A6080;
  --accent: #D8714E;
  --accent-hover: #C4613E;
  --accent-soft: #FEF3EF;
  --warm: #BE915A;
  --wa-green: #25D366;
  --bg: #FEFCF9;
  --bg-warm: #FAF5EF;
  --surface: #FFFFFF;
  --text: #2C2C2A;
  --text-sec: #5E5D58;
  --text-muted: #9B9890;
  --border: #EDE8E0;
  --border-light: #F5F1EA;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 4px 20px rgba(0,0,0,0.05);
  --max-w: 1080px;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.75; font-size:16px; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* ── Header ── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(254,252,249,0.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(237,232,224,0.6);
  transition:transform .3s;
}
.header-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 28px;
  height:72px; display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-img { width:52px; height:52px; object-fit:contain; }
.logo-text { display:flex; flex-direction:column; }
.logo-name { font-weight:800; font-size:15px; color:var(--primary); letter-spacing:-0.3px; }
.logo-tagline { font-size:10px; color:var(--text-muted); letter-spacing:1.2px; text-transform:uppercase; font-weight:500; }
.nav-desktop { display:flex; align-items:center; gap:28px; }
.nav-desktop a { font-size:14px; font-weight:600; color:var(--text-sec); transition:color .2s; }
.nav-desktop a:hover { color:var(--primary); }
.nav-desktop a.active { color:var(--accent); }
.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--wa-green); color:white !important; padding:8px 18px;
  border-radius:100px; font-size:13px !important; font-weight:700;
  transition:all .2s;
}
.nav-cta:hover { background:#20BD5A; transform:translateY(-1px); }
.nav-cta svg { width:16px; height:16px; }
.hamburger {
  display:none; background:none; border:none; cursor:pointer;
  width:32px; height:24px; position:relative;
}
.hamburger span {
  display:block; width:100%; height:2px; background:var(--primary);
  position:absolute; left:0; transition:all .25s;
}
.hamburger span:nth-child(1) { top:0; }
.hamburger span:nth-child(2) { top:50%; transform:translateY(-50%); }
.hamburger span:nth-child(3) { bottom:0; }
@media(max-width:768px) {
  .nav-desktop { display:none; }
  .hamburger { display:block; }
}
.mobile-nav {
  position:fixed; top:72px; left:0; right:0; z-index:99;
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:16px 28px; display:flex; flex-direction:column; gap:8px;
  transform:translateY(-120%); transition:transform .3s; opacity:0;
}
.mobile-nav.active { transform:translateY(0); opacity:1; }
.mobile-nav a {
  font-size:15px; font-weight:600; color:var(--text-sec); padding:10px 0;
  border-bottom:1px solid var(--border-light);
}
.mobile-nav a.active { color:var(--accent); }

/* ── Page Hero ── */
.page-hero {
  padding:140px 0 60px; text-align:center;
  background:#243B4A; color:#FEFCF9;
}
.page-hero h1 {
  font-family:var(--font-serif); font-size:clamp(28px,5vw,42px);
  color:#FEFCF9; line-height:1.25; margin-bottom:12px;
}
.page-hero p { font-size:16px; color:rgba(254,252,249,0.8); max-width:520px; margin:0 auto; }

/* ── Problem Table ── */
.problem-section { padding:48px 0 64px; }
.problem-section h2 {
  font-family:var(--font-serif); font-size:24px; color:var(--primary);
  margin-bottom:8px;
}
.problem-section > .container > p { font-size:15px; color:var(--text-sec); margin-bottom:32px; max-width:640px; }
.problem-table { width:100%; border-collapse:collapse; border-radius:var(--radius-lg); overflow:hidden; }
.problem-table thead th {
  padding:16px 20px; font-size:14px; font-weight:700; text-align:left;
}
.problem-table thead th:first-child { background:var(--text-sec); color:white; }
.problem-table thead th:last-child { background:var(--accent); color:white; }
.problem-table tbody td {
  padding:14px 20px; font-size:14px; color:var(--text-sec);
  border-bottom:1px solid var(--border-light); vertical-align:top;
}
.problem-table tbody td:first-child { color:var(--text); font-weight:500; }
.problem-table tbody tr:last-child td { border-bottom:none; }
.problem-table tbody tr:nth-child(even) { background:var(--bg-warm); }
@media(max-width:600px) {
  .problem-table { font-size:13px; }
  .problem-table thead th, .problem-table tbody td { padding:10px 12px; }
}

/* ── Keunggulan Cards ── */
.keunggulan-section { padding:0 0 64px; }
.keunggulan-section h2 {
  font-family:var(--font-serif); font-size:24px; color:var(--primary);
  margin-bottom:32px;
}
.keunggulan-cards { display:flex; flex-direction:column; gap:20px; }
.keunggulan-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
  display:flex; gap:24px; align-items:flex-start;
}
.keunggulan-icon {
  width:52px; height:52px; min-width:52px; border-radius:14px;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.keunggulan-icon svg { width:26px; height:26px; color:var(--accent); }
.keunggulan-card h3 { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.keunggulan-card p { font-size:15px; color:var(--text-sec); line-height:1.8; }
@media(max-width:480px) {
  .keunggulan-card { flex-direction:column; padding:24px; }
}

/* ── Founder Section ── */
.founder-section { padding:0 0 64px; }
.founder-section h2 {
  font-family:var(--font-serif); font-size:24px; color:var(--primary);
  margin-bottom:32px;
}
.founder-grid {
  display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start;
}
@media(max-width:768px) { .founder-grid { grid-template-columns:1fr; gap:32px; } }
.founder-photo {
  width:100%; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-warm); display:flex; align-items:center; justify-content:center;
}
.founder-photo img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.founder-name { font-family:var(--font-serif); font-size:24px; color:var(--primary); text-align:center; }
.founder-role { font-size:14px; color:var(--text-muted); text-align:center; margin-bottom:16px; }
.founder-creds { display:flex; flex-direction:column; gap:6px; }
.founder-creds span {
  font-size:13px; color:var(--text-sec); padding-left:16px; position:relative;
}
.founder-creds span::before {
  content:''; position:absolute; left:0; top:7px;
  width:6px; height:6px; background:var(--accent); border-radius:50%;
}
.founder-message {
  background:var(--bg-warm); border-radius:var(--radius-lg); padding:28px;
  position:relative; margin-top:0;
}
.founder-message p { margin-bottom:20px; font-size:15px; color:var(--text-sec); line-height:1.8; }
.founder-message p:last-child { margin-bottom:0; }
.founder-sig { font-weight:700; color:var(--primary); font-size:15px; margin-top:16px; }

/* ── CTA ── */
.guide-cta {
  text-align:center; padding:60px 28px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius:var(--radius-lg); color:white; margin-bottom:80px;
}
.guide-cta h2 { font-family:var(--font-serif); font-size:24px; margin-bottom:8px; }
.guide-cta p { font-size:15px; opacity:.8; margin-bottom:24px; }
.btn-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wa-green); color:white; padding:14px 32px;
  border-radius:100px; font-weight:700; font-size:15px; transition:all .2s;
}
.btn-wa:hover { background:#20BD5A; transform:translateY(-2px); }

/* ── Floating WA ── */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:60px; height:60px; background:var(--wa-green); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.3); transition:all .25s;
}
.wa-float:hover { transform:scale(1.06); }
.wa-float svg { width:28px; height:28px; color:white; }

/* ── Back to Top ── */
.back-to-top {
  position:fixed; bottom:96px; right:28px; z-index:89;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(36,59,74,0.5); color:white;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s, visibility .3s, transform .3s, background .2s;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover, .back-to-top:active { background:rgba(36,59,74,1); }
.back-to-top svg { width:18px; height:18px; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media(max-width:480px) {
  .wa-float { bottom:16px; right:16px; width:52px; height:52px; }
  .wa-float svg { width:24px; height:24px; }
  .back-to-top { bottom:78px; right:20px; width:38px; height:38px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ── Common keyframes ── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes pageEnter { from { opacity:0; } to { opacity:1; } }

/* ── Page enter ── */
body { animation: pageEnter 0.5s ease; }

/* ── Scroll progress bar ── */
.scroll-progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,#D8714E,#BE915A); z-index:10001; width:0%; transition:width 0.05s linear; pointer-events:none; }

/* ── Section backgrounds ── */
.section-light { background:#FEFCF9; }
.section-warm { background:#F0EBE3; }
.section-dark { background:#243B4A; color:#FEFCF9; }
.section-dark h2, .section-dark h3, .section-dark p { color:#FEFCF9; }

/* ── Wave divider ── */
.wave-divider { position:relative; width:100%; overflow:hidden; line-height:0; margin-top:-1px; }
.wave-divider svg { display:block; width:100%; height:50px; }
@media (min-width:768px) { .wave-divider svg { height:70px; } }

/* ── Card elevation ── */
.card-elevated {
  background:#FFFFFF; border-radius:16px;
  box-shadow:0 4px 6px rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.08);
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s cubic-bezier(0.23,1,0.32,1);
}
.card-elevated:hover, .card-elevated:active {
  transform:translateY(-6px);
  box-shadow:0 8px 12px rgba(0,0,0,0.06), 0 20px 40px rgba(0,0,0,0.14);
}

/* ── Title decoration ── */
.section-title-decorated { position:relative; display:inline-block; padding-bottom:12px; }
.section-title-decorated::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:3px; background:#D8714E; border-radius:2px; transition:width 0.6s cubic-bezier(0.23,1,0.32,1); }
.section-title-decorated.visible::after { width:60px; }

/* ── Guide keunggulan animations (B9) ── */
.keunggulan-card { opacity:0; transform:translateY(30px); transition:all 0.5s ease; }
.keunggulan-card.visible { opacity:1; transform:translateY(0); }
.keunggulan-card:nth-child(1) { transition-delay:0s; }
.keunggulan-card:nth-child(2) { transition-delay:0.1s; }
.keunggulan-card:nth-child(3) { transition-delay:0.2s; }
.keunggulan-card:nth-child(4) { transition-delay:0.3s; }
.keunggulan-card:nth-child(5) { transition-delay:0.4s; }
.keunggulan-card:nth-child(6) { transition-delay:0.5s; }

/* ── Founder section animation ── */
.founder-photo { overflow:hidden; border-radius:16px; }
.founder-photo img { transform:scale(1.08); transition:transform 1.2s cubic-bezier(0.23,1,0.32,1); }
.founder-section.visible .founder-photo img { transform:scale(1); }
.founder-message { opacity:0; transform:translateY(20px); transition:all 0.8s ease 0.3s; }
.founder-section.visible .founder-message { opacity:1; transform:translateY(0); }

/* ===== block ===== */

@media(max-width:768px) {
      footer .container > div:first-child { grid-template-columns:1fr !important; gap:32px !important; }
    }
  
/* wa-glow injected by scripts_add_wa_glow.py */
.wa-glow{
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4), 0 0 30px rgba(37, 211, 102, 0.2);
  transition: box-shadow 0.3s ease;
}
.wa-glow:hover{
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.6), 0 0 40px rgba(37, 211, 102, 0.3);
}