section.hero{background:radial-gradient(60% 55% at 85% 15%, #50a8f04d, transparent 70%), var(--navy);color:#fff;padding:clamp(2rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,5rem);overflow:hidden}header{background:#fff}.hero .wrap.hg{align-items:center}.hero h1{color:#fff}.hero .lead{color:#c9dcf3;max-width:28rem}.hero .ac.q{color:var(--mark)}@media (hover:hover){.hero .ai:hover{color:var(--mark)}}.hero .btn{background:var(--mark);color:#06203b;border-color:var(--mark)}.hero .btn.ghost{color:#fff;background:0 0;border-color:#ffffff8c}.badge{flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none;display:flex}.badge li{font:600 .85rem var(--body);color:#dbe9f9;-webkit-backdrop-filter:blur(12px)saturate(150%);backdrop-filter:blur(12px)saturate(150%);background:linear-gradient(135deg,#fff3,#ffffff12);border:1px solid #ffffff5c;border-radius:999px;padding:.35rem .8rem;box-shadow:inset 0 1px #ffffff3d,0 4px 14px #00000014}@media (max-width:600px){.hero .row{flex-direction:column}.hero .btn{text-align:center;width:100%;display:block}}.mock{place-items:center;min-height:380px;padding:1rem 0;display:grid;position:relative}.mock:before{content:"";aspect-ratio:1;background:radial-gradient(circle,#50a8f059,#0000 65%);border-radius:50%;width:80%;position:absolute}.hp{z-index:1;aspect-ratio:9/17;background:#fff;border:7px solid #163d70;border-radius:34px;width:min(230px,62vw);position:relative;box-shadow:0 24px 50px #00000073}.hp:before{content:"";z-index:2;background:#163d70;border-radius:99px;width:3.2rem;height:.5rem;position:absolute;top:.45rem;left:50%;translate:-50%}.layar{background:#f4f8fd;border-radius:26px;flex-direction:column;gap:.55rem;padding:1.6rem .7rem .7rem;display:flex;position:absolute;inset:0;overflow:hidden}.blok{animation:susun .7s cubic-bezier(.2, .9, .25, 1.2) var(--k,1s) backwards}.k1{--k:1s}.k2{--k:1.5s}.k3{--k:2s}.k4{--k:2.5s}@keyframes susun{0%{opacity:0;translate:0 16px;scale:.94}to{opacity:1;translate:0;scale:1}}.b-head{align-items:center;gap:.4rem;display:flex}.dot{background:#0058a0;border-radius:50%;width:1.1rem;height:1.1rem}.gr{background:#c2d8ee;border-radius:99px;flex:1;height:.45rem}.gr.kecil{flex:.4}.b-hero{background:#0058a0;border-radius:12px;gap:.4rem;padding:.9rem .7rem;display:grid}.gp{background:#fff;border-radius:99px;height:.6rem}.gp.pendek{width:60%}.pil{background:#50a8f0;border-radius:99px;width:45%;height:1.1rem;margin-top:.3rem}.b-kartu{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.b-kartu i{background:#d3e7fb;border-radius:10px;height:3.6rem;display:block}.b-baris{gap:.4rem;display:grid}.b-baris i{background:#d9e6f5;border-radius:99px;height:.6rem;display:block}.b-baris i:nth-child(2){width:80%}.b-baris i:nth-child(3){width:55%}.tag{z-index:2;color:#0b2342;font:700 .85rem var(--body);animation:muncul .5s ease var(--k,1s) backwards, apung 4s ease-in-out var(--k,1s) infinite;background:#fff;border-radius:999px;padding:.5rem .9rem .5rem 1.6rem;position:absolute;box-shadow:0 8px 20px #0000004d}.tag:before{content:"";background:#0058a0;border-radius:50%;width:.5rem;height:.5rem;position:absolute;top:50%;left:.7rem;translate:0 -50%}.t1{--k:2.8s;top:10%;left:0}.t2{--k:3.1s;top:44%;right:0}.t3{--k:3.4s;bottom:8%;left:2%}@keyframes muncul{0%{opacity:0;scale:.8}to{opacity:1;scale:1}}@keyframes apung{0%,to{translate:0}50%{translate:0 -10px}}@media (prefers-reduced-motion:reduce){.blok,.tag{animation:none}}
.kt .ktc{display:inline-block}.kt.siap .ktc{opacity:0}.kt.on .ktc{opacity:1;transition:opacity 10ms linear var(--d,0s)}@media (prefers-reduced-motion:reduce){.kt .ktc{opacity:1!important;transition:none!important}}
.ketik .kc{opacity:0}.ketik.on .kc{animation:tap 10ms steps(1, end) var(--d,0s) forwards}@keyframes tap{to{opacity:1}}@media (scripting:none){.ketik .kc{opacity:1}}@media (prefers-reduced-motion:reduce){.ketik .kc{opacity:1!important;animation:none!important}}.kal{font:500 var(--type-body)/1.55 var(--body);letter-spacing:-.005em;color:var(--mute);margin:0}.kal .kw{white-space:nowrap;opacity:.18;transition:opacity .5s ease var(--d,0s), translate .5s cubic-bezier(.2, .9, .25, 1.3) var(--d,0s);display:inline-block;translate:0 .4em}.kal.on .kw{opacity:1;translate:0}.kal .kunci{font-weight:inherit;color:inherit;background:0 0}.kh{transition:translate .2s cubic-bezier(.3,1.6,.5,1),color .15s;display:inline-block}@media (hover:hover){.kh:hover{translate:0 -.16em}}@media (scripting:none){.kal .kw{opacity:1;translate:none}}@media (prefers-reduced-motion:reduce){.kal .kw{opacity:1;transition:none;translate:none}}.nota .meta{color:var(--ink);font-weight:700}.mulai .kal{max-width:26rem;margin-top:1.2rem}.lay-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.4rem;margin:2.5rem 0 0;padding:0;list-style:none;display:grid}.kartu{border:2px solid var(--ink);background:var(--asli);height:100%;box-shadow:6px 6px 0 var(--ink);border-radius:18px;flex-direction:column;gap:1rem;padding:1.4rem 1.4rem 1.5rem;display:flex}.lay-grid>li:nth-child(2n) .kartu{background:var(--muda)}.kik{border:2px solid var(--ink);width:3.25rem;height:3.25rem;color:var(--blue);background:#fff;border-radius:14px;place-items:center;display:grid}.kik svg{width:1.7rem;height:1.7rem}.kartu-judul{align-items:center;gap:1rem;min-height:3.25rem;display:flex}.kartu h3{font:800 var(--type-heading)/1.1 var(--disp);letter-spacing:-.02em}.kartu .kal{font-weight:500;line-height:1.5}.chips{flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.chips li{font:700 .85rem var(--body);border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:.3rem .75rem}.harga{gap:.15rem;margin-top:auto;padding-top:.4rem;display:grid}.harga small{font:600 .8rem var(--body);color:var(--mute)}.harga strong{font:700 clamp(1.2rem, 3vw, 1.45rem)/1.3 var(--disp);letter-spacing:-.02em;justify-self:start}@media (hover:hover){.kartu{transition:translate .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}.kartu:hover{box-shadow:9px 9px 0 var(--ink);translate:-3px -3px}}.kal.pas{max-width:40rem;margin-top:2rem}.steps2{counter-reset:s2;margin:2.5rem 0 0;padding:0;list-style:none}.steps2 li{counter-increment:s2;align-items:flex-start;gap:1rem;padding:.9rem 0;display:flex;position:relative}.steps2 li:before{content:counter(s2);background:var(--navy);color:#fff;width:3rem;height:3rem;font:800 1.3rem var(--disp);z-index:1;border-radius:50%;flex:none;place-items:center;display:grid}.steps2 li:not(:last-child):after{content:"";background:var(--navy);opacity:.25;width:2px;position:absolute;top:3.9rem;bottom:-.9rem;left:1.5rem;translate:-1px}.steps2 h3{font:800 var(--type-heading)/1.1 var(--disp);letter-spacing:-.02em;padding-top:.15rem}.steps2 .kal{margin-top:.4rem}.work-info h3{font:800 var(--type-heading)/1.1 var(--disp);letter-spacing:-.02em;text-align:left}.work-info>.kal{text-align:left;margin-top:.4rem;font-size:.9rem;font-weight:500;line-height:1.55}.work-info>.kal>span[aria-hidden=true],.work-info>.kal>span[aria-hidden=true]>span{display:inline}#faq .kal{max-width:42rem;margin-top:.7rem;font-weight:500}
.frame .viewport{align-content:center;gap:.35rem;position:relative;overflow:hidden}.viewport img{object-fit:cover;object-position:top;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.viewport strong{font:800 clamp(1.5rem, 4vw, 2.4rem)/1.05 var(--disp);letter-spacing:-.02em;color:var(--ink)}.work .aksi{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5rem .75rem;margin-top:.6rem;font-weight:400;display:flex}.work .lbl{font:600 .78rem var(--body);border:1.5px solid var(--ink);border-radius:999px;padding:.15rem .6rem;font-style:normal}.work .lbl.st{background:var(--mark);color:var(--on-mark);border-color:var(--mark)}.work .demo{font:600 .9rem var(--body);color:var(--blue);text-underline-offset:3px;padding:.3rem 0}
footer .wrap.ft{display:block}.ft-cta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem 2rem;display:flex}footer .btn.ft-btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}.ft-grid{border-top:1px solid color-mix(in srgb, var(--bg) 25%, transparent);grid-template-columns:1.6fr 1fr 1.2fr;gap:2.5rem 2rem;margin-top:3rem;padding-top:2.5rem;display:grid}.ft-grid h3{font:700 1rem var(--disp);margin-bottom:.7rem}.ft-grid p{margin:0}.ft-logo{font:800 1.5rem var(--disp);letter-spacing:-.03em;margin-bottom:.6rem!important}.ft-logo i{opacity:.65;font-style:normal}.ft-brand p{opacity:.85;max-width:28rem;font-size:.97rem}.ft-brand .ft-wil{opacity:.7;margin-top:.8rem;font-size:.9rem}.ft-list{gap:.1rem;margin:0;padding:0;list-style:none;display:grid}.ft-list a{opacity:.85;overflow-wrap:anywhere;padding:.4rem 0;font-size:.97rem;text-decoration:none;display:inline-block}.ft-list a:hover{opacity:1;text-underline-offset:3px;text-decoration:underline}.ft-sos{flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none;display:flex}.ft-sos a{border:1.5px solid color-mix(in srgb, var(--bg) 45%, transparent);width:2.75rem;height:2.75rem;color:inherit;border-radius:50%;place-items:center;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s;display:grid}@media (hover:hover){.ft-sos a:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}}.ft-bottom{border-top:1px solid color-mix(in srgb, var(--bg) 25%, transparent);opacity:.75;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;margin-top:2.5rem;padding-top:1.5rem;font-size:.88rem;display:flex}@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}@media (max-width:600px){.ft-sos{gap:.5rem}.ft-sos a{width:2.5rem;height:2.5rem}}@media (max-width:420px){.ft-grid{grid-template-columns:1fr}}