/* Vishel Mandiri v1.1 - gaya utama tema (premium + efek) */

:root{
  --navy:#0A2E52; --navy-deep:#061B32; --teal:#15653F; --amber:#E5A80E;
  --sand:#C9C2B3; --paper:#F5F3EE; --ink:#12202B;
  --line:rgba(245,243,238,0.14);
  --radius:18px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --shadow-soft:0 10px 30px -14px rgba(10,46,82,.22);
  --shadow-lift:0 28px 54px -22px rgba(10,46,82,.42);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{
  font-family:'Inter', sans-serif; background:var(--paper); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:'Space Grotesk', sans-serif;}
img{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--amber); color:var(--navy-deep);}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
section{padding:104px 0; position:relative;}

/* ===== Progress & tombol ke atas ===== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:linear-gradient(90deg,var(--amber),#3fb37f,var(--navy));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}
.admin-bar .scroll-progress{top:32px;}
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:80; width:48px; height:48px; border:0; border-radius:50%;
  background:var(--navy); color:var(--amber); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 14px 30px -10px rgba(6,27,50,.6);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .3s;
}
.to-top.is-show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--teal); transform:translateY(-3px);}
.to-top svg{width:20px; height:20px;}

/* ===== Header ===== */
header.nav{
  position:sticky; top:0; z-index:100; background:#FFFFFF;
  border-bottom:1px solid rgba(10,46,82,0.08);
  transition:background .35s, box-shadow .35s, border-color .35s;
}
header.nav.is-scrolled{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 10px 34px -14px rgba(10,46,82,.28); border-color:transparent;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:18px 0; transition:padding .35s var(--ease);}
header.nav.is-scrolled .nav-row{padding:11px 0;}
.brand{
  color:var(--navy); font-size:1.2rem; font-weight:700; letter-spacing:.01em; text-decoration:none;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.brand-mark{height:30px; width:auto; flex:none; display:block; transition:height .35s var(--ease), transform .4s var(--ease);}
.brand:hover .brand-mark{transform:scale(1.08) rotate(-3deg);}
header.nav.is-scrolled .brand-mark{height:26px;}
nav.links{display:flex; gap:32px;}
nav.links ul{display:flex; gap:32px; list-style:none;}
nav.links a{color:#3D4F5C; text-decoration:none; font-size:.94rem; font-weight:500; position:relative; padding:6px 0; transition:color .25s;}
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--teal));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
nav.links a:hover, nav.links a.is-active{color:var(--navy);}
nav.links a:hover::after, nav.links a.is-active::after{transform:scaleX(1);}
.nav-cta, .btn-primary{
  position:relative; overflow:hidden; isolation:isolate; text-decoration:none; font-weight:600; color:var(--navy-deep);
  background:linear-gradient(135deg,#F6C22E,#E5A80E); border-radius:10px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta{font-size:.9rem; padding:10px 20px;}
.btn-primary{padding:14px 28px; font-size:.98rem; display:inline-block;}
.nav-cta::after, .btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
.nav-cta:hover, .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(229,168,14,.75);}
.nav-cta:hover::after, .btn-primary:hover::after{transform:translateX(130%);}
.nav-cta-mobile{display:none;}
.nav-toggle{display:none; width:44px; height:44px; border:0; background:transparent; border-radius:10px; cursor:pointer; position:relative;}
.nav-toggle span{position:absolute; left:11px; right:11px; height:2px; border-radius:2px; background:var(--navy); transition:transform .35s var(--ease), opacity .2s, top .35s var(--ease);}
.nav-toggle span:nth-child(1){top:15px;} .nav-toggle span:nth-child(2){top:21px;} .nav-toggle span:nth-child(3){top:27px;}
.nav-open .nav-toggle span:nth-child(1){top:21px; transform:rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){top:21px; transform:rotate(-45deg);}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden; isolation:isolate; background-color:var(--navy-deep);
  color:var(--paper); padding:112px 0 136px;
}
.hero::before{
  content:""; position:absolute; top:-140px; right:0; bottom:0; left:0; z-index:-2;
  background-image:var(--hero-img); background-size:cover; background-position:70% center; background-repeat:no-repeat;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
  animation:kenburns 30s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,27,50,.80) 0%,rgba(6,27,50,.44) 46%,rgba(6,27,50,.06) 100%),
    linear-gradient(0deg,rgba(6,27,50,.6) 0%,transparent 38%);
}
@keyframes kenburns{from{scale:1;} to{scale:1.12;}}
.hero-video{
  position:absolute; top:-140px; left:0; width:100%; height:calc(100% + 140px); z-index:-2;
  object-fit:cover; object-position:70% center; pointer-events:none;
  transform:translate3d(0,var(--py,0px),0); will-change:transform;
  background:transparent;
}
.hero.has-video::before{animation:none;}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.eyebrow-plain{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px; margin-bottom:22px; border-radius:999px;
  color:var(--amber); font-size:.88rem; font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.eyebrow-plain::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(229,168,14,.7); animation:ping 2.2s ease-out infinite;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(229,168,14,.6);} 80%,100%{box-shadow:0 0 0 12px rgba(229,168,14,0);}}
.hero h1{
  font-size:clamp(2.4rem,4.6vw,3.7rem); font-weight:700; line-height:1.08; letter-spacing:-.02em; max-width:14ch;
  text-shadow:0 4px 30px rgba(6,27,50,.45);
}
.hero p.lede{margin-top:24px; font-size:1.12rem; color:#E6E1D5; text-shadow:0 1px 10px rgba(6,27,50,.5); max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}
.btn-ghost{
  color:var(--paper); text-decoration:none; font-weight:500; padding:14px 28px; border-radius:10px; font-size:.98rem;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .3s, transform .35s var(--ease), border-color .3s;
}
.btn-ghost:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); transform:translateY(-2px);}
.hero-stats{display:flex; gap:16px; margin-top:52px; flex-wrap:wrap;}
.hero-stats div{
  padding:16px 22px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .4s var(--ease), background .4s;
}
.hero-stats div:hover{transform:translateY(-5px); background:rgba(255,255,255,.15);}
.hero-stats div strong{display:block; font-size:1.8rem; line-height:1.2; font-family:'Space Grotesk',sans-serif; color:var(--amber); font-variant-numeric:tabular-nums;}
.hero-stats div span{font-size:.82rem; color:#E6E1D5;}

/* animasi masuk hero (CSS murni) */
.hero .eyebrow-plain,.hero h1,.hero p.lede,.hero .hero-actions,.hero .hero-stats{animation:fadeUp .95s var(--ease) both;}
.hero h1{animation-delay:.12s;} .hero p.lede{animation-delay:.26s;} .hero .hero-actions{animation-delay:.4s;} .hero .hero-stats{animation-delay:.54s;}
@keyframes fadeUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;}}

.scroll-cue{
  position:absolute; left:50%; bottom:28px; z-index:3; width:26px; height:42px; margin-left:-13px;
  border:2px solid rgba(255,255,255,.6); border-radius:14px; opacity:.85; transition:opacity .3s;
}
.scroll-cue:hover{opacity:1;}
.scroll-cue span{position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--amber); animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%{transform:translateY(0); opacity:1;} 70%{transform:translateY(14px); opacity:0;} 100%{opacity:0;}}

/* ===== Pita berjalan ===== */
.ticker{background:linear-gradient(90deg,#0e4a2f,var(--teal),#0e4a2f); color:var(--paper); padding:15px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.08);}
.ticker .wrap{display:flex; gap:44px; flex-wrap:wrap; justify-content:center; font-size:.85rem; letter-spacing:.03em; color:#DCEBDD;}
.ticker.is-marquee .wrap{max-width:none; padding:0; display:block;}
.ticker-track{display:flex; width:max-content; animation:marquee 42s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-group{display:flex; flex:none;}
.ticker-group span{display:inline-flex; align-items:center; gap:56px; padding-right:56px; white-space:nowrap; font-size:.85rem; letter-spacing:.03em; color:#DCEBDD;}
.ticker-group span::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber);}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ===== Kepala seksi ===== */
.section-head{max-width:640px; margin-bottom:56px;}
.section-tag{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; margin-bottom:16px;
  color:var(--teal); font-weight:600; font-size:.85rem; background:rgba(21,101,63,.1); border:1px solid rgba(21,101,63,.18);
}
.section-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--navy);}
.section-head p{margin-top:16px; color:#4a5a63; font-size:1.04rem; max-width:52ch;}

/* ===== Kegiatan usaha ===== */
#kegiatan-usaha{background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);}
.kegiatan-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.kegiatan-list li{
  position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:20px; padding:28px;
  background:#fff; border:1px solid rgba(10,46,82,.08); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.kegiatan-list li:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:rgba(229,168,14,.45);}
.kegiatan-num{
  flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:var(--amber);
  background:linear-gradient(135deg,var(--navy),#15538f); transition:transform .5s var(--ease);
}
.kegiatan-list li:hover .kegiatan-num{transform:rotate(-8deg) scale(1.1);}
.kegiatan-text{font-size:1.04rem; font-weight:600; color:var(--navy); line-height:1.45;}

/* ===== Layanan ===== */
#layanan{background:#fff;}
#layanan::before{
  content:""; position:absolute; right:-160px; top:40px; width:480px; height:480px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(229,168,14,.14),transparent 65%); animation:floaty 16s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translate(0,0);} 50%{transform:translate(-40px,30px);}}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative;}
.svc-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:270px; padding:30px 26px;
  background:var(--paper); border:1px solid rgba(10,46,82,.08); border-radius:var(--radius); box-shadow:var(--shadow-soft);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.svc-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lift); border-color:rgba(229,168,14,.5);}
.svc-card::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--amber),var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.svc-card:hover::after{transform:scaleX(1);}
.svc-icon{
  width:54px; height:54px; padding:13px; margin-bottom:22px; border-radius:15px;
  background:linear-gradient(135deg,rgba(21,101,63,.14),rgba(229,168,14,.22));
  transition:transform .5s var(--ease);
}
.svc-card:hover .svc-icon{transform:rotate(-7deg) scale(1.1);}
.svc-card h3{font-size:1.12rem; font-weight:600; color:var(--navy); margin-bottom:10px;}
.svc-card p{font-size:.92rem; color:#5a6a72; flex:1;}
.svc-mode{font-size:.78rem; color:var(--teal); font-weight:600; margin-top:18px; padding-top:14px; border-top:1px dashed rgba(10,46,82,.15);}

/* efek sorot kursor */
.svc-card::before, .testi-card::before, .kegiatan-list li::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; z-index:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(229,168,14,.17),transparent 45%);
}
.svc-card:hover::before, .testi-card:hover::before, .kegiatan-list li:hover::before{opacity:1;}
.svc-card > *, .testi-card > *, .kegiatan-list li > *{position:relative; z-index:1;}

/* ===== Cara kerja ===== */
.how{
  color:var(--paper); overflow:hidden;
  background:
    radial-gradient(60% 80% at 85% 0%,rgba(21,101,63,.45),transparent 70%),
    radial-gradient(50% 60% at 0% 100%,rgba(229,168,14,.14),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/56px 56px,
    var(--navy-deep);
}
.how .section-tag{color:var(--amber); background:rgba(229,168,14,.1); border-color:rgba(229,168,14,.25);}
.how .section-head h2{color:var(--paper);}
.how .section-head p{color:var(--sand);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); position:relative;}
.steps::before{
  content:""; position:absolute; top:19px; left:0; right:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--amber),rgba(229,168,14,.15));
  transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease) .2s;
}
.steps.is-visible::before, html:not(.js-ready) .steps::before{transform:scaleX(1);}
.step{position:relative; padding-right:22px;}
.step-dot{
  position:relative; z-index:1; width:40px; height:40px; margin-bottom:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:.95rem;
  color:var(--navy-deep); background:linear-gradient(135deg,#F6C22E,#E5A80E);
  box-shadow:0 0 0 6px rgba(229,168,14,.14); transition:transform .45s var(--ease), box-shadow .45s;
}
.step:hover .step-dot{transform:scale(1.15); box-shadow:0 0 0 10px rgba(229,168,14,.2);}
.step h3{font-size:1.04rem; font-weight:600; margin-bottom:8px;}
.step p{font-size:.9rem; color:var(--sand);}

/* ===== Cakupan ===== */
.coverage{background:var(--paper);}
.coverage .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center;}
.coverage-list{list-style:none; margin-top:28px;}
.coverage-list li{
  display:flex; justify-content:space-between; gap:16px; padding:16px 12px; border-bottom:1px solid #E1DBCC; font-size:.96rem; border-radius:10px;
  transition:padding .35s var(--ease), background .35s;
}
.coverage-list li:hover{padding-left:22px; background:linear-gradient(90deg,rgba(229,168,14,.14),transparent);}
.coverage-list li span:first-child{color:var(--navy); font-weight:600;}
.coverage-list li span:last-child{color:#6c7a80; font-size:.88rem; text-align:right;}
/* peta HUD: lihat blok 'Peta futuristik' di bawah */

/* ===== Testimoni ===== */
#testimoni{background:#fff;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{
  position:relative; overflow:hidden; padding:32px 28px; background:var(--paper); border:1px solid rgba(10,46,82,.08);
  border-radius:var(--radius); box-shadow:var(--shadow-soft); display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.testi-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lift); border-color:rgba(229,168,14,.45);}
.testi-quote{font-size:.98rem; color:var(--ink); margin-bottom:24px; flex:1;}
.testi-quote::before{content:"\201C"; display:block; font-family:'Space Grotesk',sans-serif; font-size:4.4rem; line-height:.7; height:34px; color:var(--amber); opacity:.8;}
.testi-who{padding-top:18px; border-top:1px solid rgba(10,46,82,.1);}
.testi-who strong{display:block; font-size:.95rem; color:var(--navy);}
.testi-who span{font-size:.82rem; color:#6c7a80;}

/* ===== CTA ===== */
.cta-band{
  color:var(--paper); text-align:center; overflow:hidden; isolation:isolate;
  background:linear-gradient(125deg,#0d4a2e,var(--teal) 45%,#0b3a63);
  background-size:200% 200%; animation:gradShift 14s ease-in-out infinite alternate;
}
@keyframes gradShift{from{background-position:0% 50%;} to{background-position:100% 50%;}}
.cta-band::before,.cta-band::after{content:""; position:absolute; border-radius:50%; z-index:-1; pointer-events:none; filter:blur(8px);}
.cta-band::before{left:-8%; top:-50%; width:520px; height:520px; background:radial-gradient(circle,rgba(229,168,14,.4),transparent 65%); animation:floaty 15s ease-in-out infinite;}
.cta-band::after{right:-8%; bottom:-55%; width:560px; height:560px; background:radial-gradient(circle,rgba(90,170,255,.32),transparent 65%); animation:floaty 18s ease-in-out infinite reverse;}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; max-width:20ch; margin:0 auto;}
.cta-band p{margin-top:16px; color:#D5ECE4; max-width:46ch; margin-left:auto; margin-right:auto;}
.cta-band .hero-actions{justify-content:center; margin-top:34px;}
.cta-band .btn-primary{animation:glow 3s ease-in-out infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(229,168,14,.0);} 50%{box-shadow:0 0 34px 2px rgba(229,168,14,.45);}}

/* ===== Footer ===== */
footer{position:relative; background:var(--navy-deep); color:var(--sand); padding:64px 0 calc(30px + env(safe-area-inset-bottom, 0px));}
footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--teal),var(--navy));}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
.foot-grid h4{color:var(--paper); font-size:.9rem; font-weight:600; margin-bottom:16px;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:10px; font-size:.88rem;}
.foot-grid a{text-decoration:none; transition:color .25s, padding .3s var(--ease);}
.foot-grid a:hover{color:var(--amber); padding-left:6px;}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:.8rem; color:#7f8e94; flex-wrap:wrap; gap:10px;}

/* ===== Efek muncul saat scroll ===== */
.js-ready .reveal{
  opacity:0; transform:translateY(34px) scale(.98);
  transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0ms);
}
.js-ready .reveal.is-visible{opacity:1; transform:none;}

/* ===== Halaman biasa ===== */
.admin-bar header.nav{top:32px;}
.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{left:12px; top:12px; background:#fff; padding:8px 12px; z-index:200;}
.page-content .wrap{max-width:820px;}
.page-content h1{font-size:clamp(1.8rem,3.4vw,2.5rem); color:var(--navy); margin-bottom:24px;}
.entry-content > * + *{margin-top:1.1em;}
.entry-content h2,.entry-content h3{color:var(--navy); margin-top:1.6em;}
.entry-content ul,.entry-content ol{padding-left:1.4em;}
.entry-content img{height:auto; border-radius:10px;}
.entry-content a{color:var(--teal);}
.post-item{padding:22px 0; border-bottom:1px solid #DED7C8;}
.post-item h2{font-size:1.3rem; color:var(--navy);}
.post-item h2 a{text-decoration:none;}
.post-item .meta{font-size:.82rem; color:#6c7a80; margin:4px 0 8px;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* ===== Responsif ===== */
@media (max-width:1000px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .admin-bar .scroll-progress{top:46px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-cta-mobile{display:block; margin-top:14px; text-align:center; padding:14px 20px; font-size:.95rem;}
  nav.links{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; padding:6px 28px 22px;
    background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(10,46,82,.1); box-shadow:0 24px 40px -20px rgba(10,46,82,.35);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s, transform .35s var(--ease), visibility .3s;
  }
  .nav-open nav.links{opacity:1; visibility:visible; transform:none;}
  nav.links ul{flex-direction:column; gap:0; width:100%;}
  nav.links a{display:block; padding:15px 2px; font-size:1rem; border-bottom:1px solid rgba(10,46,82,.08);}
  nav.links a::after{display:none;}
  nav.links .nav-cta-mobile{color:var(--navy-deep); border-bottom:0; font-weight:600;}

  .hero{padding:64px 0 330px;}
  .hero .wrap{grid-template-columns:1fr;}
  .hero::before{top:auto; height:480px; background-position:72% bottom; transform:none;}
  .hero-video{top:auto; bottom:0; height:480px; object-position:72% bottom; transform:none;}
  .hero::after{background:linear-gradient(180deg,rgba(6,27,50,1) 0%,rgba(6,27,50,1) calc(100% - 470px),rgba(6,27,50,0) calc(100% - 270px));}
  .scroll-cue{display:none;}
  .kegiatan-list{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .steps::before{display:none;}
  .coverage .wrap{grid-template-columns:1fr; gap:40px;}
  .testi-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  section{padding:68px 0;}
  .brand{font-size:1.02rem;}
  .hero{padding:48px 0 340px;}
  .hero-stats div{padding:14px 18px;}
  .svc-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}
/* ===== Peta futuristik (cakupan) ===== */
.map-hud{perspective:1400px; min-width:0;}
.hud-card{
  position:relative; overflow:hidden; border-radius:22px; padding:0 0 4px; color:#a9d8e6;
  background:
    radial-gradient(70% 60% at 50% 38%,rgba(40,140,200,.22),transparent 70%),
    linear-gradient(rgba(77,225,255,.05) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(77,225,255,.05) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(160deg,#071d36,#040f1d 70%);
  border:1px solid rgba(77,225,255,.28);
  box-shadow:0 30px 60px -28px rgba(4,15,29,.85), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 46px -12px rgba(77,225,255,.3);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease), box-shadow .5s;
  transform-style:preserve-3d; will-change:transform;
}
.hud-card::before,.hud-card::after{content:""; position:absolute; width:18px; height:18px; border:2px solid #4de1ff; opacity:.8; pointer-events:none; z-index:3;}
.hud-card::before{top:10px; left:10px; border-right:0; border-bottom:0; border-top-left-radius:6px;}
.hud-card::after{bottom:10px; right:10px; border-left:0; border-top:0; border-bottom-right-radius:6px;}
.hud-scan{position:absolute; left:0; right:0; top:0; height:90px; z-index:2; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(77,225,255,.10),transparent); animation:hudScan 7s linear infinite;}
@keyframes hudScan{from{transform:translateY(-120px);} to{transform:translateY(520px);}}
.hud-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px 0 34px; font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.2em; text-transform:uppercase;}
.hud-title{color:#e6f7ff;}
.hud-status{display:inline-flex; align-items:center; gap:8px; color:#5dffa0;}
.hud-status i{width:7px; height:7px; border-radius:50%; background:#5dffa0; box-shadow:0 0 10px #5dffa0; animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}
.hud-map{display:block; width:100%; height:auto; padding:6px 10px 0; overflow:hidden;}
.hud-grid path{stroke:rgba(77,225,255,.10); stroke-width:.6; fill:none;}
.hud-grid text{font:500 7px ui-monospace,SFMono-Regular,Menlo,monospace; fill:rgba(169,216,230,.45); letter-spacing:.08em;}
.hud-grid .eq{stroke:rgba(255,201,77,.35); stroke-dasharray:3 4; animation:dash 3s linear infinite;}
.hud-grid .eq-t{fill:rgba(255,201,77,.6);}
.hud-map .dots{fill:none; stroke:#2f9cc9; stroke-width:2.7; stroke-linecap:round; opacity:.62;}
.hud-map .dots.hot{stroke:#9ff6ff; stroke-width:3.3; opacity:1;}
.hud-map .radar-hub circle:first-child{fill:#4de1ff;}
.hud-map .radar-hub .rr{fill:none; stroke:rgba(77,225,255,.22); stroke-width:.8; transform-box:fill-box; transform-origin:center; animation:radarRing 4.5s ease-out infinite;}
.hud-map .radar-hub .rr:nth-of-type(3){animation-delay:1.5s;} .hud-map .radar-hub .rr:nth-of-type(4){animation-delay:3s;}
@keyframes radarRing{0%{transform:scale(.4); opacity:0;} 25%{opacity:1;} 100%{transform:scale(1.15); opacity:0;}}
.hud-map .route{fill:none; stroke-width:1.3; stroke-linecap:round; stroke-dasharray:4 6; animation:dash 1.4s linear infinite;}
.hud-map .route-glow{fill:none; stroke-width:4; opacity:.16; filter:blur(2px);}
.hud-map .laut{stroke:#4de1ff;} .hud-map .darat{stroke:#5dffa0;} .hud-map .udara{stroke:#ffc94d;}
.hud-map .route.darat{stroke-dasharray:none; animation:none; stroke-width:1.5;}
.hud-map .route.udara{stroke-dasharray:1.5 5;}
.hud-map .pkt.laut,.hud-map .pkt.udara,.hud-map .pkt.darat{stroke:none;}
.hud-map .hub{cursor:pointer; outline:none;}
.hud-map .hub .core{fill:#fff; stroke:#4de1ff; stroke-width:1.5; transition:r .3s var(--ease), fill .3s;}
.hud-map .hub .ring{fill:none; stroke:#4de1ff; stroke-width:1; transform-box:fill-box; transform-origin:center; animation:hubPulse 2.8s ease-out infinite;}
.hud-map .hub .ring.r2{animation-delay:1.4s;}
@keyframes hubPulse{0%{transform:scale(.8); opacity:.9;} 100%{transform:scale(3.4); opacity:0;}}
.hud-map .hub .hit{fill:transparent;}
.hud-map .hub-label{font:600 8.6px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; fill:#cfefff; letter-spacing:.14em; paint-order:stroke; stroke:rgba(4,15,29,.85); stroke-width:2.4px; transition:fill .3s;}
.hud-map .hub:hover .core,.hud-map .hub:focus-visible .core,.hud-map .hub.is-on .core{r:4.6px; fill:#ffc94d; stroke:#fff;}
.hud-map .hub:hover .hub-label,.hud-map .hub:focus-visible .hub-label,.hud-map .hub.is-on .hub-label{fill:#ffc94d;}
@keyframes dash{to{stroke-dashoffset:-20;}}
.hud-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:6px 22px 16px 34px; font:500 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em;}
.hud-legend{display:flex; gap:16px; list-style:none; text-transform:uppercase; letter-spacing:.14em; color:#8fbfd2;}
.hud-legend li{display:flex; align-items:center; gap:7px;}
.hud-legend li::before{content:""; width:20px; height:0; border-top:2px dashed currentColor;}
.hud-legend .lg-laut::before{border-color:#4de1ff;} .hud-legend .lg-udara::before{border-color:#ffc94d; border-top-style:dotted;} .hud-legend .lg-darat::before{border-color:#5dffa0; border-top-style:solid;}
.hud-readout{color:#e6f7ff; min-height:1.4em; flex:1 1 220px; text-align:right;}
.hud-readout b{color:#ffc94d; font-weight:600;}

@media (max-width:520px){
  .hud-map .hub-label{display:none;}
  .hud-readout{text-align:left; flex-basis:100%;}
  .hud-head{padding-left:30px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .js-ready .reveal{opacity:1; transform:none;}
}