:root {
  --ink: #101419;
  --ink-2: #1a2027;
  --paper: #f5f6f1;
  --card: #ffffff;
  --line: #dfe3da;
  --muted: #667078;
  --lime: #aaff2c;
  --lime-2: #d6ff85;
  --orange: #ff6843;
  --blue: #3564f4;
  --green: #209e64;
  --shadow: 0 28px 70px rgba(16, 20, 25, .12);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
.draft-banner { background: #fff1b8; color: #5a4300; text-align: center; padding: 9px 18px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.site-header { height: 82px; max-width: 1440px; margin: 0 auto; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 13px; background: var(--ink); color: var(--lime); font-weight: 950; letter-spacing: -.06em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .03em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; }
.desktop-nav a { font-size: 14px; font-weight: 650; color: #4f575e; }
.desktop-nav a:hover { color: var(--ink); }
.button { border: 0; min-height: 52px; padding: 0 23px; border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; font-weight: 850; font-size: 14px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--lime); box-shadow: 0 11px 26px rgba(170, 255, 44, .2); }
.button-ghost { border: 1px solid rgba(255,255,255,.22); color: white; background: rgba(255,255,255,.07); backdrop-filter: blur(14px); }
.button-small { min-height: 42px; padding: 0 18px; }
.button-full { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.hero { min-height: 760px; overflow: hidden; position: relative; padding: 95px max(5vw, calc((100vw - 1300px)/2)) 110px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 50px; color: white; background: var(--ink); }
.hero-glow { position: absolute; width: 650px; height: 650px; border-radius: 50%; right: -150px; top: -220px; background: radial-gradient(circle, rgba(170,255,44,.23), transparent 67%); filter: blur(10px); }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #69727a; }
.eyebrow span { width: 26px; height: 3px; border-radius: 999px; background: var(--lime); }
.eyebrow.light { color: #cbd2d6; }
.hero h1 { margin: 26px 0 25px; max-width: 760px; font-size: clamp(58px, 7.1vw, 112px); line-height: .88; letter-spacing: -.075em; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-lead { max-width: 660px; color: #c9d0d5; font-size: 19px; line-height: 1.66; }
.hero-lead strong { color: white; }
.hero-actions { margin-top: 35px; display: flex; gap: 12px; flex-wrap: wrap; }
.trust-line { margin-top: 26px; display: flex; align-items: center; gap: 9px; color: #9ea8ae; font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(170,255,44,.12); }
.hero-visual { min-height: 545px; }
.route-orbit { position: absolute; inset: 30px 0 0 50px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; transform: rotate(-12deg); }
.route-orbit::before, .route-orbit::after { content:""; position: absolute; inset: 52px; border: 1px dashed rgba(170,255,44,.25); border-radius: 50%; }
.route-orbit::after { inset: 115px; border-color: rgba(255,255,255,.07); }
.orbit-dot { position:absolute; width:11px; height:11px; background:var(--lime); border-radius:50%; box-shadow:0 0 0 8px rgba(170,255,44,.1); }
.dot-1 { left: 9%; top: 48%; }.dot-2 { right: 13%; top: 22%; }.dot-3 { right: 23%; bottom: 10%; }
.hero-card { position: absolute; border-radius: 26px; border: 1px solid rgba(255,255,255,.1); background: rgba(27,33,40,.9); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.hero-card-main { width: 330px; padding: 32px; left: 17%; top: 20%; transform: rotate(-3deg); }
.hero-card-main .card-kicker { display:block; color: #aeb7bd; font-size: 11px; font-weight: 850; letter-spacing: .11em; }
.hero-card-main strong { display:block; color:var(--lime); margin-top:12px; font-size:75px; letter-spacing:-.08em; line-height:1; }
.hero-card-main p { margin:13px 0 0; font-size:21px; line-height:1.3; }
.hero-card-distance, .hero-card-days { padding: 22px 24px; min-width: 155px; }
.hero-card-distance { right: 4%; top: 8%; transform: rotate(5deg); }
.hero-card-days { right: 7%; bottom: 13%; transform: rotate(-4deg); }
.hero-card-distance strong, .hero-card-days strong { font-size:41px; letter-spacing:-.07em; }
.hero-card-distance span, .hero-card-days span { margin-left: 5px; color:var(--lime); font-weight:900; }
.hero-card-distance small, .hero-card-days small { display:block; color:#99a3aa; margin-top:5px; }
.route-line { position:absolute; left:10%; bottom:4%; width:72%; height:100px; border-bottom:3px dashed rgba(170,255,44,.4); transform:rotate(-4deg); }
.route-line i { position:absolute; bottom:-8px; width:14px; height:14px; border-radius:50%; background:var(--ink); border:3px solid var(--lime); }
.route-line i:nth-child(1){left:0}.route-line i:nth-child(2){left:33%}.route-line i:nth-child(3){left:66%}.route-line i:nth-child(4){right:0;background:var(--lime)}
.stats-strip { max-width: 1240px; margin: -48px auto 0; position: relative; z-index: 5; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); display:grid; grid-template-columns: repeat(4,1fr); }
.stats-strip article { padding: 16px 30px; border-right:1px solid var(--line); }
.stats-strip article:last-child { border:0; }
.stats-strip strong { display:block; font-size:34px; letter-spacing:-.05em; }
.stats-strip span { display:block; margin-top:4px; color:var(--muted); font-size:13px; }
.section { max-width: 1300px; margin: 0 auto; padding: 125px 5vw; }
.section-heading { max-width: 760px; margin-bottom: 55px; }
.section-heading h2, .final-cta h2, .donation-intro h2 { margin: 17px 0 16px; font-size: clamp(42px, 5vw, 70px); line-height:1.02; letter-spacing:-.06em; }
.section-heading > p:last-child { color:var(--muted); font-size:17px; }
.about-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:start; }
.about-copy p { color:var(--muted); font-size:17px; line-height:1.75; }
.about-copy .large-copy { color:var(--ink); margin-top:0; font-size:25px; line-height:1.5; letter-spacing:-.02em; }
.impact-cards { display:grid; gap:17px; }
.impact-card { padding:30px; background:white; border:1px solid var(--line); border-radius:24px; display:flex; gap:22px; transition: transform .2s ease, box-shadow .2s ease; }
.impact-card:hover { transform:translateY(-4px); box-shadow:0 20px 45px rgba(16,20,25,.08); }
.impact-icon { flex:0 0 64px; width:64px; height:64px; display:grid; place-items:center; border-radius:19px; background:var(--lime-2); font-size:31px; }
.impact-card span { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.13em; }
.impact-card h3 { margin:7px 0; font-size:25px; }
.impact-card p { margin:0; color:var(--muted); line-height:1.55; }
.route-section { max-width:none; background:#ecefe7; }
.route-section > * { max-width:1170px; margin-left:auto; margin-right:auto; }
.route-layout { display:grid; grid-template-columns: 1fr .78fr; gap:70px; align-items:center; }
.route-timeline { position:relative; }
.route-timeline::before { content:""; position:absolute; left:30px; top:42px; bottom:42px; width:2px; background:#cdd3c9; }
.route-day { position:relative; display:flex; gap:25px; padding:0 0 36px; }
.route-day:last-child { padding-bottom:0; }
.day-number { z-index:2; flex:0 0 62px; width:62px; height:62px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:#ecefe7; font-weight:900; }
.route-day.active .day-number, .route-day:last-child .day-number { background:var(--lime); }
.route-day small { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.12em; }
.route-day h3 { margin:5px 0 7px; font-size:24px; }
.route-day p { margin:0; color:var(--muted); line-height:1.55; }
.map-stack { position:relative; min-height:620px; }
.map-card { position:absolute; width:72%; padding:12px; background:white; border-radius:24px; box-shadow:var(--shadow); margin:0; }
.map-card img { width:100%; aspect-ratio:1.3; object-fit:cover; border-radius:15px; }
.map-card figcaption { padding:13px 8px 6px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.map-card figcaption span { font-size:11px; color:var(--muted); font-weight:900; letter-spacing:.12em; }
.map-card figcaption strong { font-size:14px; }
.map-start { left:0; top:0; transform:rotate(-3deg); }
.map-finish { right:0; bottom:0; transform:rotate(3deg); }
.map-arrow { position:absolute; z-index:3; left:47%; top:45%; display:grid; place-items:center; width:65px; height:65px; border-radius:50%; background:var(--lime); font-size:30px; font-weight:900; box-shadow:0 14px 35px rgba(16,20,25,.18); }
.donation-section { max-width:none; padding-left:max(5vw, calc((100vw - 1300px)/2)); padding-right:max(5vw, calc((100vw - 1300px)/2)); background:var(--ink); color:white; }
.donation-shell { display:grid; grid-template-columns:1fr 440px; gap:80px; align-items:center; }
.donation-intro > p { color:#b5bec4; line-height:1.65; font-size:17px; }
.donation-intro > p strong { color:white; }
.progress-panel { margin-top:40px; padding:24px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); }
.progress-top, .progress-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.progress-top span { color:#b9c2c7; }.progress-top strong { color:var(--lime); }
.progress-track { margin:18px 0 12px; height:16px; border-radius:999px; overflow:hidden; background:#343c45; }
.progress-track span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--lime),#dbff8e); transition:width 1s cubic-bezier(.2,.75,.25,1); }
.progress-meta { color:#8f9aa1; font-size:12px; }
.bank-card { padding:30px; color:var(--ink); background:white; border-radius:28px; box-shadow:0 32px 80px rgba(0,0,0,.28); }
.bank-card-header { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.bank-card-header small { color:var(--muted); font-weight:900; letter-spacing:.12em; }
.bank-card h3 { margin:5px 0 0; font-size:24px; }
.verified-badge { border-radius:999px; padding:8px 12px; background:#e8ffd0; color:#307000; font-size:11px; font-weight:900; }
.qr-wrap { margin:24px auto; max-width:270px; padding:12px; border:1px solid var(--line); border-radius:20px; background:#f8f9f5; }
.qr-wrap img { width:100%; border-radius:13px; }
.bank-details { margin:0 0 22px; }
.bank-details > div { display:flex; justify-content:space-between; gap:25px; padding:13px 0; border-bottom:1px solid var(--line); }
.bank-details dt { color:var(--muted); }.bank-details dd { margin:0; font-weight:850; text-align:right; }
.bank-warning { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.transparency-grid { margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.13); }
.transparency-grid article { padding:32px 28px 0 0; }
.transparency-grid span { color:var(--lime); font-weight:900; }
.transparency-grid h3 { margin:12px 0 8px; font-size:21px; }
.transparency-grid p { margin:0; color:#9ba6ac; line-height:1.55; }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.platform-card { min-height:255px; position:relative; padding:30px; border:1px solid var(--line); border-radius:25px; background:white; display:flex; align-items:flex-start; gap:20px; transition:transform .2s ease,box-shadow .2s ease; }
.platform-card:not([aria-disabled="true"]):hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(16,20,25,.08); }
.platform-card[aria-disabled="true"] { cursor:default; }
.platform-logo { flex:0 0 55px; width:55px; height:55px; display:grid; place-items:center; border-radius:17px; color:white; font-size:24px; font-weight:900; }
.platform-logo.tiktok { background:#101419; }.platform-logo.facebook { background:#2176ed; }.platform-logo.youtube { background:#ff0033; }
.platform-card small { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.11em; }
.platform-card h3 { margin:7px 0 10px; font-size:25px; }
.platform-card p { margin:0; color:var(--muted); line-height:1.55; }
.platform-card b { position:absolute; right:24px; top:24px; font-size:20px; }
.faq-section { padding-top:40px; }
.faq-list { max-width:900px; }
details { border-top:1px solid var(--line); }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:25px 42px 25px 0; position:relative; font-size:19px; font-weight:850; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:8px; top:20px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e7eae2; }
details[open] summary::after { content:"−"; background:var(--lime); }
details p { margin:-5px 0 28px; max-width:760px; color:var(--muted); line-height:1.65; }
.final-cta { max-width:1300px; margin:0 auto 100px; padding:65px 70px; display:flex; align-items:end; justify-content:space-between; gap:40px; border-radius:34px; color:white; background:var(--ink); overflow:hidden; position:relative; }
.final-cta::after { content:""; position:absolute; width:400px; height:400px; right:-180px; top:-220px; border:70px solid var(--lime); border-radius:50%; opacity:.18; }
.final-cta h2 { position:relative; z-index:2; margin-bottom:0; font-size:clamp(42px,4.6vw,65px); }
.final-cta .button { position:relative; z-index:2; flex-shrink:0; }
footer { max-width:1300px; margin:0 auto; padding:30px 5vw 115px; display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid var(--line); }
footer p { color:var(--muted); font-size:12px; }
.mobile-donate-bar { display:none; }
.toast { position:fixed; left:50%; bottom:30px; z-index:100; transform:translate(-50%,30px); padding:13px 18px; border-radius:12px; color:white; background:var(--ink); opacity:0; pointer-events:none; transition:.25s ease; box-shadow:var(--shadow); font-size:13px; font-weight:750; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width: 1000px) {
  .desktop-nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-copy { max-width:760px; }
  .hero-visual { max-width:680px; width:100%; margin:0 auto; }
  .stats-strip { margin-left:4vw; margin-right:4vw; grid-template-columns:repeat(2,1fr); }
  .stats-strip article:nth-child(2){border-right:0}.stats-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .about-grid,.route-layout,.donation-shell { grid-template-columns:1fr; }
  .about-grid,.route-layout,.donation-shell { gap:50px; }
  .map-stack { max-width:650px; width:100%; margin:auto; }
  .donation-shell { align-items:start; }.bank-card { max-width:520px; width:100%; }
  .platform-grid { grid-template-columns:1fr; }.platform-card { min-height:0; }
  .final-cta { margin-left:4vw; margin-right:4vw; }
}
@media (max-width: 700px) {
  .draft-banner { font-size:10px; }
  .site-header { height:70px; padding:0 18px; }
  .site-header > .button { display:none; }
  .brand-mark { width:39px; border-radius:11px; }.brand strong{font-size:12px}.brand small{font-size:9px}
  .hero { min-height:auto; padding:70px 20px 85px; }
  .hero h1 { font-size:61px; }.hero-lead{font-size:17px}.hero-actions{display:grid}.hero-actions .button{width:100%}
  .hero-visual { min-height:430px; margin-top:10px; }
  .hero-card-main { width:260px; left:4%; top:21%; padding:26px; }.hero-card-main strong{font-size:60px}.hero-card-main p{font-size:18px}
  .hero-card-distance { right:0; top:4%; }.hero-card-days { right:0; bottom:7%; }
  .route-orbit { left:-15px; right:-60px; }
  .stats-strip { margin-top:-35px; padding:10px; border-radius:20px; }
  .stats-strip article { padding:16px 13px; }.stats-strip strong{font-size:25px}.stats-strip span{font-size:11px}
  .section { padding:90px 20px; }.section-heading { margin-bottom:38px; }
  .section-heading h2,.donation-intro h2 { font-size:44px; }.about-copy .large-copy{font-size:21px}
  .impact-card { padding:23px; }.impact-icon{flex-basis:50px;width:50px;height:50px;border-radius:15px}
  .route-section { padding-left:20px; padding-right:20px; }.route-day { gap:17px }.day-number{flex-basis:52px;width:52px;height:52px}.route-timeline::before{left:25px}
  .map-stack { min-height:470px; }.map-card{width:78%;}.map-arrow{width:52px;height:52px;font-size:23px}
  .donation-section { padding-left:20px; padding-right:20px; }.donation-shell{gap:40px}.bank-card{padding:22px}.qr-wrap{max-width:230px}
  .progress-top,.progress-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .transparency-grid { grid-template-columns:1fr; }.transparency-grid article{padding-top:24px}
  .platform-card { padding:23px; }.platform-logo{flex-basis:48px;width:48px;height:48px}
  .final-cta { margin:0 20px 90px; padding:45px 28px; align-items:flex-start; flex-direction:column; }.final-cta h2{font-size:42px}
  footer { margin:0 20px; padding:28px 0 110px; align-items:flex-start; flex-direction:column; }
  .mobile-donate-bar { position:fixed; display:flex; z-index:80; left:12px; right:12px; bottom:12px; padding:10px 10px 10px 17px; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(255,255,255,.12); border-radius:19px; color:white; background:rgba(16,20,25,.94); backdrop-filter:blur(18px); box-shadow:0 20px 50px rgba(0,0,0,.3); }
  .mobile-donate-bar small,.mobile-donate-bar strong{display:block}.mobile-donate-bar small{font-size:9px;color:#9eabb1}.mobile-donate-bar strong{font-size:16px}.mobile-donate-bar .button{min-height:44px;padding:0 17px;font-size:12px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button,.impact-card,.platform-card{transition:none} }


/* LARIAN KESYUKURAN MUAR — UPDATED HERO DONATION LAYOUT */
.hero {
  min-height: 720px;
  padding-top: 70px;
  padding-bottom: 95px;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
}
.hero h1 { font-size: clamp(58px, 6.3vw, 96px); }
.hero-donation-panel {
  position: relative; z-index: 3; width: 100%; padding: 30px; border-radius: 30px;
  color: var(--ink); background: white; border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 32px 90px rgba(0,0,0,.34);
}
.hero-donation-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.hero-donation-top .card-kicker {
  display: block; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .14em;
}
.donation-target {
  display: block; margin: 6px 0 3px; font-size: clamp(45px, 5vw, 70px);
  line-height: 1; letter-spacing: -.075em;
}
.hero-donation-top p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.hero-donation-grid {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px;
  align-items: center; padding: 24px 0 19px;
}
.hero-qr {
  max-width: none; padding: 12px; border: 1px solid var(--line);
  border-radius: 22px; background: #f4f6f0;
}
.hero-qr img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.hero-bank-info > small {
  color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .13em;
}
.hero-bank-info h3 { margin: 5px 0 13px; font-size: 23px; }
.bank-details.compact { margin: 0 0 15px; }
.bank-details.compact div { padding: 8px 0; }
.hero-progress {
  margin-top: 0; padding: 18px; border-radius: 18px;
  color: white; background: var(--ink);
}
.hero-warning {
  margin: 14px 0 0; color: var(--muted); font-size: 11px;
  line-height: 1.45; text-align: center;
}
.transparency-section { padding-top: 30px; }
.stats-strip { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 38px; }
  .hero-copy, .hero-donation-panel { max-width: 760px; }
}
@media (max-width: 700px) {
  .hero { padding-top: 38px; padding-bottom: 72px; gap: 28px; }
  .hero h1 { margin: 17px 0 16px; font-size: 52px; }
  .hero-lead { margin-bottom: 0; font-size: 15px; line-height: 1.55; }
  .hero-actions { margin-top: 22px; }
  .trust-line { margin-top: 17px; }
  .hero-donation-panel { padding: 20px; border-radius: 24px; }
  .hero-donation-top { padding-bottom: 16px; }
  .donation-target { font-size: 48px; }
  .hero-donation-top p { font-size: 12px; }
  .hero-donation-grid { grid-template-columns: 118px 1fr; gap: 15px; padding: 17px 0 14px; }
  .hero-qr { padding: 8px; border-radius: 17px; }
  .hero-bank-info h3 { margin: 4px 0 8px; font-size: 17px; }
  .bank-details.compact div { padding: 5px 0; }
  .bank-details.compact dt, .bank-details.compact dd { font-size: 11px; }
  .hero-bank-info .button { min-height: 43px; padding: 0 12px; font-size: 11px; }
  .hero-progress { padding: 14px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 410px) {
  .hero-donation-grid { grid-template-columns: 1fr; }
  .hero-qr { max-width: 150px; margin: 0 auto; }
}