:root{
  --navy:#0D2C54; --navy-deep:#081D3A; --amber:#F5B301; --amber-ink:#412402;
  --cyan:#2E9CCA; --cyan-soft:#E4F2F9; --canvas:#F7F9FC; --white:#fff;
  --slate:#5C6B7F; --line:rgba(13,44,84,.10);
  --ease-luxe:cubic-bezier(.16,1,.3,1);
  --font-d:'Plus Jakarta Sans',sans-serif; --font-b:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-b);color:var(--navy);background:var(--canvas);line-height:1.7;font-size:16px;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.15;letter-spacing:-.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
section{padding:84px 0}
section[id]{scroll-margin-top:100px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;padding:14px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .25s var(--ease-luxe),box-shadow .25s;will-change:transform}
.btn-amber{background:var(--amber);color:var(--amber-ink)}
.btn-amber:hover{box-shadow:0 12px 28px rgba(245,179,1,.35)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{box-shadow:0 12px 28px rgba(13,44,84,.3)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid rgba(13,44,84,.25)}
.btn-ghost:hover{border-color:var(--navy)}
.btn svg{transition:transform .25s var(--ease-luxe)}
.btn:hover svg{transform:translateX(4px)}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .35s,box-shadow .35s}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:20px 0;transition:padding .35s}
header.scrolled{background:rgba(247,249,252,.87);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
header.scrolled .bar{padding:13px 0}
.logo-img{height:44px;width:auto;transition:transform .3s var(--ease-luxe)}
.logo .lg-light{display:none}
header.on-dark:not(.scrolled) .lg-dark{display:none}
header.on-dark:not(.scrolled) .lg-light{display:block}
header.on-dark:not(.scrolled) nav a{color:#fff}
header.on-dark:not(.scrolled) #navToggle span{background:#fff}
header.on-dark nav.open a{color:var(--navy)}
.logo:hover .logo-img{transform:scale(1.04)}
nav ul{display:flex;gap:32px;list-style:none}
nav a{font-size:.92rem;font-weight:500;position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-luxe)}
nav a:hover::after,nav a.active::after{transform:scaleX(1);transform-origin:left}
nav a.active{font-weight:600}
#navToggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
#navToggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}

/* page hero */
.page-hero{padding:170px 0 74px;background:linear-gradient(160deg,var(--navy) 0%,#12437E 100%);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-100px;top:-100px;width:380px;height:380px;border-radius:50%;background:rgba(46,156,202,.16)}
.page-hero::before{content:"";position:absolute;left:-80px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:rgba(245,179,1,.1)}
.page-hero .crumb{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:14px;display:flex;gap:8px;align-items:center}
.page-hero .crumb a:hover{color:var(--amber)}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;max-width:16em}
.page-hero p.sub{color:rgba(255,255,255,.75);max-width:38rem;margin-top:16px}
.page-hero .hero-line{display:block;overflow:hidden}
.page-hero .hero-line span{display:inline-block}

/* cards umum */
.card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .4s var(--ease-luxe),box-shadow .4s}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px rgba(13,44,84,.28)}

/* footer */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:70px 0 0}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:50px}
.ft-grid h4{color:#fff;font-size:.95rem;margin-bottom:18px}
.ft-grid ul{list-style:none;display:grid;gap:10px;font-size:.9rem}
.ft-grid a:hover{color:var(--amber)}
.ft-brand p{font-size:.88rem;max-width:30rem;margin-top:16px}
.ft-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:.82rem;flex-wrap:wrap;gap:10px}

/* transisi halaman: default MENUTUP layar, dibuka lewat class .out */
#curtain{position:fixed;inset:0;z-index:1200;display:flex}
#curtain span{flex:1;background:var(--navy);transform:scaleY(1);transform-origin:top;transition:transform .7s var(--ease-luxe)}
#curtain span:nth-child(2){transition-delay:.05s}
#curtain span:nth-child(3){transition-delay:.1s}
#curtain span:nth-child(4){transition-delay:.15s}
#curtain span:nth-child(5){transition-delay:.2s}
#curtain.out{pointer-events:none}
#curtain.out span{transform:scaleY(0)}
#curtain.exit span{transform-origin:bottom;transition-duration:.55s}
#curtain .brand{position:absolute;inset:0;display:grid;place-items:center;opacity:1;transition:opacity .3s}
#curtain.out .brand{opacity:0}
#curtain .brand img{height:60px}

/* reveal helper */
.rv{opacity:0;transform:translateY(36px)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* lightbox */
#lb{position:fixed;inset:0;z-index:1100;background:rgba(8,29,58,.94);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
#lb.open{display:flex}
#lb img{max-width:100%;max-height:86vh;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
#lb .lb-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-size:.9rem;font-weight:500}
#lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:grid;place-items:center;transition:.25s;backdrop-filter:blur(4px)}
#lb button:hover{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
#lb .lb-close{top:22px;right:22px}
#lb .lb-prev{left:18px;top:50%;transform:translateY(-50%)}
#lb .lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--navy),#12437E);border-radius:26px;padding:52px 56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(245,179,1,.13)}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
.cta-band p{color:rgba(255,255,255,.72);margin-top:6px;max-width:34rem}

@media(max-width:960px){
  nav{position:fixed;inset:0 0 auto 0;top:0;background:#fff;padding:96px 28px 34px;transform:translateY(-100%);transition:transform .45s var(--ease-luxe);box-shadow:0 24px 50px rgba(13,44,84,.18);z-index:-1}
  nav.open{transform:translateY(0)}
  nav ul{flex-direction:column;gap:20px}
  #navToggle{display:block}
  .ft-grid{grid-template-columns:1fr 1fr}
  section{padding:64px 0}
  .page-hero{padding:140px 0 56px}
  .cta-band{padding:38px 28px}
}
@media(max-width:560px){
  .ft-grid{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .page-hero{padding:126px 0 46px}
  .page-hero h1{font-size:clamp(1.7rem,8vw,2.2rem)}
  .btn{padding:12px 20px;font-size:.88rem}
  header .bar .btn{padding:10px 16px;font-size:.8rem}
  .logo-img{height:36px}
  .cta-band{flex-direction:column;align-items:flex-start}
  #lb .lb-prev{left:8px}#lb .lb-next{right:8px}
  #lb button{width:42px;height:42px}
}