*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030712;color:#f8f8ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.shell{width:min(1180px,calc(100% - 40px));margin:auto}a{color:inherit}.hero-banner{min-height:760px;position:relative;overflow:hidden;border-bottom:1px solid #22315b}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 76% 28%,#6e23b84d,transparent 28%),radial-gradient(circle at 90% 50%,#0068ff32,transparent 30%),linear-gradient(90deg,#030713 0%,#071023 48%,#0b0922 100%)}.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030712 0 34%,transparent 62%),linear-gradient(0deg,#030712 0%,transparent 35%)}.hero-inner{min-height:760px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;position:relative}.hero-copy{z-index:3;padding:58px 0}.logo{width:145px;display:block;margin-bottom:24px}.badge{display:inline-block;border:1px solid #7f5cf6;background:#26174f99;color:#d7caff;border-radius:7px;padding:6px 10px;font-size:10px;font-weight:800;letter-spacing:1.5px}.hero-copy h1{font-size:clamp(48px,5.2vw,76px);line-height:.98;letter-spacing:-3px;margin:18px 0 20px}.hero-copy h1 span,.section-title span,.showcopy h2 span,.pricing-inner h2 span{background:linear-gradient(90deg,#8465ff,#dc4cff,#56b9ff);-webkit-background-clip:text;color:transparent}.hero-copy>p{max-width:500px;color:#c2c6d6;font-size:17px;line-height:1.6}.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-chips b{font-size:11px;border:1px solid #6d5acb66;background:#100d26cc;padding:8px 11px;border-radius:8px}.hero-person{position:absolute;right:-80px;top:0;width:70%;height:100%;overflow:hidden}.hero-person:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030712 0%,transparent 25%),linear-gradient(0deg,#030712 0%,transparent 30%)}.hero-person img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.95) contrast(1.06)}.scribble{position:absolute;z-index:2;right:80px;top:100px;font:italic 22px/1.35 Georgia;color:white;transform:rotate(-5deg);text-align:center;text-shadow:0 2px 10px #000}.scribble i{display:block;font-size:55px;color:#d642ff;transform:rotate(15deg)}
.features-band,.niche-band,.reviews{padding:52px 0;background:linear-gradient(180deg,#050a18,#07101e 60%,#040817)}.section-title{text-align:center;margin-bottom:30px}.section-title h2{font-size:34px;line-height:1.05;margin:0 0 10px;letter-spacing:-1px}.section-title p{margin:0;color:#b5bbcb;font-size:14px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-grid article{min-height:220px;position:relative;overflow:hidden;border:1px solid #233252;border-radius:14px;background:#081120;padding:20px 47% 18px 18px}.feature-grid article:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07101f 28%,transparent 72%);pointer-events:none}.feature-grid article img{position:absolute;right:0;top:0;width:55%;height:100%;object-fit:cover}.feature-grid .copy,.feature-grid .icon{position:relative;z-index:2}.icon{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:#6c42e7;font-size:20px;margin-bottom:28px}.icon.blue{background:#2379da}.icon.green{background:#00a788}.icon.orange{background:#df861f}.icon.pink{background:#e23569}.icon.violet{background:#7554e8}.feature-grid h3{font-size:15px;margin:0 0 7px}.feature-grid p{font-size:11px;line-height:1.45;color:#c2c6d2;margin:0}.mini-features{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}.mini-features div{border:1px solid #172743;border-radius:12px;background:#07101e;text-align:center;padding:16px 8px}.mini-features i{display:block;font-style:normal;color:#8e68ff;font-size:26px;margin-bottom:7px}.mini-features b{font-size:11px;line-height:1.2}.showcase{position:relative;padding:58px 0;background:radial-gradient(circle at 3% 50%,#7726ff55,transparent 30%),radial-gradient(circle at 97% 40%,#006cff45,transparent 28%),#050a17;border-block:1px solid #18325e}.showcase-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}.screen{height:400px;border:10px solid #0e1730;border-radius:28px;overflow:hidden;box-shadow:0 0 0 2px #7138e6,0 20px 80px #5224cc44}.screen img{width:100%;height:100%;object-fit:cover}.showcopy p{font-size:11px;color:#c4a9ff;font-weight:900;letter-spacing:2px}.showcopy h2{font-size:50px;line-height:1.08;margin:10px 0 24px}.showcopy ul{padding:0;margin:0;list-style:none}.showcopy li{margin:16px 0;color:#c5cada}.showcopy li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#7045ff;margin-right:12px;color:#fff;font-weight:900}.niche-band{padding-top:60px}.niches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.niches div{height:185px;position:relative;overflow:hidden;border-radius:10px;border:1px solid #26365a}.niches img{width:100%;height:100%;object-fit:cover}.niches div:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#240071)}.niches b{position:absolute;z-index:2;bottom:0;left:0;right:0;text-align:center;padding:10px 4px;font-size:11px}.compare{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;max-width:900px;margin:35px auto 0}.compare-card{border:1px solid #3d465c;border-radius:16px;padding:24px 32px;background:#171b25;box-shadow:0 20px 50px #0008}.compare-card.good{background:linear-gradient(135deg,#291273,#7a19db);border-color:#9d4cff}.compare-card h3{font-size:14px}.compare-card h3 small{color:#aeb5c5}.compare-card p{font-size:12px;margin:8px 0}.bad p{color:#d5d5da}.bad p::first-letter{color:#ff4d6d}.good p::first-letter{color:#48ff98}.vs{text-align:center;font-size:40px;font-style:italic;color:#6fc4ff;text-shadow:0 0 20px #4d48ff}.reviews{border-top:1px solid #15294c}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-grid article{display:flex;gap:14px;border:1px solid #33425f;border-radius:14px;background:#111827;padding:20px}.avatar{flex:0 0 55px;height:55px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6b38e8,#208cff);font-weight:900}.stars{color:#ffd21c;letter-spacing:2px}.review-grid p{font-size:12px;color:#d2d5df}.review-grid b,.review-grid small{display:block;font-size:11px}.review-grid small{color:#8992a8}.pricing-banner{min-height:520px;position:relative;overflow:hidden;background:#030712;border-top:1px solid #1d2b4e}.pricing-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#5410b65c,transparent 34%),linear-gradient(90deg,#040816,#080c1b,#040816)}.pricing-bg:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(45deg,#381b65 1px,transparent 1px),linear-gradient(-45deg,#0e5f91 1px,transparent 1px);background-size:70px 70px}.pricing-inner{position:relative;text-align:center;padding:58px 0 35px}.pricing-inner h2{font-size:38px;margin:0 0 6px}.pricing-inner>p{color:#c3c7d3;font-size:14px}.price-row{display:flex;align-items:center;justify-content:center;gap:36px;margin:30px auto 20px}.price-row small{display:block;font-size:10px;font-weight:900}.price-row strong{display:block;font-size:31px}.old strong{position:relative;color:#fff}.old strong:after,.old strong:before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:4px;background:#ff2258;transform:rotate(8deg)}.old strong:before{transform:rotate(-8deg)}.discount{color:#ff5ee7}.discount strong{font-size:44px}.new strong{font-size:40px;color:#ffb547}.cta{display:inline-flex;align-items:center;justify-content:center;min-width:420px;padding:17px 28px;border-radius:14px;text-decoration:none;font-weight:900;background:linear-gradient(90deg,#ff08b5,#9b35ff,#7748ff);box-shadow:0 0 0 2px #b67cff,0 0 35px #b900ff88}.cta b{font-size:26px;margin-left:15px}.login{font-size:11px!important}.login a{text-underline-offset:3px}.footer-logo{width:90px;margin:24px auto 3px;display:block}.tagline{color:#aab0c0}
@media(max-width:850px){.hero-banner,.hero-inner{min-height:720px}.hero-inner{display:block}.hero-copy{padding-top:55px;width:70%}.hero-person{right:-28%;width:85%}.hero-person:after{background:linear-gradient(90deg,#030712 0 18%,transparent 55%),linear-gradient(0deg,#030712 0%,transparent 35%)}.hero-copy h1{font-size:56px}.scribble{display:none}.feature-grid{grid-template-columns:1fr 1fr}.mini-features,.niches{grid-template-columns:repeat(3,1fr)}.showcase-inner{grid-template-columns:1fr;gap:35px}.showcopy h2{font-size:42px}.compare{grid-template-columns:1fr}.vs{padding:12px}.review-grid{grid-template-columns:1fr}.price-row{gap:18px}.price-row strong{font-size:24px}.new strong{font-size:30px}}
@media(max-width:560px){.shell{width:min(100% - 24px,1180px)}.hero-banner,.hero-inner{min-height:760px}.hero-copy{width:100%;position:relative;z-index:4;padding-top:38px}.hero-copy h1{font-size:48px}.hero-copy>p{font-size:14px;width:76%}.hero-person{width:100%;right:-34%;opacity:.72}.logo{width:115px}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:200px}.mini-features{grid-template-columns:repeat(2,1fr)}.niches{grid-template-columns:repeat(2,1fr)}.screen{height:300px}.showcopy h2{font-size:35px}.price-row{flex-direction:column;gap:12px}.cta{min-width:0;width:100%}.pricing-inner h2{font-size:31px}.pricing-banner{min-height:620px}}

/* PATCH: visual feature cards + review slider + mobile hero overlay */
.feature-grid article{padding:0;min-height:300px;display:flex;align-items:flex-end;isolation:isolate}
.feature-grid article img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.feature-grid article:after{z-index:-1;background:linear-gradient(180deg,rgba(3,7,18,.05) 18%,rgba(3,7,18,.45) 48%,rgba(3,7,18,.98) 100%)}
.feature-grid .copy{padding:20px 20px 22px;width:100%}.feature-grid .icon{position:absolute;left:18px;top:18px;margin:0;box-shadow:0 8px 24px #0008}
.feature-grid h3{font-size:18px}.feature-grid p{font-size:12px;max-width:92%;color:#f0f2fa;text-shadow:0 2px 8px #000}
.review-slider{overflow:hidden;padding:2px}.review-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.review-track::-webkit-scrollbar{display:none}.review-track article{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;display:flex;gap:14px;border:1px solid #33425f;border-radius:14px;background:#111827;padding:20px;min-height:170px}.review-track p{font-size:12px;color:#d2d5df;line-height:1.55}.review-track b{display:block;font-size:11px}.review-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}.review-dots i{width:7px;height:7px;border-radius:50%;background:#59637a}.review-dots i:first-child{background:#a24cff;box-shadow:0 0 10px #a24cff}
@media(max-width:850px){.review-track article{flex-basis:72%}}
@media(max-width:560px){
 .hero-banner,.hero-inner{min-height:760px}.hero-inner{display:block}.hero-copy{width:100%;position:relative;z-index:4;padding:38px 8px 34px}.hero-person{position:absolute;inset:0;width:100%;height:100%;right:auto;opacity:1;z-index:1}.hero-person img{width:100%;height:100%;object-fit:cover;object-position:58% center}.hero-person:after{background:linear-gradient(180deg,rgba(3,7,18,.50) 0%,rgba(3,7,18,.34) 35%,rgba(3,7,18,.62) 68%,#030712 100%),linear-gradient(90deg,rgba(3,7,18,.72) 0%,rgba(3,7,18,.18) 72%,rgba(3,7,18,.25) 100%)}
 .hero-copy h1{font-size:46px;text-shadow:0 3px 18px #000}.hero-copy>p{width:100%;max-width:360px;color:#fff;text-shadow:0 2px 10px #000;font-size:14px}.hero-chips{margin-top:20px}.hero-chips b{background:#090718d9}
 .feature-grid article{min-height:330px}.feature-grid .copy{padding:20px}.feature-grid h3{font-size:19px}.feature-grid p{font-size:13px;line-height:1.5}.review-track article{flex-basis:88%;min-height:190px}
}


/* PATCH 2026-10-09: mobile hero framing, compact hero gap, auto review state, promo countdown */
.discount-line{display:flex;align-items:center;justify-content:center;gap:14px}.promo-timer{display:inline-flex;align-items:center;justify-content:center;min-width:98px;padding:7px 10px;border:1px solid #ff69e8;border-radius:9px;background:#170c2d;color:#fff;font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px;box-shadow:0 0 18px #d900ff44}.review-dots i.active{background:#a24cff;box-shadow:0 0 10px #a24cff}.review-track{scroll-behavior:smooth}
@media(max-width:560px){
 .hero-banner,.hero-inner{min-height:620px;height:620px}.hero-copy{padding:26px 8px 20px}.logo{width:108px;margin-bottom:18px}.hero-copy h1{font-size:43px;line-height:1.01;margin:16px 0 16px}.hero-copy>p{font-size:13px;line-height:1.55;max-width:355px}.hero-chips{margin-top:16px}.hero-person img{object-position:22% center}.hero-person:after{background:linear-gradient(180deg,rgba(3,7,18,.38) 0%,rgba(3,7,18,.30) 36%,rgba(3,7,18,.58) 72%,#030712 100%),linear-gradient(90deg,rgba(3,7,18,.52) 0%,rgba(3,7,18,.10) 74%,rgba(3,7,18,.22) 100%)}
 .features-band{padding-top:34px}.discount-line{gap:10px}.promo-timer{min-width:92px;font-size:13px;padding:7px 8px}.price-row{gap:14px}
}
@media(max-width:390px){.hero-banner,.hero-inner{min-height:590px;height:590px}.hero-copy h1{font-size:39px}.hero-copy>p{font-size:12.5px}.hero-person img{object-position:20% center}}

/* PATCH 2026-10-09: inline registration form before payment integration */
.checkout-form{width:min(760px,100%);margin:22px auto 18px;padding:20px;border:1px solid #493378;border-radius:16px;background:linear-gradient(180deg,#0d1020ee,#090b17f5);box-shadow:0 18px 50px #0008;text-align:left}.checkout-form[hidden]{display:none}.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.checkout-grid label{display:grid;gap:7px;color:#f5f2ff;font-size:12px;font-weight:800}.checkout-grid input,.checkout-grid textarea{width:100%;border:1px solid #35415f;border-radius:10px;background:#070c18;color:#fff;padding:12px 13px;font:inherit;outline:none;resize:vertical}.checkout-grid input:focus,.checkout-grid textarea:focus{border-color:#8b55ff;box-shadow:0 0 0 3px #7a3cff22}.checkout-note{margin:15px 2px 0!important;color:#c8c4d6!important;font-size:12px!important;line-height:1.5;text-align:center}.checkout-error{min-height:18px;margin:9px 0 0!important;color:#ff526b!important;font-size:12px!important;font-weight:800;text-align:center}.cta{border:0;color:#fff;cursor:pointer;font:inherit}.cta:focus-visible{outline:3px solid #c985ff;outline-offset:4px}
@media(max-width:560px){.checkout-form{padding:15px;margin-top:18px}.checkout-grid{grid-template-columns:1fr}.checkout-note{font-size:11px!important}}

.payment-dialog{width:min(92vw,440px);border:1px solid #a855f755;border-radius:24px;padding:32px;color:#fff;background:linear-gradient(145deg,#101831,#211039);box-shadow:0 24px 100px #0009}.payment-dialog::backdrop{background:#020617dd;backdrop-filter:blur(6px)}.payment-dialog h2{font-size:26px;margin:12px 0}.payment-dialog p{color:#cbd5e1;line-height:1.7}.payment-dialog .dialog-label{font-size:11px;letter-spacing:.15em;color:#c4b5fd}.payment-dialog .cta{min-width:0;max-width:100%;width:100%;box-sizing:border-box;padding:13px 16px;font-size:14px;margin-top:14px;cursor:pointer}.payment-dialog .secondary-pay{background:#ffffff0a;border:1px solid #a78bfa66}.dialog-close{position:absolute;right:16px;top:12px;background:none;border:0;color:white;font-size:26px;cursor:pointer}

/* No.27: simple bonus copy below promo price */
.bonus-note{display:block;margin:8px auto 0;color:#c8c4d6;font-size:11px;font-weight:500;line-height:1.4;text-align:center}
@media(max-width:560px){.bonus-note{max-width:190px;font-size:10px;margin-top:6px}}

/* No.27: smaller, lower-aligned join button */
.pricing-inner>#join-pay-button{min-width:0;width:min(100%,360px);margin:18px auto 0;padding:14px 24px;font-size:15px}
.pricing-inner>#join-pay-button b{font-size:22px;margin-left:10px}

/* Inline QRIS replaces the promotion price/form after payment is requested. */
[hidden]{display:none!important}.qris-checkout{max-width:760px;margin:28px auto;padding:28px;border:1px solid #8150d7;border-radius:20px;background:#0c1022;text-align:left;color:#f8f8ff}.qris-checkout h3{text-align:center;font-size:26px;margin:0 0 14px}.qris-checkout [data-status]{text-align:center}.qris-checkout img{display:block;width:280px;max-width:100%;height:auto;margin:22px auto;background:#fff;padding:12px;border-radius:12px}.qris-checkout dl{margin:20px 0}.qris-checkout dt{color:#a7a9be;font-size:13px;margin-top:16px}.qris-checkout dd{margin:5px 0;overflow-wrap:anywhere;line-height:1.6}.qris-checkout [data-amount]{font-size:28px;font-weight:800;color:#ffca57}.qris-note{color:#ffdd82;font-size:13px}.qris-checkout details{margin:22px 0;padding:15px;background:#171c35;border-radius:12px;line-height:1.7}.qris-checkout summary{cursor:pointer;font-weight:700}.qris-checkout ol{padding-left:22px}.qris-checkout [data-message]{color:#ffc4c4;font-size:13px}.qris-checkout button{width:100%;padding:14px;border:1px solid #795ac3;border-radius:12px;background:#302050;color:#fff;cursor:pointer}.qris-checkout button:disabled{opacity:.6;cursor:wait}