
/* ==========================================================
   DxM Hoster — Premium White + Light Blue UI System
   ========================================================== */
:root{
  --dxm-primary:#168cff;
  --dxm-primary-2:#54b7ff;
  --dxm-ink:#0b1f3a;
  --dxm-muted:#61738b;
  --dxm-soft:#eef8ff;
  --dxm-line:#dcecf9;
  --dxm-white:#fff;
  --dxm-shadow:0 18px 55px rgba(24,111,180,.12);
  --dxm-shadow-sm:0 10px 30px rgba(24,111,180,.10);
  --dxm-radius:20px;
}
html{scroll-behavior:smooth}
body{
  background:#f8fcff!important;
  color:var(--dxm-muted)!important;
  font-family:Inter,"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  line-height:1.7!important;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
   radial-gradient(circle at 10% 10%,rgba(84,183,255,.10),transparent 28%),
   radial-gradient(circle at 90% 20%,rgba(22,140,255,.08),transparent 30%),
   radial-gradient(circle at 50% 100%,rgba(84,183,255,.07),transparent 35%);
}
h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4{
  color:var(--dxm-ink)!important;
  letter-spacing:-.025em;
}
a{transition:all .25s ease}
img{user-select:none}
::selection{background:rgba(22,140,255,.18);color:var(--dxm-ink)}
/* top bar */
.header-top{
  background:#f1f9ff!important;
  border-bottom:1px solid var(--dxm-line)!important;
  color:#46627d!important;
  padding:7px 0!important;
  font-size:13px!important;
}
.header-top a{color:#45647f!important}
.header-top a:hover{color:var(--dxm-primary)!important}
.top_header{min-height:34px}
/* main navigation */
.bb-header-container{position:relative;z-index:1000}
.bbhd-sticky{
  background:rgba(255,255,255,.84)!important;
  border:1px solid rgba(220,236,249,.9)!important;
  box-shadow:0 10px 35px rgba(17,94,151,.07)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-radius:0 0 18px 18px!important;
}
.bbhd-flexbox-container{min-height:78px!important;padding:0 20px}
.bbhd-logo img{max-height:48px!important;width:auto!important;transition:transform .3s ease}
.bbhd-logo:hover img{transform:scale(1.04)}
.bbhd-menu .menu>li>a{
  color:var(--dxm-ink)!important;
  font-weight:700!important;
  padding:29px 14px!important;
  position:relative;
}
.bbhd-menu .menu>li>a:after{
  content:"";position:absolute;left:14px;right:14px;bottom:17px;height:2px;
  background:linear-gradient(90deg,var(--dxm-primary),var(--dxm-primary-2));
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease;border-radius:5px;
}
.bbhd-menu .menu>li:hover>a,.bbhd-menu .menu>li.active>a{color:var(--dxm-primary)!important}
.bbhd-menu .menu>li:hover>a:after,.bbhd-menu .menu>li.active>a:after{transform:scaleX(1)}
.bb-dropdown-menu{
  background:rgba(255,255,255,.97)!important;
  border:1px solid var(--dxm-line)!important;
  border-radius:14px!important;
  box-shadow:var(--dxm-shadow)!important;
  padding:8px!important;
  overflow:hidden;
}
.bb-dropdown-menu li a{
  color:var(--dxm-ink)!important;border-radius:10px!important;padding:11px 14px!important;
}
.bb-dropdown-menu li a:hover{background:var(--dxm-soft)!important;color:var(--dxm-primary)!important}
/* common sections */
.section,.dkongpad,.install-area,.services-area,.hostkpln{position:relative}
.section{padding:90px 0!important}
.gray-bg{background:linear-gradient(180deg,#f5fbff,#fff)!important}
.white-bg{background:#fff!important}
.card,.media,.item,.host-care-area .care-item,.rt-price-2 .rt-price-box{
  border:1px solid var(--dxm-line)!important;
  box-shadow:var(--dxm-shadow-sm)!important;
  border-radius:var(--dxm-radius)!important;
  background:rgba(255,255,255,.92)!important;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease!important;
}
.card:hover,.media:hover,.item:hover,.host-care-area .care-item:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 25px 65px rgba(24,111,180,.16)!important;
  border-color:#b9def8!important;
}
.hover-top:hover{transform:translateY(-8px)!important}
.rt-btn,.m-btn,.comment-respond input[type=submit]{
  background:linear-gradient(135deg,var(--dxm-primary),var(--dxm-primary-2))!important;
  color:#fff!important;border:0!important;border-radius:12px!important;
  box-shadow:0 12px 30px rgba(22,140,255,.22)!important;
  padding:13px 26px!important;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease!important;
}
.rt-btn:hover,.m-btn:hover,.comment-respond input[type=submit]:hover{
  transform:translateY(-3px);filter:saturate(1.08);box-shadow:0 18px 38px rgba(22,140,255,.28)!important
}
.host-section-title i{
  background:linear-gradient(135deg,var(--dxm-primary),var(--dxm-primary-2))!important;
  box-shadow:0 12px 30px rgba(22,140,255,.22)!important;
  border-color:#fff!important;
}
.theme-color,.green-color{color:var(--dxm-primary)!important}
.theme-bg,.green-bg{background:var(--dxm-primary)!important}
.theme-g-bg{background:linear-gradient(135deg,#edf8ff,#fff)!important}
.green-bg-alt{background:rgba(22,140,255,.09)!important}
.badge-primary-soft{background:rgba(22,140,255,.10)!important;color:var(--dxm-primary)!important}
/* pricing */
.rt-price-2 .price-hrader,.rt-price-box{
  background:#fff!important;border-color:var(--dxm-line)!important;border-radius:24px!important
}
.rt-price-2 .price-hrader .header-title span{color:var(--dxm-primary)!important}
.rt-gradient4,.rt-gradient,.rt-gradient2{
  background:linear-gradient(135deg,var(--dxm-primary),var(--dxm-primary-2))!important
}
/* decorative moving blobs */
.dxm-orb{position:absolute;width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,rgba(84,183,255,.22),rgba(22,140,255,.04));filter:blur(1px);animation:dxmFloat 8s ease-in-out infinite;pointer-events:none;z-index:0}
.dxm-orb.one{top:8%;right:4%}.dxm-orb.two{bottom:8%;left:2%;width:130px;height:130px;animation-delay:-3s}
@keyframes dxmFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-25px,0) scale(1.05)}}
/* reveal */
.dxm-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.dxm-reveal.dxm-visible{opacity:1;transform:none}
/* app icons */
.install-list-item li{transition:transform .35s ease,filter .35s ease}
.install-list-item li:hover{transform:translateY(-10px) scale(1.06);filter:drop-shadow(0 12px 20px rgba(22,140,255,.16))}
/* footer */
.tw-footer{
  background:linear-gradient(145deg,#071b31,#0d3558)!important;
  color:#c8e3f6!important;
  padding-top:95px!important;
}
.tw-footer h3,.tw-footer h4,.tw-footer p,.tw-footer span{color:inherit!important}
.tw-footer .tw-footer-info-box{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:22px!important;backdrop-filter:blur(14px)}
.tw-footer .footer-widget a,.tw-footer .copyright a{color:#b8d9ef!important}
.tw-footer .footer-widget a:hover,.tw-footer .copyright a:hover{color:#fff!important}
.copyright{background:rgba(0,0,0,.18)!important;border-top:1px solid rgba(255,255,255,.08)}
/* WhatsApp */
.whatsapp-button{
  background:linear-gradient(135deg,#16b866,#38d889)!important;
  box-shadow:0 12px 28px rgba(22,184,102,.25)!important;
  transition:transform .25s ease!important;
}
.whatsapp-button:hover{transform:translateY(-5px) scale(1.04)!important}
/* custom cursor */
.dxm-cursor,.dxm-cursor-dot{position:fixed;pointer-events:none;z-index:99999;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;opacity:0;transition:opacity .2s ease}
.dxm-cursor{width:34px;height:34px;border:1px solid rgba(22,140,255,.7);transition:width .2s ease,height .2s ease,background .2s ease,opacity .2s ease}
.dxm-cursor-dot{width:6px;height:6px;background:var(--dxm-primary);box-shadow:0 0 15px rgba(22,140,255,.55)}
body.dxm-cursor-on{cursor:none}
body.dxm-cursor-on a,body.dxm-cursor-on button{cursor:none}
.dxm-cursor.hover{width:52px;height:52px;background:rgba(22,140,255,.08)}
/* click ripple */
.dxm-ripple{position:fixed;width:14px;height:14px;border-radius:50%;border:2px solid var(--dxm-primary);pointer-events:none;z-index:99998;animation:dxmRipple .65s ease-out forwards}
@keyframes dxmRipple{to{width:90px;height:90px;opacity:0;margin-left:-38px;margin-top:-38px}}
/* scroll progress */
.dxm-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--dxm-primary),#73d0ff);z-index:100000}
/* mobile */
@media(max-width:991px){
 .bbhd-flexbox-container{min-height:66px!important}
 .bbhd-logo img{max-height:42px!important}
 .section{padding:65px 0!important}
 .bbhd-menu .menu>li>a{padding:13px 20px!important}
 .bbhd-menu .menu>li>a:after{display:none}
}
@media(max-width:767px){
 .header-top{font-size:12px!important}
 .section{padding:55px 0!important}
 .dxm-cursor,.dxm-cursor-dot{display:none!important}
 body.dxm-cursor-on{cursor:auto}
 .display-4{font-size:2rem!important}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Hero / home */
#home.effect-section{
  min-height:680px!important;
  display:flex;align-items:center;
  background:
    radial-gradient(circle at 15% 25%,rgba(84,183,255,.20),transparent 30%),
    radial-gradient(circle at 85% 70%,rgba(22,140,255,.14),transparent 32%),
    linear-gradient(135deg,#f8fdff 0%,#eaf7ff 52%,#fff 100%)!important;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--dxm-line);
}
#home.effect-section:before,#home.effect-section:after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  border:1px solid rgba(22,140,255,.12);animation:dxmOrbit 12s linear infinite;
}
#home.effect-section:before{width:520px;height:520px;right:-180px;top:-170px}
#home.effect-section:after{width:320px;height:320px;left:-150px;bottom:-160px;animation-direction:reverse}
@keyframes dxmOrbit{from{transform:rotate(0deg) translateX(12px) rotate(0deg)}to{transform:rotate(360deg) translateX(12px) rotate(-360deg)}}
#home h1,#home .display-1,#home .display-2{
  font-weight:800!important;
  background:linear-gradient(90deg,#0b1f3a,#168cff,#54b7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
#home .lead,#home p{color:#58708a}
#home .container{position:relative;z-index:2}
#home .m-btn,#home .rt-btn{min-width:155px}
.dxm-nav-cta{
  display:inline-flex!important;align-items:center;gap:7px;
  margin:18px 8px 18px 12px;padding:10px 17px!important;
  border-radius:11px!important;color:#fff!important;
  background:linear-gradient(135deg,#168cff,#54b7ff)!important;
  box-shadow:0 9px 22px rgba(22,140,255,.2)!important;
}
.dxm-nav-cta:hover{transform:translateY(-2px);color:#fff!important}
@media(max-width:991px){.dxm-nav-cta{margin:10px 20px!important;display:inline-flex!important}}
