/* Wibutime: halaman resmi (landing). Gelap, palet Meadow, huruf Plus Jakarta Sans + Manrope (ditanam sendiri). */
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/plus-jakarta-sans.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
/* dua sifat yang dianimasikan lewat transisi/animasi: radius lubang preloader dan sudut cahaya di bingkai CTA */
@property --pr{syntax:'<length>';inherits:false;initial-value:0px}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#0B0A0D; --surface:#17151D; --line:rgba(255,255,255,.085);
  --text:#F5F3F0; --cream:#F6F4EE; --sub:rgba(246,244,238,.76); --dim:#A9A6B1;
  --m2:#6F9435; --m3:#A7B92A; --m4:#EDD330; --ink:#10160B;
  --grad:linear-gradient(90deg,#6F9435 0%,#A7B92A 55%,#EDD330 100%);
  --grad-text:linear-gradient(90deg,#B7D13C 0%,#D6E03A 48%,#F6DC33 100%);
  --maxw:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{background:var(--bg);color:var(--text);font:500 17px/1.65 'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal;background:var(--grad-text);background-size:170% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s ease-in-out infinite alternate}
:focus-visible{outline:3px solid var(--m4);outline-offset:3px;border-radius:10px}
.wrap{width:min(var(--maxw),100% - 48px);margin-inline:auto}
.skip{position:fixed;left:16px;top:-80px;z-index:300;padding:12px 18px;border-radius:12px;background:var(--m4);color:var(--ink);font-weight:800;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* kata per kata (judul): dibungkus oleh JS; tanpa JS judul tetap teks biasa */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .17em;margin:-.08em -.03em -.17em}
.wi{display:inline-block}

/* ---------- perlindungan ringan: teks dan gambar tidak bisa diseleksi, disalin, atau diseret (kecuali email kontak), tidak bisa dicetak ---------- */
html{-webkit-touch-callout:none}
body{-webkit-user-select:none;user-select:none}
img,svg,a{-webkit-user-drag:none;user-drag:none}
.ok-copy,.ok-copy *,input,textarea{-webkit-user-select:text;user-select:text}
@media print{html{display:none!important}}
/* penutup saat Developer Tools terdeteksi terbuka (site.js bagian 14) */
#devwarn{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;text-align:center;background:var(--bg);color:var(--cream);font:800 clamp(1.15rem,2.6vw,1.7rem)/1.4 'Plus Jakarta Sans',system-ui,sans-serif}
#devwarn[hidden]{display:none}
#devwarn span{display:block;margin-top:10px;color:var(--dim);font:600 15px/1.5 'Manrope',system-ui,sans-serif}
html.devopen{overflow:hidden}
html.devopen body>*:not(#devwarn){visibility:hidden!important}

/* ---------- tombol & chip ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--grad);color:var(--ink);font:800 15px/1 'Plus Jakarta Sans',sans-serif;text-decoration:none;box-shadow:0 10px 30px rgba(167,185,42,.28);translate:var(--tx,0px) var(--ty,0px);transition:transform .2s,box-shadow .2s,filter .2s,translate .25s var(--ease)}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out 2.4s infinite;pointer-events:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(167,185,42,.42);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.97)}
.btn svg{width:18px;height:18px}
.btn-sm{padding:10px 18px;font-size:14px}
.chip{display:inline-block;padding:9px 18px;border-radius:999px;background:var(--grad);color:var(--ink);font:800 12.5px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{display:inline-block;padding:7px 15px;border-radius:999px;border:1px solid rgba(167,185,42,.38);background:rgba(167,185,42,.09);color:#CBDB62;font:800 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase}
/* lencana Google Play dipakai apa adanya; hanya digeser sedikit dan diberi cincin denyut DI BELAKANGnya */
.play{position:relative;isolation:isolate;display:inline-block;border-radius:12px;translate:var(--tx,0px) var(--ty,0px);transition:transform .2s,filter .2s,translate .25s var(--ease)}
.play::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;animation:ring 3.2s ease-out infinite}
.play:hover{transform:translateY(-2px);filter:brightness(1.08)}
.play:active{transform:translateY(0) scale(.98)}
.play img{height:68px;width:auto}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:200;display:none}
html.pre-on{overflow:hidden}
html.pre-on #pre{display:block}
.pre-bg,.pre-edge{position:absolute;inset:0}
.pre-bg{display:grid;place-items:center;overflow:hidden;background:var(--bg);-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--pr) - 30px),#000 var(--pr));mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--pr) - 30px),#000 var(--pr))}
.pre-edge{pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,transparent calc(var(--pr) - 10px),rgba(246,220,51,.95) calc(var(--pr) - 3px),rgba(167,185,42,0) calc(var(--pr) + 16px))}
#pre.is-out .pre-bg{--pr:78vmax;transition:--pr 1s cubic-bezier(.55,0,.1,1)}
/* peramban tanpa @property: irisnya tidak bisa dianimasikan, jadi lapisan memudar saja */
#pre.no-iris.is-out .pre-bg{opacity:0;transition:opacity .7s ease .1s}
#pre.no-iris.is-out .pre-edge{display:none}
#pre.is-out .pre-edge{--pr:78vmax;opacity:1;transition:--pr 1s cubic-bezier(.55,0,.1,1),opacity .2s linear .1s;animation:edgeOut .35s linear .7s forwards}
.pre-glow{position:absolute;left:50%;top:50%;width:min(92vmin,760px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(111,148,53,.3),rgba(111,148,53,.17) 22%,rgba(111,148,53,.075) 48%,rgba(111,148,53,.02) 76%,rgba(111,148,53,0));animation:breathe 3s ease-in-out infinite}
/* sinar proyektor yang berputar pelan di belakang logo */
.pre-rays{position:absolute;left:50%;top:50%;width:100vmax;height:100vmax;margin:-50vmax 0 0 -50vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(190,214,60,.07) 0deg 4deg,rgba(190,214,60,0) 4deg 18deg);-webkit-mask-image:radial-gradient(circle closest-side,#000 5%,rgba(0,0,0,0) 66%);mask-image:radial-gradient(circle closest-side,#000 5%,rgba(0,0,0,0) 66%);animation:spin 46s linear infinite}
/* bintang preloader: tiap bintang berkelip sendiri (redup, kilat sebentar, redup lagi) dengan irama dan waktunya masing-masing */
.pstar{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;background:#FFFBE0;box-shadow:0 0 calc(var(--s)*3) rgba(255,251,224,.5);opacity:0;animation:pflash var(--d) ease-in-out var(--dl) infinite}
.pstar.y{background:#F6DC33;box-shadow:0 0 calc(var(--s)*3) rgba(237,211,48,.5)}
/* bintang jatuh */
.pshoot{position:absolute;left:var(--x);top:var(--y);width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,251,224,0),rgba(255,251,224,.95));rotate:28deg;opacity:0;animation:shoot var(--dr,3.4s) linear var(--dl,0s) infinite}
.pre-core{position:relative;display:grid;justify-items:center;gap:22px;transition:scale .35s var(--ease)}
#pre.is-done .pre-core{scale:1.07}
#pre.is-out .pre-core{scale:1.7;opacity:0;transition:scale .55s cubic-bezier(.5,0,.9,.5),opacity .4s ease-in .05s}
.pre-mark{position:relative;width:132px;height:132px}
.pre-ring{position:absolute;inset:0;width:100%;height:100%}
.pr-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2.4}
.pr-arc{fill:none;stroke:url(#pg);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .3s ease-out}
.pre-w{position:absolute;left:22%;top:22%;width:56%;height:56%;overflow:visible}
.pw-fill{fill:url(#pg2);opacity:0;animation:pwFill .45s ease .55s forwards}
.pw-line{fill:none;stroke:url(#pg2);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pwDraw .7s cubic-bezier(.6,0,.25,1) .05s forwards,pwOut .3s ease .75s forwards}
.pre-orbit{position:absolute;inset:-7px;animation:spin 2.4s linear infinite}
.pre-orbit b{position:absolute;inset:0;rotate:calc(var(--a)*1deg)}
.pre-orbit b::before{content:"";position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--m4);box-shadow:0 0 14px 2px rgba(237,211,48,.7)}
.pre-orbit b:nth-child(2)::before{width:5px;height:5px;margin-left:-2.5px;background:var(--cream);box-shadow:0 0 12px rgba(246,244,238,.6)}
.pre-word{display:flex;gap:.42em;font:800 17px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.18em;color:var(--cream)}
.pre-word span{display:inline-block;opacity:0;translate:0 12px;animation:preIn .55s var(--ease) forwards;animation-delay:calc(.25s + var(--k)*45ms)}

/* ---------- langit: bintang berkelap-kelip, kilau, dan bintang jatuh (kanvas, site.js) ---------- */
.sky{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- cahaya yang mengikuti kursor, penunjuk gulir, lapisan percikan ---------- */
.cursor{position:fixed;left:0;top:0;z-index:-1;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle closest-side,rgba(167,185,42,.07),rgba(111,148,53,.03) 55%,rgba(111,148,53,0));transition:opacity .6s}
.cursor.on{opacity:1}
.fx{position:fixed;inset:0;z-index:150;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block;will-change:transform,opacity}
.fx svg{width:100%;height:100%;display:block}

/* ---------- isyarat gulir di hero + tombol kembali ke atas ---------- */
.scue{position:fixed;left:0;right:0;bottom:22px;z-index:40;width:max-content;margin-inline:auto;display:none;flex-direction:column;align-items:center;gap:9px;color:var(--dim);font:800 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;text-decoration:none;transition:opacity .4s,translate .4s var(--ease),color .2s;animation:up .9s var(--ease) 1.8s backwards}
@media (min-width:901px) and (min-height:640px){.scue{display:flex}}
html.hold .scue{animation:none!important;opacity:0}
.scue.is-away{opacity:0;translate:0 14px;pointer-events:none}
.scue-mouse{position:relative;width:24px;height:38px;border:2px solid rgba(246,244,238,.5);border-radius:14px;transition:border-color .2s}
.scue-mouse i{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--m4);animation:wheel 1.9s ease-in-out infinite}
.scue:hover{color:var(--cream)}
.scue:hover .scue-mouse{border-color:var(--m4)}
.totop{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:60;width:54px;height:54px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--cream);background:rgba(20,24,14,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 32px rgba(0,0,0,.45);cursor:pointer;opacity:0;visibility:hidden;scale:.5;translate:0 22px;transition:opacity .35s,scale .5s cubic-bezier(.3,1.6,.5,1),translate .5s var(--ease),visibility 0s .5s,background .2s,box-shadow .2s}
.totop.show{opacity:1;visibility:visible;scale:1;translate:0 0;transition-delay:0s}
.totop:hover{background:rgba(36,48,20,.9);box-shadow:0 14px 38px rgba(167,185,42,.38)}
.totop:active{scale:.92}
.tt-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tt-track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:2.6}
.tt-arc{fill:none;stroke:url(#tg);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.tt-arrow{position:relative;width:22px;height:22px}
.totop:hover .tt-arrow{animation:arrowUp .9s ease-in-out infinite}
.totop.go .tt-arrow{animation:launch .8s cubic-bezier(.5,0,.8,.4)}
.totop.go .tt-ring{animation:ringSpin .8s var(--ease)}

/* ---------- navigasi ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s,translate .9s var(--ease) .25s,opacity .7s ease .25s}
html.hold .nav{translate:0 -100%;opacity:0}
.nav.is-stuck{background:rgba(11,10,13,.74);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-color:var(--line)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);transform:scaleX(var(--sp,0));transform-origin:0 50%;opacity:0;transition:opacity .3s}
.nav.is-stuck::after{opacity:1}
.nav .wrap{display:flex;align-items:center;gap:14px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font:800 19px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.09em}
.brand-w{width:32px;height:32px;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-w{transform:rotate(-12deg) scale(1.12)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:9px 14px;border-radius:999px;color:var(--dim);font-weight:700;font-size:15px;text-decoration:none;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.07)}

/* ---------- komponen telepon (semua ukuran mengikuti lebar .ph lewat satuan cqw) ---------- */
.ph{position:relative;container-type:inline-size;width:100%;aspect-ratio:100/216.3}
.ph-body{position:absolute;inset:0;border-radius:12.5cqw;background:linear-gradient(160deg,#3a3d42 0%,#17191c 24%,#0c0d0f 62%,#202226 100%);box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.12),0 9cqw 12cqw rgba(0,0,0,.55),0 0 18cqw rgba(167,185,42,.09)}
.ph-body::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .8cqw #08080a,inset 0 0 0 1cqw rgba(255,255,255,.07)}
.ph-screen{position:absolute;inset:2.1cqw;border-radius:10.4cqw;overflow:hidden;background:var(--bg)}
.ph-screen img{width:100%;height:100%;object-fit:cover}
.ph-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.085),rgba(255,255,255,0) 34%);pointer-events:none}
/* kilap yang mengikuti penunjuk saat telepon dimiringkan */
.ph-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--px,50%) var(--py,0%),rgba(255,255,255,.3),transparent 52%)}
.ph.is-hot .ph-screen::before{opacity:1}
.ph-btn{position:absolute;right:-.7cqw;width:.9cqw;border-radius:.5cqw;background:#1c1e22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ph-btn.b1{top:20%;height:7.5%}
.ph-btn.b2{top:31%;height:4.5%}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(72px + clamp(28px,5vw,64px)) 0 clamp(56px,8vw,104px);overflow:clip}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.glow{position:absolute;aspect-ratio:1;border-radius:50%}
.g1{left:-14%;top:-30%;width:78%;background:radial-gradient(circle closest-side,rgba(111,148,53,.12),rgba(111,148,53,0));animation:glowA 9s ease-in-out infinite alternate}
.g2{right:-12%;bottom:-18%;width:62%;background:radial-gradient(circle closest-side,rgba(237,211,48,.07),rgba(237,211,48,0));animation:glowB 11s ease-in-out infinite alternate}
/* sorot lampu: kerucut cahaya yang dipanggang jadi gambar (sumber/beam.py), jadi saat berjalan tidak ada blur atau blend yang mahal */
.beam{position:absolute;left:58%;top:-8%;width:112%;height:104%;translate:-50% 0;transform-origin:50% 0;background:url('../img/beam-a.webp') 0 0/100% 100% no-repeat;animation:pulse 7s ease-in-out infinite,sway 9s ease-in-out infinite alternate}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(24px,4vw,64px)}
.hero h1{font-size:clamp(2.7rem,6.2vw,5.1rem);letter-spacing:-.03em;margin:22px 0 20px}
.lead{font-size:clamp(1.05rem,1.55vw,1.28rem);color:var(--sub);max-width:31em}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:34px 0 26px}
.link-more{font-weight:800;font-size:16px;color:var(--cream);text-decoration:none;padding:10px 4px;border-bottom:2px solid rgba(167,185,42,.55);transition:border-color .2s,color .2s}
.link-more span{display:inline-block;animation:nudge 1.8s ease-in-out infinite}
.link-more:hover{color:var(--m4);border-color:var(--m4)}
.facts{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;color:var(--dim);font-weight:700;font-size:14.5px}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts svg{width:18px;height:18px;color:var(--m3)}
/* masuk bergantian (setelah preloader, atau langsung bila preloader dilewati) */
.hero-copy>*{animation:up .9s var(--ease) both}
.hero-copy>:nth-child(1){animation-delay:.1s}
.hero-copy>:nth-child(2){animation:none}
.hero-copy>:nth-child(3){animation-delay:.62s}
.hero-copy>:nth-child(4){animation-delay:.78s}
.hero-copy>:nth-child(5){animation-delay:.94s}
.hero h1 .wi{animation:wordUp 1s var(--ease) both;animation-delay:calc(.2s + var(--k)*85ms)}
/* ditahan selagi preloader tampil; dilepas saat irisan terbuka */
html.hold .hero-copy>*,html.hold .hv-layer,html.hold .hv-chip,html.hold .hv>.sp,html.hold .hero h1 .wi{animation:none!important;opacity:0}

.hv{position:relative;container-type:inline-size;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:640/740;--mx:0;--my:0;--sy:0}
.hv-halo{position:absolute;left:8cqw;top:20cqw;width:86cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle closest-side,rgba(246,220,51,.4),rgba(200,205,52,.2) 48%,rgba(150,170,45,.06) 78%,rgba(150,170,45,0));animation:pulse 5.5s ease-in-out infinite}
.hv-layer{position:absolute;perspective:900px;transform:translate3d(calc(var(--mx)*var(--d,0)*1px),calc((var(--my)*var(--d,0) + var(--sy)*var(--k,0))*1px),0) rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:rise 1s var(--ease) both;animation-delay:var(--delay,0s)}
.hv-layer .ph{transform:rotateX(calc(var(--my)*-5deg)) rotateY(calc(var(--mx)*7deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1)}
.l-front:hover .ph,.l-left:hover .ph,.l-right:hover .ph{scale:1.035}
.l-left:hover,.l-right:hover{z-index:4}
.l-front{left:28cqw;top:5cqw;width:44cqw;z-index:3}
.l-left{left:-1cqw;top:27cqw;width:32cqw;z-index:1}
.l-right{left:69cqw;top:27cqw;width:32cqw;z-index:2}
.l-wibi{left:-9cqw;top:56cqw;width:62cqw;z-index:5;pointer-events:none;animation:wibiIn 1.3s cubic-bezier(.3,1.3,.5,1) both;animation-delay:var(--delay,0s)}
/* Wibi sebaris: hanya bagian yang tergambar yang bisa diketuk, area kosong meneruskan sentuhan ke telepon di belakangnya */
.wb{position:relative;pointer-events:none;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 2.2cqw 3.2cqw rgba(0,0,0,.55))}
.wb-svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 94%}
.wb-svg>*{pointer-events:auto;cursor:pointer}
.wb-eyes{transform-box:fill-box;transform-origin:50% 52%;animation:wbBlink 5.6s ease-in-out infinite}
.wb.happy .wb-eyes{animation:none;transform:scaleY(.16)}
.wb-ahoge{transform-origin:258px 86px;animation:wbAhoge 5s ease-in-out infinite}
.wb-tail{transform-origin:140px 170px;animation:wbTail 4.8s ease-in-out infinite}
g[transform^="translate(512"]>.wb-tail{animation-delay:-1.3s}
.wb-arm,.wb-wave{transform-origin:298px 358px;animation:wbWave 4.4s ease-in-out infinite}
.wb-say{position:absolute;left:54%;top:-9%;z-index:7;width:max-content;max-width:44cqw;padding:1.9cqw 2.6cqw;border-radius:3cqw 3cqw 3cqw .9cqw;background:var(--cream);color:#1a2112;font:700 max(11.5px,2.7cqw)/1.35 'Manrope',sans-serif;box-shadow:0 2cqw 6cqw rgba(0,0,0,.5);opacity:0;scale:.6;transform-origin:0 100%;transition:opacity .25s,scale .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.wb-say.show{opacity:1;scale:1}
.wb-say:empty{display:none}
.hv-chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:1.1cqw;padding:1.5cqw 2.8cqw 1.5cqw 2.2cqw;border-radius:99px;font:800 2.9cqw/1 'Plus Jakarta Sans',sans-serif;color:var(--cream);white-space:nowrap;pointer-events:none;background:rgba(20,24,14,.66);border:1px solid rgba(167,185,42,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.4);transform:translate3d(calc(var(--mx)*var(--d,0)*1px),calc(var(--my)*var(--d,0)*1px),0);transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:chipIn .8s cubic-bezier(.2,.9,.3,1.25) var(--delay,0s) both,floaty var(--fd,5.4s) ease-in-out calc(var(--delay,0s) + .8s) infinite}
.hv-chip svg{width:3.6cqw;height:3.6cqw;flex:none;color:var(--m3)}
.c1{left:1cqw;top:12cqw}
.c2{right:-1cqw;top:17cqw;--fd:6.3s}
.c3{right:3cqw;top:103cqw;--fd:5.8s}
.sp{position:absolute;fill:var(--m4);animation:twinkle var(--tw,3.6s) ease-in-out infinite;overflow:visible}
/* bintang di hero: berkilau, berputar, dan melayang naik turun */
.hero .sp{animation:twinkle var(--tw,3.6s) ease-in-out infinite,spfloat var(--fl,7s) ease-in-out infinite alternate}
.s1{left:83cqw;top:7cqw;width:7cqw}
.s2{left:93cqw;top:20cqw;width:4cqw;fill:var(--cream);--tw:2.7s;animation-delay:-1.2s}
.s3{left:50cqw;top:2cqw;width:3.4cqw;fill:var(--cream);--tw:3.2s;animation-delay:-2.2s}

/* ---------- pita berjalan ---------- */
.ribbon-wrap{position:relative;z-index:2;overflow-x:clip;padding:22px 0}
.ribbon{position:relative;overflow:hidden;margin-inline:-4%;width:108%;transform:rotate(-1.3deg);background:var(--grad);color:var(--ink);padding:17px 0;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.ribbon-track{display:flex;gap:34px;width:max-content;white-space:nowrap;font:800 15px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;animation:slide 44s linear infinite}
.ribbon-track i{width:8px;height:8px;margin-block:auto;border-radius:50%;background:var(--ink);opacity:.5}

/* ---------- bagian umum ---------- */
.sec{position:relative;padding:clamp(64px,8.5vw,116px) 0}
.sec-head{max-width:740px;margin:0 auto clamp(40px,6vw,64px);text-align:center}
.sec-head h2{font-size:clamp(2rem,4.5vw,3.5rem);margin:18px 0 14px}
.sec-head p{color:var(--sub);font-size:clamp(1rem,1.4vw,1.15rem)}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{position:relative;isolation:isolate;padding:28px 24px 26px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{border-color:rgba(167,185,42,.5);box-shadow:0 22px 54px rgba(0,0,0,.5),0 0 0 1px rgba(167,185,42,.12)}
.card.is-hot{--lift:-5px}
/* sorotan yang mengikuti penunjuk di dalam kartu, ditambah tepi bercahaya */
.card::before,.card::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s}
.card::before{background:radial-gradient(260px circle at var(--px,50%) var(--py,0%),rgba(190,214,60,.16),transparent 65%)}
.card::after{z-index:1;padding:1.5px;background:radial-gradient(200px circle at var(--px,50%) var(--py,0%),rgba(237,211,48,.9),rgba(167,185,42,.3) 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.card.is-hot::before,.card.is-hot::after{opacity:1}
.ico{width:50px;height:50px;border-radius:16px;margin-bottom:20px;display:grid;place-items:center;background:var(--grad);color:var(--ink);box-shadow:0 10px 26px rgba(167,185,42,.25)}
.card:hover .ico{animation:icoPop .65s cubic-bezier(.3,1.6,.5,1)}
.ico svg{width:25px;height:25px}
.card h3{font-size:19px;letter-spacing:-.015em;margin-bottom:9px}
.card p{color:var(--sub);font-size:15.5px;line-height:1.62}

/* ---------- karusel layar ---------- */
.sec-screens{background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(111,148,53,.07),rgba(111,148,53,0) 70%)}
.car{position:relative}
.car-track{display:flex;gap:clamp(22px,3.4vw,46px);overflow-x:auto;scroll-snap-type:x mandatory;padding:28px max(24px,calc((100vw - var(--maxw))/2 + 24px)) 30px;scroll-padding-inline:max(24px,calc((100vw - var(--maxw))/2 + 24px));scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{cursor:grabbing;scroll-snap-type:none}
.shot{position:relative;isolation:isolate;flex:0 0 auto;width:clamp(210px,23vw,270px);scroll-snap-align:center;user-select:none;transform:perspective(1200px) rotateY(var(--cf-r,0deg)) scale(var(--cf-s,1))}
/* cahaya di belakang telepon yang sedang di tengah (hanya opasitas yang berubah saat menggulir) */
.shot::before{content:"";position:absolute;z-index:-1;inset:6% -22% 22%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(167,185,42,.3),rgba(167,185,42,0));opacity:calc(var(--cf-a,0)*.9)}
.shot .ph{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .28s var(--ease)}
.shot .ph.is-hot{--lift:-10px}
.shot img{-webkit-user-drag:none}
.shot figcaption{margin-top:30px;text-align:center;opacity:calc(.38 + var(--cf-a,1)*.62)}
.shot figcaption b{display:block;font:800 19px/1.2 'Plus Jakarta Sans',sans-serif;margin-bottom:6px}
.shot figcaption span{display:block;color:var(--dim);font-size:14.5px;line-height:1.55}
.car-ctl{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px}
.car-btn{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.car-btn svg{width:22px;height:22px}
.car-btn:hover:not(:disabled){background:var(--grad);color:var(--ink);border-color:transparent;transform:scale(1.06)}
.car-btn:disabled{opacity:.32;cursor:default}
.car-dots{display:flex;align-items:center;gap:8px;padding:0 8px}
.dot{position:relative;width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;transition:width .4s var(--ease),background .3s}
.dot::after{content:"";position:absolute;inset:-14px -4px}
.dot:hover{background:rgba(255,255,255,.45)}
.dot.on{width:28px;background:var(--grad)}

/* ---------- Wibi ---------- */
.wibi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,96px);align-items:center}
.wibi-stage{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1;container-type:inline-size;--sx:0;--sy:0}
.wibi-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(176,206,52,.4),rgba(111,152,53,.22) 50%,rgba(80,120,50,.05) 80%,rgba(80,120,50,0));transform:translate3d(calc(var(--sx)*-14px),calc(var(--sy)*-10px),0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wibi-halo::before,.wibi-halo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(190,214,60,.55);opacity:0;animation:ripple 5.2s ease-out infinite}
.wibi-halo::after{animation-delay:-2.6s}
.wibi-main{position:absolute;left:8%;top:8%;width:84%;height:auto;animation:bob 6.4s ease-in-out infinite;transform:translate3d(calc(var(--sx)*10px),calc(var(--sy)*7px),0) rotate(calc(var(--sx)*1.6deg));transition:opacity .2s,transform .5s cubic-bezier(.2,.7,.2,1),scale .25s;filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.5))}
.wibi-main.swap{opacity:0;scale:.92}
.wibi-tap{position:absolute;left:14%;top:12%;z-index:2;width:72%;height:80%;border:0;border-radius:42%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bubble{position:absolute;right:-3%;top:-5%;max-width:58%;padding:15px 19px;border-radius:22px 22px 22px 6px;background:var(--cream);color:#1a2112;font:700 15.5px/1.42 'Manrope',sans-serif;box-shadow:0 16px 44px rgba(0,0,0,.45);z-index:3}
.bubble.pop{animation:bubblePop .45s cubic-bezier(.3,1.5,.5,1)}
.s4{left:2%;top:14%;width:7%;translate:calc(var(--sx)*22px) calc(var(--sy)*16px);transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.s5{left:92%;top:60%;width:5%;fill:var(--cream);animation-delay:-1.4s;translate:calc(var(--sx)*-18px) calc(var(--sy)*-12px);transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.wibi-copy h2{font-size:clamp(2rem,4.2vw,3.3rem);margin:18px 0 16px}
.wibi-copy>p{color:var(--sub);max-width:30em}
.poses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px;max-width:460px}
.pose{display:grid;justify-items:center;gap:8px;padding:12px 8px 11px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);font:700 13.5px/1.2 'Manrope',sans-serif;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s}
.pose:hover{transform:translateY(-3px);border-color:rgba(167,185,42,.5);color:var(--text)}
.pose:active{transform:scale(.96)}
.pose.is-on{border-color:var(--m3);background:rgba(167,185,42,.12);color:var(--text)}
.pi{display:block;width:84px;height:84px;border-radius:24px;overflow:hidden;background:radial-gradient(circle closest-side at 50% 52%,rgba(176,206,52,.34),rgba(111,152,53,.08))}
.pi img{width:100%;height:100%;transform:scale(1.14);transform-origin:50% 42%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pose:hover .pi img{transform:scale(1.26) rotate(-4deg)}

/* ---------- langkah ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{position:relative;padding:34px 28px 30px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .3s var(--ease),border-color .3s}
.step.is-hot{--lift:-4px;border-color:rgba(167,185,42,.45)}
.step::after{content:"";position:absolute;top:58px;left:calc(100% + 1px);width:20px;border-top:2px dashed rgba(167,185,42,.45);transform-origin:0 50%}
.step:last-child::after{display:none}
.num{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-bottom:22px;background:var(--grad);color:var(--ink);font:800 22px/1 'Plus Jakarta Sans',sans-serif;box-shadow:0 10px 26px rgba(167,185,42,.28)}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--sub);font-size:15.5px}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:820px}
.faq{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);transition:border-color .25s,background .25s}
.faq+.faq{margin-top:12px}
.faq:hover{border-color:rgba(167,185,42,.25)}
.faq[open]{border-color:rgba(167,185,42,.4);background:rgba(167,185,42,.05)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 26px;font:800 17.5px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:600 30px/1 'Manrope',sans-serif;color:var(--m4);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq div{padding:0 26px 24px;color:var(--sub);font-size:16px}
.faq a{color:var(--m3);font-weight:700}

/* ---------- ajakan akhir ---------- */
.cta-sec{padding:clamp(16px,3vw,32px) 0 clamp(72px,10vw,128px)}
.cta-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(16px,4vw,48px);padding:clamp(34px,6vw,76px);border-radius:40px;border:1px solid rgba(167,185,42,.38);background:linear-gradient(135deg,rgba(111,148,53,.26),rgba(237,211,48,.09) 62%,rgba(255,255,255,.025))}
/* seberkas cahaya yang berputar mengitari bingkai */
.cta-card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 60%,rgba(237,211,48,.95) 82%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:spinAng 7s linear infinite}
.cta-copy h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:14px}
.cta-copy p{color:var(--sub);font-size:clamp(1rem,1.5vw,1.2rem);max-width:28em;margin-bottom:28px}
.cta-art{position:relative;container-type:inline-size;align-self:end;margin-bottom:calc(-1 * clamp(34px,6vw,76px));margin-top:-20px}
.cta-halo{position:absolute;inset:-6% -6% 6%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(246,220,51,.34),rgba(200,205,52,.12) 55%,rgba(200,205,52,0));animation:pulse 6s ease-in-out infinite}
.cta-art img{position:relative;width:100%;height:auto;max-width:420px;margin-inline:auto;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.5));cursor:pointer;transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}
.cta-art img:hover{rotate:-3deg}

/* ---------- kaki ---------- */
.foot{border-top:1px solid var(--line);padding:56px 0 40px;background:linear-gradient(180deg,transparent,rgba(111,148,53,.05))}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.foot-brand p{margin-top:14px;color:var(--dim);font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-links a{color:var(--cream);font-weight:700;font-size:15px;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-links a:hover{color:var(--m4);border-color:var(--m4)}
.foot-legal{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);color:#8C899A;font-size:13.5px;line-height:1.7}
.foot-legal p+p{margin-top:10px}
.foot-legal .copy{color:#6F6C78}
.motion{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font:700 12.5px/1 'Manrope',sans-serif;color:#8C899A}
.motion span{margin-right:2px}
.motion button{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim);font:inherit;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.motion button:hover{color:var(--text);border-color:rgba(167,185,42,.45)}
.motion button[aria-pressed=true]{color:var(--cream);border-color:rgba(167,185,42,.6);background:rgba(167,185,42,.12)}

/* ---------- muncul saat digulir ---------- */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1),scale .8s cubic-bezier(.2,.7,.2,1),rotate .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal[data-in=left]{translate:-64px 0}
.js .reveal[data-in=right]{translate:64px 0}
.js .reveal[data-in=zoom]{translate:0 44px;scale:.9}
.js .reveal[data-in=pop]{translate:0 48px;scale:.86;rotate:var(--rot,0deg);transition-timing-function:cubic-bezier(.3,1.35,.5,1)}
.js .reveal.in{opacity:1;translate:0 0;scale:1;rotate:0deg}
/* pita menyapu dari kiri ke kanan */
.js .ribbon-wrap.reveal{opacity:1;translate:none;transition:none}
.js .ribbon-wrap.reveal .ribbon{clip-path:inset(-70px 100% -70px 0);transition:clip-path 1.2s var(--ease)}
.js .ribbon-wrap.reveal.in .ribbon{clip-path:inset(-70px 0 -70px 0)}
/* kartu dan langkah ikut miring saat disorot: tunda hanya opasitas dan geseran masuk, bukan respons sorotan */
.js .card.reveal,.js .step.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms),scale .9s cubic-bezier(.3,1.35,.5,1) calc(var(--i,0) * 90ms),rotate .9s cubic-bezier(.3,1.35,.5,1) calc(var(--i,0) * 90ms),transform .3s var(--ease),border-color .3s,box-shadow .3s}
/* kepala bagian: label membal, paragraf menyusul */
.js .sec-head .eyebrow{opacity:0;scale:.7;transition:opacity .5s ease .1s,scale .7s cubic-bezier(.3,1.5,.5,1) .1s}
.js .sec-head.in .eyebrow{opacity:1;scale:1}
.js .sec-head p{opacity:0;translate:0 16px;transition:opacity .8s ease .55s,translate .8s var(--ease) .55s}
.js .sec-head.in p{opacity:1;translate:0 0}
/* pertanyaan FAQ, telepon di karusel, dan tombol pose masuk satu per satu (animasi, supaya transisi hover-nya tidak terganggu) */
.js .faq[data-anim],.js .shot[data-anim],.js .wibi-copy .pose{opacity:0}
.js .faq[data-anim].in{animation:slideIn .8s var(--ease) both;animation-delay:calc(var(--i,0)*80ms)}
.js .shot[data-anim].in{animation:shotIn .95s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
.js .wibi-copy.in .pose{animation:popIn .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.45s + var(--n,0)*70ms)}
.pose:nth-child(1){--n:0}.pose:nth-child(2){--n:1}.pose:nth-child(3){--n:2}.pose:nth-child(4){--n:3}.pose:nth-child(5){--n:4}.pose:nth-child(6){--n:5}
/* Wibi popcorn di ajakan akhir membal masuk setelah kartunya */
.js .cta-card .cta-art img{scale:.4;opacity:0;rotate:-14deg;transition:scale .9s cubic-bezier(.3,1.5,.5,1) .4s,opacity .4s ease .4s,rotate .9s cubic-bezier(.3,1.5,.5,1) .4s}
.js .cta-card.in .cta-art img{scale:1;opacity:1;rotate:0deg}
.js .cta-card.in .cta-art img:hover{rotate:-3deg;transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}
/* judul per kata muncul dari bawah garis */
.js .reveal .split .wi{translate:0 118%;transition:translate .95s var(--ease) calc(var(--k)*65ms + 120ms)}
.js .reveal.in .split .wi{translate:0 0}
/* angka langkah membal masuk, penghubung putus-putusnya memanjang */
.js .step .num{scale:.3;opacity:0;transition:scale .7s cubic-bezier(.34,1.7,.5,1) calc(var(--i,0)*90ms + .25s),opacity .3s ease calc(var(--i,0)*90ms + .25s)}
.js .step.in .num{scale:1;opacity:1}
.js .step::after{scale:0 1;transition:scale .7s var(--ease) calc(var(--i,0)*90ms + .5s)}
.js .step.in::after{scale:1 1}

/* ---------- gerak ---------- */
@keyframes rise{from{opacity:0;translate:0 5cqw}to{opacity:1;translate:0 0}}
@keyframes wibiIn{0%{opacity:0;translate:-9cqw 11cqw;scale:.55;rotate:-14deg}55%{opacity:1}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes chipIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes wordUp{from{translate:0 118%}to{translate:0 0}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -1.8cqw}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -1.5cqw}}
@keyframes pflash{0%,100%{opacity:.06;scale:.7}14%{opacity:.95;scale:1.3}26%{opacity:.12;scale:.8}58%{opacity:.7;scale:1.1}72%{opacity:.08;scale:.75}}
@keyframes twk{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes preFade{to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.18;scale:.55;rotate:0deg}50%{opacity:1;scale:1.3;rotate:50deg}}
@keyframes spfloat{to{translate:7px -16px}}
@keyframes breathe{0%,100%{opacity:.7;scale:.94}50%{opacity:1;scale:1.07}}
@keyframes sway{from{rotate:-7deg}to{rotate:8deg}}
@keyframes shoot{0%,100%{translate:0 0;opacity:0}2%{opacity:1}22%{translate:420px 224px;opacity:0}23%{translate:0 0;opacity:0}}
@keyframes pulse{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes glowA{to{translate:16% 14%}}
@keyframes glowB{to{translate:-18% -12%}}
@keyframes shimmer{to{background-position:100% 50%}}
@keyframes shine{0%,62%{left:-70%}100%{left:140%}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(167,185,42,.5)}65%,100%{box-shadow:0 0 0 22px rgba(167,185,42,0)}}
@keyframes ripple{0%{scale:.72;opacity:0}15%{opacity:.7}100%{scale:1.28;opacity:0}}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes icoPop{0%{scale:1;rotate:0deg}40%{scale:1.2;rotate:-10deg}100%{scale:1;rotate:0deg}}
@keyframes bubblePop{0%{scale:.86}60%{scale:1.05}100%{scale:1}}
@keyframes spin{to{rotate:360deg}}
@keyframes wheel{0%{opacity:0;translate:0 0}25%{opacity:1}70%,100%{opacity:0;translate:0 14px}}
@keyframes arrowUp{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes launch{0%{translate:0 0;opacity:1}55%{translate:0 -36px;opacity:0}56%{translate:0 36px;opacity:0}100%{translate:0 0;opacity:1}}
@keyframes ringSpin{to{rotate:270deg}}
@keyframes popIn{from{opacity:0;translate:0 24px;scale:.6}to{opacity:1;translate:0 0;scale:1}}
@keyframes slideIn{from{opacity:0;translate:0 34px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes shotIn{from{opacity:0;translate:90px 0;scale:.86}to{opacity:1;translate:0 0;scale:1}}
@keyframes spinAng{to{--ang:360deg}}
@keyframes preIn{to{opacity:1;translate:0 0}}
@keyframes pwDraw{to{stroke-dashoffset:0}}
@keyframes pwFill{to{opacity:1}}
@keyframes pwOut{to{opacity:0}}
@keyframes edgeOut{to{opacity:0}}
@keyframes wbBlink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
@keyframes wbAhoge{0%,55%,100%{transform:rotate(0)}64%{transform:rotate(7deg)}73%{transform:rotate(-6deg)}82%{transform:rotate(3deg)}90%{transform:rotate(0)}}
@keyframes wbTail{0%,100%{transform:rotate(0)}50%{transform:rotate(3.4deg)}}
@keyframes wbWave{0%,48%,100%{transform:rotate(0)}6%{transform:rotate(-13deg)}14%{transform:rotate(9deg)}22%{transform:rotate(-13deg)}30%{transform:rotate(9deg)}38%{transform:rotate(-7deg)}}

/* ---------- mode ringan: dipasang otomatis oleh site.js bila perangkat terukur lambat ---------- */
html.lite .beam,html.lite .hero .glow{display:none}
html.lite .nav,html.lite .hv-chip,html.lite .totop{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite .nav.is-stuck{background:rgba(11,10,13,.94)}
html.lite .hv-chip,html.lite .totop{background:rgba(20,24,14,.92)}
html.lite .wb,html.lite .wibi-main,html.lite .cta-art img{filter:none}

/* ---------- responsif ---------- */
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .lead{margin-inline:auto}
  .cta-row,.facts{justify-content:center}
  .hv{max-width:520px}
  .wibi-grid{grid-template-columns:1fr;text-align:center}
  .wibi-copy>p{margin-inline:auto}
  .poses{margin-inline:auto}
  .cta-card{grid-template-columns:1fr;text-align:center}
  .cta-copy p{margin-inline:auto}
  .cta-art{margin-top:8px}
  .steps{grid-template-columns:1fr}
  .step::after{display:none}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav .btn-sm{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:min(var(--maxw),100% - 36px)}
  .cards{grid-template-columns:1fr}
  .play img{height:62px}
  .faq summary{padding:18px 20px;font-size:16.5px}
  .faq div{padding:0 20px 20px}
  .bubble{font-size:14px;padding:12px 15px;right:0}
  .foot-grid{flex-direction:column}
  .hv-chip{display:none}
  .pre-mark{width:112px;height:112px}
  .car-btn{width:48px;height:48px}
  .totop{width:48px;height:48px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
}

/* ---------- tingkat animasi: html[data-motion] = full | soft | off (diatur skrip kecil di <head>; bawaan mengikuti pengaturan sistem) ---------- */
/* tanpa JS tidak ada data-motion: ikuti pengaturan sistem saja */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion]){scroll-behavior:auto}
  html:not([data-motion]) *,html:not([data-motion]) *::before,html:not([data-motion]) *::after{animation:none!important;transition:none!important}
}

/* DIAM: tidak ada animasi sama sekali */
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
html.js[data-motion=off] .reveal,html.js[data-motion=off] .reveal[data-in]{opacity:1!important;translate:0 0!important;scale:1!important;rotate:0deg!important}
html.js[data-motion=off] .ribbon-wrap.reveal .ribbon{clip-path:none!important}
html.js[data-motion=off] .faq[data-anim],html.js[data-motion=off] .shot[data-anim],html.js[data-motion=off] .wibi-copy .pose,html.js[data-motion=off] .sec-head .eyebrow,html.js[data-motion=off] .sec-head p{opacity:1!important;translate:0 0!important;scale:1!important}
html.js[data-motion=off] .cta-card .cta-art img{opacity:1!important;scale:1!important;rotate:0deg!important}
html.js[data-motion=off] .step .num{scale:1!important;opacity:1!important}
html.js[data-motion=off] .step::after{scale:1 1!important}
html[data-motion=off] #pre,html[data-motion=off] .cursor,html[data-motion=off] .fx{display:none!important}

/* HALUS: hanya kelap-kelip, memudar, dan denyut cahaya; tanpa geser, skala, putar, paralaks, dan gerak terus-menerus */
html[data-motion=soft]{scroll-behavior:auto}
html[data-motion=soft] *,html[data-motion=soft] *::before,html[data-motion=soft] *::after{animation:none!important;transition-property:opacity,color,background-color,border-color,box-shadow,stroke-dashoffset,visibility!important}
/* muncul: hanya memudar (tanpa posisi awal yang bergeser) */
html.js[data-motion=soft] .reveal,html.js[data-motion=soft] .reveal[data-in]{translate:0 0!important;scale:1!important;rotate:0deg!important}
html.js[data-motion=soft] .ribbon-wrap.reveal .ribbon{clip-path:none!important}
html.js[data-motion=soft] .sec-head .eyebrow{scale:1!important}
html.js[data-motion=soft] .sec-head p{translate:0 0!important}
html.js[data-motion=soft] .cta-card .cta-art img{scale:1!important;rotate:0deg!important}
html.js[data-motion=soft] .step .num{scale:1!important}
html.js[data-motion=soft] .step::after{scale:1 1!important}
html[data-motion=soft].hold .nav{translate:0 0!important}
/* yang tetap hidup */
html[data-motion=soft] .sp{animation:twk var(--tw,3.6s) ease-in-out infinite!important}
html[data-motion=soft] .hv-halo,html[data-motion=soft] .cta-halo{animation:pulse 6s ease-in-out infinite!important}
html[data-motion=soft] .wb-eyes{animation:wbBlink 5.6s ease-in-out infinite!important}
html[data-motion=soft] .wb.happy .wb-eyes{animation:none!important}
html[data-motion=soft] em{animation:shimmer 9s ease-in-out infinite alternate!important}
/* hero masuk dengan memudar bergantian setelah preloader */
html[data-motion=soft]:not(.hold) .hero-copy>*,html[data-motion=soft]:not(.hold) .hv-layer,html[data-motion=soft]:not(.hold) .hv-chip{animation:fadeIn .9s ease both!important;animation-delay:var(--delay,0s)!important}
html[data-motion=soft]:not(.hold) .hero-copy>:nth-child(1){animation-delay:.1s!important}
html[data-motion=soft]:not(.hold) .hero-copy>:nth-child(2){animation-delay:.25s!important}
html[data-motion=soft]:not(.hold) .hero-copy>:nth-child(3){animation-delay:.45s!important}
html[data-motion=soft]:not(.hold) .hero-copy>:nth-child(4){animation-delay:.6s!important}
html[data-motion=soft]:not(.hold) .hero-copy>:nth-child(5){animation-delay:.75s!important}
html.js[data-motion=soft] .faq[data-anim].in,html.js[data-motion=soft] .shot[data-anim].in{animation:fadeIn .8s ease both!important;animation-delay:calc(var(--i,0)*80ms)!important}
html.js[data-motion=soft] .wibi-copy.in .pose{animation:fadeIn .6s ease both!important;animation-delay:calc(.35s + var(--n,0)*60ms)!important}
/* preloader tenang: logo tergambar, huruf memudar, bintang berkelip, lalu memudar keluar (tanpa sinar berputar, orbit, atau iris) */
html[data-motion=soft] .pw-line{animation:pwDraw .7s cubic-bezier(.6,0,.25,1) .05s forwards,pwOut .3s ease .75s forwards!important}
html[data-motion=soft] .pw-fill{animation:pwFill .45s ease .55s forwards!important}
html[data-motion=soft] .pre-word span{translate:0 0;animation:preFade .5s ease forwards!important;animation-delay:calc(.25s + var(--k)*45ms)!important}
html[data-motion=soft] .pstar{animation:pflash var(--d) ease-in-out var(--dl) infinite!important}
html[data-motion=soft] .pre-glow{animation:pulse 3s ease-in-out infinite!important}
html[data-motion=soft] .pre-rays,html[data-motion=soft] .pre-orbit,html[data-motion=soft] .pshoot{display:none}
html[data-motion=soft] #pre.is-done .pre-core,html[data-motion=soft] #pre.is-out .pre-core{scale:1!important}