/* INTINet v3 "Denyut Nusantara" — one luminous network story, night → day → night.
   Brand: red INTi + sky Net + growing dot-arc. Display Mona Sans (800 vs 200), body Plus Jakarta Sans, data JetBrains Mono. */
:root{
  --malam:#06101F; --navy:#0A1A33; --navy-2:#12284A;
  --sky:#1BA3DD; --sky-ink:#0A6FA0; --sky-glow:#6CCBF2; --samudra:#0B5E99; --samudra-2:#0F74B4;
  --merah:#E3242B; --merah-tua:#B81B21;
  --awan:#F3F7FB; --putih:#FFFFFF; --tinta:#0E1B2C; --abu:#4A5B70; --abu-dark:#B7C6D8;
  --hijau:#2FD08A; --garis:#D9E3EE; --line-dark:rgba(255,255,255,.12);
  --grad:linear-gradient(90deg,#E3242B,#1BA3DD);
  --f-display:'Mona Sans','Segoe UI',system-ui,sans-serif;
  --f-body:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --fs-hero:clamp(2.5rem,1rem + 3.9vw,4.5rem);
  --fs-h2:clamp(2rem,1.2rem + 3.2vw,4rem);
  --fs-h3:clamp(1.25rem,1.05rem + .8vw,1.75rem);
  --fs-statement:clamp(1.6rem,1.1rem + 2.2vw,3rem);
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(5rem,9vw,8.5rem);
  --ease:cubic-bezier(.16,1,.3,1); --ease-h:cubic-bezier(.25,1,.5,1);
  --hdr:72px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.motion:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--malam);color:var(--tinta);font:400 var(--fs-body)/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-optical-sizing:auto;margin:0;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h1 b,h2 b,h3 b{font-weight:800}
[data-split] > div{padding-bottom:.16em;margin-bottom:-.16em}
h2{font-size:var(--fs-h2);font-weight:200;max-width:20ch}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:4px}
[data-theme=malam] :focus-visible,[data-theme=samudra] :focus-visible,.svc--1 :focus-visible,.svc--2 :focus-visible,.svc--5 :focus-visible,.hdr:not(.is-light) :focus-visible,.hdr.is-open :focus-visible,.drawer :focus-visible,.ftr :focus-visible,.ticker :focus-visible{outline-color:#fff}
.svc--3 :focus-visible,.svc--4 :focus-visible{outline-color:var(--tinta)}
.eyebrow-h{font:700 .8125rem/1.3 var(--f-mono);letter-spacing:.08em;max-width:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--merah);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{max-width:1320px;margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.eyebrow{font:700 .8125rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-ink)}
.eyebrow--light{color:#D6ECFA} .eyebrow--sky{color:var(--sky-glow)}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.55;max-width:58ch}

/* buttons & links */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 1.5rem;border-radius:999px;font:600 1rem/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:background-color .25s var(--ease-h),color .25s,transform .25s var(--ease-h),box-shadow .25s}
.btn--sm{min-height:40px;padding:0 1.1rem;font-size:.9375rem}
.btn--lg{min-height:58px;padding:0 2rem;font-size:1.0625rem}
.btn--red{background:var(--merah);color:#fff;box-shadow:0 10px 30px -12px rgba(227,36,43,.7)}
.btn--red:hover{background:var(--merah-tua)}
.btn--red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;pointer-events:none}
html.motion .btn--red.shine::after{animation:shine 1s ease .1s 1 both}
@keyframes shine{to{background-position:-50% 0}}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.06)}
.link{font-weight:600;color:currentColor;text-decoration:none;display:inline-flex;align-items:center;gap:.4em;min-height:44px}
.arrow::after{content:"→";display:inline-block;margin-left:.15em;transition:transform .3s var(--ease-h),opacity .3s}
@media (hover:hover){.arrow::after{opacity:0;transform:translateX(-4px)}.arrow:hover::after,.arrow:focus-visible::after{opacity:1;transform:none}}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{font:700 .75rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:.55em .8em;border-radius:999px;background:rgba(14,27,44,.07);color:var(--tinta)}
.tags--dark li{background:rgba(255,255,255,.08);color:#E6EEF7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tags .t-red{background:var(--merah);color:#fff;box-shadow:none} .tags .t-sky{background:var(--sky);color:var(--malam);box-shadow:none}


/* ---------- header ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.hdr{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);color:#fff;transition:transform .35s var(--ease),background-color .3s,color .3s,box-shadow .3s}
.hdr__in{max-width:1400px;margin-inline:auto;height:var(--hdr);display:flex;align-items:center;gap:1.5rem;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.hdr.is-scrolled{background:rgba(6,16,31,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line-dark)}
.hdr.is-light{color:var(--tinta)}
.hdr.is-light.is-scrolled{background:rgba(255,255,255,.84);box-shadow:0 1px 0 var(--garis)}
.hdr__logo{position:relative;display:block;width:118px;height:40px;flex:none}
.hdr__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .15s}
.hdr .logo-light{opacity:0} .hdr.is-light .logo-light{opacity:1} .hdr.is-light .logo-dark{opacity:0}
.hdr.is-open,.hdr.is-open.is-light,.hdr.is-open.is-scrolled{background:var(--malam);color:#fff;box-shadow:0 1px 0 var(--line-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr.is-open .logo-light{opacity:0} .hdr.is-open .logo-dark{opacity:1}
.hdr__nav{display:flex;gap:.25rem;margin-inline:auto}
.hdr__nav a{position:relative;padding:.55rem .8rem;border-radius:999px;font-weight:600;font-size:.9375rem;text-decoration:none;opacity:.9;transition:opacity .2s,background-color .2s}
.hdr__nav a:hover{opacity:1;background:rgba(127,160,200,.14)}
.hdr__end{display:flex;align-items:center;gap:.75rem;margin-left:auto}
/* sakelar bahasa ID | EN di header (dipasang build.py lewat penanda @bhs): bahasa aktif = pil terisi, bahasa lain = tautan */
.bhs{display:flex;align-items:center;gap:2px;flex:none;padding:3px;border-radius:999px;background:rgba(127,160,200,.16);font:700 .75rem/1 var(--f-mono);letter-spacing:.04em}
.bhs a,.bhs__on{display:grid;place-items:center;min-width:34px;height:30px;padding:0 .45rem;border-radius:999px;text-decoration:none}
.bhs a{opacity:.82;transition:opacity .2s,background-color .2s}
.bhs a:hover{opacity:1;background:rgba(127,160,200,.24)}
.bhs__on{background:#fff;color:var(--malam)}
.hdr.is-light:not(.is-open) .bhs__on{background:var(--tinta);color:#fff}
@media (max-width:380px){.hdr__in{gap:.75rem}.hdr__end{gap:.5rem}}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(47,208,138,0)}}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(127,160,200,.16);color:inherit;cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .3s var(--ease),background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
/* drawer berada di LUAR .hdr: backdrop-filter/transform pada .hdr membuat position:fixed di dalamnya terkurung setinggi header */
.drawer{position:fixed;z-index:49;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0;overscroll-behavior:contain;background:var(--malam);color:#fff;padding:2rem max(var(--pad),env(safe-area-inset-left,0px)) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font:700 1.6rem/1 var(--f-display);text-decoration:none;padding:.85rem 0;border-bottom:1px solid var(--line-dark)}
.drawer__end{display:grid;gap:1rem;margin-top:2rem}
.drawer__end p{font:400 .875rem var(--f-mono);color:var(--abu-dark)}
@media (max-width:1180px){.hdr__nav{display:none}.burger{display:grid}.hdr__end{margin-left:auto}
  html:not(.js) .burger{display:none}
  html:not(.js) .hdr__nav{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;margin-inline:.5rem 0;scrollbar-width:none}
  html:not(.js) .hdr__nav a{white-space:nowrap;flex:none}
  html:not(.js) .hdr__cta{display:none}}
@media (max-width:640px){.hdr__cta{display:none}:root{--hdr:64px}}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;min-height:min(100svh,900px);background:linear-gradient(180deg,var(--malam) 0%,var(--navy) 100%);color:#fff;display:flex;flex-direction:column}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%}
.aurora__a{width:70vw;height:70vw;right:-22vw;top:-26vw;background:radial-gradient(closest-side,rgba(227,36,43,.30),transparent)}
.aurora__b{width:80vw;height:80vw;left:-30vw;bottom:-38vw;background:radial-gradient(closest-side,rgba(27,163,221,.38),transparent)}
.aurora--flip .aurora__a{right:auto;left:-24vw;top:-30vw}.aurora--flip .aurora__b{left:auto;right:-30vw;bottom:-40vw}
html.motion .aurora__a{animation:auraA 16s ease-in-out infinite alternate}
html.motion .aurora__b{animation:auraB 18s ease-in-out infinite alternate}
@keyframes auraA{to{transform:translate(-8%,6%) scale(1.12)}} @keyframes auraB{from{transform:scale(1.1)}to{transform:translate(10%,-6%) scale(.92)}}
/* video latar hero: poster = latar kotak (tampil tanpa JS / hemat data / kurangi gerak); video muncul setelah benar-benar diputar */
.hero__video{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;--vpos:50% 50%;background:var(--malam) url(../assets/hero/kota-malam.webp) var(--vpos)/cover no-repeat}
.hero__video video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--vpos);opacity:0;transition:opacity 1.2s ease}
.hero__video.is-on video{opacity:1}
.hero__video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,31,.86) 0%,rgba(6,16,31,.66) 34%,rgba(6,16,31,.22) 64%,rgba(6,16,31,.06) 100%),linear-gradient(180deg,rgba(6,16,31,.5) 0%,rgba(6,16,31,0) 20%,rgba(6,16,31,0) 72%,rgba(10,26,51,.92) 100%)}
.hero__video ~ .aurora{opacity:.5}
/* varian polos (tanpa cahaya aurora & garis jaringan di bawah): tambahkan kelas hero--polos pada <section class="hero"> */
.hero--polos .aurora,.hero--polos .hero__visual{display:none}
@media (max-width:860px){.hero__video::after{background:linear-gradient(180deg,rgba(6,16,31,.62) 0%,rgba(6,16,31,.5) 45%,rgba(6,16,31,.42) 70%,rgba(10,26,51,.92) 100%)}}
.hero__visual{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1}
.horizon{width:100%;height:100%}
.hero__in{position:relative;flex:1;width:100%;display:grid;grid-template-columns:minmax(0,46rem);align-items:start;gap:2rem;padding-top:calc(var(--hdr) + clamp(1.5rem,6vh,4.5rem));padding-bottom:clamp(12rem,36vh,19rem)}
@media (min-width:861px){.hero__visual{left:auto;width:min(1240px,92vw);height:58%}}
.hero__text{display:grid;gap:1.4rem;max-width:44rem}
.hero__eyebrow{color:var(--sky-glow)}
.hero__h1{font-size:var(--fs-hero);font-weight:200;line-height:.98;letter-spacing:-.035em}
.hero__h1 b{font-weight:800}
.hero__scr{font:400 clamp(1rem,.95rem + .3vw,1.125rem)/1.4 var(--f-mono);color:var(--abu-dark)}
.scramble{display:inline-block;min-width:18ch;color:#fff;font-weight:700}
.hero__lead{color:#D2DEEA}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.chip{display:grid;gap:.35rem;padding:1rem 1.1rem;border-radius:18px;background:rgba(18,40,74,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08);translate:0 calc((1.5 - var(--i)) * (1.5 - var(--i)) * -6px)}
.chip span{font:700 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-glow)}
.chip b{font:800 clamp(1.25rem,1rem + .9vw,1.75rem)/1.05 var(--f-display);letter-spacing:-.02em}
/* horizon parts */
.hz-orbit{fill:none;stroke:rgba(108,203,242,.35);stroke-width:1.5;stroke-dasharray:4 8}
html.motion .hz-orbit{animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.hz-cable{fill:none;stroke:url(#hz-grad);stroke-width:1.6}
.hz-land{fill:none;stroke:rgba(227,36,43,.6);stroke-width:1.4;stroke-dasharray:2 6}
.hz-dot{fill:var(--sky);transform-box:fill-box;transform-origin:center}
html.motion .hz-dot{animation:shimmer 2.4s ease-in-out calc(var(--i) * .12s) infinite}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}
.hz-core{fill:#fff}.hz-node--home .hz-core{fill:var(--merah)}
.hz-halo{fill:none;stroke:var(--sky-glow);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
html.motion .hz-halo{animation:halo 2.6s ease-out infinite}
html.motion .hz-node:nth-of-type(3) .hz-halo{animation-delay:.9s} html.motion .hz-node--home .hz-halo{animation-delay:1.7s;stroke:var(--merah)}
@keyframes halo{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.hz-node text{font:700 11px var(--f-mono);letter-spacing:.12em;fill:var(--abu-dark)}
.hz-packet{fill:#fff;filter:drop-shadow(0 0 6px #6CCBF2)} .hz-packet--red{fill:var(--merah);filter:drop-shadow(0 0 6px #E3242B)}
html:not(.motion) .hz-packets{display:none}
@media (max-width:860px){
  .hero{min-height:auto}
  .hero__in{grid-template-columns:1fr;padding-bottom:clamp(12rem,52vw,18rem);padding-top:calc(var(--hdr) + 2.5rem)}
  .chips{justify-self:stretch;max-width:none}
  .chip{translate:none;background:var(--navy-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero__visual{height:44%}
  .scramble{min-width:0}
}

/* ---------- ticker & marquees ---------- */
.ticker{position:relative;background:var(--navy);color:#fff;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.ticker__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee{display:flex;flex-wrap:wrap;justify-content:center}
.marquee.is-running{flex-wrap:nowrap;justify-content:flex-start;width:max-content;will-change:transform}
.ticker__track{gap:0 2.75rem;padding:1.6rem max(var(--pad),env(safe-area-inset-left,0px))}
.ticker__track li{display:flex;align-items:center;gap:.7rem;white-space:nowrap;padding-block:.35rem}
.ticker__track li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky);margin-left:2rem;opacity:.7}
.ticker__track svg{width:24px;height:24px;fill:none;stroke:var(--sky-glow);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ticker__track b{font:800 1.75rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ticker__track span{color:var(--abu-dark);font-size:.9375rem}
html.motion .ticker__mask{margin-right:calc(34px + 12px + 14px)}
@media (max-width:640px){.ticker__track b{font-size:1.375rem}}

/* ---------- generic sections ---------- */
.sec{position:relative;padding-block:var(--sec)}
.sec--awan{background:var(--awan)} .sec--putih{background:var(--putih)}
.sec--samudra{background:linear-gradient(135deg,var(--samudra),var(--samudra-2));color:#fff}
.sec > .wrap{position:relative;z-index:1}
/* rounded "sheets": contrasting sections slide over the previous one */
.sheet{--rad:clamp(24px,4vw,48px);border-radius:var(--rad) var(--rad) 0 0;margin-top:calc(-1 * var(--rad));z-index:2;box-shadow:0 -30px 60px -40px rgba(6,16,31,.55)}
.sheet + .sheet,.sheet ~ .sheet{z-index:3}
.sec__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec__head .lead{color:var(--abu)}

/* ---------- tentang ---------- */
.tentang::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(14,27,44,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.statement{font:300 var(--fs-statement)/1.25 var(--f-display);letter-spacing:-.02em;max-width:24ch;margin-top:1.25rem;font-size:var(--fs-statement)}
.statement{max-width:none;width:min(100%,62rem)}
.statement em{font-style:normal;font-weight:800}
.em-sky{color:var(--sky-ink)} .em-red{color:var(--merah)}
.miles{position:relative;margin-top:clamp(3.5rem,7vw,6rem);height:440px}
.miles__svg{position:absolute;left:0;right:0;top:0;width:100%;height:300px;overflow:visible}
.miles__track{fill:none;stroke:var(--garis);stroke-width:2}
.miles__line{fill:none;stroke:var(--sky);stroke-width:3;stroke-linecap:round}
.miles__list{position:absolute;inset:0;display:block}
.mile{position:absolute;left:var(--x);top:calc(var(--y) * 3px - var(--s) / 2);width:min(16rem,22%)}
.mile__dot{display:block;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);border-radius:50%;background:var(--sky);box-shadow:0 0 0 6px rgba(27,163,221,.14);margin-bottom:.8rem;transform-origin:center}
.mile--now .mile__dot{background:var(--merah);box-shadow:0 0 0 8px rgba(227,36,43,.14)}
html.motion .mile--now .mile__dot{animation:nowPulse 2.6s ease-out infinite}
@keyframes nowPulse{0%{box-shadow:0 0 0 0 rgba(227,36,43,.45)}100%{box-shadow:0 0 0 22px rgba(227,36,43,0)}}
.mile__y{display:block;font:800 clamp(2rem,1.4rem + 1.8vw,3rem)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mile p{margin-top:.45rem;color:var(--abu);font-size:.9375rem;line-height:1.5}
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:clamp(3rem,6vw,5rem)}
.vm__card{position:relative;background:var(--putih);border-radius:20px;padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 20px 40px -28px rgba(10,26,51,.35);overflow:hidden}
.vm__card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.vm__card p:last-child{margin-top:.6rem;font:500 clamp(1.1rem,1rem + .5vw,1.375rem)/1.45 var(--f-display);letter-spacing:-.01em}
.tagline{margin-top:2rem;font:700 .8125rem var(--f-mono);letter-spacing:.2em;color:var(--abu);text-align:center}
@media (max-width:860px){
  .miles{height:auto;padding-left:56px}
  .miles__svg{display:none}
  .miles::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--sky),var(--merah))}
  .miles__list{position:static;display:grid;gap:2rem}
  .mile{position:relative;width:auto;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  .mile__dot{position:absolute;left:calc(-37px - var(--s) / 2);top:.5rem;margin:0!important}
  .vm{grid-template-columns:1fr}
}

/* ---------- layanan ---------- */
.needs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.needs a{display:inline-flex;align-items:center;min-height:42px;padding:0 1rem;border-radius:999px;background:var(--awan);box-shadow:inset 0 0 0 1px var(--garis);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color .2s,box-shadow .2s}
.needs a:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sky-ink)}
.stack{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.svc{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;min-height:min(64vh,620px);padding:clamp(1.75rem,4vw,3.5rem);border-radius:28px;overflow:hidden;color:#fff;box-shadow:0 30px 60px -30px rgba(10,26,51,.45),inset 0 1px 0 rgba(255,255,255,.12);scroll-margin-top:110px;transform-origin:50% 0}
.svc::before{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;z-index:3;border-radius:inherit}
.svc__text{position:relative;z-index:1;display:grid;gap:1rem;align-content:center}
.svc__text h3{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);font-weight:800;letter-spacing:-.025em}
.svc__text p{max-width:46ch}
.svc__text .eyebrow{color:inherit;opacity:.85}
.svc--5 .svc__text .eyebrow{opacity:1}
.svc__fig{position:relative;z-index:1}
.svc--1{background:linear-gradient(140deg,#0A1A33,#0B5E99);--ln:rgba(255,255,255,.6);--nd:rgba(255,255,255,.07);--nds:rgba(255,255,255,.35);--tx:#E6F1FA;--pk:#fff}
.svc--2{background:radial-gradient(60% 70% at 100% 0%,rgba(227,36,43,.35),transparent 70%),#06101F;--ln:rgba(108,203,242,.65);--nd:#101C2E;--nds:rgba(255,255,255,.3);--tx:#E6F1FA;--pk:#fff}
.svc--3{background:linear-gradient(140deg,#1BA3DD,#6CCBF2);color:var(--tinta);--ln:rgba(14,27,44,.55);--nd:#C9ECFB;--nds:rgba(14,27,44,.35);--tx:var(--tinta);--pk:var(--tinta)}
.svc--3 .tags li{background:rgba(255,255,255,.45)}
.svc--4{background:#fff;color:var(--tinta);box-shadow:0 30px 60px -30px rgba(10,26,51,.3),inset 0 0 0 1px var(--garis);--ln:var(--sky-ink);--nd:var(--awan);--nds:var(--garis);--tx:var(--tinta);--pk:var(--sky)}
.svc--4 .eyebrow{color:var(--sky-ink);opacity:1}
.svc--5{background:linear-gradient(140deg,#E3242B,#9E161B);--ln:rgba(255,255,255,.7);--nd:rgba(255,255,255,.1);--nds:rgba(255,255,255,.4);--tx:#fff;--pk:#fff}
.svc .tags li{background:rgba(255,255,255,.14);color:inherit}
.svc--4 .tags li{background:var(--awan)}
.dg{width:100%;height:auto;overflow:visible}
.dg text{font:700 13px var(--f-mono);letter-spacing:.08em;fill:var(--tx)}
.dg .dg-small{font-size:11px;opacity:.7}
.dg-node rect,.dg-node circle,.dg-sat circle,.dg-br rect,.dg-board > rect:first-child{fill:var(--nd);stroke:var(--nds);stroke-width:1.5}
.dg-node--hot rect,.dg-node--hot circle{fill:var(--merah);stroke:none}
.svc--5 .dg-node--hot circle,.svc--5 .dg-node--hot rect{fill:#fff}.svc--5 .dg-node--hot text{fill:var(--merah)}
.dg-node--hot text{fill:#fff}
.dg-line{fill:none;stroke:var(--ln);stroke-width:2.5;stroke-linecap:round}
.dg-wl{stroke-dasharray:8 8;opacity:.7}
.dg-lbl{font-size:12px!important;opacity:.85}
.dg-pk{fill:var(--pk)} .dg-pk--red{fill:var(--merah)}
.svc--5 .dg-pk--red{fill:#fff}
.dg-pk--wl{opacity:0}
.dg-tag rect{fill:var(--merah)} .dg-tag text{fill:#fff;font-size:12px}
.dg-tag--ok rect{fill:var(--hijau)} .dg-tag--ok text{fill:#06101F}
.dg-tag{opacity:0;transition:opacity .3s}
.dg--failover.is-cut .dg-fiber{stroke:var(--merah);stroke-dasharray:6 10}
.dg--failover.is-cut .dg-pk--fiber{opacity:0}
.dg--failover.is-cut .dg-pk--wl{opacity:1}
.dg--failover.is-cut .dg-wl{opacity:1;stroke:var(--hijau)}
.dg--failover.is-cut .dg-tag{opacity:1}
.dg-fan .dg-line{stroke-dasharray:3 9}
html.motion .dg-fan .dg-line{animation:dash 3s linear infinite}
.dg-bar{fill:var(--sky-ink);transform-box:fill-box;transform-origin:50% 100%}
.svc--3 .dg-bar{fill:var(--merah)}
html.motion .dg-bar{animation:breathe 2.4s ease-in-out calc(var(--i) * .3s) infinite}
@keyframes breathe{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
.dg-chk{fill:none;stroke:#0d7a4c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.dg-chk--w{stroke:#fff}
.dg-row rect{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.3);stroke-width:1.5}
.dg-row text{font-size:14px}
.dg-beat{stroke:#fff;stroke-width:3}
.dg-bld rect{fill:var(--nd);stroke:var(--ln);stroke-width:1.5}
.dg-bld .dg-hide{display:none}
.dg-orbit{fill:none;stroke:var(--nds);stroke-width:1.5;stroke-dasharray:4 8}
.dg-spin{transform-origin:320px 210px;fill:#fff}
html.motion .dg-spin{animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dg-led > rect{fill:rgba(0,0,0,.25)}
.dg-led__grid rect{fill:#fff}
@media (min-width:992px){
  html.motion .stack .svc{position:sticky;top:calc(96px + var(--i) * 22px)}
}
@media (max-width:991px){
  .svc{grid-template-columns:1fr;min-height:0}
  .svc__fig{order:-1;max-width:560px}
}

/* LED matrix */
.led,.dg-led__grid{--on:1}
.led{display:grid;grid-template-columns:repeat(5,8px);gap:5px}
.led i{width:8px;height:8px;border-radius:2px;background:var(--sky-glow);opacity:.25}
html.motion .led i:nth-child(3n){animation:ledA 3.2s steps(1,end) infinite}
html.motion .led i:nth-child(3n+1){animation:ledB 1.6s steps(1,end) infinite}
html.motion .led i:nth-child(3n+2){animation:ledC 2.8s steps(1,end) infinite}
html.motion .dg-led__grid rect:nth-child(3n){animation:ledA 3.2s steps(1,end) infinite}
html.motion .dg-led__grid rect:nth-child(3n+1){animation:ledB 1.6s steps(1,end) infinite}
html.motion .dg-led__grid rect:nth-child(3n+2){animation:ledC 2.8s steps(1,end) infinite}
.led i:nth-child(5n+2),.led i:nth-child(7n){animation-delay:-.8s!important}
.led i:nth-child(4n+1){animation-delay:-1.3s!important}
@keyframes ledA{0%{opacity:.25}25%{opacity:1}50%{opacity:.25}75%{opacity:1}}
@keyframes ledB{0%{opacity:1}50%{opacity:.25}}
@keyframes ledC{0%{opacity:.25}33%{opacity:1}66%{opacity:.6}}
.dg-led__grid rect{opacity:.35}

/* ---------- managed services ---------- */
.msp{color:#fff;overflow:clip}
.watermark{position:absolute;right:-60px;bottom:-60px;width:min(60vw,640px);opacity:.06;z-index:0;pointer-events:none}
.msp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.msp__text{display:grid;gap:1.25rem}
.msp__text .lead{color:#E3F0FA}
.step{margin-top:1rem;padding:1.5rem 1.6rem;border-radius:22px;background:rgba(6,16,31,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:grid;gap:.4rem;max-width:30rem}
.step__n{font:700 .8125rem var(--f-mono);letter-spacing:.08em;color:var(--sky-glow)}
.step__mask{overflow:hidden}
.step__t{font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.15 var(--f-display);letter-spacing:-.02em}
.step__d{color:#E3F0FA}
.orbit{position:relative;width:min(100%,560px);aspect-ratio:1;justify-self:center;container-type:inline-size;--R:42cqi}
.orbit__ring,.orbit__dash{position:absolute;inset:0;border-radius:50%}
.orbit__ring{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.orbit__dash{inset:-4%;border:1px dashed rgba(255,255,255,.22)}
html.motion .orbit__ring{animation:spin 90s linear infinite}
html.motion .orbit__dash{animation:spin 140s linear infinite reverse}
.orbit__nodes{position:absolute;inset:0}
.orbit__nodes li{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--R)))}
.orbit__nodes button{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--samudra);display:grid;place-items:center;box-shadow:0 12px 30px -14px rgba(0,0,0,.5);transform:rotate(calc(-1 * var(--a)));transition:transform .3s var(--ease-h),box-shadow .3s,background-color .3s,color .3s}
html.motion .orbit__nodes button{animation:counter 90s linear infinite}
@keyframes counter{from{transform:rotate(calc(-1 * var(--a)))}to{transform:rotate(calc(-1 * var(--a) - 360deg))}}
.orbit__nodes svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.orbit__nodes span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font:700 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.orbit__nodes li.is-active button{background:var(--merah);color:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.18),0 12px 30px -10px rgba(0,0,0,.6);scale:1.18}
.orbit__core{position:absolute;left:50%;top:50%;width:min(36%,190px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#13325c,#06101F 75%);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 60px -20px rgba(0,0,0,.6);display:grid;place-items:center;align-content:center;gap:.6rem}
.orbit__core p{display:flex;align-items:center;gap:.45rem;font:700 .75rem var(--f-mono);letter-spacing:.08em}
.orbit__core p i{width:7px;height:7px;border-radius:50%;background:var(--hijau)}
html.motion .orbit__core p i{animation:pulse 1.75s cubic-bezier(.66,0,0,1) infinite}
.msp__sub{margin-top:clamp(2.5rem,5vw,4rem);font-size:var(--fs-h3);font-weight:800}
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.prods > li{padding:1.4rem;border-radius:20px;background:rgba(6,16,31,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:grid;gap:.5rem;align-content:start;transition:transform .25s var(--ease-h),background-color .25s}
.prods > li:hover{transform:translateY(-3px);background:rgba(6,16,31,.38)}
.prods svg{width:28px;height:28px;fill:none;stroke:var(--sky-glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.prods h4{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.prods p{color:#DCEBF7;font-size:.9375rem;line-height:1.5}
.prods__benefits{background:transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important;align-content:center!important}
.benefits{display:grid;gap:.6rem}
.benefits li{display:flex;align-items:center;gap:.6rem;font-weight:600}
.benefits li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--sky-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2306101F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;flex:none}
@media (max-width:991px){
  .msp__grid{grid-template-columns:1fr}
  .orbit{order:-1;width:min(100%,380px);--R:39cqi}
  .orbit__nodes span{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  .orbit__nodes button{left:-28px;top:-28px;width:56px;height:56px}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.prods{grid-template-columns:1fr}}

/* ---------- jaringan ---------- */
.net{position:relative;isolation:isolate;background:var(--malam);color:#fff;overflow:clip}
.net__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 70% 35%,rgba(27,163,221,.18),transparent 70%),radial-gradient(30% 30% at 8% 6%,rgba(227,36,43,.12),transparent 70%)}
.net__stage{position:relative;padding-block:var(--sec) 2rem}
.net__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.net__copy{position:relative;display:grid;gap:3rem}
.net__panel{display:grid;gap:1.1rem;max-width:34rem}
.net__panel h2,.net__panel h3{font-size:var(--fs-h2);font-weight:200;line-height:1.04}
.net__panel p{color:#CFDCEA}
.net__count{font:800 clamp(2.25rem,1.4rem + 2.6vw,3.5rem)/1 var(--f-display);color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.net__count span[aria-hidden]{display:inline-flex;align-items:baseline;gap:0}
.net__count b{color:var(--sky-glow);display:inline-block;min-width:2ch;text-align:right}
.net__rail{display:none}
.net__visual{position:relative;width:100%;max-width:640px;justify-self:center;display:grid;gap:1.5rem}
.globe{position:relative;aspect-ratio:1;display:none}
/* globe-wait: kotak dipesan sejak skrip berjalan (sebelum cobe dimuat) agar konten di bawahnya tidak bergeser */
html.webgl .globe,html.globe-wait .globe{display:block}
.globe canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
html.webgl .globe canvas{opacity:1}
.globe{-webkit-mask-image:radial-gradient(circle closest-side,#000 72%,transparent 99%);mask-image:radial-gradient(circle closest-side,#000 72%,transparent 99%);pointer-events:none}
.net__map{position:relative}
.net--pinned .net__visual{display:block;aspect-ratio:1;contain:layout;z-index:1}
.net--pinned .net__copy{z-index:2}
.net--pinned .globe,.net--pinned .net__map{position:absolute;inset:0}
.net--pinned .net__map{display:grid;place-items:center}
.map{width:100%;height:auto;overflow:visible}
.map__band{fill:none;stroke:rgba(108,203,242,.42);stroke-width:4.2;stroke-linecap:round}
.map--mini .map__band{stroke:rgba(255,255,255,.22)}
.route{fill:none;stroke-width:2.4;stroke-linecap:round}
.route--a{stroke:var(--merah)} .route--b{stroke:var(--sky-glow);stroke-dasharray:.012 .012}
.map__label{font:700 14px var(--f-mono);letter-spacing:.1em;fill:#fff}
.pop__dot{fill:var(--sky-glow);transform-box:fill-box;transform-origin:center}
.pop--office .pop__dot{fill:var(--merah);stroke:#fff;stroke-width:2}
.pop__ring{fill:none;stroke:var(--sky-glow);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.pop--office .pop__ring{stroke:var(--merah)}
html.motion .net.is-landed .pop__ring{animation:hop 13s ease-out calc(var(--r) * .45s) infinite}
@keyframes hop{0%{opacity:0;transform:scale(.8)}3%{opacity:1}9%{opacity:.8;transform:scale(2.4)}14%{opacity:0;transform:scale(3)}100%{opacity:0}}
.net__after{position:relative;padding-bottom:var(--sec)}
.foot3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.foot3 li{padding:1.6rem;border-radius:22px;background:rgba(18,40,74,.55);box-shadow:inset 0 0 0 1px var(--line-dark);display:grid;gap:.6rem;align-content:start}
.foot3 h3{font-size:1.5rem;font-weight:800}
.foot3 p:last-child{color:#CFDCEA;font-size:.9375rem}
.foot3 p:last-child > span{display:inline-block}
.nw{white-space:nowrap}
.asn{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-dark);font:400 .875rem var(--f-mono);color:#CFDCEA}
.asn span{font-weight:700;color:var(--sky-glow)} .asn b{color:#fff}
.prov{margin-top:3rem}
.prov__h{font-size:1.25rem;font-weight:800;margin-bottom:1.25rem}
.prov__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1.5rem}
.prov__group h4{font:700 .8125rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-glow);display:flex;justify-content:space-between;border-bottom:1px solid var(--line-dark);padding-bottom:.5rem;margin-bottom:.6rem}
.prov__group h4 span{color:#fff}
.prov__group li{font-size:.9375rem;color:#CFDCEA;line-height:1.75}
.prov__group li.is-office{color:#fff;font-weight:600}
.prov__group li.is-office::after{content:" · kantor";color:#FF6B6B;font:700 .75rem var(--f-mono)}
.prov__group li.has-lok{padding-bottom:.3rem}
.prov__group li.has-lok.is-office::after{content:none}
.prov__group li.has-lok.is-office .prov__n::after{content:" · kantor";color:#FF6B6B;font:700 .75rem var(--f-mono)}
.prov__lok{display:block;font-size:.8125rem;line-height:1.45;color:#8FA6BF;font-weight:400}
.prov__lok b{color:#fff;font-weight:600}
.prov__lok b.is-office::after{content:" · kantor";color:#FF6B6B;font:700 .75rem var(--f-mono)}
.benef{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
.benef li{padding:.75rem 1.1rem;border-radius:999px;background:rgba(27,163,221,.14);font-weight:600;font-size:.9375rem}
/* pinned desktop layout (class added by JS) */
.net--pinned .net__stage{height:100svh;padding-block:calc(var(--hdr) + 1rem) 1rem;display:grid;align-items:center}
.net--pinned .net__stage > .wrap{width:100%}
.net--pinned .net__copy{height:min(70svh,560px);display:block}
.net--pinned .net__panel{position:absolute;inset:0;align-content:center}
.net--pinned .net__panel h2,.net--pinned .net__panel h3{font-size:clamp(2rem,1.1rem + 2.6vw,3.4rem)}
.net--pinned .net__rail{display:flex;flex-direction:column;gap:14px;position:absolute;left:-34px;top:50%;transform:translateY(-50%)}
.net--pinned .net__rail li{width:var(--s,8px);height:var(--s,8px);border-radius:50%;background:rgba(255,255,255,.25);transition:background-color .3s,transform .3s}
.net--pinned .net__rail li:nth-child(1){--s:8px}.net--pinned .net__rail li:nth-child(2){--s:11px}.net--pinned .net__rail li:nth-child(3){--s:14px}
.net--pinned .net__rail li.is-on{background:var(--sky)}
.net--pinned .net__visual{max-width:min(78svh,720px)}
@media (max-width:991px){
  .net__grid{grid-template-columns:1fr}
  .net__copy{gap:2.5rem}
  .net__visual{max-width:560px}
  .foot3{grid-template-columns:1fr}
}
@media (max-width:1100px) and (min-width:992px){.net--pinned .net__rail{display:none}}

/* ---------- solusi ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}
.sol{position:relative;display:grid;gap:.75rem;align-content:start;padding:clamp(1.5rem,3vw,2rem);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--garis);transition:transform .25s var(--ease-h),box-shadow .25s;--acc:var(--sky-ink)}
.sol:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--garis),0 24px 48px -28px rgba(10,26,51,.35);--acc:var(--merah)}
.sol p:not(.eyebrow){color:var(--abu)}
.sol--a{grid-column:span 7}
.sol--b{grid-column:span 5}
.sol--c,.sol--d,.sol--e{grid-column:span 4}
.sv{width:100%;max-width:420px;height:auto;margin-bottom:.5rem;overflow:visible}
.sol--a .sv{max-width:560px}
.sv text{font:700 11px var(--f-mono);letter-spacing:.08em;fill:var(--abu)}
.sv-arc{fill:none;stroke:var(--garis);stroke-width:10;stroke-linecap:round}
.sv-needle{stroke:var(--acc);stroke-width:4;stroke-linecap:round;transform-box:view-box;transform-origin:0 0;transition:stroke .25s}
.sv--gauge g{transform-origin:0 0}
.sv--gauge circle{fill:var(--tinta)}
.sv-needle{rotate:-35deg}
.sv-track{fill:var(--awan)}
.sv-fill{transform-box:fill-box;transform-origin:0 50%}
.sv-fill--hi{fill:var(--merah)} .sv-fill--md{fill:var(--sky-ink)} .sv-fill--lo{fill:var(--abu)}
.sv-orb{fill:none;stroke:var(--garis);stroke-width:1.5;stroke-dasharray:3 6}
.sv-spin{transform-origin:180px 75px}
.sv-spin circle{fill:var(--awan);stroke:var(--acc);stroke-width:1.5;transition:stroke .25s}
.sv-spin text{font-size:8px;fill:var(--tinta)}
html.motion .sv-spin{animation:spin 40s linear infinite}
html.motion .sv-spin g{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite reverse}
.sv-cap{fill:none;stroke:var(--tinta);stroke-width:2;stroke-linejoin:round}
.sv-board{fill:var(--awan);stroke:var(--garis)}
.sv-cam rect{fill:var(--tinta)} .sv-cam circle{fill:var(--sky)}
.sv-mic rect{fill:var(--tinta)} .sv-mic path{fill:none;stroke:var(--tinta);stroke-width:2}
.sv-frame{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-dasharray:6 5;transition:stroke .25s}
.sv-4k{font-size:18px!important;fill:var(--merah)!important}
.sv-bars rect{fill:var(--acc);transform-box:fill-box;transform-origin:50% 100%;transition:fill .25s}
.sv-spark{fill:none;stroke:var(--merah);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:991px){.sol--a,.sol--b,.sol--c,.sol--d,.sol--e{grid-column:1/-1;grid-row:auto}}

/* ---------- logos ---------- */
.tile{flex:none;width:176px;height:88px;padding:12px 16px;border-radius:16px;background:#fff;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;box-shadow:0 8px 24px -12px rgba(10,26,51,.25),inset 0 0 0 1px rgba(14,27,44,.06);transition:transform .25s var(--ease-h),box-shadow .25s}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(10,26,51,.35),inset 0 0 0 1px rgba(14,27,44,.08)}
.tile picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0}
.tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tile img[src*="maybank"]{max-height:72%;max-width:88%;border-radius:4px}
.marq{position:relative;padding-block:1.5rem;background:var(--awan);display:grid;gap:1rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__row{gap:1rem;padding-inline:max(var(--pad),env(safe-area-inset-left,0px))}
.marq:not(:has(.is-running)) .marq__row{max-width:1320px;margin-inline:auto}
.sectors{margin-top:clamp(2.5rem,5vw,4rem)}
.tabs{position:relative;display:flex;flex-wrap:wrap;gap:.35rem;padding:.35rem;border-radius:999px;background:var(--awan);box-shadow:inset 0 0 0 1px var(--garis);width:max-content;max-width:100%}
.tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;min-height:42px;padding:0 1rem;border-radius:999px;font:600 .9375rem var(--f-body);color:var(--tinta);text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;transition:color .25s}
.tab__n{font:700 .72rem var(--f-mono);padding:.25em .5em;border-radius:999px;background:rgba(14,27,44,.08)}
.tab[aria-selected="true"]{color:#fff}
.tab[aria-selected="true"] .tab__n{background:rgba(255,255,255,.2)}
.tabs__pill{position:absolute;z-index:0;left:0;top:.35rem;height:42px;border-radius:999px;background:var(--tinta);width:0;opacity:0}
.tabs:not(.has-pill) .tab:hover{background:#fff}
html.js .sectors__panels:not(.is-ready) .sector:not(:first-child){display:none}
.sector{margin-top:1.5rem}
.sector + .sector{margin-top:2.5rem}
.js .sector + .sector{margin-top:1.5rem}
.sector__title{font-size:1.25rem;font-weight:800;margin-bottom:1rem;display:flex;gap:.75rem;align-items:baseline}
.sector__title span{font:700 .8125rem var(--f-mono);color:var(--abu);letter-spacing:.04em}
.sector__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.sector__grid .tile{width:auto}
@media (max-width:640px){
  .tile{width:132px;height:66px;padding:8px 12px;border-radius:12px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;border-radius:16px;width:100%;scrollbar-width:none}
  .tab{flex:none}
  .sector__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .sector__grid .tile{height:66px}
}

/* ---------- mitra ---------- */
.partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
.pgroup h3{font-size:1.25rem;font-weight:800;margin-bottom:1rem}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pgrid .tile{width:auto;height:100px}
.brands{margin-top:clamp(4rem,8vw,7rem)}
.brands__h{margin-bottom:2rem}
.brow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.5rem;padding-block:1.25rem;border-top:1px solid var(--garis);align-items:baseline}
.brow:last-child{border-bottom:1px solid var(--garis)}
.brow dt{font:700 .8125rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-ink)}
.brow dd{margin:0}
.brow ul{display:flex;flex-wrap:wrap;gap:.2rem 0}
.brow li{font:200 clamp(1.5rem,1rem + 2vw,2.75rem)/1.2 var(--f-display);letter-spacing:-.02em;font-variation-settings:"wght" 200;transition:font-variation-settings .35s var(--ease-h),color .35s}
.brow li:not(:last-child)::after{content:"·";color:var(--sky);margin-inline:.4em;font-variation-settings:"wght" 400}
@media (hover:hover){.brow li:hover{font-variation-settings:"wght" 800;color:var(--sky-ink)}}
@media (max-width:860px){.partners{grid-template-columns:1fr}.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.brow{grid-template-columns:1fr;gap:.5rem}.brow li{font-size:1.4rem}}

/* ---------- sertifikasi ---------- */
.serti::before{content:"";position:absolute;right:5%;top:20%;width:60%;height:70%;z-index:0;background:radial-gradient(closest-side,rgba(27,163,221,.14),transparent);pointer-events:none}
.serti__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.serti__text{display:grid;gap:1.1rem}
.serti__text p:last-child{color:var(--abu)}
/* kartu teks, tanpa gambar dokumen sertifikat (v1.2.6: gambar rawan dikloning walau disensor) */
.certs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cert{display:grid;align-content:start;gap:.3rem;padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:14px;background:#fff;box-shadow:0 24px 40px -28px rgba(10,26,51,.4),inset 0 0 0 1px var(--garis)}
.cert__ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:.85rem;border-radius:12px;background:var(--awan);color:var(--sky-ink);box-shadow:inset 0 0 0 1px var(--garis)}
.cert__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cert__k{font:700 .6875rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--abu)}
.cert__t{font:700 clamp(1.125rem,1rem + .55vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--tinta)}
.cert__d{font-size:.875rem;line-height:1.45;color:var(--abu)}
@media (max-width:991px){.serti__grid{grid-template-columns:1fr}}
@media (max-width:560px){.certs{grid-template-columns:1fr;gap:.75rem}.cert{grid-template-columns:auto minmax(0,1fr);column-gap:1rem;padding:1.1rem 1.25rem}.cert__ico{grid-row:1/4;align-self:center;margin:0}}

/* ---------- kontak ---------- */
.kontak{position:relative;isolation:isolate;overflow:clip;background:var(--malam);color:#fff;padding-block:var(--sec)}
.kontak__h{font-size:var(--fs-hero);font-weight:200;max-width:16ch;margin-top:1rem;line-height:.98;letter-spacing:-.035em}
.kontak__lead{color:#D2DEEA;margin-top:1.25rem}
.kontak__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
.kontak__lines{display:grid;gap:.25rem;align-content:start}
.cline{position:relative;display:flex;align-items:center;gap:1rem;min-height:72px;padding-block:.75rem;text-decoration:none;font:700 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--f-display);letter-spacing:-.01em}
.cline > span{min-width:0;overflow-wrap:anywhere}
.cline::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-dark)}
.cline small{display:block;font:700 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-glow);margin-bottom:.2rem}
.cline svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--sky-glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cline:hover{color:var(--sky-glow)}
.magnetic{margin-top:1.75rem;justify-self:start}
.kontak__side{display:grid;gap:1rem;align-content:center}
.kontak__map{padding:1rem 1.25rem;border-radius:22px;background:rgba(18,40,74,.45);box-shadow:inset 0 0 0 1px var(--line-dark)}
.pin__dot{fill:var(--merah);stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease-h),opacity .25s}
.pin__ring{fill:none;stroke:var(--merah);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
html.motion .pin__ring{animation:hop 7.5s ease-out calc(var(--k) * 2.5s) infinite}
.kontak__map.is-focus .pin__dot{opacity:.4}
.kontak__map.is-focus .pin.is-on .pin__dot{opacity:1;transform:scale(1.6)}
.offices{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.office{display:grid;align-content:start;border-radius:20px;background:var(--navy-2);box-shadow:inset 0 0 0 1px var(--line-dark);padding:1.25rem;transition:background-color .25s,transform .25s var(--ease-h)}
.office:hover{background:rgba(18,40,74,.85);transform:translateY(-2px)}
.office address{font-style:normal;display:grid;gap:.35rem;color:#CFDCEA;font-size:.9375rem;line-height:1.5}
.office b{font:700 1.25rem var(--f-display);color:#fff}
@media (max-width:991px){.kontak__grid{grid-template-columns:1fr}.offices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.offices{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--malam);color:#CFDCEA;padding-block:clamp(3rem,6vw,5rem) calc(2rem + env(safe-area-inset-bottom,0px));border-top:1px solid transparent;border-image:var(--grad) 1}
.footer-arc{width:100%;max-width:720px;height:auto;margin:0 0 1.5rem auto;display:block}
.fa-dot{fill:var(--sky);transform-box:fill-box;transform-origin:center}
.fa-dot:last-child{fill:var(--merah)}
html.motion .ftr.is-landed .fa-dot{animation:shimmer 2.4s ease-in-out calc(var(--i) * .12s) infinite}
.ftr__brand{display:grid;gap:.75rem;justify-items:start}
.ftr__brand img{height:56px;width:auto}
.ftr__brand p{font:700 .8125rem var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sky-glow)}
.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;margin-top:3rem}
.ftr__cols div{display:grid;gap:.15rem;align-content:start;min-width:0}
.ftr__cols h3{font:700 .8125rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:.5rem}
.ftr__cols a{text-decoration:none;min-height:36px;display:flex;align-items:center;font-size:.9375rem;overflow-wrap:anywhere}
.ftr__cols a:hover{color:#fff}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:.875rem}
.ftr__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.totop{min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid var(--line-dark);background:transparent;color:#fff;font:600 .875rem var(--f-body);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:760px){.ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- motion pre-states (only when JS + motion are on) ---------- */
html.motion .hdr{opacity:0}
html.motion .hero__eyebrow,html.motion .hero__scr,html.motion .hero__lead,html.motion .hero__cta{opacity:0}
html.motion .hero__h1:not(.is-split){opacity:0}
html.motion [data-reveal]{opacity:0;transform:translateY(28px)}
html.motion .sec [data-split]:not(.is-split),html.motion .kontak [data-split]:not(.is-split),html.motion .brands [data-split]:not(.is-split){opacity:0}
/* mode gerak dimatikan di tengah jalan (galat skrip): baris judul yang sudah dipecah tetap tampil */
html:not(.motion) [data-split] > div > div{transform:none!important}
.is-paused,.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media print{
  .hdr,.drawer,.skip,.progress,.aurora,.hero__visual{display:none}
  body{background:#fff}
  html.motion [data-reveal],html.motion [data-split],html.motion [data-split] div,html.motion .hero__h1,.net__panel,.net__ix li,.net__map{opacity:1!important;transform:none!important;visibility:visible!important}
  .pin-spacer{padding:0!important;height:auto!important;max-height:none!important}
  .net--pinned .net__stage{position:static!important;transform:none!important;height:auto!important;width:auto!important;max-width:none!important;top:auto!important;left:auto!important}
  .net--pinned .net__copy{height:auto}.net--pinned .net__panel{position:static}.net--pinned .net__rail{display:none}
}
@media (prefers-reduced-motion:reduce){html:not(.js) .dg-pk,html:not(.js) .hz-packet{display:none}}