/* WellnessHubID Premium Motion Layer — v2.9 repair
   Tujuan: nambah animasi premium tanpa menghapus gambar/video/aset asli. */
:root{--wh-accent:#9dff3f;--wh-accent2:#33d46f;--wh-black:#030503;--wh-line:rgba(157,255,63,.28)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:
  radial-gradient(circle at var(--mx,50%) var(--my,20%), rgba(157,255,63,.075), transparent 20rem),
  linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);background-size:auto, 48px 48px, 48px 48px;mix-blend-mode:screen;opacity:.72}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.wh-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%, rgba(51,212,111,.12), transparent 28rem),#030503;transition:opacity .75s ease,visibility .75s ease;overflow:hidden}
.wh-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.wh-loader::before{content:"";position:absolute;inset:-15%;background:conic-gradient(from 90deg, transparent, rgba(157,255,63,.18), transparent, rgba(255,255,255,.06), transparent);animation:whSpin 5.5s linear infinite;filter:blur(18px);opacity:.38}.wh-loader::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--wh-accent),transparent);box-shadow:0 0 26px rgba(157,255,63,.55);animation:whScan 2.25s ease-in-out infinite}
.wh-loader-inner{position:relative;display:grid;place-items:center;text-align:center;padding:34px;width:min(520px,92vw)}.wh-logo-stage{position:relative;width:190px;height:190px;display:grid;place-items:center;margin:0 auto 22px}.wh-logo-stage::before,.wh-logo-stage::after{content:"";position:absolute;border-radius:50%;inset:0;border:1px solid rgba(157,255,63,.34);box-shadow:0 0 44px rgba(51,212,111,.18);animation:whPulse 2.2s ease-in-out infinite}.wh-logo-stage::after{inset:18px;border-color:rgba(255,255,255,.12);animation-delay:.38s}.wh-logo-stage img{position:relative;z-index:2;width:128px;height:128px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 0 32px rgba(157,255,63,.28));animation:whLogoIn 1.1s cubic-bezier(.16,1,.3,1) both}.wh-ecg{position:absolute;z-index:3;width:160px;height:34px;bottom:72px;opacity:.96;filter:drop-shadow(0 0 10px rgba(157,255,63,.55))}.wh-ecg path{stroke:var(--wh-accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:whDraw 1.2s .45s ease forwards}.wh-loader-title{margin:0;font-size:clamp(1.55rem,4.8vw,2.55rem);letter-spacing:.36em;text-transform:uppercase;font-weight:900;color:#f4fff5}.wh-loader-tag{margin:10px auto 0;color:#cfffcd;font-weight:750;line-height:1.6;max-width:42ch}.wh-loader-bar{width:min(300px,70vw);height:3px;border-radius:999px;margin:24px auto 0;background:rgba(255,255,255,.08);overflow:hidden}.wh-loader-bar span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--wh-accent),var(--wh-accent2));animation:whLoad 1.45s ease-in-out infinite}
.hero-logo-lockup{position:relative;display:inline-flex;align-items:center;gap:16px;margin:0 0 16px;padding:12px 16px 12px 12px;border:1px solid rgba(157,255,63,.2);background:linear-gradient(180deg,rgba(157,255,63,.075),rgba(255,255,255,.025));border-radius:999px;box-shadow:0 0 0 1px rgba(157,255,63,.04) inset,0 20px 60px rgba(0,0,0,.2);backdrop-filter:blur(12px)}.hero-logo-lockup .logo-orbit{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;position:relative;background:#070a08}.hero-logo-lockup .logo-orbit::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(157,255,63,.44);border-top-color:transparent;animation:whSpin 3.6s linear infinite}.hero-logo-lockup img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 0 18px rgba(157,255,63,.28))}.hero-logo-lockup strong{display:block;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:#dfffe7}.hero-logo-lockup span{display:block;margin-top:4px;color:#9dff3f;font-size:.78rem;font-weight:900;letter-spacing:.08em}.hero-copy,.hero-media,.problem-card,.feature-card,.product-card,.story-left,.story-quote,.story-portrait,.cta-panel,.suite-card,.wh-reveal{animation:whReveal .9s cubic-bezier(.16,1,.3,1) both}.hero-media{animation-delay:.16s}.problem-card:nth-child(2),.feature-card:nth-child(2){animation-delay:.07s}.problem-card:nth-child(3),.feature-card:nth-child(3){animation-delay:.14s}.hero-media::after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(157,255,63,.10) 44%,transparent 58%);transform:translateX(-120%);animation:whSweep 5s ease-in-out infinite;pointer-events:none}.hero h1,.retention-main h2,.dh-intro-title{ text-shadow:0 0 38px rgba(157,255,63,.08)}.goal-card,.problem-card,.feature-card,.tool-card,.panel,.retention-card,.score-card{position:relative}.goal-card::after,.problem-card::after,.feature-card::after,.tool-card::after,.panel::after,.retention-card::after,.score-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(157,255,63,.18),transparent 26%,transparent 72%,rgba(157,255,63,.08));opacity:0;transition:.25s ease}.goal-card:hover::after,.problem-card:hover::after,.feature-card:hover::after,.tool-card:hover::after,.panel:hover::after,.retention-card:hover::after,.score-card:hover::after{opacity:1}.wh-fast-lane{width:min(var(--max,1220px), calc(100% - 32px));margin:10px auto 40px;padding:22px;border-radius:30px;border:1px solid rgba(157,255,63,.16);background:radial-gradient(circle at 15% 0%,rgba(157,255,63,.12),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:0 24px 70px rgba(0,0,0,.32)}.wh-fast-lane h2{margin:0 0 14px;font-size:clamp(1.4rem,3.8vw,2.45rem);letter-spacing:-.055em}.wh-fast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.wh-fast-card{min-height:132px;border-radius:22px;padding:18px;background:rgba(5,8,6,.52);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between;transition:.22s ease;overflow:hidden;position:relative}.wh-fast-card::before{content:"";position:absolute;inset:auto -10% -35% -10%;height:80%;background:radial-gradient(ellipse at center,rgba(157,255,63,.12),transparent 65%);pointer-events:none}.wh-fast-card:hover{transform:translateY(-3px);border-color:rgba(157,255,63,.3);background:rgba(51,212,111,.075)}.wh-fast-card i{color:var(--wh-accent);font-size:1.55rem}.wh-fast-card strong{font-size:1.02rem}.wh-fast-card span{color:var(--muted,#a6b1aa);font-weight:700;font-size:.84rem;line-height:1.45}.dh-intro{background:radial-gradient(circle at 50% 45%,rgba(51,212,111,.16),transparent 24rem),#030503!important}.dh-intro::before{content:"";position:absolute;inset:-15%;background:conic-gradient(from 180deg,transparent,rgba(157,255,63,.16),transparent,rgba(255,255,255,.05),transparent);filter:blur(18px);animation:whSpin 6s linear infinite;opacity:.36}.dh-orb{position:relative}.dh-orb::before{content:"";position:absolute;inset:-12px;border-radius:32%;border:1px solid rgba(157,255,63,.3);border-top-color:transparent;animation:whSpin 3.8s linear infinite}.dh-intro-title span{color:var(--wh-accent)!important}.bottom-nav{box-shadow:0 22px 70px rgba(0,0,0,.52),0 0 34px rgba(51,212,111,.10)!important}.quick-tools-dock{box-shadow:0 16px 60px rgba(0,0,0,.35),0 0 30px rgba(51,212,111,.08)!important}
@keyframes whSpin{to{transform:rotate(360deg)}}@keyframes whPulse{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.08);opacity:.36}}@keyframes whLogoIn{from{opacity:0;transform:scale(.82);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 32px rgba(157,255,63,.28))}}@keyframes whDraw{to{stroke-dashoffset:0}}@keyframes whLoad{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}@keyframes whScan{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(100vh);opacity:.7}}@keyframes whReveal{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes whSweep{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
@media(max-width:920px){.wh-fast-grid{grid-template-columns:1fr 1fr}.hero-logo-lockup{border-radius:26px}.hero-logo-lockup .logo-orbit{width:62px;height:62px}.hero-logo-lockup img{width:50px;height:50px}}@media(max-width:560px){.wh-loader-title{letter-spacing:.22em}.wh-logo-stage{width:160px;height:160px}.wh-logo-stage img{width:108px;height:108px}.wh-fast-lane{margin-top:8px;padding:16px;border-radius:24px}.wh-fast-grid{grid-template-columns:1fr}.wh-fast-card{min-height:110px}.hero-logo-lockup{display:flex;width:100%;align-items:center}.hero-logo-lockup span{font-size:.72rem}.hero-logo-lockup .logo-orbit{flex:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.wh-loader{display:none!important}}

/* =========================
   V3.0 Cinematic landing repair — richer like reference video
   Keeps all v2.9 animations, assets, and original features.
========================= */
:root{--wh-gold:#d7b86a;--wh-lime:#9dff3f;--wh-deep:#050605}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(circle at var(--mx,50%) var(--my,35%), rgba(157,255,63,.10), transparent 18rem),
  linear-gradient(115deg, rgba(255,255,255,.025), transparent 35%, rgba(157,255,63,.035) 72%, transparent),
  repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 90px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 90px);
  mix-blend-mode:screen;opacity:.75}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% -15%,rgba(157,255,63,.13),transparent 45%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.42) 100%)}

.hero{position:relative;isolation:isolate;padding-top:44px;gap:34px}.hero::before{content:"";position:absolute;inset:24px -22px 16px;border-radius:38px;background:radial-gradient(circle at 28% 23%,rgba(157,255,63,.16),transparent 25%),radial-gradient(circle at 78% 35%,rgba(215,184,106,.10),transparent 22%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.075);box-shadow:0 30px 120px rgba(0,0,0,.42);z-index:-1;overflow:hidden}.hero::after{content:"";position:absolute;left:-10%;right:-10%;top:15%;height:2px;background:linear-gradient(90deg,transparent,rgba(157,255,63,.72),rgba(255,255,255,.22),transparent);filter:blur(.2px);box-shadow:0 0 28px rgba(157,255,63,.42);opacity:.55;animation:whHeroScan 4.2s ease-in-out infinite}.hero-copy{position:relative;z-index:4}.wh-cinema-logo{position:relative;display:grid;place-items:center;text-align:center;width:min(420px,100%);margin:0 0 20px;padding:18px 18px 22px;border-radius:36px;background:radial-gradient(circle at 50% 44%,rgba(157,255,63,.12),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid rgba(157,255,63,.18);box-shadow:0 28px 85px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}.wh-cinema-logo::before{content:"";position:absolute;inset:-35%;background:conic-gradient(from 40deg,transparent,rgba(157,255,63,.18),transparent,rgba(215,184,106,.12),transparent);animation:whSpin 10s linear infinite;filter:blur(18px);opacity:.56}.wh-cinema-logo::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--wh-lime),transparent);box-shadow:0 0 26px rgba(157,255,63,.6)}.wh-cinema-orbit{position:relative;width:210px;height:210px;display:grid;place-items:center;margin:0 auto 12px}.wh-cinema-orbit .ring{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(157,255,63,.36);box-shadow:0 0 48px rgba(157,255,63,.14)}.wh-cinema-orbit .ring-a{border-top-color:transparent;border-left-color:rgba(255,255,255,.12);animation:whSpin 5.2s linear infinite}.wh-cinema-orbit .ring-b{inset:28px;border-color:rgba(255,255,255,.12);border-bottom-color:rgba(157,255,63,.5);animation:whSpin 7s linear infinite reverse}.wh-cinema-orbit img{position:relative;z-index:2;width:138px;height:138px;border-radius:50%;object-fit:cover;filter:drop-shadow(0 0 34px rgba(157,255,63,.35));animation:whLogoFloat 3.2s ease-in-out infinite}.wh-cinema-ecg{position:absolute;z-index:3;bottom:82px;width:178px;height:40px;filter:drop-shadow(0 0 12px rgba(157,255,63,.65))}.wh-cinema-ecg path{stroke:var(--wh-lime);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:290;stroke-dashoffset:290;animation:whDraw 1.6s .25s ease forwards}.wh-cinema-kicker{position:relative;z-index:3;margin:0;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:#f1fff1;font-weight:900}.wh-cinema-jargon{position:relative;z-index:3;margin:8px 0 0;color:#bdfdc9;font-weight:800;line-height:1.55;max-width:32ch}.hero h1{max-width:12ch}.hero .sub{max-width:49ch}.wh-hero-microflow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;color:#cfead5;font-weight:900;font-size:.86rem}.wh-hero-microflow span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.wh-hero-microflow i{color:var(--wh-lime);opacity:.85}.goal-cards{position:relative;z-index:3}.goal-card{backdrop-filter:blur(12px)}.hero-media{min-height:620px;border-radius:42px;border-color:rgba(157,255,63,.22);box-shadow:0 40px 120px rgba(0,0,0,.45),0 0 70px rgba(157,255,63,.08);transform:perspective(1200px) rotateY(-3deg);transition:.35s ease}.hero-media:hover{transform:perspective(1200px) rotateY(0deg) translateY(-2px)}.hero-media::before{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.6)),radial-gradient(circle at 78% 18%,rgba(157,255,63,.22),transparent 24%),radial-gradient(circle at 15% 82%,rgba(215,184,106,.18),transparent 22%)}.hero-video{filter:contrast(1.06) saturate(1.05) brightness(.82)}.hero-overlay-top{background:rgba(5,8,6,.76);border-color:rgba(157,255,63,.28);box-shadow:0 0 30px rgba(157,255,63,.08)}.mini-stat{background:linear-gradient(180deg,rgba(157,255,63,.14),rgba(255,255,255,.045));border:1px solid rgba(157,255,63,.24)}
.wh-fast-lane{position:relative;margin-top:0;transform:translateY(-4px);overflow:hidden}.wh-fast-lane::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(157,255,63,.08) 48%,transparent 64%);animation:whSweep 7s ease-in-out infinite;pointer-events:none}.wh-fast-lane h2::after{content:"";display:block;width:86px;height:3px;border-radius:999px;margin-top:12px;background:linear-gradient(90deg,var(--wh-lime),transparent);box-shadow:0 0 22px rgba(157,255,63,.55)}
.problem-card,.product-panel,.feature-card,.cta-panel,.article-section,.mini-card{backdrop-filter:blur(14px)}

/* Discipline Hub richer cockpit */
.dh-dashboard-emblem{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}.dh-dashboard-emblem strong{display:block;margin-top:6px;text-transform:uppercase;letter-spacing:.20em;color:#d9ffe3;font-size:.78rem}.dh-dashboard-logo{width:74px;height:74px;border-radius:26px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(157,255,63,.12),rgba(255,255,255,.035));border:1px solid rgba(157,255,63,.24);box-shadow:0 0 48px rgba(157,255,63,.13)}.dh-dashboard-logo::before{content:"";position:absolute;inset:-8px;border-radius:30px;border:1px solid rgba(157,255,63,.35);border-top-color:transparent;animation:whSpin 4s linear infinite}.dh-dashboard-logo img{width:52px;height:52px;object-fit:cover;border-radius:18px;filter:drop-shadow(0 0 18px rgba(157,255,63,.33))}.retention-cockpit{position:relative;isolation:isolate}.retention-cockpit::before{content:"";position:absolute;inset:-10px;border-radius:36px;background:radial-gradient(circle at 20% 0%,rgba(157,255,63,.12),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(157,255,63,.08);z-index:-1}.retention-main{overflow:hidden}.retention-main::after{content:"";position:absolute;right:-10%;top:-20%;width:42%;height:70%;background:radial-gradient(circle,rgba(157,255,63,.18),transparent 63%);filter:blur(12px);pointer-events:none}.dh-action-rail{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.dh-action-rail span{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(157,255,63,.14);background:rgba(255,255,255,.045);font-size:.82rem;font-weight:900;color:#d9ffe3}.dh-action-rail i{color:var(--wh-lime)}.wallet-card,.mission-card-ret{overflow:hidden}.wallet-card::before,.mission-card-ret::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(157,255,63,.07),transparent);transform:translateX(-120%);animation:whSweep 6.5s ease-in-out infinite;pointer-events:none}.quick-tools-dock{border-color:rgba(157,255,63,.22)!important}.dh-intro-inner{position:relative}.dh-intro-inner::after{content:"";position:absolute;inset:auto 8% 0;height:1px;background:linear-gradient(90deg,transparent,var(--wh-lime),transparent);box-shadow:0 0 28px rgba(157,255,63,.5)}
@keyframes whHeroScan{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(58vh);opacity:.65}}@keyframes whLogoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.025)}}
@media(max-width:960px){.hero{grid-template-columns:1fr}.hero::before{inset:10px -8px}.wh-cinema-logo{width:100%;max-width:520px;margin-left:auto;margin-right:auto}.hero-media{min-height:520px;transform:none}.hero-copy{text-align:left}.wh-hero-microflow{justify-content:flex-start}}
@media(max-width:560px){.hero{padding-top:22px}.hero::before{border-radius:26px}.wh-cinema-logo{border-radius:28px;padding:14px 12px 18px}.wh-cinema-orbit{width:170px;height:170px}.wh-cinema-orbit img{width:112px;height:112px}.wh-cinema-ecg{bottom:66px;width:142px}.wh-cinema-kicker{letter-spacing:.22em;font-size:.68rem}.wh-cinema-jargon{font-size:.86rem}.hero-media{min-height:430px;border-radius:28px}.wh-hero-microflow span{font-size:.78rem;padding:8px 10px}.dh-dashboard-emblem{align-items:flex-start}.dh-dashboard-logo{width:62px;height:62px;border-radius:22px}.dh-dashboard-logo img{width:44px;height:44px}.dh-action-rail{display:none}}

/* =========================
   V3.1 Cinematic Scroll Reveal Layer
   Biar elemen muncul bertahap seperti video: fade, slide, blur, stagger, tidak kaku.
========================= */
.wh-motion{
  opacity:0;
  transform:translate3d(0,54px,0) scale(.985);
  filter:blur(12px);
  transition:
    opacity .92s cubic-bezier(.16,1,.3,1) var(--wh-delay,0ms),
    transform .92s cubic-bezier(.16,1,.3,1) var(--wh-delay,0ms),
    filter .92s cubic-bezier(.16,1,.3,1) var(--wh-delay,0ms);
  will-change:opacity,transform,filter;
}
.wh-motion[data-motion="right"]{transform:translate3d(68px,20px,0) scale(.985);}
.wh-motion[data-motion="left"]{transform:translate3d(-68px,20px,0) scale(.985);}
.wh-motion[data-motion="soft"]{transform:translate3d(0,34px,0) scale(.975);filter:blur(9px);}
.wh-motion[data-motion="text"]{transform:translate3d(0,26px,0);filter:blur(6px);}
.wh-motion.wh-visible{
  opacity:1;
  transform:translate3d(0,var(--wh-parallax-y,0px),0) scale(1);
  filter:blur(0);
}
.wh-motion.wh-visible.wh-parallax{transform:translate3d(0,var(--wh-parallax-y,0px),0) scale(1);}
.wh-play.goal-card,.wh-play.feature-card,.wh-play.problem-card,.wh-play.wh-fast-card,.wh-play.tool-card,.wh-play.article-card,.wh-play.mini-card,.wh-play.reward-card-ret,.wh-play.mission-card-ret,.wh-play.wallet-card{
  animation:whCardBreathe 3.8s ease-in-out calc(var(--wh-delay,0ms) + 900ms) 1;
}
.wh-play h1,.wh-play h2{animation:whTextGlow 1.8s ease-out calc(var(--wh-delay,0ms) + 250ms) 1;}
.hero .wh-motion.wh-visible:nth-child(1){transition-delay:120ms}
.hero .wh-motion.wh-visible:nth-child(2){transition-delay:220ms}
.hero .wh-motion.wh-visible:nth-child(3){transition-delay:340ms}
.hero .wh-motion.wh-visible:nth-child(4){transition-delay:460ms}
.hero .wh-motion.wh-visible:nth-child(5){transition-delay:580ms}

/* garis sapuan saat section masuk, mirip motion landing page premium */
main > section.wh-motion, .wh-fast-lane.wh-motion, .retention-cockpit.wh-motion{position:relative;overflow:clip;}
main > section.wh-motion::after, .wh-fast-lane.wh-motion::after, .retention-cockpit.wh-motion::after{
  content:"";
  position:absolute;
  left:-30%;top:0;
  width:24%;height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(157,255,63,.11),rgba(255,255,255,.05),transparent);
  transform:skewX(-16deg) translateX(-220%);
  opacity:0;
}
main > section.wh-visible::after, .wh-fast-lane.wh-visible::after, .retention-cockpit.wh-visible::after{animation:whSectionSweep 1.15s cubic-bezier(.16,1,.3,1) .18s 1;}

@keyframes whCardBreathe{
  0%{box-shadow:inherit;transform:translateY(0) scale(1)}
  40%{box-shadow:0 24px 80px rgba(0,0,0,.34),0 0 34px rgba(157,255,63,.16);transform:translateY(-2px) scale(1.006)}
  100%{box-shadow:inherit;transform:translateY(0) scale(1)}
}
@keyframes whTextGlow{
  0%{text-shadow:0 0 0 rgba(157,255,63,0)}
  45%{text-shadow:0 0 34px rgba(157,255,63,.18)}
  100%{text-shadow:0 0 14px rgba(157,255,63,.06)}
}
@keyframes whSectionSweep{
  0%{opacity:0;transform:skewX(-16deg) translateX(-220%)}
  30%{opacity:1}
  100%{opacity:0;transform:skewX(-16deg) translateX(650%)}
}
@media(prefers-reduced-motion:reduce){
  .wh-motion{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  main > section.wh-motion::after,.wh-fast-lane.wh-motion::after,.retention-cockpit.wh-motion::after{display:none!important}
}


/* =========================
   V3.2 Desktop Logo Full + Low-End Mobile Performance Patch
   Fokus: logo hero tidak ter-crop di PC, mobile tetap cinematic tapi lebih ringan.
========================= */
@media (min-width: 961px){
  .wh-cinema-logo{
    width:min(560px,100%);
    padding:26px 28px 30px;
    border-radius:42px;
    overflow:visible;
  }
  .wh-cinema-orbit{
    width:276px;
    height:276px;
    margin-bottom:18px;
  }
  .wh-cinema-orbit .ring{inset:0;}
  .wh-cinema-orbit .ring-b{inset:28px;}
  .wh-cinema-orbit img{
    width:202px;
    height:202px;
    object-fit:contain!important;
    border-radius:26px!important;
    background:radial-gradient(circle at 50% 45%,rgba(157,255,63,.10),rgba(3,5,3,.92) 58%,#030503 100%);
    padding:0;
  }
  .wh-cinema-ecg{
    bottom:112px;
    width:228px;
    height:48px;
  }
  .wh-cinema-kicker{font-size:.82rem;letter-spacing:.38em;}
  .wh-cinema-jargon{max-width:40ch;font-size:1.02rem;}

  .wh-logo-stage{width:230px;height:230px;}
  .wh-logo-stage img{
    width:166px!important;
    height:166px!important;
    object-fit:contain!important;
    border-radius:24px!important;
    background:#030503;
  }
  .wh-ecg{bottom:91px;width:198px;}
}

@media (max-width: 720px), (pointer: coarse){
  /* kurangi layer berat di HP kentang tanpa mematikan seluruh feel cinematic */
  body::before{
    opacity:.38!important;
    background-size:auto,72px 72px,72px 72px!important;
  }
  body::after{opacity:.045!important;}

  .wh-loader::before,
  .wh-cinema-logo::before,
  .dh-intro::before{
    animation-duration:14s!important;
    filter:blur(12px)!important;
    opacity:.28!important;
  }
  .hero::after,
  .hero-media::after,
  .wh-fast-lane::before,
  .wallet-card::before,
  .mission-card-ret::before{
    animation-duration:9s!important;
    opacity:.34!important;
  }
  .wh-cinema-orbit .ring-a,
  .wh-cinema-orbit .ring-b,
  .wh-logo-stage::before,
  .wh-logo-stage::after,
  .dh-dashboard-logo::before,
  .dh-orb::before{
    animation-duration:12s!important;
  }
  .wh-cinema-orbit img,
  .wh-logo-stage img{
    object-fit:contain!important;
    border-radius:22px!important;
  }
  .wh-motion{
    transition-duration:.58s!important;
    filter:blur(5px);
    transform:translate3d(0,28px,0) scale(.99);
    will-change:auto;
  }
  .wh-motion[data-motion="right"],
  .wh-motion[data-motion="left"]{
    transform:translate3d(0,28px,0) scale(.99);
  }
  .hero-media,
  .hero-media:hover{
    transform:none!important;
  }
  .hero-video{
    filter:contrast(1) saturate(.96) brightness(.78)!important;
  }
  .hero-copy,.hero-media,.problem-card,.feature-card,.product-card,.story-left,.story-quote,.story-portrait,.cta-panel,.suite-card,.wh-reveal{
    animation-duration:.55s!important;
  }
}

/* =========================
   V4.0 Desktop Hero Correction
   Permintaan Evan: logo stage full-width di ATAS, logo tetap lingkaran proporsional,
   video gym besar di BAWAH stage logo, dan mobile tidak diubah.
========================= */
@media (min-width: 961px){
  .hero{
    grid-template-columns:minmax(0, .92fr) minmax(560px, 1.08fr) !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    column-gap:clamp(42px, 5vw, 84px) !important;
    row-gap:42px !important;
    padding-top:46px !important;
  }

  .hero > .wh-cinema-logo{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-height:380px !important;
    margin:0 0 6px !important;
    padding:48px 52px 52px !important;
    border-radius:46px !important;
    overflow:visible !important;
  }

  .hero > .hero-copy{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:start !important;
    padding-top:0 !important;
  }

  .hero > .hero-media{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    min-height:650px !important;
    margin-top:0 !important;
    width:100% !important;
    transform:perspective(1200px) rotateY(-2deg) !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit{
    width:320px !important;
    height:320px !important;
    margin:0 auto 24px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit .ring{
    inset:0 !important;
    border-radius:50% !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit .ring-b{
    inset:42px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit img{
    width:178px !important;
    height:178px !important;
    aspect-ratio:1/1 !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:#030503 !important;
    padding:0 !important;
    box-shadow:0 0 0 1px rgba(157,255,63,.14), 0 0 54px rgba(157,255,63,.25) !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-ecg{
    bottom:136px !important;
    width:262px !important;
    height:52px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-kicker{
    margin-top:2px !important;
    font-size:.86rem !important;
    letter-spacing:.42em !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-jargon{
    max-width:58ch !important;
    margin-top:12px !important;
    font-size:1.04rem !important;
    line-height:1.55 !important;
  }

  .hero h1{
    margin-top:20px !important;
  }
}


/* =========================
   V4.1 Desktop Logo Stage Text Scale Patch
   Permintaan Evan: tulisan brand dan jargon di stage logo dibesarkan;
   baris jargon dibuat selebar mungkin di desktop. Mobile tidak diubah.
========================= */
@media (min-width: 961px){
  .hero > .wh-cinema-logo .wh-cinema-kicker{
    font-size:clamp(1rem, 1.05vw, 1.22rem) !important;
    letter-spacing:.48em !important;
    line-height:1.15 !important;
    width:100% !important;
    text-align:center !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-jargon{
    width:100% !important;
    max-width:none !important;
    margin:16px auto 0 !important;
    padding:0 10px !important;
    font-size:clamp(1.28rem, 1.55vw, 1.88rem) !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    letter-spacing:-.015em !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-wrap:normal !important;
  }
}

@media (min-width: 961px) and (max-width: 1120px){
  .hero > .wh-cinema-logo .wh-cinema-jargon{
    font-size:clamp(1.08rem, 1.34vw, 1.42rem) !important;
    white-space:normal !important;
    max-width:100% !important;
  }
}

/* =========================
   V4.9 Mobile Logo Harmonization Patch
   Permintaan Evan: logo di HP disamakan treatment-nya dengan desktop/PC.
   Fokus: logo hero dan splash tetap lingkaran, bukan kotak membulat.
========================= */
@media (max-width: 960px){
  .hero > .wh-cinema-logo .wh-cinema-orbit img,
  .wh-cinema-orbit img{
    border-radius:50% !important;
    object-fit:cover !important;
    background:#030503 !important;
    padding:0 !important;
    box-shadow:0 0 0 1px rgba(157,255,63,.14), 0 0 42px rgba(157,255,63,.24) !important;
  }

  .wh-logo-stage img{
    border-radius:50% !important;
    object-fit:cover !important;
    background:#030503 !important;
    box-shadow:0 0 0 1px rgba(157,255,63,.14), 0 0 42px rgba(157,255,63,.24) !important;
  }
}

@media (max-width: 560px){
  .hero > .wh-cinema-logo{
    padding:16px 14px 20px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit{
    width:178px !important;
    height:178px !important;
    margin-bottom:14px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit .ring{
    inset:0 !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit .ring-b{
    inset:25px !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-orbit img{
    width:118px !important;
    height:118px !important;
    aspect-ratio:1/1 !important;
  }

  .hero > .wh-cinema-logo .wh-cinema-ecg{
    bottom:70px !important;
    width:150px !important;
  }
}

/* =========================
   V5.0 Coding Video + Awam Funnel Patch
   Tujuan: homepage terasa seperti preview UI futuristik, tapi flow user awam tetap jelas.
========================= */
.hero .sub{max-width:54ch!important;}
.goal-card h3{line-height:1.18;}
.goal-card p{font-size:.92rem;line-height:1.55;}
.video-lie strong{color:var(--green3,#77ff9f)!important;}

.wh-coded-flow{
  position:relative;
  width:min(var(--max,1220px), calc(100% - 32px));
  margin:clamp(22px,4vw,58px) auto;
  border:1px solid rgba(157,255,63,.18);
  border-radius:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(157,255,63,.18), transparent 26%),
    radial-gradient(circle at 18% 70%, rgba(51,212,111,.10), transparent 34%),
    linear-gradient(135deg, rgba(8,12,10,.96), rgba(12,22,16,.94));
  box-shadow:0 30px 120px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.wh-coded-flow::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(157,255,63,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,255,63,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity:.55;
  animation:whGridDrift 8s linear infinite;
  pointer-events:none;
}
.wh-coded-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
  padding:clamp(24px,5vw,54px);
}
.wh-coded-copy{max-width:520px;}
.wh-coded-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(157,255,63,.22);
  background:rgba(157,255,63,.08);
  color:var(--green3,#77ff9f);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.wh-coded-kicker::before{
  content:'';
  width:8px;height:8px;border-radius:50%;background:var(--green,#33d46f);
  box-shadow:0 0 18px rgba(157,255,63,.8);
}
.wh-coded-copy h2{
  margin:18px 0 12px;
  font-size:clamp(2rem,4vw,4rem);
  line-height:.96;
  letter-spacing:-.07em;
}
.wh-coded-copy p{
  margin:0;
  color:var(--muted,#a6b1aa);
  font-weight:650;
  line-height:1.7;
  font-size:1.02rem;
}
.wh-coded-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.wh-ui-cinema{
  position:relative;
  min-height:420px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 70% 35%, rgba(157,255,63,.18), transparent 26%),
    linear-gradient(180deg, rgba(7,12,9,.94), rgba(3,6,4,.98));
  overflow:hidden;
  padding:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.wh-ui-cinema::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(157,255,63,.08) 42%, rgba(255,255,255,.09) 50%, rgba(157,255,63,.06) 58%, transparent 100%);
  transform:translateX(-120%);
  animation:whScreenSweep 3.8s cubic-bezier(.16,1,.3,1) infinite;
  pointer-events:none;
}
.wh-ui-topline{
  height:42px;
  display:flex;align-items:center;gap:8px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  color:rgba(244,247,245,.72);
  font-size:.72rem;
  letter-spacing:.14em;
}
.wh-ui-topline span{width:10px;height:10px;border-radius:50%;background:rgba(157,255,63,.45);box-shadow:0 0 18px rgba(157,255,63,.34);}
.wh-ui-topline strong{margin-left:auto;white-space:nowrap;}
.wh-ui-scan{
  position:absolute;left:24px;right:24px;top:78px;height:2px;
  background:linear-gradient(90deg, transparent, var(--green3,#77ff9f), transparent);
  box-shadow:0 0 26px rgba(157,255,63,.66);
  animation:whScanDown 3.2s ease-in-out infinite;
  opacity:.9;
}
.wh-ui-code{
  margin-top:18px;
  display:grid;gap:9px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.86rem;
}
.wh-ui-code p{
  margin:0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(157,255,63,.13);
  background:rgba(0,0,0,.20);
  color:rgba(244,247,245,.76);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  animation:whLinePulse 4s ease-in-out infinite;
}
.wh-ui-code p:nth-child(2){animation-delay:.6s}
.wh-ui-code p:nth-child(3){animation-delay:1.2s}
.wh-ui-code b{color:var(--green3,#77ff9f);}
.wh-ui-flow-cards{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.wh-ui-flow-cards div{
  position:relative;
  padding:16px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  animation:whCardPulse 4.2s ease-in-out infinite;
}
.wh-ui-flow-cards div:nth-child(2){animation-delay:.3s}.wh-ui-flow-cards div:nth-child(3){animation-delay:.6s}.wh-ui-flow-cards div:nth-child(4){animation-delay:.9s}
.wh-ui-flow-cards i{color:var(--green3,#77ff9f);font-size:1.2rem;margin-bottom:10px;display:block;}
.wh-ui-flow-cards b{display:block;font-size:.95rem;letter-spacing:-.03em;}
.wh-ui-flow-cards small{display:block;color:var(--muted,#a6b1aa);margin-top:4px;font-weight:700;}
.wh-ui-progress{
  height:12px;
  border-radius:999px;
  margin-top:18px;
  border:1px solid rgba(157,255,63,.16);
  background:rgba(0,0,0,.28);
  overflow:hidden;
}
.wh-ui-progress span{
  display:block;height:100%;width:72%;border-radius:999px;
  background:linear-gradient(90deg, var(--green,#33d46f), var(--green3,#77ff9f));
  box-shadow:0 0 24px rgba(157,255,63,.55);
  animation:whProgress 5s ease-in-out infinite;
}
.wh-ui-caption{
  margin-top:14px;
  color:rgba(244,247,245,.74);
  font-weight:900;
  letter-spacing:-.02em;
  text-align:center;
}
@keyframes whGridDrift{to{background-position:84px 42px,84px 42px}}
@keyframes whScreenSweep{0%,28%{transform:translateX(-120%);opacity:0}42%{opacity:1}70%,100%{transform:translateX(120%);opacity:0}}
@keyframes whScanDown{0%,100%{transform:translateY(0);opacity:.18}45%{transform:translateY(300px);opacity:.9}}
@keyframes whLinePulse{0%,100%{border-color:rgba(157,255,63,.12);color:rgba(244,247,245,.70)}45%{border-color:rgba(157,255,63,.32);color:#fff}}
@keyframes whCardPulse{0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.09)}45%{transform:translateY(-3px);border-color:rgba(157,255,63,.30)}}
@keyframes whProgress{0%,100%{width:36%}55%{width:86%}}

@media (max-width: 960px){
  .wh-coded-grid{grid-template-columns:1fr;padding:24px 18px;}
  .wh-coded-copy h2{font-size:clamp(2rem,9vw,3.2rem);}
  .wh-coded-actions .cta-btn{width:100%;}
  .wh-ui-cinema{min-height:390px;transform:none;border-radius:24px;}
}
@media (max-width: 560px){
  .wh-coded-flow{border-radius:26px;margin:24px auto;}
  .wh-ui-flow-cards{grid-template-columns:1fr 1fr;gap:9px;}
  .wh-ui-flow-cards div{padding:13px 10px;border-radius:16px;}
  .wh-ui-flow-cards b{font-size:.82rem;}
  .wh-ui-code{font-size:.72rem;}
  .wh-ui-topline strong{font-size:.58rem;letter-spacing:.08em;}
}
@media(prefers-reduced-motion:reduce){
  .wh-coded-flow::before,.wh-ui-cinema::before,.wh-ui-scan,.wh-ui-code p,.wh-ui-flow-cards div,.wh-ui-progress span{animation:none!important;}
}


/* =========================
   V5.1 Mobile-First Awam Flow Patch
   Fokus: 1 layar pertama = 1 masalah + 1 janji + 1 tombol.
========================= */
.mobile-promise{display:none;}

@media (max-width: 840px){
  /* Header dibuat seperti app mobile: logo kecil + satu tombol mulai */
  .topbar{
    background:linear-gradient(180deg, rgba(3,5,4,.94), rgba(3,5,4,.72));
    backdrop-filter:blur(16px);
  }
  .topbar-inner{
    width:calc(100% - 22px)!important;
    padding:10px 0!important;
    gap:10px!important;
  }
  .brand{
    min-width:0!important;
    padding-left:4px;
  }
  .brand .a{font-size:.98rem!important;letter-spacing:-.03em;}
  .brand .b{font-size:.66rem!important;letter-spacing:.11em;}
  .top-actions{gap:0!important;margin-left:auto;}
  .top-actions .social-btn,
  .top-actions .cta-btn.dark{display:none!important;}
  .top-actions .cta-btn{
    min-width:0!important;
    width:auto!important;
    padding:10px 14px!important;
    border-radius:999px!important;
    font-size:.84rem!important;
    box-shadow:0 10px 28px rgba(51,212,111,.20)!important;
  }

  /* Intro HP dipercepat: branding tetap ada, tapi tidak menghalangi user panas dari Reels */
  .wh-loader{transition:opacity .28s ease, visibility .28s ease!important;}
  .wh-loader-inner{transform:scale(.82);padding:20px!important;}
  .wh-loader-tag,.wh-loader-bar{display:none!important;}
  .wh-logo-stage{width:118px!important;height:118px!important;margin-bottom:12px!important;}
  .wh-logo-stage img{width:82px!important;height:82px!important;border-radius:50%!important;object-fit:cover!important;}
  .wh-loader-title{font-size:1.05rem!important;letter-spacing:.18em!important;}

  /* Hero mobile: solusi dulu, brand/gym diturunkan agar tidak jadi hambatan */
  .hero{
    width:calc(100% - 22px)!important;
    min-height:auto!important;
    display:block!important;
    padding:18px 0 18px!important;
    margin-top:0!important;
  }
  .hero::before{
    inset:0 -2px 4px!important;
    border-radius:26px!important;
    background:
      radial-gradient(circle at 28% 12%, rgba(157,255,63,.14), transparent 24%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018))!important;
  }
  .hero::after{opacity:.22!important;top:9%!important;}
  .hero > .wh-cinema-logo{display:none!important;}
  .hero > .hero-copy{
    display:block!important;
    padding:22px 14px 18px!important;
    text-align:left!important;
  }
  .eyebrow{
    font-size:.66rem!important;
    letter-spacing:.12em!important;
    padding:7px 10px!important;
    max-width:100%;
  }
  .hero h1{
    margin:14px 0 12px!important;
    font-size:clamp(2.05rem, 10.5vw, 3.15rem)!important;
    line-height:.98!important;
    letter-spacing:-.065em!important;
    max-width:10.5ch!important;
  }
  .hero h1 .accent{margin-top:4px!important;}
  .hero .sub{
    margin:0 0 16px!important;
    max-width:31ch!important;
    font-size:.96rem!important;
    line-height:1.55!important;
    color:rgba(232,244,235,.78)!important;
  }
  .hero-cta{
    margin:0 0 10px!important;
    gap:10px!important;
  }
  .hero .cta-btn{
    width:100%!important;
    min-width:0!important;
    padding:15px 16px!important;
    border-radius:18px!important;
    font-size:.98rem!important;
  }
  .video-lie{display:none!important;}
  .mobile-promise{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:8px 0 14px!important;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(157,255,63,.15);
    background:rgba(157,255,63,.055);
    color:#caffd2;
    font-size:.78rem;
    font-weight:850;
    text-align:center;
  }

  /* Goal cards jadi chip pendek agar user tidak kebanyakan mikir */
  .goal-cards.goal-chips{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:10px 0 12px!important;
  }
  .goal-cards.goal-chips .goal-card{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px 12px!important;
    min-height:48px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.045)!important;
    border-color:rgba(255,255,255,.095)!important;
    box-shadow:none!important;
  }
  .goal-cards.goal-chips .goal-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:12px!important;
    margin:0!important;
    font-size:.9rem!important;
  }
  .goal-cards.goal-chips .goal-card h3{
    margin:0!important;
    font-size:.92rem!important;
    line-height:1.15!important;
    letter-spacing:-.03em!important;
  }
  .goal-cards.goal-chips .goal-card p{display:none!important;}

  .hero-tags{
    gap:6px!important;
    margin-top:8px!important;
    font-size:.72rem!important;
  }
  .hero-tags span{
    padding:6px 8px!important;
    border-radius:999px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
  }
  .wh-hero-microflow{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:11px!important;
    font-size:.76rem!important;
  }
  .wh-hero-microflow i{display:none!important;}
  .wh-hero-microflow span{
    width:100%;
    border-radius:14px!important;
    padding:9px 10px!important;
    background:rgba(0,0,0,.20)!important;
  }

  /* Gym visual tidak boleh mengalahkan solusi awal di HP */
  .hero > .hero-media{
    display:none!important;
  }

  /* Alur 3 langkah dibuat lebih user-facing, bukan istilah developer */
  .wh-coded-flow{
    width:calc(100% - 22px)!important;
    margin:10px auto 24px!important;
    border-radius:24px!important;
  }
  .wh-coded-grid{padding:18px 14px!important;gap:16px!important;}
  .wh-coded-kicker{
    font-size:.66rem!important;
    letter-spacing:.12em!important;
    padding:7px 10px!important;
  }
  .wh-coded-copy h2{
    margin-top:12px!important;
    font-size:clamp(1.65rem,8vw,2.25rem)!important;
    line-height:1.02!important;
  }
  .wh-coded-copy p{font-size:.9rem!important;line-height:1.58!important;}
  .wh-coded-actions{gap:8px!important;}
  .wh-coded-actions .cta-btn{border-radius:16px!important;}
  .wh-ui-cinema{display:none!important;}
}

/* =========================
   V5.2 Trust + Mobile Clarity Patch
   Fokus: domain/trust-ready, first screen jelas, minim noise, user HP tidak disuruh mikir.
========================= */
html,body{max-width:100%;overflow-x:hidden;}
.cta-plain{margin:0 0 18px;color:var(--muted,#a6b1aa);font-weight:650;line-height:1.7;max-width:48ch;}
.trust-stack{display:grid;gap:4px;}
.trust-proof .proof-number{font-size:clamp(1.4rem,3.2vw,2.3rem)!important;letter-spacing:-.05em!important;}
.trust-proof .proof-quote{max-width:520px;}
.sticky-start{display:none;}

@media (max-width: 840px){
  body{background:#050605!important;}
  body::before{opacity:.20!important;}
  body::after{display:none!important;}

  /* Detik pertama: jangan habiskan ruang untuk opening. */
  .wh-loader{display:none!important;}
  .topbar{border-bottom:1px solid rgba(157,255,63,.10)!important;}
  .topbar-inner{min-height:58px!important;}
  .brand .a{font-size:.96rem!important;}
  .brand .b{font-size:.58rem!important;letter-spacing:.16em!important;color:#9dff3f!important;}
  .top-actions .cta-btn{min-height:42px!important;padding:9px 14px!important;}
  .top-actions .cta-btn i{display:none!important;}

  /* First screen: satu masalah, satu janji, satu tombol. */
  .hero{padding:10px 0 12px!important;width:calc(100% - 20px)!important;}
  .hero::before{inset:0!important;border-radius:24px!important;}
  .hero > .hero-copy{padding:18px 13px 14px!important;}
  .eyebrow{font-size:.61rem!important;letter-spacing:.105em!important;}
  .hero h1{font-size:clamp(1.88rem,9.2vw,2.72rem)!important;max-width:11ch!important;margin:12px 0 10px!important;}
  .hero .sub{font-size:.91rem!important;line-height:1.5!important;max-width:32ch!important;margin-bottom:14px!important;}
  .hero .cta-btn{min-height:52px!important;border-radius:16px!important;font-size:.94rem!important;}
  .mobile-promise{font-size:.705rem!important;padding:7px 8px!important;margin:8px 0 10px!important;white-space:normal!important;line-height:1.25!important;}

  /* Pilihan goal tetap ada, tapi tidak terlihat seperti fitur banyak. */
  .goal-cards.goal-chips{grid-template-columns:1fr 1fr 1fr!important;gap:6px!important;margin:8px 0 9px!important;}
  .goal-cards.goal-chips .goal-card{display:grid!important;place-items:center!important;text-align:center!important;padding:8px 6px!important;min-height:70px!important;border-radius:14px!important;gap:5px!important;}
  .goal-cards.goal-chips .goal-icon{width:28px!important;height:28px!important;min-width:28px!important;border-radius:10px!important;font-size:.78rem!important;}
  .goal-cards.goal-chips .goal-card h3{font-size:.72rem!important;line-height:1.12!important;letter-spacing:-.025em!important;}

  /* Trust mini di atas fold harus terbaca cepat. */
  .hero-tags{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:5px!important;margin-top:8px!important;}
  .hero-tags span{justify-content:center!important;text-align:center!important;font-size:.62rem!important;line-height:1.1!important;padding:6px 4px!important;}
  .hero-tags i{display:none!important;}

  /* Microflow tidak boleh menumpuk di layar pertama. */
  .wh-hero-microflow{display:none!important;}

  /* Bagian lanjutan diringkas. */
  .wh-coded-flow{margin:12px auto 18px!important;}
  .wh-coded-copy h2{font-size:clamp(1.46rem,7.4vw,2rem)!important;}
  .wh-coded-actions{display:none!important;}
  .wh-fast-lane{width:calc(100% - 20px)!important;margin:10px auto 18px!important;padding:18px 12px!important;border-radius:24px!important;}
  .wh-fast-lane h2{font-size:1.34rem!important;line-height:1.1!important;letter-spacing:-.045em!important;margin-bottom:12px!important;}
  .wh-fast-grid{grid-template-columns:1fr!important;gap:8px!important;}
  .wh-fast-card{min-height:auto!important;padding:13px 12px!important;border-radius:16px!important;}
  .wh-fast-card i{width:34px!important;height:34px!important;border-radius:12px!important;}
  .wh-fast-card strong{font-size:.94rem!important;}
  .wh-fast-card span{font-size:.78rem!important;line-height:1.35!important;}

  /* Hilangkan noise mobile yang belum perlu untuk cold user. */
  .product-app,.features,.article-section{display:none!important;}
  .problem-wrap{width:calc(100% - 20px)!important;padding:22px 0 8px!important;margin-top:4px!important;}
  .problem-grid{gap:9px!important;margin-top:14px!important;}
  .problem-card{padding:16px 13px!important;border-radius:18px!important;text-align:left!important;display:grid!important;grid-template-columns:42px 1fr!important;column-gap:10px!important;align-items:start!important;}
  .problem-icon{width:40px!important;height:40px!important;border-radius:13px!important;margin:0!important;font-size:1rem!important;grid-row:1 / span 2!important;}
  .problem-card h3{font-size:.96rem!important;margin:0 0 4px!important;}
  .problem-card p{font-size:.78rem!important;line-height:1.35!important;}
  .section-title{font-size:1.48rem!important;line-height:1.1!important;}
  .section-sub{font-size:.88rem!important;line-height:1.45!important;}

  .story{width:calc(100% - 20px)!important;padding:22px 0!important;gap:10px!important;}
  .story-left{min-height:0!important;padding:0!important;}
  .story-left h2{font-size:1.55rem!important;max-width:100%!important;}
  .story-left p{font-size:.86rem!important;line-height:1.55!important;}
  .story-callout{width:100%!important;border-radius:16px!important;padding:12px 13px!important;}
  .story-portrait{display:none!important;}
  .story-quote{font-size:.86rem!important;line-height:1.6!important;padding:15px 14px!important;border-radius:16px!important;}

  .proof{width:calc(100% - 20px)!important;margin:8px auto!important;}
  .proof-inner{padding:16px 14px!important;gap:12px!important;border-radius:20px!important;}
  .trust-proof .proof-number{font-size:1.2rem!important;}
  .proof-copy,.proof-quote{font-size:.78rem!important;line-height:1.5!important;}

  .cta{width:calc(100% - 20px)!important;margin:14px auto 18px!important;}
  .cta-panel{border-radius:22px!important;}
  .cta-left{padding:20px 14px!important;}
  .cta-left h2{font-size:1.65rem!important;line-height:1.05!important;}
  .cta-plain{font-size:.86rem!important;line-height:1.55!important;margin-bottom:14px!important;}
  .cta-row-simple{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;}
  .cta-row-simple .cta-btn{width:100%!important;min-width:0!important;border-radius:16px!important;}
  .bonus{padding:16px 14px!important;}
  .bonus-book{display:none!important;}

  .mini-sections{width:calc(100% - 20px)!important;gap:10px!important;margin:12px auto!important;}
  .mini-card{padding:17px 14px!important;border-radius:20px!important;}
  .faq-item{font-size:.84rem!important;line-height:1.52!important;}
  footer{padding-bottom:78px!important;}
  .footer-inner{width:calc(100% - 20px)!important;gap:14px!important;}
  .footer-copy{font-size:.74rem!important;line-height:1.45!important;}
  .footer-links{gap:10px!important;}
  .footer-links a{font-size:.78rem!important;}

  .sticky-start{display:flex;position:fixed;z-index:70;left:14px;right:14px;bottom:12px;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:18px;background:linear-gradient(180deg,var(--green3,#77ff9f),var(--green,#33d46f));color:#061109;font-weight:950;box-shadow:0 18px 42px rgba(51,212,111,.26),0 0 0 1px rgba(255,255,255,.12) inset;}
}

@media (max-width: 370px){
  .hero h1{font-size:2rem!important;}
  .goal-cards.goal-chips .goal-card h3{font-size:.66rem!important;}
  .mobile-promise{font-size:.66rem!important;}
}