: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; }

/* ── System Explanation ── */
.system-section { padding:48px 0 80px; }
.system-intro { margin-bottom:48px; }
.system-intro h2 {
  font-family:var(--font-serif); font-size:24px; color:var(--primary);
  margin-bottom:8px;
}
.system-intro p { font-size:15px; color:var(--text-sec); line-height:1.8; max-width:680px; }

.system-items { display:flex; flex-direction:column; gap:32px; margin-bottom:64px; }
.system-item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; display:flex; gap:24px; align-items:flex-start;
}
.system-item-icon {
  width:48px; height:48px; min-width:48px; border-radius:12px;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center;
}
.system-item-icon svg { width:24px; height:24px; color:var(--accent); }
.system-item h3 { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.system-item p { font-size:15px; color:var(--text-sec); line-height:1.8; }
@media(max-width:480px) {
  .system-item { flex-direction:column; padding:24px; }
}

/* ── Stakeholder Diagram ── */
.diagram-section { margin-bottom:64px; }
.diagram-section h2 {
  font-family:var(--font-serif); font-size:22px; color:var(--primary);
  text-align:center; margin-bottom:32px;
}
.diagram {
  display:flex; flex-direction:column; align-items:center; gap:0;
  max-width:360px; margin:0 auto;
}
.diagram-node {
  background:var(--surface); border:2px solid var(--accent);
  border-radius:var(--radius); padding:16px 32px; text-align:center;
  width:100%; max-width:320px;
}
.diagram-node h4 { font-size:15px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.diagram-node p { font-size:13px; color:var(--text-sec); }
.diagram-node.highlight { background:var(--accent); border-color:var(--accent); }
.diagram-node.highlight h4, .diagram-node.highlight p { color:white; }
.diagram-arrow {
  display:flex; align-items:center; justify-content:center;
  height:40px; color:var(--accent);
}
.diagram-arrow svg { width:24px; height:24px; }

/* ── Visa Section ── */
.visa-section { margin-bottom:64px; }
.visa-section h2 {
  font-family:var(--font-serif); font-size:22px; color:var(--primary);
  margin-bottom:24px;
}
.visa-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.visa-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
}
.visa-card h3 { font-size:17px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.visa-card p { font-size:14px; color:var(--text-sec); line-height:1.8; }

/* ── Rights ── */
.rights-section { margin-bottom:64px; }
.rights-section h2 {
  font-family:var(--font-serif); font-size:22px; color:var(--primary);
  margin-bottom:24px;
}
.rights-list { display:flex; flex-direction:column; gap:12px; }
.rights-item {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px;
}
.rights-item svg { width:20px; height:20px; min-width:20px; color:var(--wa-green); }
.rights-item span { font-size:15px; color:var(--text); font-weight:500; }

/* ── Risks ── */
.risks-section { margin-bottom:64px; }
.risks-section h2 {
  font-family:var(--font-serif); font-size:22px; color:var(--primary);
  margin-bottom:12px;
}
.risks-section > p { font-size:15px; color:var(--text-sec); margin-bottom:24px; max-width:680px; }
.risks-list { display:flex; flex-direction:column; gap:12px; }
.risk-item {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--bg-warm); border-radius:var(--radius); padding:16px 20px;
}
.risk-item svg { width:20px; height:20px; min-width:20px; color:var(--warm); margin-top:2px; }
.risk-item div h4 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:4px; }
.risk-item div p { font-size:14px; color:var(--text-sec); line-height:1.7; }

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

/* ── CTA ── */
.system-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;
}
.system-cta h2 { font-family:var(--font-serif); font-size:24px; margin-bottom:8px; }
.system-cta p { font-size:15px; opacity:.8; margin-bottom:24px; }
.system-cta .cta-links { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.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); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:white; padding:14px 32px;
  border-radius:100px; font-weight:700; font-size:15px;
  border:2px solid rgba(255,255,255,0.4); transition:all .2s;
}
.btn-outline:hover { border-color:white; 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; }

/* ── System animations (B15) ── */
.system-item { opacity:0; transform:translateX(-15px); transition:all 0.4s ease; }
.system-item.visible { opacity:1; transform:translateX(0); }
.system-item:nth-child(odd) { transition-delay:0s; }
.system-item:nth-child(even) { transition-delay:0.1s; }
.visa-card { opacity:0; transform:translateY(20px); transition:all 0.5s ease; }
.visa-card.visible { opacity:1; transform:translateY(0); }
.visa-card:nth-child(1) { transition-delay:0s; }
.visa-card:nth-child(2) { transition-delay:0.15s; }
.visa-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.rights-item { opacity:0; transform:translateX(-15px); transition:all 0.4s ease; }
.rights-item.visible { opacity:1; transform:translateX(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);
}