@font-face{font-family:Manrope;src:url(/fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--ink:#1D1D1F;--ink2:#4A4636;--muted:#6B6550;--cream:#F7F4EC;--yellow:#FFD66B;--green:#2F6B4F;--green-soft:#E4EFE8;--sand:#EFEADC}
*{box-sizing:border-box;margin:0}
body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:9;background:#fff;padding:8px 16px;border-radius:12px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(34px,5vw,52px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:99px;background:var(--green);color:#fff;font-weight:800;font-size:17px;box-shadow:0 12px 28px #2F6B4F55;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn svg{width:18px;height:18px}
.note{font-size:15px;font-weight:600;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px}

.hero{background:radial-gradient(120% 140% at 30% 25%,#FFF4CC 0%,var(--yellow) 75%);overflow:hidden}
nav.top{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-.04em}
.brand img{width:38px;height:38px;border-radius:11px}
.beta{font-size:11px;font-weight:800;letter-spacing:.1em;padding:4px 10px;border-radius:99px;background:#1D1D1F14;color:var(--ink2)}
.links{display:flex;align-items:center;gap:32px;font-weight:600;color:var(--ink2)}
.links a:hover{color:var(--ink)}
.links .dark{background:var(--ink);color:#fff;padding:11px 20px;border-radius:99px;font-weight:700}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding:48px 0 0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#ffffffb3;font-size:14px;font-weight:700;color:var(--green)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero h1{font-size:clamp(44px,6.4vw,78px);margin:24px 0}
.hero .sub{font-size:20px;font-weight:500;color:var(--ink2);max-width:520px;margin-bottom:36px}
.hero .sub b{background:#fff;padding:2px 8px;border-radius:8px}
.stage{position:relative;height:620px}
.phone{position:absolute;left:8%;top:10px;width:340px;transform:rotate(-5deg);background:var(--ink);padding:9px;border-radius:54px;box-shadow:0 36px 80px #1D1D1F33}
.chip{position:absolute;left:-4%;top:420px;transform:rotate(-4deg);display:flex;align-items:center;gap:14px;background:#fff;padding:16px 24px 16px 16px;border-radius:28px;box-shadow:0 24px 60px #1D1D1F2E}
.chip span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#FFF3CF;font-size:26px}
.chip b{display:block;font-size:20px}.chip small{font-size:15px;font-weight:700;color:var(--green)}
.mascot{position:absolute;right:-6%;bottom:-10px;width:250px}

.why{background:var(--ink);color:#fff;padding:120px 0}
.why .wrap{display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:center}
.why .kicker{color:var(--yellow)}
.why h2{margin:20px 0 24px}
.why p{font-size:20px;color:#C9C7C0;line-height:1.6}

section.pad{padding:120px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:56px}
.head h2{margin-top:16px;max-width:640px}
.head>p{font-size:18px;font-weight:500;color:var(--ink2);max-width:360px}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{border-radius:40px;padding:40px;position:relative;overflow:hidden}
.card .tag{font-size:13px;font-weight:800;letter-spacing:.15em;color:var(--green)}
.card h3{font-size:28px;margin:12px 0}
.card p{font-size:16px;font-weight:500;color:var(--ink2);line-height:1.55}
.card.big{grid-row:span 2;background:var(--yellow);min-height:620px;padding:48px}
.card.big .tag{color:#6B5200}.card.big h3{font-size:34px}.card.big .txt{max-width:400px}
.card.big .mini{position:absolute;right:-20px;bottom:-250px;width:270px;transform:rotate(8deg);background:var(--ink);padding:8px;border-radius:42px}

.card.side{display:flex;align-items:center;gap:24px}
.card.side img{width:170px;flex-shrink:0}
.more{display:inline-block;margin-top:32px;font-weight:800;color:var(--green);text-decoration:underline;text-underline-offset:4px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;list-style:none;padding:0}
.steps li{border-top:2px solid var(--ink);padding:32px 40px 0}
.steps li+li{border-left:1px solid var(--ink)}
.steps li:first-child{padding-left:0}
.steps .n{font-size:72px;font-weight:800;letter-spacing:-.05em;color:#D9D4C3;line-height:1}
.steps li:last-child .n{color:var(--green)}
.steps h3{font-size:26px;margin:16px 0 12px}
.steps p{font-size:17px;font-weight:500;color:var(--ink2)}

.final{position:relative;overflow:hidden;background:var(--green);color:#fff;border-radius:48px;padding:80px 72px;margin-bottom:120px}
.final::before{content:"";position:absolute;right:-60px;top:-120px;width:620px;height:620px;border-radius:50%;background:#ffffff10}
.final .txt{position:relative;max-width:640px}
.final h2{margin-bottom:24px}
.final p{font-size:19px;color:var(--green-soft);margin-bottom:32px}
.final .btn{background:var(--yellow);color:var(--ink);box-shadow:none}
.final .note{color:var(--green-soft)}
.final img{position:absolute;right:6%;bottom:20px;width:340px}

footer{background:var(--sand);padding:56px 0 40px}
.ft{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ft .brand{font-size:22px;margin-bottom:14px}.ft .brand img{width:34px;height:34px;border-radius:10px}
.ft p{color:var(--ink2);margin-bottom:6px}.ft .mail{color:var(--green);font-weight:700}
.cols{display:flex;gap:64px}
.cols ul{list-style:none;padding:0;display:grid;gap:12px;font-weight:600}
.cols h4{font-size:13px;letter-spacing:.15em;color:#8C8778;margin-bottom:4px}
.cols a:hover{text-decoration:underline}
.legal{border-top:1px solid #1D1D1F26;margin-top:48px;padding-top:24px;font-size:14px;color:var(--muted)}

@media (max-width:900px){
  .links a:not(.dark){display:none}
  .hero-grid,.why .wrap,.bento{grid-template-columns:1fr}
  .stage{height:600px;max-width:420px;margin:0 auto;width:100%}
  .phone{left:50%;margin-left:-140px;width:280px;padding:8px;border-radius:46px}.phone .scr{border-radius:38px;padding-top:36px}.phone .scr::before{top:12px;left:24px;font-size:12px}.phone .scr::after{top:12px;right:20px;transform:scale(.85);transform-origin:right top}
  .chip{left:0;top:auto;bottom:70px;padding:12px 18px 12px 12px;gap:10px}.chip span{width:42px;height:42px;font-size:20px;border-radius:14px}.chip b{font-size:16px}.chip small{font-size:13px}
  .mascot{right:-10px;width:160px}
  .why,section.pad{padding:80px 0}
  .why .wrap{gap:32px}.why img{max-width:260px;margin:0 auto}
  .head{flex-direction:column;align-items:start}
  .card.big{grid-row:auto;min-height:600px;padding:32px}.card.big .mini{width:220px;right:-10px;bottom:-200px}
  .card.side{flex-direction:column-reverse;align-items:start}.card.side img{width:130px}
  .steps{grid-template-columns:1fr;gap:32px}
  .steps li,.steps li:first-child,.steps li+li{padding:24px 0 0;border-left:0}
  .final{padding:48px 28px 260px;border-radius:32px;margin-bottom:80px}
  .final img{width:220px;right:50%;margin-right:-110px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* subpages */
.phead{padding:0 0 72px}
.phead .kicker{margin-top:40px}
.phead h1{font-size:clamp(38px,5.4vw,64px);margin:16px 0 20px;max-width:820px}
.phead .lead{font-size:19px;font-weight:500;color:var(--ink2);max-width:640px}
.phead .lead a{color:var(--green);font-weight:700;text-decoration:underline}
.links a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}

.feat{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center;padding:72px 0;border-top:2px solid var(--ink)}
.feat:nth-child(even){grid-template-columns:300px 1fr}.feat:nth-child(even) .shot{order:-1}
.feat .no{font-size:15px;font-weight:800;color:var(--green);letter-spacing:.1em}
.feat h2{margin:8px 0 6px;font-size:clamp(32px,4vw,44px)}
.feat .tl{font-size:19px;font-weight:600;color:var(--ink2);margin-bottom:28px}
.pb{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.pb div{border-radius:24px;padding:22px 24px;background:#fff}
.pb div+div{background:var(--green-soft)}
.pb b{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pb div+div b{color:var(--green)}
.pb p{font-size:16px;font-weight:500;color:var(--ink2);line-height:1.55}
.ticks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ticks li{font-size:15px;font-weight:700;padding:8px 14px;border-radius:99px;background:#1D1D1F0D}
.ticks li::before{content:"✓ ";color:var(--green)}
.shot{background:var(--ink);padding:8px;border-radius:42px;box-shadow:0 30px 60px #1D1D1F26}
.shot img{width:100%;height:auto}
.shot.art img{border-radius:0}
.shot.art{background:var(--yellow);padding:32px;box-shadow:none;border-radius:40px}

.faq{max-width:820px;padding:24px 0 96px}
.faq details{border-top:2px solid var(--ink);padding:24px 0}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em}
.faq summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);font-size:24px;font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:14px;font-size:17px;font-weight:500;color:var(--ink2);max-width:680px;line-height:1.6}
.faq details a{color:var(--green);font-weight:700;text-decoration:underline}

.doc{max-width:760px;padding:24px 0 120px}
.doc .upd{font-size:15px;font-weight:600;color:var(--muted)}
.doc h2{font-size:26px;letter-spacing:-.02em;margin:48px 0 14px}
.doc p,.doc li{font-size:17px;color:var(--ink2);line-height:1.7}
.doc p+p{margin-top:14px}
.doc ul,.doc ol{padding-left:22px;margin:12px 0;display:grid;gap:8px}
.doc a{color:var(--green);font-weight:700;text-decoration:underline}
.doc strong{color:var(--ink)}

@media (max-width:900px){
  .feat,.feat:nth-child(even){grid-template-columns:1fr;gap:32px;padding:48px 0}
  .feat:nth-child(even) .shot{order:0}
  .shot{max-width:260px}
  .pb{grid-template-columns:1fr}
}
.doc hr{border:0;border-top:1px solid #1D1D1F26;margin:48px 0 0}

/* layar app di dalam bingkai HP: status bar 9:41 + latar app, biar screenshot nggak mepet */
.scr{position:relative;overflow:hidden;background:#F3F2EE;border-radius:46px;padding-top:44px}
.scr::before{content:"9:41";position:absolute;top:15px;left:30px;font:700 14px/1 Manrope,sans-serif;color:var(--ink)}
.scr::after{content:"";position:absolute;top:15px;right:26px;width:58px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 13'%3E%3Cg fill='%231D1D1F'%3E%3Crect x='0' y='8' width='3' height='5' rx='1'/%3E%3Crect x='5' y='5' width='3' height='8' rx='1'/%3E%3Crect x='10' y='2' width='3' height='11' rx='1'/%3E%3Cpath d='M23 4.5a9 9 0 0 1 12 0l-1.6 1.7a6.6 6.6 0 0 0-8.8 0zM25.6 7.4a5.3 5.3 0 0 1 6.8 0L29 11z'/%3E%3Crect x='39.5' y='1.5' width='16' height='10' rx='3' fill='none' stroke='%231D1D1F' stroke-width='1.2'/%3E%3Crect x='41.5' y='3.5' width='12' height='6' rx='1.5'/%3E%3Crect x='56.5' y='5' width='1.5' height='3' rx='.7'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
.scr img{display:block;width:100%;height:auto}
.shot .scr{border-radius:34px;padding-top:34px}.shot .scr::before{top:11px;left:22px;font-size:11px}.shot .scr::after{top:11px;right:18px;transform:scale(.8);transform-origin:right top}
.card.big .mini .scr{border-radius:34px;padding-top:34px}.card.big .mini .scr::before{top:11px;left:22px;font-size:11px}.card.big .mini .scr::after{top:11px;right:18px;transform:scale(.8);transform-origin:right top}

/* hero desktop: koordinat dari desain pen (frame Hero dlqkv, 1440x860, konten x=120) */
.glow,.mshadow{display:none}
@media (min-width:901px){
  .hero{min-height:860px}
  .hero-grid{display:block;position:relative;height:766px;padding:0}
  .hero-grid>div:first-child{position:relative;z-index:2;max-width:620px;padding-top:116px}
  .stage{position:absolute;left:0;top:-94px;width:100%;height:860px;pointer-events:none}
  .glow{display:block;position:absolute;left:640px;top:60px;width:760px;height:760px;border-radius:50%;background:#FFFFFF59}
  .phone{left:740px;top:130px;width:360px;transform:rotate(5deg);transform-origin:0 0}
  .chip{left:640px;top:470px;transform:rotate(4deg);transform-origin:0 0}
  .mshadow{display:block;position:absolute;left:990px;top:806px;width:250px;height:30px;border-radius:50%;background:#5E44004D;filter:blur(8px)}
  .mascot{right:auto;left:956px;top:456px;bottom:auto;width:310px}
}
@media (min-width:901px) and (max-width:1300px){
  .stage{left:auto;right:0;width:1290px;transform:scale(.8);transform-origin:right top}
}

/* ---------- gerak: animasi, transisi, microinteraction ---------- */
:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1)}
html{scroll-behavior:smooth}
@keyframes up{from{opacity:0;translate:0 24px}}
@keyframes pop{from{opacity:0;scale:.85}}
@keyframes rise{from{opacity:0;translate:40px 60px}}
@keyframes float{50%{translate:0 -12px}}
@keyframes breathe{50%{scale:1.06;opacity:.8}}
@keyframes wiggle{25%{rotate:-6deg}75%{rotate:6deg}}

/* hero masuk bertahap */
.hero-grid>div:first-child>*{animation:up .8s var(--ease) both}
.hero-grid>div:first-child>:nth-child(2){animation-delay:.08s}
.hero-grid>div:first-child>:nth-child(3){animation-delay:.16s}
.hero-grid>div:first-child>:nth-child(4){animation-delay:.24s}
.phone{animation:rise 1s var(--ease) .2s both}
.chip{animation:pop .6s var(--spring) .75s both}
.mascot{animation:pop .7s var(--spring) .55s both,float 4s ease-in-out 1.4s infinite}
.mshadow{animation:breathe 4s ease-in-out 1.4s infinite}
.glow{animation:breathe 7s ease-in-out infinite}
.pill::before{animation:breathe 1.8s ease-in-out infinite}

/* muncul saat scroll (kelas dari site.js) */
.rv{opacity:0;translate:0 32px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.rv.in{opacity:1;translate:0 0}

/* tombol & link */
.btn{transition:translate .2s var(--ease),box-shadow .2s,background-color .2s}
.btn:hover{translate:0 -3px;transform:none;box-shadow:0 18px 34px #2F6B4F66}
.btn:active{translate:0 0;scale:.97}
.btn svg{transition:translate .2s var(--ease)}
.btn:hover svg{translate:3px 0}
.final .btn:hover{box-shadow:0 14px 28px #0003}
.links a:not(.dark){background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size .25s var(--ease),color .2s}
.links a:not(.dark):hover{background-size:100% 2px;text-decoration:none}
.links .dark{transition:background-color .2s,translate .2s var(--ease)}
.links .dark:hover{background:var(--green);translate:0 -2px}
.brand img{transition:rotate .4s var(--spring)}
.brand:hover img{rotate:-10deg}
.more{transition:color .2s}.more:hover{color:var(--ink)}
.cols a{transition:color .2s}.cols a:hover{color:var(--green)}

/* kartu & screenshot */
.card{transition:translate .35s var(--ease),box-shadow .35s}
.card:hover{translate:0 -6px;box-shadow:0 24px 50px #1D1D1F1A}
.card.side img{transition:rotate .5s var(--spring),scale .5s var(--spring)}
.card.side:hover img{rotate:-6deg;scale:1.06}
.card.big .mini{transition:translate .5s var(--ease)}
.card.big:hover .mini{translate:0 -24px}
.shot{transition:rotate .5s var(--ease),translate .5s var(--ease)}
.feat:hover .shot{rotate:-2deg;translate:0 -6px}
.feat:nth-child(even):hover .shot{rotate:2deg}
.shot.art img{transition:scale .5s var(--spring)}
.feat:hover .shot.art img{scale:1.06}
.ticks li{transition:background-color .2s,translate .2s var(--ease)}
.ticks li:hover{background:var(--yellow);translate:0 -2px}
.pb div{transition:translate .3s var(--ease)}
.pb div:hover{translate:0 -3px}

/* langkah 01–03 */
.steps .n{transition:color .4s,translate .4s var(--ease)}
.steps li:hover .n{color:var(--green);translate:4px 0}

/* FAQ */
.faq summary h2{transition:color .2s}
.faq summary:hover h2{color:var(--green)}
.faq summary:hover::after{scale:1.1}
.faq summary::after{transition:transform .3s var(--spring),scale .2s}
.faq details[open] p{animation:up .4s var(--ease) both}

/* CTA akhir: maskot melambung */
.final img{animation:float 3.5s ease-in-out infinite}
.final:hover img{animation-duration:1.6s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;translate:none}
}
/* Second store button */
.btn.alt{background:var(--ink);box-shadow:0 12px 28px #0000002e}
.btn.alt:hover{box-shadow:0 18px 34px #00000040}
.final .btn.alt{background:#fff;color:var(--ink);box-shadow:none}
.final .btn.alt:hover{box-shadow:0 14px 28px #0003}