/* =========================================================
   VORTEX CMS — SITE CSS (shared semua halaman publik)
   ========================================================= */

*{box-sizing:border-box}
html,body{margin:0!important;padding:0!important;background:#05070d;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;max-width:100%}
img{max-width:100%}
a{-webkit-tap-highlight-color:transparent}

/* ============ PAGE TRANSITION ============ */
#vxPageTransition{position:fixed;inset:0;background:#fff;z-index:999999;opacity:1;pointer-events:all;transition:opacity .45s ease;display:flex;align-items:center;justify-content:center}
#vxPageTransition.vx-hide{opacity:0;pointer-events:none}
#vxPageTransition .vx-loader{width:32px;height:32px;border:3px solid rgba(5,7,13,.12);border-top-color:#05070d;border-radius:50%;animation:vxSpin .7s linear infinite}
@keyframes vxSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ #vxPageTransition .vx-loader{animation:none} }

/* ============ HEADER ============ */
.vx-nav2{position:fixed;top:0;left:0;right:0;z-index:99999;padding:26px 40px;display:flex;justify-content:space-between;align-items:flex-start}
.vx-nav2-logo{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.vx-nav2-logo .vx-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:.5px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.vx-nav2-logo .vx-tagline{font-size:10px;letter-spacing:.5px;color:#fff;opacity:.85;margin-top:4px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.vx-burger{width:46px;height:46px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;background:transparent!important;border:none;flex-shrink:0;outline:none!important;-webkit-tap-highlight-color:transparent}
.vx-burger span{display:block;width:24px;height:2px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .3s ease,opacity .3s ease}
.vx-burger.vx-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vx-burger.vx-open span:nth-child(2){opacity:0}
.vx-burger.vx-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vx-menu-overlay{position:fixed;inset:0;z-index:99998;background:rgba(6,8,14,.97);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}
.vx-menu-overlay.vx-show{opacity:1;visibility:visible}
.vx-menu-list{list-style:none;padding:0;margin:0;text-align:center}
.vx-menu-list li{margin:22px 0}
.vx-menu-list a{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,52px);font-weight:700;color:#fff;text-decoration:none;letter-spacing:-1px;opacity:.85;transition:opacity .2s ease;font-style:normal!important}
.vx-menu-list a:hover{opacity:1}
@media(max-width:600px){.vx-nav2{padding:20px}}

/* ============ SKY-SCROLL ============ */
.vx-scroll-root{position:relative}
.vx-sky-wrap{position:relative;background-image:url('/uploads/2026/08/desktop_seamless_1-scaled-1.webp');background-position:center center;background-repeat:no-repeat;background-size:cover;overflow:hidden}
@media(min-width:1282px){.vx-sky-wrap{background-attachment:fixed}}
@media(max-width:1281px){.vx-sky-wrap{background-image:url('/uploads/2026/08/Desktop-Seamless-scaled-1.png');background-repeat:repeat;background-size:auto;background-position:center top}}
@media(max-width:1024px){.vx-sky-wrap{background-image:url('/uploads/2026/08/Mobile-Seamless-scaled-1.png');background-repeat:repeat;background-size:auto;background-position:center top}}
@media(max-width:767px){.vx-sky-wrap{background-image:url('/uploads/2026/08/mj_digital_photo_realistic_sky_at_golden_hour_intense_blue_and_17edf244_61d1_4fd9_9082_42390e276148_1-scaled-1.webp');background-repeat:repeat;background-size:auto;background-position:center top}}

.vx-panel{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:60px 24px;color:#fff;overflow:hidden}
.vx-cloud{position:absolute;top:0;left:0;height:60%;pointer-events:none;opacity:.9;display:flex}
.vx-cloud img{height:100%;width:auto!important;max-width:none!important;flex-shrink:0;display:block}
.vx-cloud.back{top:2%;z-index:1;animation:vxCloudLoop 90s linear infinite}
.vx-cloud.mid{top:14%;z-index:2;animation:vxCloudLoop 55s linear infinite}
.vx-cloud.front{top:32%;z-index:9;opacity:.7;animation:vxCloudLoop 30s linear infinite}
@keyframes vxCloudLoop{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

.vx-panel-content{position:relative;z-index:5}
.vx-panel-content > *{opacity:0;transform:translateY(28px);transition:opacity 1.3s ease, transform 1.3s ease}
.vx-panel-content.vx-in > *{opacity:1;transform:translateY(0)}
.vx-panel-content > *:nth-child(1){transition-delay:.15s}
.vx-panel-content > *:nth-child(2){transition-delay:.6s}
.vx-panel-content > *:nth-child(3){transition-delay:1.05s}
.vx-panel-content > *:nth-child(4){transition-delay:1.5s}

.vx-panel .vx-tag{display:inline-block;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#fff;font-weight:800;margin-bottom:14px;padding:8px 18px;border-radius:999px;background:rgba(8,10,16,.45);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.vx-panel h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,5.4vw,64px);font-weight:700;letter-spacing:-1.8px;line-height:1.02;margin:0;color:#fff;text-shadow:0 8px 34px rgba(0,0,0,.5)}
.vx-panel .vx-price{margin-top:10px;font-size:20px;font-weight:800;color:#ffd98f;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.vx-panel p{margin-top:12px;max-width:440px;font-size:14.5px;line-height:1.6;color:#fff;opacity:.95;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.vx-panel img.vx-island-img{width:min(420px,72vw);margin-bottom:8px;filter:drop-shadow(0 30px 26px rgba(0,0,0,.4));animation:vxBob 5s ease-in-out infinite}
@keyframes vxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.vx-panel.vx-last:after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:2;pointer-events:none;background:linear-gradient(180deg, rgba(5,7,13,0) 0%, rgba(5,7,13,1) 100%)}

.vx-hero-visual{position:relative;width:min(420px,70vw);margin:0 auto 18px;z-index:5}
.vx-hero-visual img{display:block;width:100%}
.vx-hero-brain{position:relative;z-index:1;animation:vxBob 6s ease-in-out infinite}

.vx-scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;opacity:.9;z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.vx-scrollcue i{width:1px;height:28px;background:linear-gradient(#fff,transparent);animation:vxCue 1.6s ease-in-out infinite}
@keyframes vxCue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

@media(max-width:640px){
  .vx-panel img.vx-island-img{width:96vw !important;max-width:none}
  .vx-hero-visual{width:96vw !important;max-width:none}
}

/* ============ TESTIMONI ============ */
.vx-testi-section{background:#05070d;padding:70px 0 20px;overflow:hidden}
.vx-testi-head{text-align:center;color:#fff;margin-bottom:36px;padding:0 24px}
.vx-testi-head .vx-eyebrow{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:#ffd98f;font-weight:700}
.vx-testi-head h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-1px;margin:10px 0 0;color:#fff}
.vx-testi-head p{color:#9aa0b0;font-size:13.5px;margin-top:10px;max-width:480px;margin-left:auto;margin-right:auto}
.vx-testi-track{display:flex;gap:20px;overflow-x:auto;padding:6px 24px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.vx-testi-track::-webkit-scrollbar{height:6px}
.vx-testi-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:99px}
.vx-testi-card{flex:0 0 auto;width:min(340px,84vw);scroll-snap-align:start;background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column}
.vx-testi-stars{color:#ffd98f;font-size:15px;letter-spacing:2px;margin-bottom:14px}
.vx-testi-quote{color:#d7dae2;font-size:13.5px;line-height:1.75;flex:1;margin:0 0 18px}
.vx-testi-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.vx-testi-name{color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;font-style:normal!important}
.vx-testi-name:hover{color:#ffd98f}
.vx-testi-src{display:flex;align-items:center;gap:5px;font-size:10.5px;color:#7d8290;font-weight:700;white-space:nowrap}
.vx-testi-src svg{width:13px;height:13px;flex-shrink:0}
.vx-testi-hint{text-align:center;color:#5c6170;font-size:11px;margin-top:2px;letter-spacing:.5px}
@media(min-width:900px){.vx-testi-track{justify-content:center}}

/* ============ LOGO MARQUEE ============ */
.vx-logos-section{background:#05070d;padding:70px 0 80px;overflow:hidden}
.vx-logos-head{text-align:center;color:#fff;margin-bottom:40px;padding:0 24px}
.vx-logos-head .vx-eyebrow{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:#ffd98f;font-weight:700}
.vx-logos-head h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-1px;margin:10px 0 0;color:#fff}
.vx-logos-head p{color:#9aa0b0;font-size:13.5px;margin-top:10px;max-width:480px;margin-left:auto;margin-right:auto}
.vx-marquee-row{display:flex;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vx-marquee-track{display:flex;align-items:center;gap:64px;flex-shrink:0;padding:0 32px;animation:vxMarquee 80s linear infinite;will-change:transform;backface-visibility:hidden}
.vx-marquee-track img{height:48px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:opacity .25s ease}
.vx-marquee-track .vx-text-logo{height:48px;display:flex;align-items:center;font-family:'Space Grotesk','Noto Sans SC',sans-serif;font-weight:700;font-size:21px;letter-spacing:.5px;color:#fff;opacity:.55;white-space:nowrap;transition:opacity .25s ease}
.vx-marquee-track .vx-text-logo:hover,.vx-marquee-track img:hover{opacity:1}
@keyframes vxMarquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

/* ============ FLOATING WA BUTTON ============ */
.vx-wa-float{position:fixed!important;left:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:#25d366!important;color:#fff;display:grid;place-items:center;z-index:9999;box-shadow:0 10px 30px rgba(37,211,102,.4);animation:vxWaPulse 2s infinite;transform:none!important;text-decoration:none}
.vx-wa-float svg{width:31px;height:31px;display:block}
.vx-wa-float:after{content:"";position:absolute;inset:-7px;border:2px solid rgba(37,211,102,.3);border-radius:50%;animation:vxWaRing 2s infinite}
@keyframes vxWaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes vxWaRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.3);opacity:0}}
@media(max-width:640px){.vx-wa-float{left:16px;bottom:16px;width:54px;height:54px}.vx-wa-float svg{width:27px;height:27px}}

/* ============ FOOTER ============ */
.vx-site-footer{position:relative;z-index:5;text-align:center;padding:50px 24px 60px;color:#6b7080;font-size:12px;line-height:2;background:#05070d}
.vx-site-footer b{color:#fff;display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;margin-bottom:6px}

/* ============ SUBMENU (dropdown di dalam menu overlay) ============ */
.vx-menu-has-sub{display:flex;flex-direction:column;align-items:center}
.vx-menu-sub-toggle{background:none!important;border:none;font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,52px);font-weight:700;color:#fff;letter-spacing:-1px;opacity:.85;cursor:pointer;padding:0;outline:none!important;-webkit-tap-highlight-color:transparent!important}
.vx-menu-caret{font-size:.5em;display:inline-block;transition:transform .25s ease;vertical-align:middle}
.vx-menu-has-sub.vx-sub-open .vx-menu-caret{transform:rotate(180deg)}
.vx-menu-sublist{list-style:none;padding:0;margin:0;max-height:0;overflow:hidden;transition:max-height .35s ease}
.vx-menu-has-sub.vx-sub-open .vx-menu-sublist{max-height:400px}
.vx-menu-sublist li{margin:14px 0 0}
.vx-menu-sublist a{font-size:clamp(16px,2.6vw,24px)!important;opacity:.7}