/* ============================================================
   Advokasi Nuklear — Tunas-inspired redesign
   Figtree · multi-color sections · rounded & friendly
   ============================================================ */

:root {
  /* Core palette (Tunas-style friendly multi-hue) */
  --navy:       #1E2A66;
  --navy-deep:  #161F4C;
  --teal:       #15A38B;
  --teal-deep:  #0E7C6A;
  --yellow:     #FFC23C;
  --yellow-deep:#F2A91E;
  --coral:      #FF6F5E;
  --coral-deep: #ED5949;
  --sky:        #3D9AE0;
  --sky-deep:   #2C7FC0;

  /* Section background washes */
  --cream:      #FFF7EC;
  --butter:     #FFF0D2;
  --mint:       #E6F5F0;
  --peach:      #FFEBE5;
  --sky-tint:   #E7F1FB;
  --white:      #FFFFFF;

  /* Text */
  --ink:        #1B2444;
  --body:       #4A5474;
  --muted:      #828BA6;
  --line:       #ECE6D8;
  --line-cool:  #E2E9F2;

  --maxw: 1180px;
  --r: 22px;
  --r-lg: 34px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(27,36,68,.06);
  --shadow: 0 18px 44px rgba(27,36,68,.10);
  --shadow-lg: 0 34px 70px rgba(27,36,68,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  color: var(--body);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 800;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 104px 0; position: relative; overflow: hidden; }

/* per-section backgrounds */
.bg-cream  { background: var(--cream); }
.bg-white  { background: var(--white); }
.bg-butter { background: var(--butter); }
.bg-mint   { background: var(--mint); }
.bg-peach  { background: var(--peach); }
.bg-sky    { background: var(--sky-tint); }
.bg-navy   { background: var(--navy); }

.text-teal { color: var(--teal); }
.text-coral { color: var(--coral); }
.text-sky { color: var(--sky); }
.text-yellow { color: var(--yellow-deep); }

/* eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--white); color: var(--teal-deep);
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.eyebrow .e-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.eyebrow--coral { color: var(--coral-deep); } .eyebrow--coral .e-dot { background: var(--coral); }
.eyebrow--sky { color: var(--sky-deep); } .eyebrow--sky .e-dot { background: var(--sky); }
.eyebrow--yellow { color: var(--yellow-deep); } .eyebrow--yellow .e-dot { background: var(--yellow); }
.eyebrow--onnavy { background: rgba(255,255,255,.12); color: #FFE9B8; box-shadow: none; }
.eyebrow--onnavy .e-dot { background: var(--yellow); }

.section-head { max-width: 720px; }
.section-head--center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 48px); }
.section-head .lede { margin-top: 18px; font-size: 19px; color: var(--body); }
.bg-navy .section-head h2 { color: #fff; }
.bg-navy .section-head .lede { color: rgba(255,255,255,.78); }

/* blob decorations */
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; z-index: 0; pointer-events: none; }

/* ============================================================
   Buttons — big, rounded, friendly
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 16px;
  padding: 15px 28px; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 12px 24px rgba(21,163,139,.30); }
.btn--teal:hover { background: var(--teal-deep); transform: translateY(-2px); }
.btn--coral { background: var(--coral); color: #fff; box-shadow: 0 12px 24px rgba(255,111,94,.30); }
.btn--coral:hover { background: var(--coral-deep); transform: translateY(-2px); }
.btn--yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 12px 24px rgba(255,194,60,.36); }
.btn--yellow:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); }
.btn--onnavy { background: #fff; color: var(--navy); }
.btn--onnavy:hover { background: var(--yellow); transform: translateY(-2px); }
.btn--onnavy-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--onnavy-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,247,236,.82);
  backdrop-filter: saturate(150%) blur(14px);
  transition: box-shadow .3s, background .3s;
}
.header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.9); }
.header__bar { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 9px 15px; border-radius: var(--r-pill);
  transition: background .2s, color .2s;
}
.nav a:hover { background: var(--mint); color: var(--teal-deep); }
.header__cta { display: flex; align-items: center; gap: 14px; }
.gov-tag {
  display: flex; flex-direction: column; line-height: 1.15;
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-align: right; padding-right: 16px; border-right: 1px solid var(--line);
}
.gov-tag strong { color: var(--ink); font-size: 12px; }

/* ============================================================
   Logo
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo__badge {
  width: 48px; height: 48px; border-radius: 16px; flex: none;
  background: var(--teal); display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(21,163,139,.32);
}
.logo__badge svg { width: 30px; height: 30px; color: #fff; }
.logo__type { display: flex; flex-direction: column; line-height: .98; }
.logo__type .a { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--teal-deep); }
.logo__type .n { font-size: 21px; font-weight: 800; letter-spacing: .01em; color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 76px 0 92px; position: relative; overflow: hidden; }
.hero .blob--1 { width: 420px; height: 420px; background: var(--yellow); top: -120px; right: -80px; opacity: .35; }
.hero .blob--2 { width: 300px; height: 300px; background: var(--teal); bottom: -120px; left: -100px; opacity: .18; }
.hero__grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--teal-deep); font-weight: 700; font-size: 13.5px;
  padding: 9px 18px 9px 13px; border-radius: var(--r-pill); margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.hero__pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.hero h1 { font-size: clamp(38px, 5.6vw, 55px); }
.hero h1 .squig { position: relative; white-space: nowrap; }
.hero h1 .squig svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 14px; }
.hero__lede { margin-top: 24px; font-size: 20px; max-width: 540px; }
.hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { margin-top: 46px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero__stat { background: #fff; border-radius: var(--r); padding: 16px 22px; box-shadow: var(--shadow-sm); }
.hero__stat .num { font-size: 30px; font-weight: 800; color: var(--ink); }
.hero__stat .num span { color: var(--teal); }
.hero__stat .lab { font-size: 13px; color: var(--muted); font-weight: 600; }

.hero__media { position: relative; }
.hero__media image-slot {
  width: 100%;
  height: 560px;
  animation: heroFloat 4s ease-in-out infinite;
}
.hero__media image-slot::part(frame) { background: transparent; }
.hero__media image-slot::part(ring)  { display: none; }

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
.hero__blobcard {
  position: absolute; left: -24px; bottom: 36px;
  background: var(--yellow); color: var(--navy);
  border-radius: var(--r); padding: 16px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; max-width: 256px; font-weight: 600;
}
.hero__blobcard .ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(30,42,102,.12); display: grid; place-items: center; flex: none; }
.hero__blobcard .ic svg { width: 24px; height: 24px; stroke: var(--navy); }
.hero__blobcard strong { display: block; font-size: 15px; }
.hero__blobcard span.t { font-size: 12.5px; line-height: 1.4; }

/* trust */
.trust { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; position: relative; z-index: 1; }
.trust > span { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trust .orgs { display: flex; gap: 40px; flex-wrap: nowrap; align-items: center; justify-content: center; }
.trust .org { font-weight: 800; color: #b3a98f; font-size: 19px; letter-spacing: .03em; }
.org-logo { height: 120px; width: auto; object-fit: contain; }

/* ============================================================
   Animated atom (hero background)
   ============================================================ */
.hero__atom {
  position: absolute; right: -160px; top: -120px;
  width: 720px; height: 720px; opacity: .35;
  pointer-events: none; z-index: 0;
}
.hero-nucleus,
.hero-orbit,
.hero-electron {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 50%;
  margin: auto;
}
.hero-nucleus {
  width: 60px; height: 60px;
  background: var(--teal);
  box-shadow: 0 0 15px var(--teal);
  animation: nucleusShine 2s infinite linear;
}
.hero-orbit {
  width: 480px; height: 480px;
  border: 0;
  transform-style: preserve-3d;
  animation: orbitSpin 1.5s infinite linear;
}
.hero-orbit::before {
  content: " ";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1.5px solid rgba(21,163,139,.55);
  border-radius: 50%;
}
.hero-electron {
  position: relative;
  top: 228px;
  width: 24px; height: 24px;
  background: var(--yellow);
  box-shadow: 0 0 15px var(--yellow);
  border-radius: 50%;
  transform: translateX(240px);
  animation: electronSpin 1.5s infinite linear;
}
.hero-orbit:nth-child(4) { transform: rotateY(65deg) rotateX(5deg); animation-delay: -1s; }
.hero-orbit:nth-child(4) .hero-electron { animation-delay: -1s; }
.hero-orbit:nth-child(2) { transform: rotateY(65deg) rotateX(-54deg); animation-delay: -1s; animation-duration: 1s; }
.hero-orbit:nth-child(2) .hero-electron { animation-duration: 1s; }
.hero-orbit:nth-child(3) { transform: rotateY(65deg) rotateX(54deg); }
@keyframes electronSpin {
  0%   { transform: rotateZ(0deg)   translateX(240px) rotateZ(0deg)    rotateY(-65deg); }
  100% { transform: rotateZ(360deg) translateX(240px) rotateZ(-360deg) rotateY(-65deg); }
}
@keyframes orbitSpin {
  0%   { border: 0; border-top:    2px solid rgba(21,163,139,.9); }
  35%  { border: 0; border-right:  2px solid rgba(21,163,139,.9); }
  70%  { border: 0; border-bottom: 2px solid rgba(21,163,139,.9); }
  100% { border: 0; border-left:   2px solid rgba(21,163,139,.9); }
}
@keyframes nucleusShine {
  0%   { box-shadow: 0 0 0 transparent; }
  50%  { box-shadow: 0 0 40px var(--teal); }
  100% { box-shadow: 0 0 0 transparent; }
}

/* ============================================================
   Intro
   ============================================================ */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.intro__quote {
  background: var(--mint); border-radius: var(--r);
  padding: 22px 26px; margin: 30px 0;
  font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.intro__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.intro__points li { display: flex; gap: 14px; align-items: flex-start; }
.intro__points .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; flex: none; margin-top: 2px; }
.intro__points .tick svg { width: 16px; height: 16px; stroke: #fff; }
.intro__points b { color: var(--ink); }
.intro__visual { position: relative; }
.intro__visual image-slot { width: 100%; height: 470px; }
.intro__visual .dotpop { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--coral); top: -26px; right: -20px; opacity: .9; z-index: -1; }

/* ============================================================
   Pillars — on navy
   ============================================================ */
.pillars__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 20px; margin-top: 54px; position: relative; z-index: 1; }
.pillar {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 32px 28px; display: flex; flex-direction: column; min-height: 300px;
  background: #fff; transition: transform .35s var(--ease), box-shadow .35s;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pillar__num { position: absolute; top: 26px; right: 28px; font-size: 14px; font-weight: 800; opacity: .4; }
.pillar__tag { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pillar__name { font-size: 30px; font-weight: 800; margin: 12px 0 12px; }
.pillar__desc { font-size: 15px; line-height: 1.6; }
.pillar__ic { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; margin-top: auto; }
.pillar__ic svg { width: 28px; height: 28px; stroke-width: 1.7; }

/* DIDIK dominant — yellow */
.pillar--didik { background: var(--yellow); color: var(--navy); }
.pillar--didik .pillar__name, .pillar--didik .pillar__tag { color: var(--navy); }
.pillar--didik .pillar__desc { color: #4a3c12; }
.pillar--didik .pillar__num { color: var(--navy); }
.pillar--didik .pillar__ic { background: rgba(30,42,102,.14); } .pillar--didik .pillar__ic svg { stroke: var(--navy); }
.pillar--didik .pillar__orbit { position: absolute; right: -80px; bottom: -80px; width: 250px; height: 250px; color: var(--navy); opacity: .14; }

.pillar--jangkau .pillar__name, .pillar--jangkau .pillar__tag { color: var(--teal-deep); }
.pillar--jangkau .pillar__ic { background: var(--mint); } .pillar--jangkau .pillar__ic svg { stroke: var(--teal); }
.pillar--libat .pillar__name, .pillar--libat .pillar__tag { color: var(--coral-deep); }
.pillar--libat .pillar__ic { background: var(--peach); } .pillar--libat .pillar__ic svg { stroke: var(--coral); }
.pillar--hubung .pillar__name, .pillar--hubung .pillar__tag { color: var(--sky-deep); }
.pillar--hubung .pillar__ic { background: var(--sky-tint); } .pillar--hubung .pillar__ic svg { stroke: var(--sky); }

/* ============================================================
   Benefits — Mengapa (mint)
   ============================================================ */
.benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; position: relative; z-index: 1; }
.benefit { background: #fff; border-radius: var(--r); padding: 30px 26px; transition: transform .3s var(--ease), box-shadow .3s; }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.benefit__ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 20px; }
.benefit__ic svg { width: 28px; height: 28px; stroke-width: 1.7; }
.benefit h3 { font-size: 20px; margin-bottom: 10px; }
.benefit p { font-size: 15px; line-height: 1.58; }
.benefit--a .benefit__ic { background: var(--butter); } .benefit--a .benefit__ic svg { stroke: var(--yellow-deep); }
.benefit--b .benefit__ic { background: var(--peach); } .benefit--b .benefit__ic svg { stroke: var(--coral); }
.benefit--c .benefit__ic { background: var(--mint); } .benefit--c .benefit__ic svg { stroke: var(--teal); }
.benefit--d .benefit__ic { background: var(--sky-tint); } .benefit--d .benefit__ic svg { stroke: var(--sky); }

/* ============================================================
   Timeline (cream)
   ============================================================ */
.timeline { margin-top: 62px; position: relative; z-index: 1; }
.timeline__line { position: absolute; left: 0; right: 0; top: 46px; height: 3px; background: repeating-linear-gradient(90deg, var(--teal) 0 18px, transparent 18px 30px); border-radius: 3px; opacity: .5; }
.timeline__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tl-item { position: relative; padding-top: 80px; }
.tl-item .node { position: absolute; top: 37px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 4px solid var(--cream); box-shadow: 0 0 0 3px var(--teal); }
.tl-item:nth-child(2) .node { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow); }
.tl-item:nth-child(3) .node { background: var(--coral); box-shadow: 0 0 0 3px var(--coral); }
.tl-item:nth-child(4) .node { background: var(--sky); box-shadow: 0 0 0 3px var(--sky); }
.tl-item:nth-child(5) .node { background: var(--navy); box-shadow: 0 0 0 3px var(--navy); }
.tl-item .yr { font-size: 26px; font-weight: 800; color: var(--ink); }
.tl-item .ev { font-size: 14.5px; line-height: 1.55; margin-top: 8px; }
.tl-item .ev b { color: var(--teal-deep); }

/* ============================================================
   Audience (peach)
   ============================================================ */
.aud__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; position: relative; z-index: 1; }
.aud { border-radius: var(--r-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.aud:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.aud image-slot { width: 100%; height: 184px; }
.aud__body { padding: 22px 24px 26px; }
.aud__chip { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.aud:nth-child(1) .aud__chip { color: var(--teal-deep); }
.aud:nth-child(2) .aud__chip { color: var(--coral-deep); }
.aud:nth-child(3) .aud__chip { color: var(--sky-deep); }
.aud:nth-child(4) .aud__chip { color: var(--yellow-deep); }
.aud__body h3 { font-size: 18px; margin-bottom: 7px; }
.aud__body p { font-size: 14px; line-height: 1.55; }

/* ============================================================
   Activities (sky tint)
   ============================================================ */
.act__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 50px; position: relative; z-index: 1; }
.act-feature { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 430px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.act-feature image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.act-feature__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,16,40,.5) 60%, rgba(10,16,40,.92) 100%); pointer-events: none; }
.act-feature__card { position: relative; z-index: 2; margin: 0; padding: 28px 30px 30px; background: none; border-radius: 0; box-shadow: none; color: #fff; }
.act-feature__card .k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.act-feature__card h3 { font-size: 26px; margin: 8px 0; color: #fff; }
.act-feature__card p { font-size: 15px; color: rgba(255,255,255,.82); }
.act-list { display: flex; flex-direction: column; gap: 14px; }
.act-item { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: var(--r); padding: 20px 22px; transition: transform .25s var(--ease), box-shadow .25s; }
.act-item:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.act-item .date { flex: none; width: 60px; text-align: center; background: var(--mint); border-radius: 14px; padding: 8px 0; }
.act-item:nth-child(2) .date { background: var(--peach); }
.act-item:nth-child(3) .date { background: var(--butter); }
.act-item:nth-child(4) .date { background: var(--sky-tint); }
.act-item .date .d { font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1; }
.act-item .date .m { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.act-item .info h4 { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.act-item .info p { font-size: 13.5px; }
.act-item .info .loc { color: var(--teal-deep); font-weight: 700; }

/* ============================================================
   CTA band — teal
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--teal); color: #fff; border-radius: var(--r-xl); padding: 70px 64px; }
.cta-band .blob--y { width: 360px; height: 360px; background: var(--yellow); top: -120px; right: -80px; opacity: .3; }
.cta-band .blob--c { width: 280px; height: 280px; background: var(--coral); bottom: -120px; left: -60px; opacity: .35; }
.cta-band__inner { position: relative; z-index: 2; max-width: 640px; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
.cta-band p { color: rgba(255,255,255,.9); font-size: 19px; margin-top: 16px; }
.cta-band .hero__actions { margin-top: 32px; }

/* ============================================================
   Footer — navy
   ============================================================ */
.footer { background: var(--navy-deep); color: #b9c0db; padding: 70px 0 34px; }
.footer .logo__type .a { color: #8fe6d3; }
.footer .logo__type .n { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 38px; }
.footer__about { margin-top: 20px; font-size: 14.5px; line-height: 1.7; max-width: 330px; color: #97a0c4; }
.footer__col h4 { color: #fff; font-size: 14px; margin-bottom: 16px; }
.footer__col a { display: block; font-size: 14.5px; color: #a3abce; padding: 7px 0; transition: color .2s; }
.footer__col a:hover { color: var(--yellow); }
.footer__bottom { margin-top: 54px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #818ab0; }
.footer__gov { display: flex; align-items: center; gap: 12px; }
.footer__gov .seal { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; color: #cfe; }
.footer__social { display: flex; gap: 12px; align-items: center; }
.footer__social a svg { width: 22px; height: 22px; fill: #a3abce; stroke: #a3abce; transition: fill .2s, stroke .2s; }
.footer__social a:hover svg { fill: var(--yellow); stroke: var(--yellow); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; }
html.js .reveal.in {
  animation: revealUp .7s var(--ease) both;
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
.reveal.d3 { animation-delay: .24s; }
.reveal.d4 { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; }
  html.js .reveal.in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Program Section (butter)
   ============================================================ */

/* floating sparkle stars in section bg */
.prog-spark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 95%, 50% 72%, 18% 95%, 31% 59%, 0% 38%, 37% 38%);
  animation: sparkleFloat 7s ease-in-out infinite;
}
.prog-spark--1 { width: 22px; height: 22px; top: 9%;  left: 4%;   background: var(--yellow-deep); opacity: .45; animation-delay: 0s; }
.prog-spark--2 { width: 14px; height: 14px; top: 16%; right: 4%;  background: var(--coral);       opacity: .35; animation-delay: -2.8s; }
.prog-spark--3 { width: 18px; height: 18px; bottom: 14%; right: 7%; background: var(--teal);     opacity: .35; animation-delay: -5.2s; }
.prog-spark--4 { width: 12px; height: 12px; bottom: 22%; left: 9%; background: var(--sky);        opacity: .4;  animation-delay: -1.6s; }
@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg)  scale(1);   }
  33%       { transform: translateY(-18px) rotate(22deg) scale(1.12); }
  66%       { transform: translateY(8px)  rotate(-12deg) scale(.9);  }
}

/* grid */
.programs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 54px;
  position: relative;
  z-index: 1;
}

/* card base */
.prog-card {
  border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s;
  will-change: transform;
}

/* playful idle rotation per card */
.prog--neo     { transform: rotate(-1.2deg); }
.prog--3v      { transform: rotate(0.8deg);  }
.prog--nur     { transform: rotate(-0.6deg); }
.prog--jelajah { transform: rotate(1deg);    }

.prog-card:hover {
  transform: rotate(0deg) translateY(-8px) !important;
}
.prog--neo:hover     { box-shadow: 0 28px 56px rgba(255,194,60,.38); }
.prog--3v:hover      { box-shadow: 0 28px 56px rgba(255,111,94,.36); }
.prog--nur:hover     { box-shadow: 0 28px 56px rgba(21,163,139,.32); }
.prog--jelajah:hover { box-shadow: 0 28px 56px rgba(61,154,224,.32); }

/* colored header zone */
.prog-head {
  position: relative;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* bubble decorations inside head */
.prog-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.prog-bubble--a { width: 110px; height: 110px; top: -30px; left: -28px; }
.prog-bubble--b { width: 64px;  height: 64px;  bottom: -18px; right: -12px; }
.prog-bubble--c {
  width: 28px; height: 28px; top: 14px; right: 32px;
  background: rgba(255,255,255,.36);
  animation: bubblePulse 3.2s ease-in-out infinite;
}
@keyframes bubblePulse {
  0%, 100% { transform: scale(1);   opacity: .36; }
  50%       { transform: scale(1.4); opacity: .6;  }
}

/* icon inside head */
.prog-ic {
  width: 72px; height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease);
}
.prog-card:hover .prog-ic { transform: scale(1.1) rotate(-4deg); }
.prog-ic svg { width: 36px; height: 36px; stroke-width: 1.9; }

/* per-card head colors and icon strokes */
.prog--neo .prog-head     { background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%); }
.prog--neo .prog-ic svg   { stroke: var(--navy); }

.prog--3v .prog-head      { background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%); }
.prog--3v .prog-ic svg    { stroke: #fff; }

.prog--nur .prog-head     { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); }
.prog--nur .prog-ic svg   { stroke: #fff; }

.prog--jelajah .prog-head { background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%); }
.prog--jelajah .prog-ic svg { stroke: #fff; }

/* card body */
.prog-body { padding: 26px 30px 30px; flex: 1; display: flex; flex-direction: column; }

.prog-tag {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px;
}

.prog-name {
  font-size: 40px; font-weight: 800;
  line-height: 1; letter-spacing: -.03em;
  margin-bottom: 4px;
}

.prog-tagline {
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  margin-bottom: 14px;
}

.prog-desc { font-size: 15.5px; line-height: 1.65; }

/* per-card text colors */
.prog--neo .prog-tag     { color: var(--yellow-deep); }
.prog--neo .prog-name    { color: var(--navy); }

.prog--3v .prog-tag      { color: var(--coral-deep); }
.prog--3v .prog-name     { color: var(--coral-deep); }

.prog--nur .prog-tag     { color: var(--teal-deep); }
.prog--nur .prog-name    { color: var(--teal-deep); }

.prog--jelajah .prog-tag  { color: var(--sky-deep); }
.prog--jelajah .prog-name { color: var(--sky-deep); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .pillars__grid { grid-template-columns: 1fr 1fr; }
  .pillar--didik { grid-column: span 2; min-height: 220px; }
  .benefits__grid, .aud__grid { grid-template-columns: 1fr 1fr; }
  .timeline__track { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .timeline__line { display: none; }
  .tl-item { padding-top: 0; padding-left: 30px; padding-bottom: 26px; border-left: 3px solid var(--line); }
  .tl-item .node { top: 4px; left: -11px; }
}
@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .nav, .gov-tag { display: none; }
  .hero__grid, .intro__grid, .act__grid, .programs__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media image-slot { height: 360px; }
  .intro__visual image-slot { height: 320px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 48px 30px; }
}
@media (max-width: 560px) {
  .benefits__grid, .aud__grid, .pillars__grid, .timeline__track, .footer__grid { grid-template-columns: 1fr; }
  .pillar--didik { grid-column: span 1; }
  .wrap { padding: 0 20px; }
  .prog--neo, .prog--3v, .prog--nur, .prog--jelajah { transform: none; }
}