:root{--ink:#0A0A0A;--white:#FFFFFF;--paper:#FAF6EC;--acid:#FFD400;--pink:#FF4FA3;--teal:#00C2CC;--yellow:var(--acid);--ease:cubic-bezier(.525,0,0,1);--bounce:cubic-bezier(.175,.885,.32,1.275)}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:var(--ink)}
.brand img{height:32px;display:block}
.brand b{font-family:'Dela Gothic One','Space Grotesk',sans-serif;font-weight:400;font-size:17px;letter-spacing:0;white-space:nowrap}
.brand .ver{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;white-space:nowrap;padding:3px 9px;border:1.5px solid var(--ink);border-radius:999px}
.navlinks{display:flex;align-items:center;gap:4px;padding-right:18px}
.navlinks a{display:inline-flex;align-items:center;padding:8px 16px;border:2px solid transparent;border-radius:999px;font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;transition:background-color .2s,border-color .2s}
.navlinks a:hover{background:var(--white);border-color:var(--ink)}
.navlinks a:active{background:var(--acid)}
.navlinks a.ev::after{content:'';width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink)}
.nav-cta,.nav-login{display:flex;align-items:center;gap:8px;padding:0 26px;border-left:2px solid var(--ink);font-weight:500;font-size:17px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.nav-login:hover{background:var(--white)}
.nav-cta{padding:0 34px;background:var(--acid);font-weight:700}
.nav-cta:hover{background:var(--ink);color:var(--acid)}
.nav-cta:active,.nav-login:active{background:var(--pink);color:var(--ink)}
.nav-cta .ar{display:inline-block;transition:transform .2s}
@media (hover:hover){.nav-cta:hover .ar{transform:translateX(4px)}}
@media (max-width:900px){.navlinks{display:none}}
footer{background:var(--ink);color:var(--paper);border-top:4px solid var(--ink);padding:44px 0 30px;text-align:center}
footer .fbrand{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;margin-bottom:20px}
footer .flinks{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
footer .flinks a:hover{opacity:1;text-decoration:underline}
.nav-auth{display:flex;align-self:stretch}
@media (max-width:620px){.nav-login{display:none}}

nav.top{
  position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:2px solid var(--ink);
  transition:transform .3s var(--ease);
}
.nav-in{display:flex;align-items:center;height:76px;padding-left:clamp(16px,3vw,32px)}
@media (max-width:620px){.nav-in{height:62px}.nav-cta{padding:0 20px}}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:72px;border:0;border-left:2px solid var(--ink);background:var(--paper);cursor:pointer;transition:background-color .2s}
.nav-burger:hover{background:var(--white)}
.nav-burger i{display:block;width:24px;height:2.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-menu{display:none;border-top:2px solid var(--ink)}
.nav-menu.open{display:block;animation:menu-in .25s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
.nav-menu a{display:flex;align-items:center;padding:18px clamp(16px,3vw,32px);border-bottom:2px solid var(--ink);font-weight:500;font-size:24px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;transition:background-color .15s,padding-left .2s var(--ease)}
.nav-menu a:last-child{border-bottom:0}
.nav-menu a:hover{background:var(--white);padding-left:calc(clamp(16px,3vw,32px) + 10px)}
.nav-menu a:active{background:var(--acid)}
.nav-menu a.ev::after{content:'';width:9px;height:9px;margin-left:9px;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink)}
.nm-login{display:none!important}
@media (max-width:900px){.nav-burger{display:flex}}
@media (min-width:901px){.nav-menu{display:none!important}}
@media (max-width:620px){.nm-login{display:flex!important}.nav-burger{width:62px}}
/* halaman info (fitur, review, bantuan, privasi): v1.5.0, lihat DESIGN.md */
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background-color:var(--white);background-image:linear-gradient(rgba(10,10,10,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.07) 1px,transparent 1px);background-size:28px 28px;color:var(--ink);font-family:'IBM Plex Mono',monospace;min-height:100vh;overflow-x:clip}
h1,h2,h3{font-family:'Space Grotesk',sans-serif}
a{color:inherit}
:root{--mo-rise:26px;--mo-enter:.6s}

.phead{padding:64px 0 60px;border-image:linear-gradient(var(--pc,var(--acid)) calc(100% - 3px),var(--ink) 0) fill 0//0 100vmax}
.phead .wrap{max-width:1100px}
.eyebrow{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.page-title,.phead h1{font-family:'Dela Gothic One','Space Grotesk',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(32px,5.2vw,68px);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px;max-width:18ch}
.o{color:var(--white);-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.hl{display:inline-block;padding:0 12px;background:var(--acid);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg);animation:hl-sway 5s ease-in-out infinite alternate}
@keyframes hl-sway{from{transform:rotate(-1deg)}to{transform:rotate(1.2deg) translateY(-2px)}}
.page-sub{font-size:15px;font-weight:500;line-height:1.75;max-width:60ch;opacity:.85}

.page{max-width:1100px;margin:0 auto;padding:56px clamp(16px,4vw,40px) 90px}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Dela Gothic One','Space Grotesk',sans-serif;font-weight:400;font-size:14px;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--white);background:var(--ink);padding:16px 26px;border:3px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--pink);transition:transform .14s var(--bounce),box-shadow .14s var(--bounce)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pink)}
.btn.line{background:var(--white);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.line:hover{box-shadow:7px 7px 0 var(--ink)}

/* kartu umum: garis 3px, sudut 14px, bayangan keras, naik pas hover */
.card-v{background:var(--white);border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);transition:transform .22s var(--bounce),box-shadow .22s var(--bounce)}
@media (hover:hover){.card-v:hover,.mo-on [data-reveal].is-done.card-v:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--ink)}}
.mo-on [data-reveal].is-done.card-v{transition:transform .22s var(--bounce),box-shadow .22s var(--bounce)}

.wtag{display:inline-flex;align-items:center;padding:10px;background-color:var(--white);background-image:repeating-linear-gradient(90deg,rgba(10,10,10,.28) 0 1px,transparent 1px 12px),repeating-linear-gradient(0deg,rgba(10,10,10,.28) 0 1px,transparent 1px 12px);border:2px solid var(--ink);font-family:'Space Grotesk',sans-serif;font-size:15px;line-height:1.35;white-space:nowrap}
.wtag i{font-style:normal;font-weight:700;background:var(--ink);color:var(--teal);padding:1px 8px}
.wtag b{font-weight:500;background:var(--c,var(--teal));padding:1px 12px}
.wtag u{text-decoration:none;font-weight:700;background:var(--ink);color:var(--acid);padding:1px 8px}

/* penutup kuning, sama kayak finale landing */
.cta-v{margin-top:64px;padding:56px 24px;text-align:center;background:var(--acid);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink)}
.cta-v h2{font-family:'Dela Gothic One','Space Grotesk',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,3.6vw,44px);line-height:1.1;margin-bottom:12px}
.cta-v p{font-size:14px;font-weight:500;opacity:.85;margin-bottom:26px}

@media (min-width:1440px){
  .brand{gap:12.5px}.brand img{height:40px}.brand b{font-size:21.5px}.brand .ver{font-size:14px;padding:4px 11.5px}
  .navlinks{gap:5px;padding-right:22.5px}.navlinks a{padding:10px 20px;font-size:21.5px}
  .nav-cta,.nav-login{gap:10px;padding:0 32.5px;font-size:21.5px}.nav-cta{padding:0 42.5px}.nav-in{height:95px}
  footer{padding:55px 0 37.5px}footer .fbrand{font-size:21.5px;margin-bottom:25px}footer .flinks{gap:12.5px 27.5px;font-size:17px}
  .page,.phead .wrap{max-width:1375px}.page-sub{font-size:18px}.eyebrow{font-size:16px}
}
@media (max-width:620px){.phead{padding:44px 0 40px}.page{padding-top:40px}.cta-v{padding:40px 18px}}
@media (prefers-reduced-motion:reduce){.hl{animation:none}.card-v,.btn{transition:none}}

/* pita isi ala gumroad/pricing: satu poin per pita, rata tengah */
.phead{text-align:center}
.phead .page-title,.phead h1{margin-left:auto;margin-right:auto}
.phead .page-sub{margin:0 auto}
.phead .acts{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.band{padding:76px 0;text-align:center;border-image:linear-gradient(var(--ink) 0 3px,var(--bc,var(--white)) 0) fill 0//0 100vmax}
.band .wrap{max-width:880px}
.band .wtag{margin-bottom:24px}
.band h2{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(34px,5vw,64px);letter-spacing:-.05em;line-height:1}
.band p{font-size:16px;font-weight:500;line-height:1.75;max-width:56ch;margin:20px auto 0}
.band.fin h2{font-family:'Dela Gothic One','Space Grotesk',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(28px,4.2vw,54px);line-height:1.1}
.band.fin .btn{margin-top:30px}
@media (max-width:620px){.band{padding:52px 0}}
.phead .updated{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
nav.top,.nav-menu{font-family:'Space Grotesk',sans-serif}