/* Frame the supplied original brand artwork without redrawing it. */
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/nunito-sans-400.ttf") format("truetype")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/nunito-sans-500.ttf") format("truetype")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url("assets/nunito-sans-600.ttf") format("truetype")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/nunito-sans-700.ttf") format("truetype")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/nunito-sans-800.ttf") format("truetype")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:900;font-display:swap;src:url("assets/nunito-sans-900.ttf") format("truetype")}
:root{--blue:#334bc3;--navy:#172441;--orange:#f2a039;--motion-ease:cubic-bezier(.2,.75,.25,1)}
body,button,input,select,textarea{font-family:"Nunito Sans",sans-serif}
body{overflow-x:clip}
.brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:0}
.wordmark{display:block;width:128px;height:auto;overflow:hidden}
.topbar{transition:box-shadow .25s ease,background-color .25s ease}
.topbar.is-scrolled{box-shadow:0 4px 22px #1934640d;background:rgba(255,255,255,.98)}
.topbar nav a{position:relative;padding:10px 0}
.topbar nav a::after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--motion-ease)}
.topbar nav a:hover::after,.topbar nav a:focus-visible::after{transform:scaleX(1)}
.hero{grid-template-columns:.9fr 1.1fr;gap:30px;min-height:650px}
.hero h1{font-weight:900;font-size:clamp(44px,4.8vw,68px);letter-spacing:-.052em;line-height:1.04}
.hero h1 strong{font-weight:900;position:relative;display:inline-block}
.hero h1 strong::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:var(--orange);border-radius:50%;transform:rotate(-1deg)}
.hero-copy>p{max-width:490px;margin-top:36px}
.hero-art{height:auto;min-width:0;aspect-ratio:282/225;border-radius:0;background:none;isolation:isolate}
.reference-banner{display:block;width:100%;height:auto;overflow:hidden;transition:transform .6s var(--motion-ease)}
.section h2,.app-section h2,.connection h2,.cta h2{font-weight:900;letter-spacing:-.035em}
h3,.app-tabs button b{font-weight:800}
.button,.text-button,.link,.to-top{transition:transform .25s var(--motion-ease),box-shadow .25s ease,background-color .25s ease,color .25s ease}
.button span{transition:transform .25s var(--motion-ease)}
.button:active{transform:translateY(1px) scale(.98)}
.feature-grid article{transition:transform .35s var(--motion-ease),box-shadow .35s ease,border-color .35s ease}
.feature-head i{transition:transform .35s var(--motion-ease)}
.app-tabs button{transition:background-color .25s ease,box-shadow .25s ease,color .25s ease,transform .25s ease}
.app-tabs button small{font-size:12px}
.app-tabs button.active i{transform:rotate(90deg)}
.app-tabs button i{transition:transform .25s var(--motion-ease)}
.phone.tall{overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.phone.tall::-webkit-scrollbar{display:none}
.phone.tall img{height:auto;min-height:100%;display:block;object-fit:contain}
.phone.tall:focus-visible{outline-offset:6px}
.screen-status{font-size:12px;color:var(--muted);position:absolute;bottom:-8px;text-align:center}
.app-phone-wrap,.app-copy,.connection-grid>*{min-width:0}
.rings{width:min(490px,100%);height:auto;aspect-ratio:1}
summary{align-items:center;gap:18px}
summary::after{flex-shrink:0;transition:transform .22s ease,background-color .22s ease,color .22s ease}
details[open] summary::after{background:var(--blue);color:#fff}
summary::-webkit-details-marker{display:none}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid #f4af41;outline-offset:5px}
[id]{scroll-margin-top:105px}
.menu{width:44px;height:44px;padding:10px;cursor:pointer;position:relative}
.menu span{display:block;height:2px;width:24px;border-radius:2px;background:var(--navy);margin:5px 0;transition:transform .25s ease,opacity .25s ease}
.topbar.open .menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topbar.open .menu span:nth-child(2){opacity:0}
.topbar.open .menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Content remains visible when JavaScript is unavailable. */
.scroll-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--motion-ease),transform .65s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.is-visible{opacity:1;transform:none}
.feature-grid .scroll-reveal{transition:opacity .65s var(--motion-ease),transform .65s var(--motion-ease),box-shadow .35s ease,border-color .35s ease;transition-delay:var(--reveal-delay,0ms)}
.hero-copy.reveal{animation:brand-enter .75s var(--motion-ease) both}
.hero-art.reveal{animation:brand-enter .9s .12s var(--motion-ease) both}
@keyframes brand-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes gentle-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.app-phone-wrap.is-visible .note{animation:gentle-float 2.2s ease-in-out 2}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .button:hover{transform:translateY(-3px);box-shadow:0 12px 26px #294fb234}
 .button:hover span{transform:translate(2px,-2px)}
 .text-button:hover,.link:hover,.to-top:hover{transform:translateY(-2px);color:var(--blue)}
 .feature-grid article:hover{transform:translateY(-6px);border-color:#becbf0;box-shadow:0 16px 32px #25467e0c}
 .feature-grid article:hover .feature-head i{transform:rotate(-5deg) scale(1.08)}
 .app-tabs button:hover:not(.active){background:#eaf0ff;transform:translateX(3px)}
 .hero-art:hover .reference-banner{transform:translateY(-4px)}
}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;gap:38px;min-height:0}
 .hero h1{font-size:clamp(44px,7.8vw,64px)}
 .hero-copy>p{margin:32px auto 0}
 .hero-art{max-width:610px}
 .topbar.open nav{animation:brand-enter .25s var(--motion-ease)}
}
@media(max-width:640px){
 .wordmark{width:112px}
 .hero{padding-top:45px;gap:26px}
 .hero h1{font-size:clamp(39px,10.5vw,57px)}
 .hero-art{height:auto;aspect-ratio:282/225}
 .hero-copy>p{font-size:16px}
 .actions{gap:22px;margin:28px 0}
 .app-phone-wrap{height:535px}
 .screen-status{bottom:0}
 .note{left:0;max-width:100%}
 .phone.tall{top:45px}
 .connection-card{padding:25px}
 .topbar nav a{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
  .scroll-reveal{opacity:1;transform:none}
}
/* Measurements refined against the full-resolution section references. */
.wrap{width:min(1240px,calc(100% - 48px))}
.topbar{height:90px;padding-inline:max(24px,calc((100vw - 1240px)/2))}
.topbar nav{gap:32px;font-weight:700;color:#65728a}
.topbar .wordmark{width:134px}
.topbar>.button{margin-left:44px;padding:14px 24px}
.hero{width:min(1252px,calc(100% - 48px));grid-template-columns:42% 58%;gap:32px;padding-block:65px 70px;min-height:715px}
.hero-art{aspect-ratio:710/570}
.hero h1{font-size:72px;line-height:1.07;margin:28px 0 40px}
.hero-copy>p{font-size:16px;line-height:2;max-width:485px}
.hero-copy .pill{font-size:12px;padding:10px 14px;font-weight:800}
.hero .actions{margin:38px 0 32px}
.hero .button{padding:17px 27px;font-size:15px}
.hero .ticks{font-size:11px;gap:18px}
.benefit-bar{height:74px;padding-inline:max(24px,calc((100vw - 1240px)/2));font-size:14px;font-weight:700;background:#3047bb;gap:32px}
.benefit-bar span{display:flex;align-items:center;gap:16px;padding:0;border-right:1px solid #ffffff25}
.benefit-bar span:last-child{border:0}
.benefit-bar span:nth-child(1) .icon{color:#b6c8ff}
.benefit-bar span:nth-child(2) .icon{color:#f8cf79}
.benefit-bar span:nth-child(3) .icon{color:#6ee5d0}
.benefit-bar span:nth-child(4) .icon{color:#cbd6ff}
.icon{display:inline-block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.section{padding:100px 0}
.kicker{font-size:13px;font-weight:800;letter-spacing:.1em;margin:8px 0 22px}
.section h2,.app-section h2{font-size:46px;line-height:1.13;margin:0 0 24px;letter-spacing:-.045em}
.lead{font-size:16px;line-height:1.85}
#kenapa>.lead{max-width:500px}
.feature-grid{gap:22px;margin-top:44px}
.feature-grid article{padding:32px 31px;border-radius:24px;min-height:270px}
.feature-head i{width:54px;height:54px;border-radius:17px}
.feature-head small{font-size:14px}
.feature-grid h3{font-size:22px;line-height:1.25;letter-spacing:-.03em;margin:28px 0 18px;max-width:290px}
.feature-grid p,.steps-grid p{font-size:15px;line-height:1.85;margin:0}
.app-section{padding:92px 0;background:#f5f7ff}
.app-grid{grid-template-columns:580px minmax(0,1fr);gap:70px}
.app-tabs{margin-top:35px;gap:6px}
.app-tabs button{padding:21px 26px;grid-template-columns:40px 1fr 22px;min-height:69px;border:1px solid transparent}
.app-tabs button b{font-size:16px}
.app-tabs button>span .icon{width:21px;height:21px}
.app-tabs button.active{border-color:#d8e1ff;color:var(--blue);box-shadow:0 8px 24px #153c7710;border-radius:16px}
.app-tabs button small{font-size:14px;line-height:1.9;margin-top:12px;color:#7688a6}
.privacy{line-height:1.6;font-size:11px!important;max-width:375px;margin-top:20px}
.app-phone-wrap{height:640px}
.app-phone-wrap>p{top:12px;font-size:10px;font-weight:800;letter-spacing:.15em}
.rings{width:520px;max-width:100%;border-style:dashed;box-shadow:inset 0 0 0 40px #f5f7ff;background:#ecf1ff}
.phone.tall{top:56px;width:254px;height:533px;border-width:5px;border-radius:40px}
.phone.tall::after{content:"";position:absolute;width:64px;height:17px;background:#171e28;border-radius:14px;top:8px;left:calc(50% - 32px);pointer-events:none}
.note{left:-7px;bottom:33px;display:flex;align-items:center;gap:12px;transform:rotate(-4deg);padding:16px 18px;border:1px solid #eef1f9;border-radius:18px;font-weight:800;line-height:1.7;font-size:12px}
.note-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#fff3dc;color:#f1a239;font-size:26px}
.app-caption{position:absolute;bottom:4px;font-size:10px;color:#93a3bf}
.screen-status{bottom:-18px}
.steps-grid{gap:30px;margin-top:60px}
.steps-grid article>div{border:0;gap:28px;padding:0;position:relative}
.steps-grid article:not(:last-child)>div::after{content:"";flex:1;border-top:1px dashed #d4dffc;margin-left:12px}
.steps-grid article>div>span{color:var(--blue)}
.steps-grid article:nth-child(2)>div>span{color:#ee971c}
.steps-grid article:nth-child(3)>div>span{color:#30a28e}
.steps-grid i{width:50px;height:50px;display:grid;place-items:center;flex-shrink:0;font-weight:800;font-size:16px}
.steps-grid h3{font-size:24px;letter-spacing:-.045em;margin:26px 0 16px}
.steps-grid p{max-width:365px}
.steps-grid article>a{font-weight:700;padding:8px 13px;margin-top:23px}
.step-note{font-size:12px;margin-top:48px}
.connection{background:#fff9ed;padding:80px 0}
.connection-grid{grid-template-columns:minmax(0,1fr) 518px;gap:112px}
.connection h2{font-size:38px;line-height:1.25;letter-spacing:-.04em;margin:20px 0 27px}
.connection .lead{max-width:520px;margin-bottom:28px;font-size:16px;line-height:1.9}
.connection .link{font-size:14px}
.connection-card{padding:34px 36px;border-radius:24px;min-height:356px;box-shadow:0 18px 35px #a8862610}
.who{gap:20px}
.who i{width:58px;height:58px;border-radius:19px;font-size:24px}
.who:last-child i{background:#edf2ff;color:var(--blue)}
.who b{font-size:20px;font-weight:900;letter-spacing:-.03em}
.who small{font-size:12px;margin-top:7px}
.bridge{position:relative;margin:34px 0 34px 70px;border:1px solid #dce5ff;border-radius:16px;padding:22px 26px;background:#f5f7ff}
.bridge::before{content:"";position:absolute;left:-43px;top:-22px;bottom:-18px;border-left:2px dashed #ccd9ff}
.bridge::after{content:"";position:absolute;left:-42px;top:50%;width:40px;border-top:2px dashed #ccd9ff}
.bridge b{font-size:24px;font-weight:900;letter-spacing:-.045em}
.bridge small{font-size:12px;margin-top:10px}
@media(max-width:1200px) and (min-width:901px){
 .hero h1{font-size:58px}.hero{gap:22px;grid-template-columns:43% 55%;min-height:630px}
 .app-grid{grid-template-columns:1fr 1fr;gap:45px}
 .connection-grid{grid-template-columns:1.1fr 1fr;gap:60px}.connection h2{font-size:33px}
 .topbar nav{gap:24px}.topbar>.button{margin-left:28px}
 .feature-grid h3{font-size:21px}
}
@media(max-width:900px){
 .topbar{height:76px}.topbar.open nav{top:76px}
 .hero{grid-template-columns:1fr;gap:30px;min-height:0;padding-block:54px}
 .hero h1{font-size:64px;max-width:600px;margin-inline:auto}.hero-copy>p{margin-inline:auto}
 .hero-art{max-width:680px;width:100%}.hero .actions{justify-content:center}
 .app-grid,.connection-grid{grid-template-columns:1fr;gap:40px}
 .app-phone-wrap{width:min(100%,580px);margin:auto}.note{left:0}
 .feature-grid article{padding:25px}.feature-grid h3{font-size:20px}
 .connection-card{max-width:600px;width:100%;margin:auto}
 .steps-grid h3{font-size:21px}
 .benefit-bar{gap:15px;font-size:12px}.benefit-bar span{gap:9px}
}
@media(max-width:640px){
 .wrap,.hero{width:calc(100% - 32px)}.hero h1{font-size:clamp(38px,10.5vw,56px)}
 .topbar{padding-inline:20px}.topbar .wordmark{width:117px}
 .hero-copy>p{font-size:16px;line-height:1.8}.hero .ticks{gap:12px;font-size:10px}
 .hero-art{height:auto;aspect-ratio:710/570}
 .benefit-bar{height:auto;grid-template-columns:1fr 1fr;padding:15px 16px;gap:18px;font-size:11px}
 .benefit-bar span{border:0}.benefit-bar .icon{width:21px}
 .section,.app-section{padding:70px 0}.section h2,.app-section h2{font-size:35px}.kicker{font-size:11px}
 .feature-grid article{min-height:0;padding:27px}.feature-grid h3{font-size:22px;max-width:none}
 .app-tabs button{padding:18px 16px;grid-template-columns:34px 1fr 20px}
 .app-tabs button small{font-size:13px}.app-phone-wrap{height:620px}
 .phone.tall{top:45px;width:244px;height:523px}.note{font-size:11px;bottom:43px;max-width:98%}
 .app-caption{bottom:4px}.steps-grid{gap:44px}.steps-grid h3{font-size:24px}
 .steps-grid article:not(:last-child)>div::after{display:none}.step-note{line-height:1.7}
 .connection-grid{gap:34px}.connection h2{font-size:clamp(26px,7.2vw,34px)}
 .connection-card{padding:24px 20px;min-height:0}.who b{font-size:17px}.who{gap:14px}
 .who i{width:48px;height:48px}.bridge{margin:28px 0 28px 54px;padding:20px}
 .bridge::before{left:-30px}.bridge::after{left:-29px;width:28px}
 .cta{width:calc(100% - 32px)}
}