:root {
  --primary: #243B4A;
  --primary-light: #3A6080;
  --accent: #D8714E;
  --accent-hover: #C4613E;
  --accent-soft: #FEF3EF;
  --warm: #BE915A;
  --warm-light: #F7ECIE;
  --wa-green: #25D366;
  --wa-dark: #128C7E;
  --bg: #FEFCF9;
  --bg-warm: #FAF5EF;
  --surface: #FFFFFF;
  --text: #2C2C2A;
  --text-sec: #5E5D58;
  --text-muted: #9B9890;
  --border: #EDE8E0;
  --border-light: #F5F1EA;
  --danger: #B83A2E;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.03);
  --shadow: 0 4px 20px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 48px rgba(0,0,0,0.06);
  --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; }
@media(min-width:768px) {
  body { font-size:18px; }
  .section-title { font-size:clamp(32px,5.2vw,50px); }
  .section-subtitle { font-size:18px; }
  .section-label { font-size:12px; }
  .fact-card p { font-size:17px; }
  .ai-card h3 { font-size:18px; }
  .ai-card p { font-size:16px; }
  .timeline-step h3 { font-size:20px; }
  .timeline-step p { font-size:17px; }
  .check-text h4 { font-size:17px; }
  .check-text p { font-size:16px; }
  .checklist-footer p { font-size:18px; }
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* ── Typography ── */
.section-label {
  font-size:11px; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.section-title {
  font-family:var(--font-serif);
  font-size:clamp(28px,4.8vw,42px);
  line-height:1.25; color:var(--primary); margin-bottom:20px;
  position:relative; display:inline-block; padding-bottom:12px;
}
.section-subtitle {
  font-size:16px; color:var(--text-sec); max-width:580px; line-height:1.8;
}

/* ── 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; line-height:1.2;
}
.logo-name {
  font-family:var(--font-serif); font-size:22px; color:var(--primary);
  white-space:nowrap;
}
.logo-tagline {
  font-family:var(--font-display); font-size:8.5px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--text-muted);
  margin-top:2px;
}
@media(max-width:480px) {
  .logo-name { font-size:17px; }
  .logo-tagline { font-size:8px; letter-spacing:2.5px; }
}
.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(--accent); }
.nav-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--wa-green); color:white!important;
  padding:8px 20px; border-radius:100px;
  font-size:14px; font-weight:700; transition:all .2s;
}
.nav-cta:hover { background:var(--wa-dark); transform:translateY(-1px); }
.nav-cta svg { width:16px; height:16px; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); margin:5px 0; }
.mobile-nav {
  display:none; position:fixed; inset:0; background:var(--bg); z-index:99;
  padding:80px 32px 32px; flex-direction:column;
}
.mobile-nav.active { display:flex; }
.mobile-nav a { display:block; padding:16px 0; font-size:18px; font-weight:600; border-bottom:1px solid var(--border-light); }
.mobile-nav .nav-cta { margin-top:24px; justify-content:center; padding:16px; border-radius:12px; font-size:16px; }
@media(max-width:768px) { .nav-desktop{display:none;} .hamburger{display:block;} }

/* ── Hero ── */
.hero {
  padding:150px 0 110px;
  background:#2A3F50;
  color:white;
  position:relative;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 65% 100%, rgba(216,113,78,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 10%, rgba(190,145,90,0.12) 0%, transparent 45%);
}
/* Subtle organic texture */
.hero::after {
  content:'';
  position:absolute; inset:0;
  opacity:0.025;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 60px 60px, 45px 45px;
}
.hero .container { position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(216,113,78,0.15); border:1px solid rgba(216,113,78,0.3);
  color:#F0C4AD; padding:10px 24px; border-radius:100px;
  font-size:13px; font-weight:600; letter-spacing:.5px; margin-bottom:40px;
}
.hero-badge-dot {
  width:8px; height:8px; background:var(--accent); border-radius:50%;
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.hero h1 {
  font-family:var(--font-serif);
  font-size:clamp(34px,7vw,60px);
  line-height:1.15; margin-bottom:28px; max-width:640px;
}
.hero h1 em {
  font-style:italic; color:var(--accent);
}
.hero-sub {
  font-size:clamp(15px,2.3vw,18px); color:rgba(255,255,255,.6);
  max-width:520px; line-height:1.8; margin-bottom:48px;
}
.hero-sub strong { color:rgba(255,255,255,.9); font-weight:600; }
.hero-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.btn-wa {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa-green); color:white;
  padding:15px 34px; border-radius:14px;
  font-size:16px; font-weight:600; border:none; cursor:pointer;
  transition:all .25s; text-decoration:none;
  box-shadow:0 4px 16px rgba(37,211,102,0.2);
}
.btn-wa:hover { background:var(--wa-dark); transform:translateY(-2px); box-shadow:0 6px 24px rgba(37,211,102,0.25); }
.btn-wa svg { width:22px; height:22px; }
.btn-accent {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:white;
  padding:16px 32px; border-radius:12px;
  font-size:16px; font-weight:700; transition:all .2s;
}
.btn-accent:hover { background:var(--accent-hover); transform:translateY(-2px); }

/* ── Section ── */
.section { padding:96px 0; }
.section-alt { background:var(--bg-warm); }
.section-header { margin-bottom:56px; }

/* ── Accent divider ── */
.accent-line {
  width:36px; height:2px; background:var(--accent); border-radius:2px; margin-bottom:20px; opacity:0.7;
}

/* ── Facts (Section 2) ── */
.facts-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:640px) { .facts-grid{grid-template-columns:1fr;} }
.fact-card {
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); padding:36px;
  transition:all .35s; position:relative; overflow:hidden;
}
.fact-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--warm));
  opacity:0; transition:opacity .35s;
}
.fact-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.fact-card:hover::before { opacity:1; }
.fact-icon {
  width:52px; height:52px;
  background:var(--accent-soft); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); margin-bottom:22px;
}
.fact-icon svg { width:24px; height:24px; }
.fact-card h3 {
  font-family:var(--font-display); font-weight:700; font-size:17px;
  color:var(--primary); margin-bottom:12px;
}
.fact-card p { font-size:15px; color:var(--text-sec); line-height:1.8; }

/* ── Founder (Section 3) ── */
.founder-grid {
  display:grid; grid-template-columns:280px 1fr; gap:52px; align-items:start;
}
@media(max-width:768px) { .founder-grid{grid-template-columns:1fr; gap:32px;} }
.founder-photo {
  width:220px; height:220px; background:var(--bg-warm);
  border-radius:24px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:13px;
  border:2px solid var(--border-light);
}
.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);
  display:flex; align-items:center; gap:8px;
}
.founder-creds span::before {
  content:''; width:6px; height:6px; background:var(--accent);
  border-radius:50%; flex-shrink:0;
}
.founder-message {
  font-family:var(--font-serif); font-size:17px; line-height:2;
  color:var(--text); position:relative; padding-left:32px;
}
.founder-message::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; background:linear-gradient(to bottom, var(--accent), var(--warm), transparent);
  border-radius:2px;
}
.founder-message p { margin-bottom:20px; }
.founder-message p:last-child { margin-bottom:0; }
.founder-sig {
  margin-top:28px; padding-left:32px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent);
}
.video-placeholder {
  margin-top:36px; background:var(--warm-light); border:2px dashed var(--border);
  border-radius:var(--radius-lg); padding:36px; text-align:center;
  color:var(--text-muted); font-size:14px;
}

/* (Job tabs removed — replaced by connection diagram + live feed) */
.btn-wa-sm {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wa-green); color:white; padding:10px 24px;
  border-radius:8px; font-size:14px; font-weight:600; transition:background .2s;
}
.btn-wa-sm:hover { background:var(--wa-dark); }

/* ── AI Cards (Section 5) ── */
.ai-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media(max-width:640px) { .ai-grid{grid-template-columns:1fr;} }
.ai-card {
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius-lg); padding:32px;
}
.ai-card-icon {
  width:48px; height:48px;
  background:linear-gradient(135deg, var(--accent), var(--warm));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:white; margin-bottom:20px;
}
.ai-card-icon svg { width:22px; height:22px; }
.ai-card h3 { font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:10px; color:var(--primary); }
.ai-card p { font-size:15.5px; color:var(--text-sec); line-height:1.75; }
.kpi-axes { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.kpi-axis {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--accent); color:white;
  padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700;
}

/* ── Timeline (Section 6) ── */
.timeline { position:relative; padding-left:48px; }
.timeline-track-bg {
  position:absolute; left:15px; top:0; bottom:0; width:3px;
  background:rgba(36,59,74,0.1); border-radius:2px;
  overflow:hidden;
}
.timeline-track-bg::after {
  content:''; position:absolute; left:0; top:-100%; width:100%; height:60%;
  background:linear-gradient(180deg, transparent, rgba(216,113,78,0.15), rgba(216,113,78,0.05), transparent);
  animation:tlFlowBg 3s linear infinite;
}
@keyframes tlFlowBg { 0%{top:-60%;} 100%{top:100%;} }
.timeline-track-fill {
  position:absolute; left:15px; top:0; width:3px; height:0;
  background:linear-gradient(180deg, #D8714E, #BE915A, #D8714E);
  background-size:100% 300%; border-radius:2px; transition:height 0.18s linear;
  box-shadow:0 0 8px rgba(216,113,78,0.4), 0 0 16px rgba(216,113,78,0.15);
  overflow:hidden;
}
.timeline-track-fill::after {
  content:''; position:absolute; left:-1px; top:-80%; width:5px; height:40%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent);
  animation:tlFlowLight 2s ease-in-out infinite;
}
@keyframes tlFlowLight { 0%{top:-40%;} 100%{top:120%;} }
.timeline-step { position:relative; margin-bottom:44px; opacity:0; transform:translateX(-40px) translateY(10px); transition:opacity 0.7s cubic-bezier(0.23,1,0.32,1), transform 0.7s cubic-bezier(0.23,1,0.32,1); }
.timeline-step.tl-visible { opacity:1; transform:translateX(0) translateY(0); }
.timeline-step:last-child { margin-bottom:0; }
.timeline-dot {
  position:absolute; left:-48px; top:2px;
  width:34px; height:34px; background:rgba(36,59,74,0.15);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:14px; font-weight:700;
  border:3px solid var(--bg);
  transition:all 0.5s cubic-bezier(0.23,1,0.32,1);
  z-index:2;
}
.timeline-dot.tl-active {
  background:var(--accent); color:white;
  transform:scale(1.2);
  box-shadow:0 0 0 6px rgba(216,113,78,0.2), 0 0 20px rgba(216,113,78,0.3);
  animation:tlPulse 2s ease-in-out infinite;
}
.timeline-dot.tl-burst {
  animation:tlBurst 0.6s ease forwards;
}
@keyframes tlBurst {
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(216,113,78,0.4);}
  50%{transform:scale(1.35); box-shadow:0 0 0 16px rgba(216,113,78,0);}
  100%{transform:scale(1.2); box-shadow:0 0 0 6px rgba(216,113,78,0.2);}
}
@keyframes tlPulse {
  0%,100%{box-shadow:0 0 0 6px rgba(216,113,78,0.2), 0 0 20px rgba(216,113,78,0.3);}
  50%{box-shadow:0 0 0 12px rgba(216,113,78,0.08), 0 0 30px rgba(216,113,78,0.15);}
}
.section-alt .timeline-dot { border-color:var(--bg-warm); }
.section-light .timeline-dot { border-color:#FEFCF9; }
.section-warm .timeline-dot { border-color:#F0EBE3; }
.timeline-step h3 { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--primary); margin-bottom:4px; }
.timeline-dur { font-size:13px; color:var(--accent); font-weight:700; margin-bottom:8px; }
.timeline-step p { font-size:16px; color:var(--text-sec); line-height:1.75; }
/* Confetti */
.tl-confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:999; }
.tl-confetti-piece { position:absolute; width:8px; height:8px; border-radius:2px; opacity:0; animation:confettiFall 2.5s ease forwards; }
@keyframes confettiFall {
  0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1);}
  100%{opacity:0;transform:translateY(100vh) rotate(720deg) scale(0.3);}
}

/* ── Checklist (Section 7) ── */
.checklist { display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
.check-item { display:flex; gap:16px; align-items:flex-start; }
.check-icon {
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.check-icon svg { width:14px; height:14px; color:white; }
.check-text h4 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.check-text p { font-size:15.5px; color:var(--text-muted); }
.checklist-footer {
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:white; border-radius:var(--radius-lg); padding:28px 32px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.checklist-footer p { font-size:16px; font-weight:600; }
.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border:2px solid rgba(255,255,255,.3);
  border-radius:8px; color:white; font-weight:600; font-size:14px; transition:all .2s;
}
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:white; }

/* ── FAQ (Section 8) ── */
.faq-list { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.faq-q {
  padding:20px 24px; font-size:16px; font-weight:600; color:var(--text);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  user-select:none;
}
.faq-q:hover { color:var(--accent); }
.faq-chev { width:20px; height:20px; flex-shrink:0; transition:transform .3s; color:var(--text-muted); }
.faq-item.open .faq-chev { transform:rotate(180deg); }
.faq-a { display:none; padding:0 24px 20px; font-size:15px; color:var(--text-sec); line-height:1.8; }
.faq-item.open .faq-a { display:block; }
.faq-a a { color:var(--accent); font-weight:600; }

/* ── CTA Final ── */
.cta-final {
  background:linear-gradient(145deg, #2A3F50 0%, #1A2C3A 100%);
  color:white; padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-final::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 130%, rgba(216,113,78,0.1) 0%, transparent 60%);
}
.cta-final .container { position:relative; z-index:1; }
.cta-final h2 { font-family:var(--font-serif); font-size:clamp(28px,5vw,44px); margin-bottom:18px; }
.cta-final p { font-size:17px; color:rgba(255,255,255,.65); max-width:480px; margin:0 auto 40px; line-height:1.75; }
.cta-contacts { margin-top:20px; font-size:14px; color:rgba(255,255,255,.4); }
.cta-contacts a { color:rgba(255,255,255,.6); text-decoration:underline; }

/* ── Footer ── */
.footer {
  background:#0D1820; color:rgba(255,255,255,.55);
  padding:64px 0 32px; font-size:14px;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media(max-width:768px) { .footer-grid{grid-template-columns:1fr 1fr; gap:32px;} }
@media(max-width:480px) { .footer-grid{grid-template-columns:1fr;} }
.footer h4 {
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px; opacity:.7;
}
.footer-brand p { line-height:1.7; margin-top:12px; }
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:rgba(255,255,255,.55); transition:color .2s; }
.footer-links a:hover { color:white; }
.footer-verify {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05); padding:8px 16px; border-radius:8px;
  font-size:13px; margin-top:16px; color:rgba(255,255,255,.4);
}
.footer-verify a { color:var(--accent); text-decoration:underline; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.25);
}

/* ── 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; cursor:pointer;
}
.wa-float:hover { transform:scale(1.06); box-shadow:0 8px 36px rgba(37,211,102,.35); }
.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;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.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; }
@media(max-width:480px) {
  .back-to-top { bottom:84px; right:20px; width:38px; height:38px; }
  .back-to-top svg { width:16px; height:16px; }
}

/* ── Connection Diagram (SVG) ── */
.conn-svg-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:20px 0; }
.conn-g { opacity:0; transition:opacity .6s ease, transform .6s ease; transform:translateY(10px); }
.conn-g.visible { opacity:1; transform:translateY(0); }
@keyframes dashFlow { to { stroke-dashoffset:-20; } }
.conn-line { animation:dashFlow 1.5s linear infinite; }

/* ── Utils ── */
.btn-text-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:600; color:var(--accent); transition:gap .2s;
}
.btn-text-link:hover { gap:10px; }

/* ── Section Expand (shared mobile pattern) ── */
.section-expand {
  display:none; width:100%; margin-top:16px; padding:14px;
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius); cursor:pointer;
  font-size:14px; font-weight:600; color:var(--accent);
  text-align:center; transition:all .3s ease;
}
.section-expand:hover { background:var(--bg-warm); border-color:var(--accent); }

@media(max-width:768px) {
  /* — Keunggulan compact — */
  .section-expand { display:block; }
  #guide .checklist,
  #guide .checklist-footer { display:none; }
  #guide.section-expanded .checklist { display:flex; flex-direction:column; }
  #guide.section-expanded .checklist-footer { display:flex; }
  #guide.section-expanded .section-expand { display:none; }

  /* — FAQ compact: 3 visible, rest hidden — */
  #faq .faq-list .faq-item:nth-child(n+4) { display:none; }
  #faq.section-expanded .faq-list .faq-item:nth-child(n+4) { display:block; }
  #faq.section-expanded .section-expand { display:none; }
}

/* ── Region Note ── */
.region-note {
  margin-top:32px; padding:24px 28px;
  background:var(--bg-warm); border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
}
.region-note-title {
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:16px;
}
.region-note-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media(max-width:640px) { .region-note-grid { grid-template-columns:1fr; } }
.region-note-item {
  display:flex; flex-direction:column; gap:2px;
}
.region-note-item strong { font-size:14px; color:var(--primary); }
.region-note-item span { font-size:12px; color:var(--text-muted); }
.region-note-disclaimer {
  margin-top:14px; padding-top:12px; border-top:1px solid var(--border-light);
  font-size:12px; color:var(--accent); font-weight:500;
}

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

/* ── Enhanced Animations ── */
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(0.85); transition:opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.stagger-1 { transition-delay:0.1s; }
.stagger-2 { transition-delay:0.2s; }
.stagger-3 { transition-delay:0.3s; }
.stagger-4 { transition-delay:0.4s; }

/* Hero text entrance */
@keyframes heroSlideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroBadgePop { from{opacity:0;transform:scale(0.8) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.hero-badge { animation:heroBadgePop .8s cubic-bezier(0.16,1,0.3,1) .3s both, badgeGlow 2.5s ease-in-out 2s infinite; }
.hero h1 { animation:heroSlideUp .9s cubic-bezier(0.16,1,0.3,1) .5s both; }
.hero-sub { animation:heroSlideUp .9s cubic-bezier(0.16,1,0.3,1) .7s both; }
.hero-actions { animation:heroSlideUp .9s cubic-bezier(0.16,1,0.3,1) .9s both; }

/* Connection diagram enhanced */
@keyframes connNodeAppear { from{opacity:0;transform:translateY(20px) scale(0.9)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes connLineGrow { from{stroke-dashoffset:200} to{stroke-dashoffset:0} }
@keyframes connBadgePop { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
.conn-g { opacity:0; transform:translateY(20px); }
.conn-g.visible { animation:connNodeAppear .7s cubic-bezier(0.16,1,0.3,1) forwards; }

.conn-line { animation:dashFlow 1.5s linear infinite; }

/* Floating counter animation for stats */
@keyframes countPulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* Smooth section dividers */
.section-divider {
  width:100%; height:120px;
  background:linear-gradient(to bottom, var(--bg), var(--bg-warm));
  clip-path:ellipse(80% 100% at 50% 0%);
}

/* Image cards for job sectors */
.sector-card {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  height:280px; cursor:pointer; transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}
.sector-card:hover { transform:scale(1.02); }
.sector-card-link { display:contents; color:inherit; text-decoration:none; }
.sector-card img { width:100%; height:100%; object-fit:cover; }
.sector-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(27,46,63,0.9) 0%, rgba(27,46,63,0.3) 50%, rgba(27,46,63,0.1) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
}
.sector-card-badge {
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
  background:var(--accent); color:white; padding:4px 14px;
  border-radius:100px; font-size:10px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:10px;
}
.sector-card h3 {
  font-family:var(--font-serif); font-size:22px; color:white; margin-bottom:6px;
}
.sector-card p { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.6; }
.sector-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px; }
@media(max-width:640px) { .sector-grid{grid-template-columns:1fr;} }

/* ── Powerful Text Animations ── */
@keyframes heroWordSlide {
  0% { opacity:0; transform:translateY(60px) rotateX(40deg); filter:blur(8px); }
  100% { opacity:1; transform:translateY(0) rotateX(0deg); filter:blur(0); }
}
/* === ヒーロー新アニメ：奥からズームで迫る（パターン1） === */
.hz{display:inline-block;opacity:0;animation:heroZoom 1.3s cubic-bezier(.16,1,.3,1) both;}
.hz-1{animation-delay:.15s;} .hz-2{animation-delay:.40s;} .hz-3{animation-delay:.65s;}
.hz-4{animation-delay:.90s;} .hz-5{animation-delay:1.15s;}
.hz-accent{color:var(--accent);}
@keyframes heroZoom{
  0%{opacity:0;transform:translateZ(-400px) scale(2.2);filter:blur(14px);}
  60%{opacity:1;filter:blur(0);}
  100%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){
  .hz{opacity:1!important;animation:none!important;transform:none!important;filter:none!important;}
}
@keyframes heroWordGlow {
  0%, 100% { text-shadow:0 0 0 transparent; }
  50% { text-shadow:0 0 30px rgba(216,113,78,0.4), 0 0 60px rgba(216,113,78,0.15); }
}
@keyframes ctaTextReveal {
  0% { opacity:0; transform:scale(0.7); letter-spacing:20px; filter:blur(12px); }
  60% { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:scale(1); letter-spacing:normal; filter:blur(0); }
}
@keyframes ctaSubFade {
  0% { opacity:0; transform:translateY(30px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes underlineGrow {
  0% { width:0; }
  100% { width:100%; }
}
@keyframes btnPulseGlow {
  0%, 100% { box-shadow:0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow:0 0 20px 8px rgba(37,211,102,0.2); }
}
.hero-word { display:inline-block; animation:heroWordSlide 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.hero-word-1 { animation-delay:0.5s; }
.hero-word-2 { animation-delay:0.7s; }
.hero-word-3 { animation-delay:0.9s; }
.hero-word-4 { animation-delay:1.1s; }
.hero-word-accent { color:var(--accent); animation:heroWordSlide 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s both, heroWordGlow 3s ease-in-out 2s infinite; }
.cta-final-title { animation:ctaTextReveal 1.2s cubic-bezier(0.16,1,0.3,1) both; }
.cta-final-title.visible { animation:ctaTextReveal 1.2s cubic-bezier(0.16,1,0.3,1) both; }
.cta-final-sub { animation:ctaSubFade 0.8s ease 0.6s both; }
.cta-final-btn { animation:ctaSubFade 0.8s ease 1s both, btnPulseGlow 2.5s ease-in-out 2s infinite; }
.cta-final-contact { animation:ctaSubFade 0.8s ease 1.3s both; }

/* ── Footer Mobile ── */
@media(max-width:768px) {
  footer .container > div:first-child {
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
}
@media(max-width:480px) {
  footer .container > div:first-child {
    gap:28px !important;
  }
}

/* ── Hero Mobile Enhancements ── */
@media(max-width:480px) {
  .hero h1 { font-size:36px !important; }
  .hero-sub { font-size:15px !important; }
  .cta-final h2 { font-size:24px !important; }
}

/* ── Sector Grid Tablet ── */
@media(min-width:641px) and (max-width:1024px) {
  .sector-grid { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── Connection Diagram Desktop/Mobile Toggle ── */
.conn-mobile { display:none; }
@media(max-width:768px) {
  .conn-svg-wrap { display:none; }
  .conn-mobile { display:block; padding:8px 0; }
}

/* ── Connection Mobile Vertical ── */
.conn-v-flow { display:flex; flex-direction:column; align-items:center; gap:0; }
.conn-v-node {
  width:100%; max-width:300px; padding:20px; border-radius:16px;
  text-align:center; position:relative;
}
.conn-v-node-label { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--text-muted); margin-bottom:4px; }
.conn-v-node-title { font-family:var(--font-serif); font-size:20px; color:var(--primary); margin-bottom:4px; }
.conn-v-node-sub { font-size:13px; color:var(--text-sec); }
.conn-v-node--you { background:#fff; border:1px solid #EDE8E0; }
.conn-v-node--lpk { background:var(--primary); color:#fff; }
.conn-v-node--lpk .conn-v-node-label { color:rgba(255,255,255,.5); }
.conn-v-node--lpk .conn-v-node-title { color:#fff; }
.conn-v-node--lpk .conn-v-node-sub { color:rgba(255,255,255,.6); }
.conn-v-node--jp { background:var(--bg-warm); border:1.2px solid var(--accent); }
.conn-v-node--co { background:#fff; border:1.8px solid var(--accent); }
.conn-v-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:11px; font-weight:700; margin-top:8px; }
.conn-v-badge--kontrak { background:var(--accent); color:#fff; }
.conn-v-badge--sm { background:rgba(216,113,78,.15); color:var(--accent); margin:4px 3px 0; }
.conn-v-arrow {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0;
}
.conn-v-arrow-line { width:2px; height:24px; background:var(--accent); }
.conn-v-arrow-label { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:1px; }
.conn-v-arrow-head { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--accent); }
.conn-v-pillars { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; max-width:300px; margin-top:12px; }
.conn-v-pillar {
  background:#fff; border:1px solid #EDE8E0; border-radius:12px; padding:12px 6px; text-align:center;
}
.conn-v-pillar-tag { font-size:8px; font-weight:700; letter-spacing:1px; padding:2px 8px; border-radius:8px; display:inline-block; margin-bottom:6px; }
.conn-v-pillar-tag--mon { background:#E6F0EB; color:#2D6B4A; }
.conn-v-pillar-tag--life { background:#EBF0FA; color:#2A4A7B; }
.conn-v-pillar-tag--law { background:#FAF0E6; color:#8B6B3A; }
.conn-v-pillar-title { font-family:var(--font-serif); font-size:13px; color:var(--primary); }
.conn-v-summary {
  margin-top:16px; padding:12px 20px; background:rgba(36,59,74,.07); border-radius:20px;
  font-size:12px; color:var(--primary); font-weight:500; text-align:center; max-width:300px;
}

/* ── Connection Mobile Animations ── */
.cv-anim {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.cv-anim.cv-visible {
  opacity:1;
  transform:translateY(0);
}
.conn-v-arrow.cv-anim .conn-v-arrow-line {
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}
.conn-v-arrow.cv-anim.cv-visible .conn-v-arrow-line {
  transform:scaleY(1);
}
.conn-v-arrow.cv-anim .conn-v-arrow-head {
  opacity:0;
  transform:scale(0);
  transition:opacity .3s ease .25s, transform .3s cubic-bezier(0.34,1.56,0.64,1) .25s;
}
.conn-v-arrow.cv-anim.cv-visible .conn-v-arrow-head {
  opacity:1;
  transform:scale(1);
}
@keyframes cvPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(216,113,78,0.4); }
  50% { box-shadow:0 0 16px 6px rgba(216,113,78,0.2); }
}
.cv-pulse { animation:cvPulse 2s ease-in-out .6s infinite; }

/* ── WhatsApp Float Mobile ── */
@media(max-width:480px) {
  .wa-float {
    bottom:16px !important;
    right:16px !important;
    width:52px !important;
    height:52px !important;
  }
}

/* ── Mobile Nav Enhancement ── */
@media(max-width:768px) {
  .mobile-nav {
    padding-top:80px !important;
  }
  .mobile-nav a {
    font-size:18px !important;
    padding:14px 0 !important;
  }
}

/* ── Region Note Mobile ── */
@media(max-width:480px) {
  .region-note { padding:16px 20px !important; }
  .region-note-grid { gap:16px !important; }
}

/* ── Smooth Scroll ── */
html { scroll-behavior:smooth; }

/* ── Enhanced Connection Diagram Animations ── */
@keyframes nodeSlam {
  0% { opacity:0; transform:scale(0.3) translateY(-40px); }
  60% { opacity:1; transform:scale(1.15) translateY(5px); }
  80% { transform:scale(0.95) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes arrowShoot {
  0% { stroke-dashoffset:200; opacity:0; }
  30% { opacity:1; }
  100% { stroke-dashoffset:0; opacity:1; }
}
@keyframes badgeStamp {
  0% { opacity:0; transform:scale(2.5) rotate(-15deg); }
  50% { opacity:1; transform:scale(0.9) rotate(3deg); }
  70% { transform:scale(1.05) rotate(-1deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes pillarRise {
  0% { opacity:0; transform:translateY(60px) scale(0.8); }
  60% { opacity:1; transform:translateY(-8px) scale(1.02); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes flowPulse {
  0% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-20; }
}
@keyframes summarySlide {
  0% { opacity:0; transform:translateY(30px); filter:blur(4px); }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ── Hero Mobile: 50vh overlay, text bottom-aligned ── */
@media(max-width:768px) {
  .hero {
    height:50vh !important;
    min-height:50vh !important;
    max-height:50vh !important;
    padding:0 !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .hero::before, .hero::after { display:none; }
  .hero video {
    object-fit:cover !important;
    object-position:center center !important;
  }
  .hero > div:nth-child(2) {
    /* gradient: top clear → bottom dark for readability */
    background:linear-gradient(
      to bottom,
      rgba(36,59,74,0) 0%,
      rgba(36,59,74,0.1) 30%,
      rgba(36,59,74,0.55) 55%,
      rgba(36,59,74,0.85) 100%
    ) !important;
  }
  .hero > div:last-child {
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    height:100% !important;
    position:absolute !important;
    top:0; left:0; right:0; bottom:0;
  }
  .hero .container {
    padding:0 20px 20px !important;
  }
  .hero-badge {
    margin-bottom:10px !important;
    font-size:11px !important;
    padding:6px 16px !important;
  }
  .hero h1 {
    font-size:24px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }
  .hero-sub {
    font-size:12px !important;
    line-height:1.6 !important;
    margin-bottom:16px !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hero-actions {
    gap:12px !important;
  }
  .hero-actions .btn-wa {
    padding:10px 24px !important;
    font-size:14px !important;
  }
}
@media(max-width:480px) {
  .hero h1 {
    font-size:22px !important;
  }
}

/* ── CTA Mobile Fix ── */
@media(max-width:768px) {
  .cta-final {
    background-position:center top !important;
  }
}

/* ══════════════════════════════════════════════════════
   PART A: DESIGN IMPROVEMENTS
   ══════════════════════════════════════════════════════ */

/* A1. Section background alternation */
.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; }
.section-dark .subtitle, .section-dark .section-subtitle { color: rgba(254,252,249,0.7); }
.section-dark .section-label { color: #BE915A; }
.section-dark .accent-line { background: #BE915A; }
.section-dark .section-title { color: #FEFCF9; }
.section-dark .region-note { background:rgba(254,252,249,0.06); border-color:rgba(254,252,249,0.1); }
.section-dark .region-note-title { color:rgba(254,252,249,0.5); }
.section-dark .region-note-item strong { color:#FEFCF9; }
.section-dark .region-note-item span { color:rgba(254,252,249,0.6); }
.section-dark .region-note-disclaimer { color:#BE915A; border-color:rgba(254,252,249,0.1); }
.section-dark .sector-card-overlay { background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); }

/* A2. Wave dividers */
.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; } }

/* A3. 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);
}
.section-dark .card-elevated { background:rgba(254,252,249,0.08); border:1px solid rgba(254,252,249,0.12); box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.section-dark .card-elevated:hover { background:rgba(254,252,249,0.12); box-shadow:0 8px 30px rgba(0,0,0,0.4); }

/* A4. Title decoration */
.section-title::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.visible::after { width:60px; }
.section-dark .section-title::after { background:#BE915A; }

/* ══════════════════════════════════════════════════════
   PART B: ANIMATIONS
   ══════════════════════════════════════════════════════ */

/* B0. Common rules */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
@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); } }

/* B2. 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; }

/* B3. Page transitions */
body { animation: pageEnter 0.5s ease; }
@keyframes pageEnter { from { opacity:0; } to { opacity:1; } }

/* B4. Hero section animations */
.hero-line { display:inline; opacity:0; transform:translateY(20px); animation:fadeInUp 0.7s ease forwards; animation-delay:var(--delay,0s); }
.hero-cta-btn { opacity:0; transform:translateY(20px) scale(0.95); animation:ctaAppear 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 2.2s forwards; }
@keyframes ctaAppear { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes badgeGlow { 0%,100% { box-shadow:0 0 0 0 rgba(216,113,78,0.4); } 50% { box-shadow:0 0 0 10px rgba(216,113,78,0); } }

/* B5. Fact cards stagger - override reveal for fact-cards */
.facts-grid .fact-card { opacity:0; transform:translateY(40px); transition:opacity 0.6s ease, transform 0.6s ease; }
.facts-grid .fact-card.visible { opacity:1; transform:translateY(0); }
.facts-grid .fact-card:nth-child(1) { transition-delay:0s; }
.facts-grid .fact-card:nth-child(2) { transition-delay:0.15s; }
.facts-grid .fact-card:nth-child(3) { transition-delay:0.3s; }
.facts-grid .fact-card:nth-child(4) { transition-delay:0.45s; }

/* B6. Sector cards */
@media (max-width:640px) {
  .sector-grid { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:16px; padding:8px 0 24px; scrollbar-width:none; }
  .sector-grid::-webkit-scrollbar { display:none; }
  .sector-card { flex:0 0 80vw; scroll-snap-align:center; }
}
.sector-card img { transition:transform 0.6s cubic-bezier(0.23,1,0.32,1); }
.sector-card:hover img, .sector-card:active img { transform:scale(1.08); }
.sector-card .sector-card-overlay { transition:transform 0.4s ease; }
.sector-card:hover .sector-card-overlay { transform:translateY(-4px); }

/* B7. AI section */
.ai-section { position:relative; overflow:hidden; }
.ai-particles { position:absolute; inset:0; pointer-events:none; z-index:0; }
@keyframes particleDrift { 0% { transform:translateY(0) translateX(0); opacity:0; } 10% { opacity:0.6; } 90% { opacity:0.6; } 100% { transform:translateY(-80vh) translateX(40px); opacity:0; } }
.ai-grid .ai-card { opacity:0; transform:perspective(600px) rotateY(-10deg) translateX(-20px); transition:all 0.7s cubic-bezier(0.23,1,0.32,1); }
.ai-grid .ai-card.visible { opacity:1; transform:perspective(600px) rotateY(0) translateX(0); }
.ai-grid .ai-card:nth-child(1) { transition-delay:0s; }
.ai-grid .ai-card:nth-child(2) { transition-delay:0.15s; }
.ai-grid .ai-card:nth-child(3) { transition-delay:0.3s; }
.ai-grid .ai-card:nth-child(4) { transition-delay:0.45s; }

/* B8. (Old timeline classes removed — now in Section 6 CSS above) */

/* B9. Keunggulan problem->solution */
.keunggulan-problem { opacity:0; transform:translateX(-25px); transition:all 0.5s ease; }
.keunggulan-solution { opacity:0; transform:translateX(25px); transition:all 0.5s ease 0.25s; }
.keunggulan-row.visible .keunggulan-problem, .keunggulan-row.visible .keunggulan-solution { opacity:1; transform:translateX(0); }

/* B10. Founder section */
.founder-section { position:relative; }
.founder-section::before { content:''; position:absolute; inset:0; opacity:0.025; background-size:150px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23243B4A' stroke-width='0.5'/%3E%3C/svg%3E"); pointer-events:none; }
.founder-quote { opacity:0; clip-path:inset(0 100% 0 0); transition:all 1s ease 0.3s; }
.founder-section.visible .founder-quote { opacity:1; clip-path:inset(0 0% 0 0); }

/* B11. CTA section */
.cta-section { overflow:hidden; position:relative; }
.cta-bg-animate { animation:kenburns 25s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform:scale(1) translate(0,0); } 100% { transform:scale(1.06) translate(-1.5%,-1%); } }
.cta-main-btn { position:relative; animation:btnBreathe 3s ease-in-out infinite; }
@keyframes btnBreathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.02); } }
.cta-main-btn::after { content:''; position:absolute; inset:-3px; border-radius:inherit; border:2px solid rgba(255,255,255,0.25); animation:btnRipple 2.5s ease-out infinite; pointer-events:none; }
@keyframes btnRipple { 0% { transform:scale(1); opacity:0.6; } 100% { transform:scale(1.12); opacity:0; } }
.cta-main-btn:active { transform:scale(0.97) !important; transition:transform 0.1s ease; }

/* === Hero word-fade animation (2026-05-28) === */
.word-fade {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: wordFadeIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: var(--word-delay, 0s);
  will-change: opacity, transform;
}
@keyframes wordFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
.hero-badge-fade {
  opacity: 0;
  animation: heroBadgeFade 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 0s;
}
@keyframes heroBadgeFade {
  to { opacity: 1; }
}
.hero-cta-fade {
  opacity: 0;
  transform: scale(0.96);
  animation: heroCtaFade 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 2.5s;
  will-change: opacity, transform;
}
@keyframes heroCtaFade {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .word-fade,
  .hero-badge-fade,
  .hero-cta-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

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

#notice .nb-bar{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;max-width:900px;margin:0 auto;background:#FBF5EC;border:1px solid rgba(190,145,90,.30);border-left:4px solid #D8714E;border-radius:14px;padding:20px 24px;box-shadow:0 14px 30px -10px rgba(36,59,74,.20);font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
  #notice .nb-ico{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(216,113,78,.40);color:#D8714E;background:rgba(216,113,78,.06);margin-top:2px;}
  #notice .nb-ico svg{width:22px;height:22px;}
  #notice .nb-body{min-width:0;}
  #notice .nb-label{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#BE915A;font-weight:700;margin-bottom:9px;}
  #notice .nb-dotwrap{position:relative;width:9px;height:9px;display:inline-flex;}
  #notice .nb-dot{position:absolute;inset:0;border-radius:50%;background:#D8714E;}
  #notice .nb-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #D8714E;animation:nbRing 1.8s ease-out infinite;}
  #notice .nb-head{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;line-height:1.3;color:#243B4A;margin:0 0 10px;}
  #notice .nb-text{font-size:14.5px;line-height:1.65;color:#3a4d5a;margin:0;}
  #notice .nb-ch{display:inline-block;will-change:transform,opacity;}
  @keyframes nbRing{0%{transform:scale(1);opacity:.55;}100%{transform:scale(2.6);opacity:0;}}
  @media (max-width:600px){#notice .nb-bar{padding:18px 18px;}#notice .nb-head{font-size:19px;}}
  @media (prefers-reduced-motion: reduce){#notice .nb-dot::after{display:none;}}

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

.cn-hidden{opacity:0}.cn-vis{opacity:1}
          @keyframes nodeIn{0%{opacity:0;transform:translateY(30px) scale(0.8)}60%{transform:translateY(-5px) scale(1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
          @keyframes lineGrow{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
          @keyframes arrowHead{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
          @keyframes badgePop{0%{opacity:0;transform:scale(0) translateY(10px)}60%{transform:scale(1.15) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}
          @keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 0px rgba(216,113,78,0))}50%{filter:drop-shadow(0 0 12px rgba(216,113,78,0.4))}}
          @keyframes flowDash{to{stroke-dashoffset:-16}}
          @keyframes pillarSlide{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
          @keyframes summaryFade{0%{opacity:0;transform:scaleX(0.5)}100%{opacity:1;transform:scaleX(1)}}
          .cn-node{animation:nodeIn .7s cubic-bezier(0.34,1.56,0.64,1) both}
          .cn-line{stroke-dasharray:200;animation:lineGrow .6s ease-out both}
          .cn-flow{stroke-dasharray:8 6;animation:flowDash 1s linear infinite}
          .cn-arrow{transform-origin:center;animation:arrowHead .4s cubic-bezier(0.34,1.56,0.64,1) both}
          .cn-badge{transform-origin:center;animation:badgePop .5s cubic-bezier(0.34,1.56,0.64,1) both}
          .cn-glow{animation:glowPulse 2.5s ease-in-out infinite}
          .cn-pillar{animation:pillarSlide .7s cubic-bezier(0.16,1,0.3,1) both}
          .cn-summary{transform-origin:center;animation:summaryFade .8s cubic-bezier(0.16,1,0.3,1) both}
        
/* ── Powerful Text Animations ── */













.cta-final-title.visible { animation:ctaTextReveal 1.2s cubic-bezier(0.16,1,0.3,1) both; }




/* ── Footer Mobile ── */
@media(max-width:768px) {
  footer .container > div:first-child {
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
}
@media(max-width:480px) {
  footer .container > div:first-child {
    gap:28px !important;
  }
}

/* ── Hero Mobile Enhancements ── */
@media(max-width:480px) {
  .hero h1 { font-size:36px !important; }
  .hero-sub { font-size:15px !important; }
  .cta-final h2 { font-size:24px !important; }
}

/* ── Sector Grid Tablet ── */
@media(min-width:641px) and (max-width:1024px) {
  .sector-grid { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── Connection Diagram Desktop/Mobile Toggle ── */
.conn-mobile { display:none; }
@media(max-width:768px) {
  .conn-svg-wrap { display:none; }
  .conn-mobile { display:block; padding:8px 0; }
}

/* ── Connection Mobile Vertical ── */
.conn-v-flow { display:flex; flex-direction:column; align-items:center; gap:0; }
.conn-v-node {
  width:100%; max-width:300px; padding:20px; border-radius:16px;
  text-align:center; position:relative;
}
.conn-v-node-label { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--text-muted); margin-bottom:4px; }
.conn-v-node-title { font-family:var(--font-serif); font-size:20px; color:var(--primary); margin-bottom:4px; }
.conn-v-node-sub { font-size:13px; color:var(--text-sec); }
.conn-v-node--you { background:#fff; border:1px solid #EDE8E0; }
.conn-v-node--lpk { background:var(--primary); color:#fff; }
.conn-v-node--lpk .conn-v-node-label { color:rgba(255,255,255,.5); }
.conn-v-node--lpk .conn-v-node-title { color:#fff; }
.conn-v-node--lpk .conn-v-node-sub { color:rgba(255,255,255,.6); }
.conn-v-node--jp { background:var(--bg-warm); border:1.2px solid var(--accent); }
.conn-v-node--co { background:#fff; border:1.8px solid var(--accent); }
.conn-v-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:11px; font-weight:700; margin-top:8px; }
.conn-v-badge--kontrak { background:var(--accent); color:#fff; }
.conn-v-badge--sm { background:rgba(216,113,78,.15); color:var(--accent); margin:4px 3px 0; }
.conn-v-arrow {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0;
}
.conn-v-arrow-line { width:2px; height:24px; background:var(--accent); }
.conn-v-arrow-label { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:1px; }
.conn-v-arrow-head { width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--accent); }
.conn-v-pillars { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; max-width:300px; margin-top:12px; }
.conn-v-pillar {
  background:#fff; border:1px solid #EDE8E0; border-radius:12px; padding:12px 6px; text-align:center;
}
.conn-v-pillar-tag { font-size:8px; font-weight:700; letter-spacing:1px; padding:2px 8px; border-radius:8px; display:inline-block; margin-bottom:6px; }
.conn-v-pillar-tag--mon { background:#E6F0EB; color:#2D6B4A; }
.conn-v-pillar-tag--life { background:#EBF0FA; color:#2A4A7B; }
.conn-v-pillar-tag--law { background:#FAF0E6; color:#8B6B3A; }
.conn-v-pillar-title { font-family:var(--font-serif); font-size:13px; color:var(--primary); }
.conn-v-summary {
  margin-top:16px; padding:12px 20px; background:rgba(36,59,74,.07); border-radius:20px;
  font-size:12px; color:var(--primary); font-weight:500; text-align:center; max-width:300px;
}

/* ── Connection Mobile Animations ── */
.cv-anim {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.cv-anim.cv-visible {
  opacity:1;
  transform:translateY(0);
}
.conn-v-arrow.cv-anim .conn-v-arrow-line {
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}
.conn-v-arrow.cv-anim.cv-visible .conn-v-arrow-line {
  transform:scaleY(1);
}
.conn-v-arrow.cv-anim .conn-v-arrow-head {
  opacity:0;
  transform:scale(0);
  transition:opacity .3s ease .25s, transform .3s cubic-bezier(0.34,1.56,0.64,1) .25s;
}
.conn-v-arrow.cv-anim.cv-visible .conn-v-arrow-head {
  opacity:1;
  transform:scale(1);
}
@keyframes cvPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(216,113,78,0.4); }
  50% { box-shadow:0 0 16px 6px rgba(216,113,78,0.2); }
}
.cv-pulse { animation:cvPulse 2s ease-in-out .6s infinite; }

/* ── WhatsApp Float Mobile ── */
@media(max-width:480px) {
  .wa-float {
    bottom:16px !important;
    right:16px !important;
    width:52px !important;
    height:52px !important;
  }
}

/* ── Mobile Nav Enhancement ── */
@media(max-width:768px) {
  .mobile-nav {
    padding-top:80px !important;
  }
  .mobile-nav a {
    font-size:18px !important;
    padding:14px 0 !important;
  }
}

/* ── Region Note Mobile ── */
@media(max-width:480px) {
  .region-note { padding:16px 20px !important; }
  .region-note-grid { gap:16px !important; }
}

/* ── Smooth Scroll ── */
html { scroll-behavior:smooth; }

/* ── Enhanced Connection Diagram Animations ── */
@keyframes nodeSlam {
  0% { opacity:0; transform:scale(0.3) translateY(-40px); }
  60% { opacity:1; transform:scale(1.15) translateY(5px); }
  80% { transform:scale(0.95) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes arrowShoot {
  0% { stroke-dashoffset:200; opacity:0; }
  30% { opacity:1; }
  100% { stroke-dashoffset:0; opacity:1; }
}
@keyframes badgeStamp {
  0% { opacity:0; transform:scale(2.5) rotate(-15deg); }
  50% { opacity:1; transform:scale(0.9) rotate(3deg); }
  70% { transform:scale(1.05) rotate(-1deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes pillarRise {
  0% { opacity:0; transform:translateY(60px) scale(0.8); }
  60% { opacity:1; transform:translateY(-8px) scale(1.02); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes flowPulse {
  0% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:-20; }
}
@keyframes summarySlide {
  0% { opacity:0; transform:translateY(30px); filter:blur(4px); }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ── Hero Mobile: 50vh overlay, text bottom-aligned ── */
@media(max-width:768px) {
  .hero {
    height:50vh !important;
    min-height:50vh !important;
    max-height:50vh !important;
    padding:0 !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .hero::before, .hero::after { display:none; }
  .hero video {
    object-fit:cover !important;
    object-position:center center !important;
  }
  .hero > div:nth-child(2) {
    /* gradient: top clear → bottom dark for readability */
    background:linear-gradient(
      to bottom,
      rgba(36,59,74,0) 0%,
      rgba(36,59,74,0.1) 30%,
      rgba(36,59,74,0.55) 55%,
      rgba(36,59,74,0.85) 100%
    ) !important;
  }
  .hero > div:last-child {
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    height:100% !important;
    position:absolute !important;
    top:0; left:0; right:0; bottom:0;
  }
  .hero .container {
    padding:0 20px 20px !important;
  }
  .hero-badge {
    margin-bottom:10px !important;
    font-size:11px !important;
    padding:6px 16px !important;
  }
  .hero h1 {
    font-size:24px !important;
    line-height:1.2 !important;
    margin-bottom:8px !important;
  }
  .hero-sub {
    font-size:12px !important;
    line-height:1.6 !important;
    margin-bottom:16px !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hero-actions {
    gap:12px !important;
  }
  .hero-actions .btn-wa {
    padding:10px 24px !important;
    font-size:14px !important;
  }
}
@media(max-width:480px) {
  .hero h1 {
    font-size:22px !important;
  }
}

/* ── CTA Mobile Fix ── */
@media(max-width:768px) {
  .cta-final {
    background-position:center top !important;
  }
}

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

#connNew{font-family:'Plus Jakarta Sans',system-ui,sans-serif;--cnx-accent:#D8714E;--cnx-warm:#BE915A;margin-top:8px;}
      #connNew .cnx-flow{display:flex;gap:0;align-items:stretch;}
      #connNew .cnx-step{flex:1 1 0;min-width:0;position:relative;background:#F7F0E2;border:1px solid rgba(216,113,78,.22);border-radius:16px;padding:22px 16px 20px;text-align:center;opacity:0;transform:translateY(14px);animation:cnxReveal .55s cubic-bezier(.22,.7,.3,1) forwards;}
      #connNew .cnx-step::before{content:"";position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:0 0 3px 3px;background:var(--cnx-warm);opacity:.85;}
      #connNew .cnx-step.cnx-accent::before{background:var(--cnx-accent);}
      #connNew .cnx-ico{width:48px;height:48px;margin:2px auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(190,145,90,.34);color:#243B4A;}
      #connNew .cnx-step.cnx-accent .cnx-ico{background:var(--cnx-accent);border-color:var(--cnx-accent);color:#fff;}
      #connNew .cnx-ico svg{width:24px;height:24px;}
      #connNew .cnx-kicker{font-size:13px;letter-spacing:.08em;color:var(--cnx-warm);font-weight:700;margin-bottom:7px;}
      #connNew .cnx-step h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;line-height:1.2;margin:0 0 8px;color:#243B4A;}
      #connNew .cnx-step.cnx-accent h3{color:var(--cnx-accent);font-style:italic;}
      #connNew .cnx-step p{font-size:15.5px;line-height:1.6;color:#33485a;margin:0;}
      #connNew .cnx-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;}
      #connNew .cnx-tag{font-size:12.5px;font-weight:600;color:#7a5a33;background:rgba(190,145,90,.16);border:1px solid rgba(190,145,90,.42);border-radius:20px;padding:5px 11px;}
      #connNew .cnx-link{position:relative;flex:0 0 auto;width:54px;align-self:center;height:62px;}
      #connNew .cnx-track,#connNew .cnx-fill{position:absolute;}
      #connNew .cnx-track{top:50%;left:5px;right:5px;height:2px;transform:translateY(-50%);background:rgba(255,255,255,.20);}
      #connNew .cnx-fill{top:50%;left:5px;width:0;height:2px;transform:translateY(-50%);background:var(--cnx-accent);animation:cnxDrawX .55s ease-out forwards;}
      #connNew .cnx-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cnx-accent);opacity:0;top:50%;left:5px;transform:translate(-50%,-50%);animation:cnxRunX 1.5s ease-in-out infinite;}
      #connNew .cnx-dot::before{content:"";position:absolute;border-radius:2px;background:var(--cnx-accent);opacity:.5;right:100%;top:50%;transform:translateY(-50%);width:16px;height:2px;}
      #connNew .cnx-arrow{position:absolute;width:0;height:0;right:1px;top:50%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--cnx-accent);animation:cnxApX 1.5s ease-in-out infinite;}
      @keyframes cnxReveal{to{opacity:1;transform:translateY(0);}}
      @keyframes cnxDrawX{from{width:0;}to{width:calc(100% - 10px);}}
      @keyframes cnxRunX{0%{left:5px;opacity:0;}12%{opacity:1;}85%{opacity:1;}100%{left:calc(100% - 5px);opacity:0;}}
      @keyframes cnxApX{0%,100%{opacity:.5;transform:translateY(-50%) scale(1);}50%{opacity:1;transform:translateY(-50%) scale(1.25);}}
      @keyframes cnxDrawY{from{height:0;}to{height:calc(100% - 6px);}}
      @keyframes cnxRunY{0%{top:3px;opacity:0;}12%{opacity:1;}85%{opacity:1;}100%{top:calc(100% - 3px);opacity:0;}}
      @keyframes cnxApY{0%,100%{opacity:.5;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.25);}}
      @media (max-width:760px){
        #connNew .cnx-flow{flex-direction:column;align-items:stretch;max-width:360px;margin:0 auto;}
        #connNew .cnx-link{width:100%;height:42px;align-self:auto;}
        #connNew .cnx-track{left:50%;top:3px;bottom:3px;right:auto;width:2px;height:auto;transform:translateX(-50%);}
        #connNew .cnx-fill{left:50%;top:3px;right:auto;width:2px;height:0;transform:translateX(-50%);animation:cnxDrawY .55s ease-out forwards;}
        #connNew .cnx-dot{left:50%;top:3px;transform:translate(-50%,-50%);animation:cnxRunY 1.5s ease-in-out infinite;}
        #connNew .cnx-dot::before{right:auto;bottom:100%;left:50%;top:auto;transform:translateX(-50%);height:16px;width:2px;}
        #connNew .cnx-arrow{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%);border-top:8px solid var(--cnx-accent);border-bottom:0;border-left:5px solid transparent;border-right:5px solid transparent;animation:cnxApY 1.5s ease-in-out infinite;}
      }

/* ===== 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);
}