html{-webkit-tap-highlight-color:transparent}
.phone{box-shadow:0 30px 60px -20px rgba(30,64,175,.28)}
.dotgrid{background-image:radial-gradient(rgba(255,255,255,.22) 1.5px,transparent 1.5px);background-size:26px 26px}
.float-slow{will-change:transform}
/* --- Header v2 --- */
.nav-link{position:relative;padding:.4rem 0}
.nav-link::after{content:'';position:absolute;left:0;bottom:0;height:2.5px;width:0;border-radius:99px;background:linear-gradient(90deg,#12C6A8,#3D7BF7);transition:width .3s}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:#3D7BF7}
#topStrip{max-height:44px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s}
#siteHeader{transition:all .35s cubic-bezier(.4,0,.2,1)}
#siteHeader .header-shell{position:relative;transition:all .35s}
#siteHeader .header-shell::before{content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,rgba(18,198,168,.55),rgba(61,123,247,.55));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;transition:opacity .35s}
#siteHeader.scrolled #topStrip{max-height:0;opacity:0}
#siteHeader.scrolled .header-shell{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);box-shadow:0 12px 32px -12px rgba(30,64,175,.28)}
#siteHeader.scrolled .header-shell::before{opacity:1}
#siteHeader.scrolled {
    padding-top: 1.3rem;
}
#scrollBar{transform-origin:0 50%}
/* --- Hero slider --- */
.hslide,.xslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.hslide.on,.xslide.on{opacity:1;visibility:visible;z-index:1}
.hslide .media,.xslide .media{position:absolute;inset:0}
.hslide .media img,.hslide .media video,.xslide .media img,.xslide .media video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 7s linear}
.hslide.on .media img,.hslide.on .media video,.xslide.on .media img,.xslide.on .media video{transform:scale(1)}
.hdot,.xdot{height:.55rem;width:.55rem;border-radius:99px;background:rgba(255,255,255,.45);transition:all .35s}
.hdot.on,.xdot.on{width:2.2rem;background:linear-gradient(90deg,#12C6A8,#7db2ff)}
.harrow,.xarrow{transition:all .25s}
.harrow:hover,.xarrow:hover{background:rgba(255,255,255,.25);transform:scale(1.06)}
.hslide .media .media-video,.xslide .media .media-video{position:absolute;inset:0}
.hslide .media .media-video video,.xslide .media .media-video video{width:100%;height:100%;object-fit:cover}
#heroSlider,#xhHero{touch-action:pan-y}
@media (max-width:639px){
  #heroSlider .slide-content h1,#heroSlider .slide-content h2,#xhHero .slide-content h1,#xhHero .slide-content h2{font-size:2rem;line-height:1.2}
  #heroSlider .slide-content p,#xhHero .slide-content p{font-size:1rem}
  #heroSlider .slide-content .flex.flex-wrap a,#xhHero .slide-content .flex.flex-wrap a{padding:.85rem 1.5rem}
  #hDots,#xhDots{bottom:1.25rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .hslide .media img,.hslide .media video,.xslide .media img,.xslide .media video{transform:none!important}
}
/* --- Responsive video embeds (Xhuma for biz) --- */
.video-shell{position:relative;width:100%;aspect-ratio:16/9}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* --- Phone screenshot blocks (home) --- */
.phone-frame-center{display:flex;justify-content:center}
.phone-frame-center img{max-width:100%;height:auto}
/* --- Privacy policy typography --- */
.policy p{margin-top:1rem;line-height:1.75}
.policy h3{margin-top:2.25rem;font-size:1.2rem;font-weight:900;color:#0f172a;scroll-margin-top:7rem}
.policy h2{scroll-margin-top:7rem}
.policy ul,.policy ol{margin-top:1rem;padding-left:1.5rem;list-style:disc}
.policy li{margin-top:.4rem;line-height:1.7}
.app-bg-xhuma{
  background-image: url(assets/mobile-app-bg.jpg);
  background-repeat: no-repeat;
  height: 550px;
  width: 100%;
  background-size: cover;
  overflow: hidden;
  background-position: 50% 50%;
}
@media (max-width:767px){
  /* on phones the fixed 550px height clips the text/buttons — let it grow */
  .app-bg-xhuma{height:auto;min-height:550px}
}
.mobile-app-modal {
    padding: 16px;
    border-radius: 42px;
    max-width: 268px;
    margin: 0 auto 0;
    box-shadow: 0 0 50px #6852fe;
}
.mobile-app-modal img {
    border-radius: 22px;
}
.apps-touch-connect a img {
    width: 160px;
}