/* =====================================================================
   NATA ARSIP — Stylesheet
   Brand: navy + oranye · Archivo (display) + IBM Plex Sans (body)
   ===================================================================== */

:root{
  --bg:#eef2f7; --surface:#ffffff; --surface-2:#f4f7fb;
  --ink:#0e2034; --muted:#55687d; --faint:#8295a8;
  --navy:#143256; --navy-deep:#0b2138; --navy-line:#1d4269;
  --orange:#ef7622; --orange-ink:#c75c10; --orange-soft:#fbe6d4;
  --line:#d8e0ea; --line-strong:#c3cedb;
  --ring:rgba(239,118,34,.35);
  --shadow:0 1px 2px rgba(14,32,52,.05), 0 8px 24px rgba(14,32,52,.07);
  --shadow-sm:0 1px 2px rgba(14,32,52,.06);
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
h1,h2,h3,h4{font-family:var(--f-display); line-height:1.14; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
svg{display:block; width:100%; height:100%}

.wrap{max-width:var(--maxw); margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));}
.eyebrow{font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-ink); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--orange); display:inline-block}

.btn{font-family:var(--f-body); font-weight:600; font-size:14.5px; cursor:pointer;
  border-radius:9px; padding:11px 20px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; transition:transform .12s ease, background .18s ease, box-shadow .18s ease}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(239,118,34,.28)}
.btn-primary:hover{transform:translateY(-1px); background:#e56c18}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{transform:translateY(-1px); background:#f1f4f8}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:18px; min-height:68px; padding-block:10px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.brand .logo{width:44px; height:44px; background:#fff; border-radius:9px; padding:4px;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); flex:none}
.brand .name{font-family:var(--f-display); font-weight:800; font-size:17px; letter-spacing:.02em; color:var(--ink); line-height:1; display:block}
.brand .pt{font-family:var(--f-mono); font-size:10px; color:var(--faint); letter-spacing:.04em; margin-top:3px; display:block}
.menu{display:flex; gap:4px; align-items:center}
.menu a{font-size:14.5px; font-weight:500; color:var(--muted); padding:8px 13px; border-radius:8px; white-space:nowrap}
.menu a:hover{color:var(--ink); background:var(--surface-2)}
.menu a.active{color:var(--navy); font-weight:600}
.menu a.active:not(.btn){background:var(--orange-soft)}
.nav-cta{margin-left:8px; color:#fff}
.nav-cta:hover{color:#fff}
.nav-burger{display:none; flex-direction:column; gap:5px; width:44px; height:40px; border:1px solid var(--line-strong);
  border-radius:9px; cursor:pointer; align-items:center; justify-content:center}
.nav-burger span{width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}

@media (max-width:860px){
  .nav-burger{display:flex}
  .menu{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:12px max(20px,env(safe-area-inset-left,0px)); max-height:0; overflow:hidden;
    opacity:0; pointer-events:none; transition:max-height .25s ease, opacity .2s ease}
  .nav-toggle:checked ~ .menu{max-height:420px; opacity:1; pointer-events:auto}
  .menu a{padding:12px 14px}
  .nav-cta{margin:6px 0 0; justify-content:center}
  .nav{position:relative; flex-wrap:wrap}
}

/* ---------- hero (beranda) ---------- */
.hero{position:relative; overflow:hidden; color:#eaf1f8;
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(239,118,34,.22), transparent 60%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);}
.hero::after{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(700px 400px at 78% 20%,#000,transparent 75%)}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:46px;
  align-items:center; padding-block:68px 76px}
.hero .eyebrow{color:#ffb67a}
.hero h1{font-size:clamp(34px,5.4vw,56px); font-weight:800; color:#fff; margin:18px 0 0; letter-spacing:-.02em}
.hero h1 .accent{color:var(--orange)}
.hero .lede{margin-top:20px; font-size:clamp(16px,1.9vw,18.5px); color:#c3d3e3; max-width:56ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero .trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12)}
.hero .trust .n{font-family:var(--f-display); font-weight:800; font-size:24px; color:#fff; line-height:1}
.hero .trust .l{font-size:12.5px; color:#9fb4c9; margin-top:5px}
.hero-badge{justify-self:center; width:100%; max-width:320px; background:#fff; border-radius:22px; padding:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative}
.hero-badge .tag{position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  padding:7px 16px; border-radius:999px; white-space:nowrap; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.1)}

/* ---------- page header (halaman dalam) ---------- */
.page-head{position:relative; overflow:hidden; color:#eaf1f8;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%)}
.page-head::after{content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(239,118,34,.28),transparent 70%)}
.page-head .wrap{position:relative; z-index:1; padding-block:54px 58px}
.page-head h1{font-size:clamp(28px,4.4vw,44px); font-weight:800; color:#fff; margin-top:14px}
.page-head p{color:#c3d3e3; margin-top:14px; font-size:17px; max-width:60ch}
.page-head .eyebrow{color:#ffb67a}

/* ---------- generic section ---------- */
section{scroll-margin-top:90px}
.band{padding-block:72px}
.band.alt{background:var(--surface)}
.sec-head{max-width:62ch}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(26px,3.6vw,38px); font-weight:800; margin-top:14px}
.sec-head p{color:var(--muted); margin-top:14px; font-size:17px}
.sec-head.center .eyebrow{justify-content:center}

/* ---------- cards grid (layanan) ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease}
.band.alt .card{background:var(--surface-2)}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.card .ic{width:46px; height:46px; border-radius:11px; background:var(--navy); color:#fff;
  display:grid; place-items:center; margin-bottom:16px; padding:11px; transition:background .2s ease}
.card:hover .ic{background:var(--orange)}
.card h3{font-size:18px; font-weight:700}
.card .ringkas{font-family:var(--f-mono); font-size:11.5px; color:var(--orange-ink); margin-top:4px; letter-spacing:.02em}
.card p{color:var(--muted); font-size:14.5px; margin-top:10px}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.about .copy p+p{margin-top:16px}
.about .copy .lead{font-size:18.5px; color:var(--ink); font-weight:500}
.about .copy p{color:var(--muted)}
.about .copy b{color:var(--ink)}
.vmcards{display:grid; gap:16px}
.vm{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:22px}
.band.alt .vm{background:var(--bg)}
.vm h3{font-size:16px; display:flex; align-items:center; gap:10px}
.vm h3 .ic{width:32px; height:32px; border-radius:8px; background:var(--orange-soft); color:var(--orange-ink);
  display:grid; place-items:center; flex:none; padding:7px}
.vm p{color:var(--muted); font-size:14.5px; margin-top:9px}

/* ---------- features (keunggulan) ---------- */
.feat{display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px; margin-top:42px; padding:0; list-style:none}
.feat li{display:flex; gap:16px; align-items:flex-start}
.feat .ic{width:42px; height:42px; border-radius:10px; flex:none; display:grid; place-items:center; padding:10px;
  background:var(--orange-soft); color:var(--orange-ink)}
.feat h3{font-size:16.5px; font-weight:700}
.feat p{color:var(--muted); font-size:14px; margin-top:4px}

/* ---------- steps (alur) ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; counter-reset:s}
.step{position:relative; padding:26px 22px; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
.band.alt .step{background:var(--surface-2)}
.step::before{counter-increment:s; content:"0" counter(s); font-family:var(--f-mono); font-weight:600;
  font-size:13px; color:var(--orange); letter-spacing:.1em}
.step h3{font-size:17px; font-weight:700; margin-top:10px}
.step p{color:var(--muted); font-size:14px; margin-top:8px}
.step .bar{height:3px; width:34px; background:var(--orange); border-radius:3px; margin-top:16px}

/* ---------- team (our team) ---------- */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px}
.member{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease}
.band.alt .member{background:var(--surface-2)}
.member:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.member .avatar{width:96px; height:96px; border-radius:50%; margin:0 auto 16px; overflow:hidden;
  display:grid; place-items:center; background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:30px; border:3px solid var(--surface);
  box-shadow:0 0 0 3px var(--orange-soft)}
.member .avatar img{width:100%; height:100%; object-fit:cover}
.member h3{font-size:17px; font-weight:700}
.member .role{font-family:var(--f-mono); font-size:11.5px; color:var(--orange-ink); margin-top:5px; text-transform:uppercase; letter-spacing:.05em}
.member .bio{color:var(--muted); font-size:13.5px; margin-top:12px}
.member .social{display:flex; gap:10px; justify-content:center; margin-top:14px}
.member .social a{width:34px; height:34px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line);
  display:grid; place-items:center; padding:8px; color:var(--muted)}
.member .social a:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.band.alt .member .social a{background:var(--bg)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.cinfo{display:grid; gap:14px}
.cinfo .item{display:flex; gap:15px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:13px; padding:18px}
.band.alt .cinfo .item{background:var(--surface-2)}
.cinfo .ic{width:44px; height:44px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:none; padding:11px}
.cinfo .l{font-size:11.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; font-family:var(--f-mono)}
.cinfo .v{font-size:15.5px; color:var(--ink); font-weight:500; margin-top:3px; word-break:break-word}
.cinfo .v a:hover{color:var(--orange-ink)}
.contact-cta{background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:#eaf1f8; border-radius:18px; padding:32px}
.contact-cta h3{color:#fff; font-size:21px}
.contact-cta p{color:#c3d3e3; margin-top:12px; font-size:15px}
.contact-cta .btn{margin-top:20px}
.map-note{font-family:var(--f-mono); font-size:11.5px; color:#ffb67a; margin-top:16px}

/* ---------- strip CTA (bawah beranda) ---------- */
.cta-strip{background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:#eaf1f8; position:relative; overflow:hidden}
.cta-strip::after{content:""; position:absolute; right:-80px; top:-80px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle,rgba(239,118,34,.3),transparent 70%)}
.cta-strip .inner{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.cta-strip h2{color:#fff; font-size:clamp(24px,3.4vw,34px)}
.cta-strip p{color:#c3d3e3; margin-top:10px; max-width:48ch}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#9fb4c9; padding-block:48px 28px; font-size:14px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand{display:flex; gap:13px; align-items:flex-start}
.foot-brand .logo{width:46px; height:46px; background:#fff; border-radius:10px; padding:5px; flex:none}
.foot-brand strong{color:#fff; font-family:var(--f-display); letter-spacing:.02em; font-size:17px}
.foot-brand .pt{font-size:12px; color:#7f95ab; font-family:var(--f-mono); margin-top:3px}
.foot-tag{color:var(--orange); font-family:var(--f-mono); font-size:12px; margin-top:8px; letter-spacing:.06em}
.foot-col h4{color:#fff; font-size:14px; font-family:var(--f-display); margin-bottom:14px}
.foot-col a, .foot-col span{display:block; color:#c3d3e3; margin-bottom:9px}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; color:#7f95ab; font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:36px; padding-block:48px 56px}
  .hero-badge{order:-1; max-width:250px; padding:24px}
  .about, .contact-grid{grid-template-columns:1fr; gap:30px}
  .grid, .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr; gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:540px){
  .band{padding-block:52px}
  .grid, .grid.cols-2, .steps, .team{grid-template-columns:1fr}
  .hero .trust{gap:20px}
  .foot-grid{grid-template-columns:1fr}
}