:root{--bg:#05080F;--bg2:#0A1020;--tx:#F5F7FB;--mut:#a9b4c6;--mint:#B9F5E4;--vio:#8A7DFF;--bd:rgba(255,255,255,.16);--st:1;color-scheme:dark;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="light"]{--bg:#F3F6FB;--bg2:#E6ECF5;--tx:#0A1020;--mut:#475266;--mint:#0f7a64;--vio:#5b4de0;--bd:rgba(10,16,32,.2);--st:0;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 "Helvetica Neue",Arial,system-ui,sans-serif}
a{color:inherit}.w{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
header{position:fixed;top:0;left:0;right:0;z-index:9;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(color-mix(in srgb,var(--bg) 85%,transparent),transparent)}
.nav{display:flex;align-items:center;gap:16px;height:72px}
.logo{font-weight:700;letter-spacing:.3em;text-decoration:none;font-size:15px}
.mk{font-size:10px;letter-spacing:.2em;border:1px solid var(--bd);padding:2px 8px;color:var(--mut)}
nav{margin-left:auto;display:flex;gap:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
nav a{text-decoration:none;opacity:.75}nav a:hover{opacity:1}
.tg{display:flex;gap:6px}.tg button{background:none;border:1px solid var(--bd);color:var(--tx);padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

.pn{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 0 80px;overflow:hidden;scroll-snap-align:start;border-bottom:1px solid var(--bd)}
.pn.s{min-height:auto;padding:110px 0 90px}.pn.alt{background:var(--bg2)}.pn.center{text-align:center}
.pn>.w{position:relative;z-index:2}.bgv{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars{position:absolute;inset:0;opacity:var(--st);background:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 14%,#cfe,transparent),radial-gradient(1px 1px at 61% 38%,#fff,transparent),radial-gradient(2px 2px at 78% 18%,#fff,transparent),radial-gradient(1px 1px at 90% 52%,#fff,transparent),radial-gradient(1px 1px at 7% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 80%,#fff,transparent)}
.arc{position:absolute;left:50%;top:80%;width:170vw;height:170vw;border-radius:50%;transform:translateX(-50%);background:var(--bg);border-top:2px solid var(--mint);box-shadow:0 -6px 40px var(--mint),0 -30px 140px rgba(138,125,255,.55),inset 0 30px 90px rgba(138,125,255,.25)}
.glow{background:radial-gradient(60% 60% at 80% 40%,rgba(138,125,255,.35),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(185,245,228,.18),transparent 70%)}
.radar{position:absolute;right:-14vw;top:50%;width:min(70vw,780px);aspect-ratio:1;border-radius:50%;background:conic-gradient(rgba(185,245,228,.4),transparent 22%),repeating-radial-gradient(circle,transparent 0 60px,var(--bd) 61px 62px);opacity:.55;transform:translateY(-50%);animation:sw 18s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
@keyframes sw{to{transform:translateY(-50%) rotate(360deg)}}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mint);font-weight:600}
h1,h2,h3{margin:0}
h2{font-size:clamp(30px,5vw,64px);line-height:1.06;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin:.25em 0 .5em}
h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
p{color:var(--mut);margin:.5em 0}
.hero{align-items:flex-start;text-align:center;padding-top:20vh}
.big{font-size:clamp(56px,13vw,176px);letter-spacing:.14em;padding-left:.14em;font-weight:700;line-height:1;margin:.12em 0 .08em;text-transform:none}
.sub{font-size:clamp(13px,1.7vw,19px);letter-spacing:.2em;text-transform:uppercase;color:var(--tx);margin:.4em 0}
.tag{color:var(--mint);font-size:clamp(15px,2vw,20px)}.hp{max-width:560px;margin:14px auto}
.row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.row.c{justify-content:center}
.btn{display:inline-block;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font:600 12px "Helvetica Neue",Arial,sans-serif;padding:16px 32px;border:1px solid var(--tx);background:rgba(128,128,128,.08);color:var(--tx);cursor:pointer;transition:.2s}
.btn:hover,.pri{background:var(--tx);color:var(--bg)}.pri:hover{background:transparent;color:var(--tx)}
.pgrid{display:grid;gap:0 48px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:36px}
.cell{border-top:1px solid var(--bd);padding:22px 0 26px}.cell p{font-size:15px;margin:.4em 0 0}
.osg,.fg{display:grid;gap:56px;grid-template-columns:1.1fr .9fr;align-items:center}.fg{grid-template-columns:.8fr 1.2fr;gap:44px}
@media(max-width:860px){.osg,.fg{grid-template-columns:1fr}}
.osg h2{font-size:clamp(28px,3.8vw,50px)}
.tabs{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0 10px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);padding:8px 0;font:600 12px inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--tx);border-color:var(--mint)}
#tabpanel{border-left:2px solid var(--vio);padding:4px 0 4px 18px;min-height:76px}#tabpanel p{margin:0}
.note{border-left:2px solid var(--mint);padding:12px 16px;font-size:14px;color:var(--mut);margin-top:20px}
ul.ok{list-style:none;padding:0;margin:8px 0}ul.ok li{padding-left:26px;position:relative;color:var(--mut);margin:10px 0}ul.ok li:before{content:"→";position:absolute;left:0;color:var(--mint)}
#svc>h3{margin-top:48px;font-size:13px;letter-spacing:.2em;color:var(--mint)}
#svc .grid{display:block;margin-top:10px}
#svc .card{display:grid;grid-template-columns:44px 1fr 1.5fr;gap:18px;border-top:1px solid var(--bd);padding:16px 0;align-items:baseline}
#svc .card p,#svc .card h3{margin:0}#svc .card p{font-size:15px}
@media(max-width:700px){#svc .card{grid-template-columns:36px 1fr}#svc .card p{grid-column:2}}
#steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 24px;margin-top:40px}
#steps .card{border-top:2px solid var(--tx);padding:14px 0}
.num{color:var(--mint);font-size:12px;letter-spacing:.2em;font-weight:700}
.pf{position:relative;max-width:380px;margin:auto;transform:rotate(2.5deg)}
.pc{border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:radial-gradient(60% 45% at 15% 95%,rgba(185,245,228,.5),transparent),linear-gradient(160deg,#8A7DFF 0%,#5b4de0 45%,#26356f 100%);border:1px solid var(--bd);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.pc img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.chip{position:absolute;background:var(--bg);color:var(--tx);border:1px solid var(--mint);padding:6px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.c1{left:-14px;top:18%}.c2{right:-14px;top:48%}.c3{left:6%;bottom:-12px}
.certs{display:grid;gap:0 20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:14px}
.certs div{border-top:1px solid var(--bd);padding:12px 0}.certs b{display:block;font-size:14px}.certs span{font-size:12px;color:var(--mut)}
footer{padding:36px 0 48px;font-size:12px;color:var(--mut);letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.radar{animation:none}}
.fp{padding-bottom:0}.fp .fg{align-items:end}.fp .fg>div:last-child{padding-bottom:90px}
.pf2{position:relative;max-width:480px;margin:0 auto;width:100%}
.pf2:before{content:"";position:absolute;left:50%;top:6%;width:96%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(138,125,255,.75),rgba(138,125,255,.15) 60%,transparent 70%);border:1px solid var(--bd)}
.pf2 img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 0 1.5px var(--mint)) drop-shadow(0 0 28px rgba(138,125,255,.45))}
@media(max-width:860px){.fp .fg>div:last-child{padding-bottom:70px}.pf2 img{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}}
.fph{position:absolute;left:0;top:0;bottom:0;width:52%;z-index:1}
.fph img{width:100%;height:100%;object-fit:cover;object-position:30% 12%;display:block}
.fph:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 45%,var(--bg) 100%),linear-gradient(to bottom,var(--bg) 0,transparent 22%),linear-gradient(to top,var(--bg) 0,transparent 12%)}
.fp{padding:110px 0 90px}.fp .fg{display:block}.fp .fg>div:last-child{padding-bottom:0}.fp .fg>div{margin-left:auto;width:min(100%,560px)}
@media(max-width:860px){.fp{flex-direction:column;align-items:stretch;padding:0 0 70px}.fph{position:relative;width:100%;height:66vh}.fph:after{background:linear-gradient(to top,var(--bg) 0,transparent 35%),linear-gradient(to bottom,var(--bg) 0,transparent 18%)}.fp .fg>div{width:100%}}
.fp{padding:110px 0 90px}
.fp .fg{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:center}
.fp .fg>div{margin-left:0;width:auto}
.fph{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;z-index:1}
.fph:before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--mint);opacity:.55;z-index:-1}
.fph:after{content:"";position:absolute;inset:0;background:none;border:1px solid var(--bd);pointer-events:none}
.fph img{width:100%;height:100%;object-fit:cover;object-position:40% 10%;display:block;box-shadow:0 20px 50px rgba(0,0,0,.3)}
@media(max-width:860px){.fp{flex-direction:row;align-items:center;padding:100px 0 70px}.fp .fg{grid-template-columns:1fr;gap:36px}.fph{height:auto;max-width:280px;margin:0 auto}.fph:after{background:none}.fp .fg>div{width:100%}}
.fname{font-size:clamp(24px,2.5vw,32px);line-height:1.15;margin-bottom:.15em}
.creds{font-size:clamp(14px,1.5vw,18px);letter-spacing:.08em;color:var(--mint);font-weight:600;margin:0 0 16px}
@media(min-width:1100px){.fname{white-space:nowrap}}
@media(max-width:860px){.fname{font-size:28px}}

.mb{display:none}
@media(max-width:1020px){nav{display:none}.tg{margin-left:auto}.mb{display:block}header.open nav{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:18px;padding:22px 24px;background:var(--bg);border-bottom:1px solid var(--bd)}}
.ct{max-width:760px}
.fm{max-width:680px;margin:32px auto 0;text-align:left;display:grid;gap:18px}
.fm label{display:grid;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fm input,.fm select,.fm textarea{width:100%;background:var(--bg2);color:var(--tx);border:1px solid var(--bd);padding:13px 14px;font-family:inherit;font-size:16px;letter-spacing:0;text-transform:none;border-radius:0}
.fm [aria-invalid=true]{border-color:#ff8a8a}
.fm .ck{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px}.fm .ck input{width:auto;margin-top:4px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#fmsg{min-height:1.6em;margin:0}#fmsg.good{color:var(--mint)}#fmsg.bad{color:#ff8a8a}
.faq details{border-top:1px solid var(--bd);padding:16px 0}.faq summary{cursor:pointer;font-weight:600;letter-spacing:.04em}.faq p{margin:.6em 0 0}
footer .fl{margin-bottom:10px}footer .fl a{margin-right:18px}
.lg{max-width:780px;margin:0 auto;padding:120px 24px 80px}.lg h1{font-size:clamp(28px,4vw,44px);text-transform:uppercase;letter-spacing:.04em}.lg h2{font-size:20px;letter-spacing:.06em;margin-top:2em}.lg li{color:var(--mut);margin:.4em 0}
.dr{border:1px solid var(--mint);padding:10px 14px;font-size:14px;color:var(--mint)}
html[lang=en] [lang=id],html[lang=id] [lang=en]{display:none}

.fph{background:linear-gradient(160deg,#8A7DFF 0%,#5b4de0 45%,#26356f 100%)}
.fph img{object-position:50% 100%}

.fph{background:#fff}
.cn{margin:14px 0 0;font-size:18px}.cn a{color:var(--mint);font-weight:600;letter-spacing:.04em;text-decoration:none}.cn a:hover{text-decoration:underline}