/* =========================================================
   MINEORGIN — THEME LAYER (modern • animated bg • unified footer)
   Dimuat TERAKHIR di semua halaman. Menyatukan style.css + redesign.css.
   ========================================================= */

/* ---------- 1. TOKENS (satu sumber untuk semua halaman) ---------- */
:root{
  --primary:#635bff; --primary-dark:#4f46e5; --primary-glow:rgba(99,91,255,.28);
  --accent:#06b6d4; --secondary:#10b981;
  --bg:#f4f6fc; --bg-card:#ffffff; --bg-nav:rgba(255,255,255,.72);
  --bg-section:rgba(255,255,255,.5);
  --text:#0b1220; --text-muted:#5b6b82; --text-light:#94a3b8; --border:#e3e9f3;
  --shadow:0 10px 40px rgba(30,41,90,.08); --shadow-lg:0 24px 70px rgba(30,41,90,.14);
  --mo-bg:#f4f6fc; --mo-surface:#ffffff; --mo-surface-2:#f6f8fd; --mo-text:#0b1220; --mo-muted:#5b6b82; --mo-line:#e3e9f3;
  --mo-primary:#635bff; --mo-primary-2:#4f46e5; --mo-cyan:#06b6d4; --mo-pink:#ec4899;
  --mo-grad:linear-gradient(135deg,#635bff 0%,#7c5cff 45%,#06b6d4 100%);
  --mo-glass:rgba(255,255,255,.72); --mo-glass-line:rgba(99,91,255,.14);
  --mo-grid:rgba(99,91,255,.07); --mo-orb-op:.55;
  --mo-radius:22px;
}
html[data-theme="dark"]{
  --bg:#070b16; --bg-card:#0e1526; --bg-nav:rgba(7,11,22,.7);
  --bg-section:rgba(14,21,38,.45);
  --text:#f4f7fc; --text-muted:#9aa9c0; --text-light:#6b7a93; --border:#1c2842;
  --shadow:0 10px 40px rgba(0,0,0,.4); --shadow-lg:0 24px 70px rgba(0,0,0,.55);
  --mo-bg:#070b16; --mo-surface:#0e1526; --mo-surface-2:#121b30; --mo-text:#f4f7fc; --mo-muted:#9aa9c0; --mo-line:#1c2842;
  --mo-glass:rgba(14,21,38,.66); --mo-glass-line:rgba(130,140,255,.16);
  --mo-grid:rgba(130,150,255,.07); --mo-orb-op:.42;
}

/* ---------- 2. BASE ---------- */
html{background:var(--mo-bg);scroll-behavior:smooth}
body{background:transparent!important;color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body:before{display:none!important}
::selection{background:rgba(99,91,255,.25)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--mo-primary),var(--mo-cyan));border-radius:10px;border:2px solid var(--mo-bg)}::-webkit-scrollbar-track{background:transparent}

/* scroll progress */
.mo-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--mo-grad);z-index:3000;pointer-events:none;box-shadow:0 0 12px rgba(99,91,255,.6)}

/* ---------- 3. ANIMATED BACKGROUND ---------- */
.mo-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% -10%,rgba(99,91,255,.16),transparent 60%),
    radial-gradient(900px 560px at 95% 8%,rgba(6,182,212,.13),transparent 60%),
    radial-gradient(900px 600px at 50% 115%,rgba(236,72,153,.08),transparent 60%),
    var(--mo-bg)}
.mo-bg-grid{position:absolute;inset:-60px 0 0 0;
  background-image:linear-gradient(var(--mo-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mo-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 25%,transparent 78%);
  animation:moGrid 22s linear infinite}
@keyframes moGrid{to{transform:translateY(56px)}}
.mo-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--mo-orb-op);will-change:transform}
.mo-orb.o1{width:520px;height:520px;left:-120px;top:-100px;background:#635bff;animation:moFloat1 24s ease-in-out infinite alternate}
.mo-orb.o2{width:460px;height:460px;right:-120px;top:18%;background:#06b6d4;animation:moFloat2 28s ease-in-out infinite alternate}
.mo-orb.o3{width:420px;height:420px;left:30%;bottom:-160px;background:#ec4899;opacity:calc(var(--mo-orb-op) * .55);animation:moFloat3 32s ease-in-out infinite alternate}
@keyframes moFloat1{to{transform:translate(180px,140px) scale(1.15)}}
@keyframes moFloat2{to{transform:translate(-160px,200px) scale(.9)}}
@keyframes moFloat3{to{transform:translate(220px,-140px) scale(1.2)}}
.mo-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.mo-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,var(--mo-bg) 130%);opacity:.7}

/* bagian-bagian halaman dibuat transparan supaya background terlihat */
.hero,.market-hero,.layanan,.market-preview,.why-us,.new-products,.order-steps,.testimoni,.faq,.ab-section,.product-section,.filter-wrap,.cta,.cta-section,.testi-hero,.rv-hero,.page-hero{background:transparent!important}
.layanan,.why-us,.order-steps{background:linear-gradient(180deg,transparent,var(--bg-section) 12%,var(--bg-section) 88%,transparent)!important}
[style*="background:var(--bg)"]{background:transparent!important}
.hero-orb{opacity:.35}
#particles{z-index:-1}

/* ---------- 4. NAVBAR ---------- */
header,body>nav{background:var(--mo-glass)!important;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--mo-glass-line)!important;transition:box-shadow .3s,background .3s}
header.scrolled{box-shadow:0 10px 40px rgba(20,25,70,.12)}
body>nav .nav-container,header nav{max-width:1320px!important}
.logo-box{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{border-radius:12px!important;box-shadow:0 8px 24px rgba(99,91,255,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.logo-box:hover .logo-img{transform:rotate(-6deg) scale(1.08)}
.logo-text{font-weight:800;letter-spacing:-.03em}
.logo-text span{background:var(--mo-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}
.nav-center a{position:relative}
.nav-center a:after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:var(--mo-grad);transition:width .3s,left .3s}
.nav-center a:hover:after,.nav-center a.active:after{width:44%;left:28%}

/* ---------- 5. TIPOGRAFI & HERO ---------- */
h1,h2,.section-title{letter-spacing:-.04em}
.hero h1,.market-hero h1,.testi-hero h1{font-weight:900;line-height:1.08}
.highlight,.hero h1 .highlight{background:linear-gradient(100deg,#635bff,#06b6d4,#ec4899,#635bff);background-size:250% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:moShine 7s linear infinite}
@keyframes moShine{to{background-position:250% center}}
.hero-badge,.section-eyebrow,.testi-kicker,.eyebrow{background:rgba(99,91,255,.1)!important;border:1px solid rgba(99,91,255,.22)!important;color:var(--mo-primary)!important;border-radius:999px!important;backdrop-filter:blur(8px)}
.hero-badge{animation:moBadge 4s ease-in-out infinite}
@keyframes moBadge{0%,100%{box-shadow:0 0 0 0 rgba(99,91,255,.28)}50%{box-shadow:0 0 0 10px rgba(99,91,255,0)}}
.hero-sub,.section-subtitle{color:var(--text-muted)}

/* ---------- 6. TOMBOL ---------- */
.btn{border-radius:14px;font-weight:800;letter-spacing:-.01em;position:relative;overflow:hidden}
.btn-primary,.btn-order,.btn-buy,.rv-submit{background:var(--mo-grad)!important;color:#fff!important;border:0!important;box-shadow:0 12px 30px rgba(99,91,255,.32)!important;background-size:160% 160%;transition:transform .25s,box-shadow .25s,background-position .5s}
.btn-primary:hover,.btn-order:hover,.btn-buy:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(99,91,255,.42)!important;background-position:100% 50%}
.btn-primary:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn-primary:hover:before{left:130%}
.btn-secondary,.btn-outline,.btn-ghost{background:var(--mo-glass)!important;border:1px solid var(--mo-glass-line)!important;color:var(--text)!important;backdrop-filter:blur(10px)}
.btn-secondary:hover,.btn-outline:hover,.btn-ghost:hover{transform:translateY(-3px);border-color:var(--mo-primary)!important;color:var(--mo-primary)!important}

/* ---------- 7. KARTU (glass + glow) ---------- */
.layanan-card,.why-card,.testi-card,.home-product-card,.product-card,.faq-item,.hero-svc,.rv-card,.slot,.panel,
.ab-value-card,.ab-trust-card,.ab-tl-item,.bt-guide-card,.domain-card,.vps-card,.vps-feat-item,.vps-faq-item,.ft-tier-card,.ft-spec-card,.ft-region-card,.ft-summary-card,
.mc-card,.mc-why-card,.mc-faq-item,.mc-feat-item,.order-card,.sidebar-buy-card,.sidebar-info-card,.sidebar-rating-card,.review-card,.feature-card,.pricing-card,.cta-box,
.domain-checker-box,.market-preview-card,.plan,.testi-item,.step-card,.order-step{
  background:color-mix(in srgb,var(--mo-surface) 84%,transparent)!important;
  border:1px solid var(--mo-glass-line)!important;border-radius:var(--mo-radius)!important;
  box-shadow:var(--shadow)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s!important;position:relative}
.layanan-card:hover,.why-card:hover,.testi-card:hover,.home-product-card:hover,.product-card:hover,.hero-svc:hover,.slot:hover,
.ab-value-card:hover,.domain-card:hover,.vps-card:hover,.ft-tier-card:hover,.mc-card:hover,.feature-card:hover,.pricing-card:hover,.plan:hover{
  transform:translateY(-8px)!important;border-color:rgba(99,91,255,.45)!important;box-shadow:0 26px 60px rgba(99,91,255,.2)!important}
.product-card .card-thumb{overflow:hidden}.product-card .card-thumb img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}.product-card:hover .card-thumb img{transform:scale(1.07)}
.cta-box{background:linear-gradient(135deg,rgba(99,91,255,.16),rgba(6,182,212,.1))!important;overflow:hidden}
input,textarea,select{transition:border-color .25s,box-shadow .25s}
input:focus,textarea:focus,select:focus{border-color:var(--mo-primary)!important;box-shadow:0 0 0 4px rgba(99,91,255,.14)!important;outline:none}

/* reveal on scroll (diatur oleh theme.js) */
.mo-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.mo-reveal.mo-in{opacity:1;transform:none}

/* ---------- 8. FOOTER SERAGAM (satu desain untuk semua halaman) ---------- */
footer.mo-footer{position:relative;margin-top:90px!important;padding:0!important;background:#060a15!important;color:#cbd5e6!important;border:0!important;overflow:hidden;flex-shrink:0}
footer.mo-footer:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#635bff,#06b6d4,#ec4899,transparent);background-size:200% 100%;animation:moLine 6s linear infinite}
@keyframes moLine{to{background-position:200% 0}}
footer.mo-footer:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 15% 0,rgba(99,91,255,.2),transparent 70%),radial-gradient(500px 300px at 90% 100%,rgba(6,182,212,.14),transparent 70%),linear-gradient(rgba(130,150,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(130,150,255,.05) 1px,transparent 1px);background-size:auto,auto,48px 48px,48px 48px;-webkit-mask-image:linear-gradient(#000,transparent 95%);mask-image:linear-gradient(#000,transparent 95%)}
.mo-footer .mo-f-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:72px 5% 0}
.mo-footer .mo-f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:44px}
.mo-footer .mo-f-brand .logo-box{margin-bottom:18px}
.mo-footer .logo-text{color:#fff!important;font-size:1.15rem}
.mo-footer .mo-f-brand p{color:#94a3b8;font-size:.9rem;line-height:1.75;max-width:340px;margin:0 0 20px}
.mo-footer .mo-f-trust{display:flex;flex-wrap:wrap;gap:8px}
.mo-footer .mo-f-trust span{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:#b6c2d6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:7px 13px;border-radius:999px}
.mo-footer .mo-f-trust svg{width:15px;height:15px;color:#7dd3fc;flex:0 0 15px}
.mo-footer h4{color:#fff!important;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px!important}
.mo-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.mo-footer ul a{color:#94a3b8!important;text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:0;transition:color .2s,transform .2s,gap .2s}
.mo-footer ul a:hover{color:#fff!important;transform:translateX(4px)}
.mo-footer .mo-f-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:56px;padding:26px 30px;border-radius:24px;background:linear-gradient(120deg,rgba(99,91,255,.28),rgba(6,182,212,.16));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.mo-footer .mo-f-cta b{display:block;color:#fff;font-size:1.25rem;letter-spacing:-.02em}
.mo-footer .mo-f-cta small{color:#b6c2d6;font-size:.88rem}
.mo-footer .mo-f-cta a{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:14px;background:#fff;color:#0b1220!important;font-weight:800;font-size:.9rem;text-decoration:none;transition:transform .25s,box-shadow .25s}
.mo-footer .mo-f-cta a:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(255,255,255,.2)}
.mo-footer .mo-f-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:56px;padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:#7a8aa3}
.mo-footer .mo-f-bottom p{margin:0;color:inherit}
.mo-footer .mo-f-legal{display:flex;align-items:center;gap:12px}
.mo-footer .mo-f-legal a{color:#9aa9c0;text-decoration:none}
.mo-footer .mo-f-legal a:hover{color:#fff}
.mo-footer .mo-f-legal i{opacity:.4;font-style:normal}
.mo-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--mo-glass-line);background:var(--mo-glass);backdrop-filter:blur(12px);color:var(--text);cursor:pointer;z-index:900;opacity:0;transform:translateY(14px);pointer-events:none;transition:.3s;box-shadow:var(--shadow)}
.mo-top.show{opacity:1;transform:none;pointer-events:auto}.mo-top:hover{background:var(--mo-grad);color:#fff;border-color:transparent}
.mo-top svg{width:20px;height:20px}

@media(max-width:1000px){.mo-footer .mo-f-grid{grid-template-columns:1fr 1fr 1fr}.mo-footer .mo-f-brand{grid-column:1/-1}}
@media(max-width:620px){
  .mo-top{right:auto;left:16px;bottom:16px}
  .mo-footer .mo-f-inner{padding:52px 20px 0}
  .mo-footer .mo-f-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
  .mo-footer .mo-f-cta{padding:22px;margin-bottom:40px}.mo-footer .mo-f-cta a{width:100%;justify-content:center}
  .mo-footer .mo-f-bottom{flex-direction:column;text-align:center;justify-content:center}
  .mo-orb{filter:blur(50px)}.mo-orb.o1,.mo-orb.o2{width:320px;height:320px}.mo-orb.o3{display:none}
}
@media(prefers-reduced-motion:reduce){.mo-bg-grid,.mo-orb,.highlight,.hero-badge,footer.mo-footer:before{animation:none!important}.mo-reveal{opacity:1!important;transform:none!important}}

/* =========================================================
   NAVBAR SERAGAM — sticky (komponen /nav.js)
   ========================================================= */
header.mo-header{position:-webkit-sticky!important;position:sticky!important;top:0!important;left:0;right:0;z-index:1000!important;width:100%;margin:0!important;padding:0!important;
  background:var(--mo-glass)!important;backdrop-filter:saturate(180%) blur(18px)!important;-webkit-backdrop-filter:saturate(180%) blur(18px)!important;
  border:0!important;border-bottom:1px solid var(--mo-glass-line)!important;box-shadow:none!important;transition:background .3s,box-shadow .3s}
header.mo-header.is-scrolled{box-shadow:0 12px 40px rgba(20,25,70,.14)!important;background:color-mix(in srgb,var(--mo-surface) 86%,transparent)!important}
.mo-nav{max-width:1320px;margin:0 auto;height:76px;padding:0 5%;display:flex;align-items:center;gap:20px;transition:height .3s}
.is-scrolled .mo-nav{height:62px}
.mo-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:-.03em;font-size:1.05rem;white-space:nowrap;flex:0 0 auto}
.mo-brand img{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 8px 22px rgba(99,91,255,.3);transition:transform .35s cubic-bezier(.2,.8,.2,1),width .3s,height .3s}
.is-scrolled .mo-brand img{width:34px;height:34px}
.mo-brand:hover img{transform:rotate(-6deg) scale(1.08)}
.mo-brand b{font-weight:800;background:var(--mo-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mo-links{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;gap:2px}
.mo-links a{position:relative;display:block;padding:9px 12px;border-radius:11px;font-size:.82rem;font-weight:700;color:var(--text-muted);text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.mo-links a:hover{color:var(--text);background:color-mix(in srgb,var(--mo-primary) 9%,transparent)}
.mo-links a.active{color:var(--mo-primary);background:color-mix(in srgb,var(--mo-primary) 13%,transparent)}
.mo-links a.active:after{content:"";position:absolute;left:30%;right:30%;bottom:3px;height:2px;border-radius:2px;background:var(--mo-grad)}
.mo-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mo-cta{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:12px;background:var(--mo-grad);color:#fff!important;font-size:.82rem;font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(99,91,255,.3);transition:transform .25s,box-shadow .25s}
.mo-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(99,91,255,.42)}
.mo-icon-btn{width:40px;height:40px;min-height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--mo-glass-line);background:color-mix(in srgb,var(--mo-surface) 80%,transparent);color:var(--text);cursor:pointer;padding:0;transition:border-color .2s,transform .2s,color .2s}
.mo-icon-btn:hover{border-color:var(--mo-primary);color:var(--mo-primary);transform:translateY(-1px)}
.mo-icon-btn svg{width:18px;height:18px}
.mo-i-sun{display:none}html[data-theme="dark"] .mo-i-sun{display:block}html[data-theme="dark"] .mo-i-moon{display:none}
.mo-burger{display:none;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.mo-burger i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .2s}
.is-open .mo-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}.is-open .mo-burger i:nth-child(2){opacity:0}.is-open .mo-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1180px){
  .mo-burger{display:flex}
  .mo-nav{height:68px}.is-scrolled .mo-nav{height:58px}
  .mo-actions{margin-left:auto}
  .mo-links{position:absolute;left:16px;right:16px;top:calc(100% + 8px);margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;max-height:calc(100vh - 100px);overflow:auto;
    background:var(--mo-surface);border:1px solid var(--mo-glass-line);border-radius:20px;box-shadow:var(--shadow-lg);
    opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .is-open .mo-links{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .mo-links a{padding:13px 14px;font-size:.95rem}
  .mo-links a.active:after{display:none}
}
@media(max-width:560px){.mo-cta span{display:none}.mo-cta{width:40px;height:40px;padding:0;justify-content:center;border-radius:12px}.mo-nav{padding:0 16px;gap:10px}.mo-brand{font-size:.92rem}}

/* sticky navbar: overflow-x:hidden di html/body membuat sticky mati → pakai clip */
html,body{overflow-x:clip!important}

/* ===== Dropdown navbar (Layanan, Info) ===== */
.mo-links .mo-dd{position:relative}
.mo-dd-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border:0;border-radius:11px;background:transparent;font:inherit;font-size:.82rem;font-weight:700;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.mo-dd-btn:hover,.mo-dd.open .mo-dd-btn,.mo-dd:focus-within .mo-dd-btn{color:var(--text);background:color-mix(in srgb,var(--mo-primary) 9%,transparent)}
.mo-dd.has-active .mo-dd-btn{color:var(--mo-primary);background:color-mix(in srgb,var(--mo-primary) 13%,transparent)}
.mo-chev{transition:transform .2s}
.mo-dd.open .mo-chev{transform:rotate(180deg)}
.mo-dd-menu{position:absolute;top:100%;left:0;min-width:220px;margin-top:8px;padding:8px;display:flex;flex-direction:column;gap:2px;
  background:var(--mo-surface);border:1px solid var(--mo-glass-line);border-radius:16px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.mo-dd-menu:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.mo-dd:hover .mo-dd-menu,.mo-dd.open .mo-dd-menu,.mo-dd:focus-within .mo-dd-menu{opacity:1;visibility:visible;transform:none}
.mo-dd-menu a{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
.mo-dd-menu a.active:after{display:none}
.mo-soon{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--mo-primary) 14%,transparent);color:var(--mo-primary)}
@media(max-width:1180px){
  .mo-dd-btn{width:100%;justify-content:space-between;padding:13px 14px;font-size:.95rem;cursor:default;pointer-events:none}
  .mo-chev{display:none}
  .mo-dd-menu{position:static;margin:0 0 4px;padding:0 0 0 10px;min-width:0;border:0;border-left:2px solid var(--mo-glass-line);border-radius:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none}
  .mo-dd-menu:before{display:none}
}

/* ---------- FONT AWESOME + ILUSTRASI (tambahan) ---------- */
.mo-fa{font-size:.86em;width:1.1em;text-align:center;margin-right:7px;opacity:.85}
.mo-links>li>a,.mo-dd-menu a{display:inline-flex;align-items:center}
.mo-dd-menu a{justify-content:flex-start}.mo-dd-menu a .mo-soon{margin-left:auto}
.mo-lbl{display:inline-flex;align-items:center}
.mo-icon-btn i{font-size:1rem;line-height:1}
.mo-i-sun,.mo-i-moon{display:inline-block}
.mo-i-sun{display:none}html[data-theme="dark"] .mo-i-sun{display:inline-block}html[data-theme="dark"] .mo-i-moon{display:none}
.mo-cta i{font-size:1rem}
@media(max-width:1180px){.mo-links>li>a{width:100%}}

/* =========================================================
   PERFORMA & KERAPIAN DESKTOP (override — dimuat paling akhir)
   Tujuan: scroll & animasi mulus, tampilan tidak sesak.
   ========================================================= */

/* --- A. Background: buang blur raksasa yang beranimasi (penyebab utama lemot) --- */
.mo-orb{filter:none!important;will-change:auto;border-radius:50%}
.mo-orb.o1{background:radial-gradient(circle,rgba(99,91,255,.55),transparent 66%)!important;animation:none!important}
.mo-orb.o2{background:radial-gradient(circle,rgba(6,182,212,.5),transparent 66%)!important;animation:none!important}
.mo-orb.o3{background:radial-gradient(circle,rgba(236,72,153,.4),transparent 66%)!important;animation:none!important}
.mo-bg-grid{animation:none!important;-webkit-mask-image:none;mask-image:none;opacity:.55}
.mo-bg:after{display:none}
.mo-bg canvas,#particles{display:none!important}
.hero-orb{display:none!important}

/* --- B. Hentikan animasi tak-berhenti yang memicu repaint terus-menerus --- */
.highlight,.hero h1 .highlight{animation:none!important;background:linear-gradient(100deg,#635bff,#06b6d4 60%,#ec4899);-webkit-background-clip:text;background-clip:text}
.hero-badge{animation:none!important}
footer.mo-footer:before{animation:none!important}

/* --- C. Kartu: tanpa backdrop-filter (mahal), bayangan lebih ringan, transisi hanya transform/shadow --- */
.layanan-card,.why-card,.testi-card,.home-product-card,.product-card,.faq-item,.hero-svc,.rv-card,.slot,.panel,.ab-value-card,.ab-trust-card,.ab-tl-item,.bt-guide-card,.domain-card,.vps-card,.vps-feat-item,.vps-faq-item,.ft-tier-card,.ft-spec-card,.ft-region-card,.ft-summary-card,.mc-card,.mc-why-card,.mc-faq-item,.mc-feat-item,.order-card,.sidebar-buy-card,.sidebar-info-card,.sidebar-rating-card,.review-card,.feature-card,.pricing-card,.cta-box,.domain-checker-box,.market-preview-card,.plan,.testi-item,.step-card,.order-step{
  background:var(--mo-surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 4px 18px rgba(30,41,90,.07)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
html[data-theme="dark"] :is(.layanan-card,.why-card,.testi-card,.home-product-card,.product-card,.faq-item,.hero-svc,.rv-card,.slot,.panel,.ab-value-card,.ab-trust-card,.ab-tl-item,.bt-guide-card,.domain-card,.vps-card,.vps-feat-item,.vps-faq-item,.ft-tier-card,.ft-spec-card,.ft-region-card,.ft-summary-card,.mc-card,.mc-why-card,.mc-faq-item,.mc-feat-item,.order-card,.sidebar-buy-card,.sidebar-info-card,.sidebar-rating-card,.review-card,.feature-card,.pricing-card,.cta-box,.domain-checker-box,.market-preview-card,.plan,.testi-item,.step-card,.order-step){box-shadow:0 4px 18px rgba(0,0,0,.35)!important}
.layanan-card:hover,.why-card:hover,.testi-card:hover,.home-product-card:hover,.product-card:hover,.hero-svc:hover,.slot:hover,.ab-value-card:hover,.domain-card:hover,.vps-card:hover,.ft-tier-card:hover,.mc-card:hover,.feature-card:hover,.pricing-card:hover,.plan:hover{transform:translateY(-4px)!important;box-shadow:0 14px 34px rgba(99,91,255,.16)!important}
.btn-secondary,.btn-outline,.btn-ghost,.hero-badge,.section-eyebrow,.testi-kicker,.eyebrow,.mo-footer .mo-f-cta{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.btn-primary,.btn-order,.btn-buy,.rv-submit{box-shadow:0 8px 20px rgba(99,91,255,.28)!important}
.btn-primary:hover,.btn-order:hover,.btn-buy:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(99,91,255,.36)!important}

/* --- D. Navbar: tetap kaca tapi ringan (blur kecil, tanpa saturate) --- */
header.mo-header{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;background:color-mix(in srgb,var(--mo-surface) 90%,transparent)!important}
.mo-nav{transition:none}
.mo-brand img{width:42px;height:42px;border-radius:0;box-shadow:none;object-fit:contain;background:none}
.is-scrolled .mo-brand img{width:36px;height:36px}
.logo-img{border-radius:0!important;box-shadow:none!important;object-fit:contain}

/* --- E. Reveal on scroll: lebih singkat & ringan --- */
.mo-reveal{transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}

/* --- F. Render hanya yang terlihat (halaman panjang jadi jauh lebih ringan) --- */
main>section:not(:first-child),body>section:not(:first-of-type),footer.mo-footer{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* --- G. Rapikan desktop: lebar konten & jarak antar bagian --- */
@media(min-width:1024px){
  html{font-size:16px}
  .hero,.market-hero,.testi-hero,.rv-hero,.page-hero{padding-top:clamp(56px,7vw,96px)!important;padding-bottom:clamp(40px,5vw,72px)!important}
  .layanan,.market-preview,.why-us,.new-products,.order-steps,.testimoni,.faq,.cta,.cta-section,.ab-section,.product-section{padding-top:clamp(56px,6vw,92px)!important;padding-bottom:clamp(56px,6vw,92px)!important}
  .layanan>*,.market-preview>*,.why-us>*,.new-products>*,.order-steps>*,.testimoni>*,.faq>*,.cta>*,.cta-section>*,.hero>*,.market-hero>*,.ab-section>*,.product-section>*{max-width:1180px;margin-left:auto;margin-right:auto}
  .layanan-grid,.why-grid,.steps-grid,.testi-grid,.home-products,.services-grid,.layanan-cards{gap:28px!important}
  .section-title,.section-header h2{margin-bottom:14px!important}
  .section-subtitle,.hero-sub{max-width:640px;margin-left:auto;margin-right:auto;line-height:1.7}
  .layanan-card,.why-card,.testi-card,.home-product-card,.product-card,.hero-svc,.step-card,.order-step,.feature-card,.pricing-card,.plan{padding:28px!important}
  .hero-svc{margin:0}
  p{line-height:1.7}
}
@media(min-width:1500px){.mo-nav,.mo-footer .mo-f-inner{max-width:1240px}}
@media(max-width:1023px){.mo-reveal{transform:none}}

/* ---------- Ilustrasi hero (disuntik nav.js) ---------- */
.mo-art{display:block;text-align:center;padding:0 5%;margin:-12px auto 8px;pointer-events:none}
.mo-art img{display:block;width:min(100%,560px);height:auto;margin:0 auto}
@media(min-width:1024px){.mo-art{margin:-20px auto 20px}.mo-art img{width:min(100%,620px)}}
@media(max-width:640px){.mo-art img{width:min(100%,360px)}}