:root{--ink:#112544;--muted:#60718b;--line:#dce6f2;--navy:#12315c;--blue:#236cdb;--cyan:#21bed3;--violet:#7662df;--wash:#f6f9fd;--font:'DM Sans',sans-serif;--display:'Plus Jakarta Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:var(--font);overflow-x:hidden}a{color:inherit;text-decoration:none}.container{width:min(1120px,calc(100% - 40px));margin:auto}.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(18px);pointer-events:none}.ambient-one{width:640px;height:640px;right:-280px;top:60px;background:radial-gradient(circle,#d9f4ff 0%,rgba(229,244,255,.4) 45%,transparent 70%);animation:drift 12s ease-in-out infinite}.ambient-two{width:480px;height:480px;left:-280px;top:480px;background:radial-gradient(circle,rgba(228,230,255,.65),transparent 70%);animation:drift 16s ease-in-out -5s infinite}.site-header{position:fixed;z-index:10;top:0;width:100%;transition:.3s}.site-header.scrolled{background:rgba(255,255,255,.82);box-shadow:0 8px 30px rgba(28,65,115,.08);backdrop-filter:blur(16px)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:.06em}.brand-mark{width:25px;height:25px;border:2px solid var(--blue);border-radius:9px 9px 9px 2px;display:inline-flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-8deg)}.brand-mark i{width:3px;background:var(--cyan);border-radius:10px}.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:12px;background:var(--blue)}.brand-mark i:nth-child(3){height:5px;background:var(--violet)}.nav-links{display:flex;align-items:center;gap:30px;font-weight:600;font-size:14px;color:#50627c}.nav-links>a:not(.nav-login):hover{color:var(--blue)}.nav-login{background:var(--ink);color:#fff;border-radius:99px;padding:11px 17px}.nav-login span{color:#73ecf5;margin-left:7px}.menu-toggle{display:none;border:0;background:none;width:40px;height:40px}.menu-toggle span{display:block;width:20px;height:2px;margin:5px auto;background:var(--ink)}.hero{padding:158px 0 54px;min-height:780px;position:relative}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;color:#55708d;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin:0 0 17px}.eyebrow span{height:7px;width:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(33,190,211,.13)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);letter-spacing:-.045em}h1{font-size:clamp(40px,5vw,67px);line-height:1.1;margin-bottom:22px}em{font-style:normal;background:linear-gradient(100deg,var(--blue),var(--cyan),var(--violet));background-clip:text;-webkit-background-clip:text;color:transparent}.lead{color:var(--muted);font-size:17px;line-height:1.7;max-width:520px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:31px}.button{display:inline-flex;align-items:center;gap:17px;padding:15px 20px;border-radius:10px;font-weight:700;font-size:14px;transition:.25s}.button span{font-size:20px;line-height:10px;transition:transform .25s}.button:hover span{transform:translateX(4px)}.button-primary{color:#fff;background:linear-gradient(100deg,#1567d7,#267ce0 50%,#4468d8);box-shadow:0 12px 24px rgba(31,99,211,.24);position:relative;overflow:hidden}.button-primary:before{content:'';position:absolute;inset:-80% -30%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);transform:translateX(-70%);transition:.7s}.button-primary:hover{box-shadow:0 14px 33px rgba(31,99,211,.4);transform:translateY(-2px)}.button-primary:hover:before{transform:translateX(70%)}.text-link{font-weight:700;font-size:14px;color:#38577f}.text-link span{padding-left:6px;color:var(--blue)}.trust-row{display:flex;align-items:center;gap:13px;margin-top:51px}.trust-row p{color:#76869c;font-size:12px;line-height:1.45;margin:0}.trust-row strong{color:#425675}.trust-avatars{display:flex}.trust-avatars b{width:29px;height:29px;border:2px solid #fff;border-radius:50%;margin-left:-7px;display:grid;place-items:center;font-size:9px;color:#fff;background:#347ad7}.trust-avatars b:first-child{margin:0;background:#49b7bd}.trust-avatars b:nth-child(2){background:#7564d9}.trust-avatars b:last-child{background:#e9f3fc;color:var(--blue)}.hero-visual{height:470px;position:relative;display:grid;place-items:center}.dashboard-card{position:relative;width:min(100%,430px);padding:25px;border:1px solid rgba(112,157,207,.24);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,250,255,.82));box-shadow:0 31px 60px rgba(40,88,144,.16),inset 0 1px white;backdrop-filter:blur(12px);animation:float 6s ease-in-out infinite}.card-top{display:flex;align-items:flex-start;justify-content:space-between}.card-kicker{color:#667c9b;font-size:10px;font-weight:700;letter-spacing:.12em;margin:0 0 7px}.card-top h2{font-size:19px;letter-spacing:-.03em;margin:0}.live-dot{font-size:10px;font-weight:700;color:#258a6f;background:#e4f8f1;border-radius:99px;padding:6px 10px}.live-dot:before,.status-dot{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#1caf83;margin-right:5px;box-shadow:0 0 0 3px rgba(28,175,131,.13)}.network{height:205px;position:relative}.network svg{position:absolute;inset:10px 0;width:100%;height:180px}.network path{fill:none;stroke:#b3cee8;stroke-width:1.5}.network .pulse-line{stroke:var(--cyan);stroke-width:2;stroke-dasharray:10 180;animation:pulsePath 5s linear infinite}.node{position:absolute;width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 2px 12px rgba(38,108,219,.35)}.main-node{width:25px;height:25px;border-width:6px;background:var(--cyan);box-shadow:0 0 0 6px rgba(33,190,211,.13),0 0 20px rgba(33,190,211,.5);animation:nodePulse 3s ease-in-out infinite}.n1{left:10%;top:60%}.n2{left:30%;top:23%}.n3{left:49%;top:48%}.n4{right:17%;top:22%}.n5{right:24%;bottom:12%}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:18px}.metrics div+div{border-left:1px solid var(--line);padding-left:15px}.metrics strong{display:block;font-size:20px;font-family:var(--display)}.metrics span{font-size:10px;color:#73839b}.float-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.86);border:1px solid rgba(147,181,217,.28);border-radius:12px;padding:11px 13px;box-shadow:0 16px 28px rgba(51,95,142,.13);backdrop-filter:blur(8px);font-size:11px;animation:float 5.5s ease-in-out -2s infinite}.chip-top{right:-15px;top:40px}.chip-bottom{left:0;bottom:33px;color:#4e6581}.chip-icon{background:#e7f4ff;color:var(--blue);border-radius:7px;padding:5px}.float-chip b,.float-chip small{display:block}.float-chip small{font-size:9px;color:#8290a3;margin-top:2px}.orbit{position:absolute;border:1px solid rgba(75,148,222,.15);border-radius:50%;animation:spin 25s linear infinite}.orbit-a{width:460px;height:310px}.orbit-b{width:390px;height:500px;transform:rotate(48deg);animation-direction:reverse}.scroll-hint{display:flex;align-items:center;gap:9px;color:#70829b;text-transform:uppercase;font-size:9px;letter-spacing:.11em;font-weight:700}.scroll-hint span{height:30px;width:1px;background:linear-gradient(var(--cyan),transparent)}.section{padding:112px 0}.principles{background:linear-gradient(180deg,#fff,#f8fbfe)}.section-heading{text-align:center;max-width:630px;margin:0 auto 48px}.section-heading .eyebrow,.workflow-heading .eyebrow{justify-content:center}.section-heading h2,.identity h2,.workflow h2,.closing h2{font-size:clamp(31px,4vw,47px);line-height:1.18;margin-bottom:17px}.section-heading>p:last-child,.identity-copy>p:last-of-type{color:var(--muted);font-size:16px;line-height:1.7}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.principle-card{background:#fff;border:1px solid #e3ebf4;border-radius:15px;padding:30px;transition:transform .3s,box-shadow .3s,border .3s}.principle-card:hover{transform:translateY(-8px);border-color:#c5daf2;box-shadow:0 22px 37px rgba(32,80,132,.11)}.icon-box{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;font-size:23px;margin-bottom:24px}.connect{background:#e5f8fb;color:#11a8bf}.collaborate{background:#eaf0ff;color:#4f73df}.grow{background:#f0edff;color:#7964d6}.principle-card h3{font-family:var(--display);font-size:20px;letter-spacing:-.04em;margin:10px 0}.principle-card>p:not(.card-kicker){color:var(--muted);font-size:14px;line-height:1.65}.principle-card a{display:inline-block;color:var(--blue);font-size:12px;font-weight:700;margin-top:13px}.principle-card a span{font-size:18px;padding-left:5px}.identity{padding-top:80px}.identity-shell{background:linear-gradient(115deg,#f0f8ff,#f9f7ff 75%);border:1px solid #dfebf5;border-radius:24px;min-height:445px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;overflow:hidden}.identity-art{height:100%;min-height:350px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 45% 50%,rgba(160,222,243,.53),transparent 43%)}.id-ring{position:absolute;border:1px solid #b7d8ed;border-radius:50%;animation:spin 16s linear infinite}.r-one{height:255px;width:255px}.r-two{height:330px;width:190px;transform:rotate(60deg);animation-direction:reverse;animation-duration:19s}.id-core{position:relative;z-index:2;width:82px;height:82px;display:grid;place-items:center;border-radius:25px;background:linear-gradient(145deg,#1878d4,#5d61d5);color:#fff;font:800 35px var(--display);box-shadow:0 16px 35px rgba(43,103,203,.3);transform:rotate(-8deg)}.id-orb{position:absolute;width:13px;height:13px;background:#28bfd2;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 8px rgba(18,120,180,.21)}.o1{top:25%;left:30%;animation:orb 5s ease-in-out infinite}.o2{right:22%;bottom:30%;background:#7662df;animation:orb 5s ease-in-out -2s infinite}.o3{right:25%;top:20%;animation:orb 5s ease-in-out -3s infinite}.identity-copy{padding:55px 68px 55px 10px}.button-quiet{margin-top:14px;background:#fff;border:1px solid #dce7f4;color:var(--blue);box-shadow:0 6px 15px rgba(38,96,145,.05)}.button-quiet:hover{background:#f8fbff;transform:translateY(-2px)}.workflow-heading{text-align:center}.steps{padding:46px 0 0;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;position:relative;gap:18px}.steps:before{content:'';position:absolute;top:57px;left:9%;right:9%;height:1px;background:linear-gradient(90deg,#bae9ed,#bbd7f1,#d9ccf3)}.steps li{position:relative;text-align:center}.steps li span{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border:5px solid #fff;margin:0 auto 17px;border-radius:50%;background:linear-gradient(135deg,#28becf,#396fd8);box-shadow:0 0 0 1px #b8dfeb;color:#fff;font-size:11px;font-weight:700}.steps h3{font-family:var(--display);font-size:15px;margin:0 0 8px}.steps p{font-size:12px;line-height:1.5;color:var(--muted);margin:auto;max-width:145px}.closing{padding:48px 0 100px}.closing-inner{text-align:center;padding:69px 25px;border-radius:21px;background:linear-gradient(115deg,#163f78,#2269ca 55%,#5666d0);color:#fff;position:relative;overflow:hidden}.closing-inner:after{content:'';position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.16);border-radius:50%;top:-280px;right:-80px}.closing h2{margin:0 0 28px}.closing em{background:linear-gradient(90deg,#7ff4f1,#d5dbff);background-clip:text;-webkit-background-clip:text}.closing .eyebrow{justify-content:center;color:#c3e2ff}.closing .eyebrow span{background:#8ceff2}.closing .button-primary{position:relative;z-index:1;background:#fff;color:#2058ae;box-shadow:none}.closing .button-primary:before{background:linear-gradient(105deg,transparent 42%,rgba(30,113,210,.16) 50%,transparent 58%)}footer{border-top:1px solid #e5edf6;padding:24px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;color:#77869a;font-size:11px}.footer-inner p{margin:0}.footer-inner .brand{font-size:14px;color:var(--ink)}.footer-inner .brand-mark{transform:scale(.8) rotate(-8deg)}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.24s}@keyframes float{50%{transform:translateY(-12px)}}@keyframes drift{50%{transform:translate(25px,-18px) scale(1.04)}}@keyframes spin{to{rotate:360deg}}@keyframes pulsePath{to{stroke-dashoffset:-190}}@keyframes nodePulse{50%{box-shadow:0 0 0 10px rgba(33,190,211,.04),0 0 23px rgba(33,190,211,.57)}}@keyframes orb{50%{transform:translateY(-13px)}}@media(max-width:760px){.container{width:min(100% - 32px,550px)}.nav{height:66px}.menu-toggle{display:block}.nav-links{display:none}.site-header.menu-open{background:#fff;box-shadow:0 10px 26px rgba(28,65,115,.1)}.menu-open .nav-links{display:flex;position:absolute;top:66px;left:0;width:100%;padding:16px 24px 22px;background:#fff;flex-direction:column;align-items:flex-start;gap:17px}.nav-login{padding:9px 14px}.hero{padding:115px 0 46px;min-height:auto}.hero-grid{grid-template-columns:1fr;gap:23px}.hero-copy{text-align:center}.hero-copy .eyebrow{justify-content:center}.lead{font-size:15px;margin-inline:auto}.hero-actions{justify-content:center;gap:18px}.trust-row{justify-content:center;margin-top:35px}.hero-visual{height:395px}.dashboard-card{width:calc(100% - 18px);padding:21px}.orbit-a{width:350px;height:270px}.orbit-b{width:300px;height:430px}.chip-top{right:-2px;top:17px}.chip-bottom{left:6px;bottom:16px}.scroll-hint{justify-content:center;margin-top:5px}.section{padding:75px 0}.section-heading{margin-bottom:30px}.section-heading>p:last-child{font-size:14px}.principle-grid{grid-template-columns:1fr}.principle-card{padding:25px}.identity{padding-top:25px}.identity-shell{grid-template-columns:1fr}.identity-art{min-height:280px}.identity-copy{padding:31px 26px 36px;text-align:center}.identity-copy .eyebrow{justify-content:center}.identity-copy>p:last-of-type{font-size:14px}.steps{grid-template-columns:1fr;gap:20px;padding:26px 0 0}.steps:before{top:26px;bottom:26px;left:50%;right:auto;width:1px;height:auto;background:linear-gradient(#bae9ed,#d9ccf3)}.steps li{display:grid;grid-template-columns:72px 1fr;text-align:left;align-items:center}.steps li span{margin:0}.steps h3{margin:0 0 4px}.steps p{margin:0;max-width:none;grid-column:2}.closing{padding:20px 0 65px}.closing-inner{padding:50px 20px}.footer-inner{flex-direction:column;gap:12px}.footer-inner p:nth-child(2){order:-1}.delay-1,.delay-2{transition-delay:0s}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* === SIMITRA: tambahan di atas referensi (D:\Project_Mitra\Ref) === */
.brand-group{display:flex;align-items:center;gap:14px}
.inst{display:inline-flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--line);font-size:11px;line-height:1.25;color:#5b6f8a;font-weight:600}
.inst img{width:30px;height:auto}
.inst small{display:block;font-weight:500;color:#8594a8;font-size:10px}
.nav-register{color:var(--blue)!important}
.hero-actions .button-quiet{margin-top:0}
.notice{max-width:520px;margin:0 0 22px;border-radius:12px;padding:12px 15px;font-size:13px;line-height:1.55;border:1px solid}
.notice-error{background:#fff4f4;border-color:#f3cccc;color:#8f2b2b}
.notice-info{background:#f0f8ff;border-color:#cfe3f6;color:#24507f}
.trust-kkp{width:36px;height:auto}
.footer-inst{display:flex;align-items:center;gap:8px}
.footer-inst img{width:22px;height:auto}
.closing-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
.closing .button-ghost{color:#fff;border:1px solid rgba(255,255,255,.45)}
.closing .button-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
@media(max-width:760px){.inst{display:none}.notice{margin-inline:auto;text-align:left}}
/* Perbaikan: cegah geser horizontal akibat ornamen ambient/orbit; garis langkah mobile tidak menimpa teks */
html{overflow-x:clip}
body{position:relative;overflow-x:clip}
.hero-visual{overflow:visible}
@media(max-width:760px){.steps:before{left:25px;right:auto}.hero-visual{overflow:hidden;border-radius:20px}}