:root{
  --navy-deep:#0A2647; --navy-mid:#144272; --sea:#205295; --sky:#8FB8DE;
  --brass:#C9A24B; --brass-bright:#E4BE6B; --paper:#F5F3EC; --paper2:#EFEBDD;
  --ink:#0A2647; --muted:#5C7191; --wa:#25D366;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; line-height:1.55; }
img{max-width:100%; display:block;}
.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }
a{ color:inherit; }
h1,h2,h3{ font-family:'Fraunces',serif; }
ul{ list-style:none; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.eyebrow .line{ width:28px; height:1px; background:currentColor; display:inline-block; }

/* NAV */
nav{ position:sticky; top:0; z-index:100; background:rgba(10,38,71,0.97); backdrop-filter:blur(6px); border-bottom:1px solid rgba(245,243,236,0.08); }
.nav-inner{ max-width:1120px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ color:var(--paper); font-family:'Fraunces',serif; font-weight:600; font-size:17px; letter-spacing:.02em; white-space:nowrap; text-decoration:none; }
.brand span{ color:var(--brass-bright); }
.nav-links{ display:flex; gap:6px; flex-wrap:wrap; }
.nav-links a{ color:rgba(245,243,236,0.68); font-size:13px; padding:8px 12px; border-radius:20px; text-decoration:none; transition:.15s; }
.nav-links a:hover{ color:var(--paper); }
.nav-links a.active{ background:rgba(228,190,107,0.14); color:var(--brass-bright); font-weight:600; }
.nav-cta{ background:var(--wa); color:#fff; padding:9px 18px; border-radius:30px; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
@media (max-width:960px){ .nav-links{ display:none; } }

/* SUBHERO */
.subhero{ background:linear-gradient(155deg, var(--navy-deep) 0%, var(--navy-mid) 60%, var(--sea) 100%); color:var(--paper); padding:56px 32px; position:relative; overflow:hidden; }
.subhero::before{ content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%; border:1px solid rgba(233,222,190,0.14); }
.subhero-inner{ max-width:1120px; margin:0 auto; position:relative; z-index:2; }
.subhero .eyebrow{ color:var(--brass-bright); margin-bottom:14px; }
.subhero h1{ font-size:38px; font-weight:600; max-width:640px; line-height:1.12; }
.subhero p{ margin-top:14px; max-width:520px; color:rgba(245,243,236,0.78); font-size:15px; }

/* SECTION SHARED */
.section{ padding:64px 0; }
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:32px; }
.section-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brass); border:1px solid var(--brass); border-radius:20px; padding:4px 12px; flex-shrink:0; }
.section-title{ font-size:28px; font-weight:600; color:var(--navy-deep); }
.section-title span{ color:var(--muted); font-weight:400; font-style:italic; font-family:'Fraunces',serif; }
.section-lead{ color:var(--muted); max-width:600px; margin-top:8px; font-size:14.5px; }

/* BUTTONS */
.btn-primary{ background:var(--wa); color:#fff; padding:15px 28px; border-radius:6px; font-weight:600; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn-secondary{ border:1px solid rgba(245,243,236,0.35); color:var(--paper); padding:15px 28px; border-radius:6px; font-weight:600; font-size:15px; text-decoration:none; display:inline-block; }
.btn-ghost{ border:1px solid rgba(10,38,71,0.25); color:var(--navy-deep); padding:12px 22px; border-radius:6px; font-weight:600; font-size:14px; text-decoration:none; display:inline-block; }

/* HOME HERO */
.hero{ background:linear-gradient(155deg, var(--navy-deep) 0%, var(--navy-mid) 55%, var(--sea) 100%); color:var(--paper); position:relative; overflow:hidden; padding:76px 32px 90px; }
.hero::before{ content:""; position:absolute; right:-140px; top:-140px; width:460px; height:460px; border-radius:50%; border:1px solid rgba(233,222,190,0.14); }
.hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:280px; height:280px; border-radius:50%; border:1px solid rgba(233,222,190,0.18); }
.hero-inner{ max-width:1120px; margin:0 auto; position:relative; z-index:2; }
.hero .eyebrow{ color:var(--brass-bright); margin-bottom:22px; }
.hero h1{ font-size:54px; font-weight:600; line-height:1.06; max-width:660px; letter-spacing:-0.01em; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--sky); }
.hero-sub{ margin-top:20px; max-width:520px; font-size:16.5px; color:rgba(245,243,236,0.8); }
.hero-actions{ margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{ margin-top:52px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(245,243,236,0.18); padding-top:24px; }
.stat{ border-left:1px solid rgba(245,243,236,0.18); padding-left:20px; }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{ font-family:'Fraunces',serif; font-size:28px; font-weight:600; color:var(--brass-bright); }
.stat .lbl{ font-size:11.5px; color:rgba(245,243,236,0.65); margin-top:4px; }
@media (max-width:820px){ .hero h1{ font-size:36px; } .hero-stats{ grid-template-columns:1fr 1fr; row-gap:20px; } .stat{ border-left:none; padding-left:0; } }

.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ps-card{ border-radius:6px; padding:28px 24px; }
.ps-card.problem{ background:var(--paper2); border:1px dashed rgba(10,38,71,0.25); }
.ps-card.solution{ background:var(--navy-deep); color:var(--paper); }
.ps-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.ps-card.problem .tag{ color:var(--muted); }
.ps-card.solution .tag{ color:var(--brass-bright); }
.ps-card h3{ font-size:21px; margin-top:10px; font-weight:600; }
.ps-card ul{ margin-top:14px; font-size:14px; }
.ps-card.problem ul{ color:var(--navy-mid); }
.ps-card.solution ul{ color:rgba(245,243,236,0.82); }
.ps-card li{ margin-bottom:8px; padding-left:16px; position:relative; }
.ps-card li::before{ content:"—"; position:absolute; left:0; }
@media (max-width:820px){ .ps-grid{ grid-template-columns:1fr; } }

.mini-programs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mini-card{ background:#fff; border:1px solid rgba(10,38,71,0.1); border-top:3px solid var(--sea); border-radius:4px; padding:24px 22px; }
.mini-card .prog-tag{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.mini-card h3{ font-size:19px; margin-top:8px; color:var(--navy-deep); font-weight:600; }
.mini-card p{ font-size:13.5px; color:var(--muted); margin-top:8px; }
@media (max-width:900px){ .mini-programs{ grid-template-columns:1fr; } }

/* ABOUT */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.about-grid p{ color:var(--muted); font-size:14.5px; margin-bottom:14px; }
.vm-card{ background:var(--paper2); border-radius:6px; padding:24px 22px; margin-bottom:16px; }
.vm-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sea); }
.vm-card h4{ font-size:18px; margin-top:8px; color:var(--navy-deep); font-weight:600; }
.vm-card p{ font-size:13.5px; color:var(--muted); margin-top:8px; margin-bottom:0; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }

.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-item .usp-num{ font-family:'Fraunces',serif; font-size:30px; color:var(--brass); font-weight:600; }
.value-item h4{ font-size:15.5px; margin-top:8px; color:var(--navy-deep); font-weight:600; }
.value-item p{ font-size:13px; color:var(--muted); margin-top:6px; }
@media (max-width:820px){ .values-grid{ grid-template-columns:1fr 1fr; row-gap:26px; } }

/* PROGRAM */
.prog-detail{ display:grid; grid-template-columns:1fr 1.3fr; gap:0; border:1px solid rgba(10,38,71,0.1); border-radius:6px; overflow:hidden; margin-bottom:24px; }
.prog-side{ background:var(--navy-deep); color:var(--paper); padding:32px 28px; }
.prog-side .prog-tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-bright); }
.prog-side h3{ font-size:24px; margin-top:10px; font-weight:600; }
.prog-side .meta-row{ margin-top:20px; display:flex; flex-direction:column; gap:10px; font-size:13px; color:rgba(245,243,236,0.75); }
.prog-side .meta-row b{ color:var(--paper); }
.prog-main{ background:#fff; padding:32px 28px; }
.prog-main h4{ font-size:14px; color:var(--navy-deep); font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; }
.prog-main ul{ margin-bottom:20px; }
.prog-main li{ font-size:14px; color:var(--muted); margin-bottom:8px; padding-left:18px; position:relative; }
.prog-main li::before{ content:"✓"; position:absolute; left:0; color:var(--sea); font-weight:700; }
@media (max-width:900px){ .prog-detail{ grid-template-columns:1fr; } }

/* FASILITAS */
.facility-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.facility-card{ background:#fff; border:1px solid rgba(10,38,71,0.1); border-radius:6px; overflow:hidden; }
.facility-img{ height:150px; background:linear-gradient(135deg, var(--sea), var(--navy-mid)); display:flex; align-items:center; justify-content:center; color:rgba(245,243,236,0.5); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.facility-card .body{ padding:18px 20px; }
.facility-card h4{ font-size:16px; color:var(--navy-deep); font-weight:600; }
.facility-card p{ font-size:13px; color:var(--muted); margin-top:6px; }
@media (max-width:900px){ .facility-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .facility-grid{ grid-template-columns:1fr; } }

/* KARIR */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:8px; }
.flow-line{ position:absolute; top:21px; left:6%; right:6%; height:1px; background:repeating-linear-gradient(90deg, rgba(10,38,71,0.25) 0 8px, transparent 8px 16px); z-index:1; }
.flow-step{ position:relative; z-index:2; text-align:center; padding:0 10px; }
.flow-dot{ width:16px; height:16px; border-radius:50%; background:var(--brass); margin:0 auto 14px; border:3px solid var(--paper); box-shadow:0 0 0 1px var(--brass); }
.flow-step .fs-num{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.flow-step h4{ font-size:14.5px; color:var(--navy-deep); margin-top:6px; font-weight:600; }
.flow-step p{ font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:900px){ .flow{ grid-template-columns:1fr; gap:24px; } .flow-line{ display:none; } }

.partner-strip{ background:var(--paper2); border-radius:6px; padding:26px 24px; margin-top:36px; }
.partner-strip .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sea); }
.partner-list{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.partner-pill{ background:#fff; border:1px solid rgba(10,38,71,0.12); padding:8px 16px; border-radius:20px; font-size:12.5px; color:var(--navy-mid); }

/* TESTIMONI */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:var(--paper2); border-radius:6px; padding:26px 24px; }
.testi-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:16px; color:var(--navy-deep); line-height:1.5; }
.testi-who{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sea); }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }

/* PENDAFTARAN */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step-card{ background:#fff; border:1px solid rgba(10,38,71,0.1); border-radius:6px; padding:24px 20px; position:relative; }
.step-card .step-num{ font-family:'Fraunces',serif; font-size:32px; color:rgba(201,162,75,0.35); font-weight:700; position:absolute; top:14px; right:18px; }
.step-card h4{ font-size:15.5px; color:var(--navy-deep); font-weight:600; margin-top:6px; }
.step-card p{ font-size:13px; color:var(--muted); margin-top:8px; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .steps{ grid-template-columns:1fr; } }

.req-box{ background:var(--navy-deep); color:var(--paper); border-radius:6px; padding:30px 28px; margin-top:36px; }
.req-box .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-bright); }
.req-box h3{ font-size:20px; margin-top:8px; font-weight:600; }
.req-list{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.req-list li{ font-size:13.5px; color:rgba(245,243,236,0.82); padding-left:18px; position:relative; }
.req-list li::before{ content:"—"; position:absolute; left:0; color:var(--brass-bright); }
@media (max-width:700px){ .req-list{ grid-template-columns:1fr; } }

/* FAQ */
.faq-item{ border-bottom:1px solid rgba(10,38,71,0.12); padding:20px 0; }
.faq-q{ font-weight:600; font-size:15px; color:var(--navy-deep); }
.faq-a{ margin-top:10px; font-size:13.5px; color:var(--muted); max-width:680px; }

/* KONTAK */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.contact-card{ background:#fff; border:1px solid rgba(10,38,71,0.1); border-radius:6px; padding:26px 24px; margin-bottom:16px; }
.contact-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sea); }
.contact-card h4{ font-size:16.5px; color:var(--navy-deep); margin-top:8px; font-weight:600; }
.contact-card p, .contact-card a{ font-size:13.5px; color:var(--muted); margin-top:6px; display:block; text-decoration:none; }
.map-frame{ border:none; width:100%; height:340px; border-radius:6px; filter:grayscale(0.15); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* FINAL CTA */
.cta-final{ background:linear-gradient(155deg, var(--sea) 0%, var(--navy-mid) 100%); color:var(--paper); padding:64px 32px; text-align:center; border-radius:8px; margin:0 32px; }
.cta-final h2{ font-size:30px; font-weight:600; max-width:600px; margin:0 auto; }
.cta-final .urgency{ margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brass-bright); letter-spacing:.06em; }
.cta-final .btn-primary{ margin-top:24px; }

/* FOOTER */
footer{ background:var(--navy-deep); color:rgba(245,243,236,0.6); padding:50px 32px 30px; margin-top:70px; }
.foot-inner{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; font-size:13.5px; }
.foot-brand{ font-family:'Fraunces',serif; color:var(--paper); font-size:19px; font-weight:600; }
.foot-inner h5{ color:var(--paper); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; font-family:'IBM Plex Mono',monospace; }
.foot-inner p, .foot-inner a{ color:rgba(245,243,236,0.6); text-decoration:none; margin-bottom:8px; display:block; }
.foot-bottom{ max-width:1120px; margin:36px auto 0; padding-top:20px; border-top:1px solid rgba(245,243,236,0.12); font-size:12px; color:rgba(245,243,236,0.4); }
@media (max-width:820px){ .foot-inner{ grid-template-columns:1fr; } }

.wa-float{ position:fixed; bottom:22px; right:22px; background:var(--wa); color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,0.25); z-index:200; font-size:24px; }