/* start main */
main .main-slide{background: #e3ebff; padding: 130px 0 100px; position: relative;overflow: hidden;}
/* main .main-slide{background: #d4ddf5; padding: 100px 0; position: relative;} */
main .main-slide .slide-img::after {background: url(../images/home-img/round-shape.png) no-repeat;background-size: cover;content: '';position: absolute;top: auto; left: -117%;width: 450px; height: 130px;transform-origin: 50% 50%;opacity: 1;transform: translate(-1px, 1px);visibility: visible;z-index: 1; bottom: -340px; animation: fadeInUp;animation-duration: 4s;}
.rs-parallax-wrap{position: absolute; display: block;pointer-events: auto;left: 965.5px;top: -40px;z-index: 0;visibility: visible;perspective: 601px;}
.rs-parallax-wrap .inner-box{position:absolute;display:block;}
.rs-parallax-wrap .animate-box{position: absolute; display: block; overflow: visible;}
.rs-parallax-wrap .animate-box .rs-layer {z-index: 1;display: block;width: 1060px;height: 1000px;min-height: 0px;min-width: 0px;max-height: none;max-width: none;transform-origin: 50% 50%;opacity: 1;transform: translate(-1px, 1px);visibility: visible;position: relative;}
.rs-parallax-wrap .animate-box .rs-layer .shape-bg{position: relative; height: 100%; width: 100%;animation: MoveUpDownSeven 7s linear infinite;}

@keyframes MoveUpDownSeven {
  0%, 100% {
    bottom: 100px;
  }
  50% {
    bottom: 200px;
  }
}

main .main-slide .slide-img{z-index: 1; position: relative;}
main .main-slide .slide-right-content{z-index: 1;position: relative;}
main .main-slide .slide-right-content h1{font-weight: 700; font-size: 36px;}
main .main-slide .slide-right-content p{font-size: 16px;line-height: 26px;font-weight: 500; margin: 16px 0;}
main .main-slide .slide-right-content .right-btn{display: flex; align-items: center; padding-left: 0;z-index: 2;position: relative;}
main .main-slide .slide-right-content .right-btn li{padding-right: 30px;}
main .main-slide .slide-right-content .right-btn .btn-bg{outline-color: var(--themepink); color: var(--themepink);}
main .main-slide .slide-right-content .right-btn .btn-bg:hover{background: var(--themepink);outline-color: rgba(228, 136, 217, 0); color: var(--secondarycolor); box-shadow: none;}
main .main-slide .animateblock .nectar-highlighted-text .nectar-scribble path {stroke-dasharray: 1;stroke-dashoffset: 1;opacity: 0;}
main .main-slide .slide-right-content em.animated .nectar-scribble path {stroke-linecap: round;opacity: 1;animation: nectarStrokeAnimation 1.3s cubic-bezier(.65,0,.35,1) forwards;}
main .main-slide .line{ border-top-width: 0px;animation-name: line_animation;animation-duration: .6s;animation-timing-function: linear; -webkit-animation-fill-mode: forwards;} 
  
@keyframes line {
  from {
    left:50%;
    width:0%;
  }
  to {
    left:5%;
    width:100%;
  }
}

main .main-slide .slide-right-content .bulltet-list{padding-left: 0; margin-top: 20px;}
main .main-slide .slide-right-content .bulltet-list li{font-size: 18px; line-height: 32px;font-weight: 500;margin-bottom: 10px;	position: relative;	padding-left: 30px;}
main .main-slide .slide-right-content .bulltet-list li img{	position: absolute;	left: 0;height: 30px;	width: 30px;color: var(--txttheme);	display: inline-block;line-height: 28px;transition: all .4s ease;}
main .main-slide .line {width:0%;animation: line 2s linear forwards;animation-duration: .6s;padding-right: 175px;}
main .logo-sec-bg{background: var(--secondarycolor); padding: 50px 0 100px;}
main .logo-sec-bg .logo-sec .img-item{width: auto; filter: grayscale(100%); transition: all .4s ease-in;}
main .logo-sec-bg .logo-sec .img-item:hover{filter: none;}
main .logo-sec-bg .logo-sec .owl-carousel .item{display: flex; justify-content: center;}



#main{height: 500px;width: 100%;position: relative;}
#main img{width:100%;}
#performance {position: absolute;bottom: 10px;right: 62%;z-index: 1;width: 39%;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);}
#performance img{width:100%;}
#employee{position: absolute;top: 54%;left: -11%;z-index: 1;width: 25%;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);display: none;}
#employee img{width:100%;}
#maindash{position: absolute;top: 67px;right: -30px;width: 100%;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);}
#maindash img{width:100%;}
#bgboxone{ position: absolute;bottom: 0%;left: 20%;z-index: -1;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);display: none;}
#bgboxone img{width:100%;}
#bgboxtwo{position: absolute;top: 66%;left: -14%;z-index: -1;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);width: 39%;display: none;}
#bgboxtwo img{width:100%;}
#maindash .video{position: relative;}
#maindash .video object{border-radius: 16px;width: 800px}
#maindash .video::before {content: '';position: absolute;right: -100px;top: -52px;background: url(../images/home-img/image-bg.png);height: 100%;width: 750px;z-index: -1;animation: backInRight;animation-duration: 4s;}
#maindash .video::after {content: '';position: absolute;right: -80px;top: -25px;background: url(../images/home-img/image-bg.png);height: 100%;width: 770px;z-index: -1;animation: backInRight;animation-duration: 3s;}
.round-shape{position: absolute;bottom: -60%;right: 0%;animation: fadeInUp 5s;}
.bordered-shape{position: absolute;top: 0;left: -100%;animation: zoom-in-zoom-out 3s ease infinite;}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


/* elements-background */
.circles{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.circles li{position: absolute;display: block;list-style: none;width: 20px;height: 20px; background: rgb(38, 141, 254, 0.1);animation: animate 25s linear infinite;bottom: -150px;}
.circles li:nth-child(1){left: 25%;width: 80px;height: 80px;animation-delay: 0s;}
.circles li:nth-child(2){left: 10%;width: 20px;height: 20px;animation-delay: 2s;animation-duration: 12s;}
.circles li:nth-child(3){left: 70%;width: 20px;height: 20px;animation-delay: 4s;}
.circles li:nth-child(4){left: 40%;width: 60px;height: 60px; animation-delay: 0s;animation-duration: 18s;}
.circles li:nth-child(5){left: 65%;width: 20px;height: 20px;animation-delay: 0s;}
.circles li:nth-child(6){left: 75%;width: 110px;height: 110px;animation-delay: 3s;}
.circles li:nth-child(7){left: 35%;width: 150px;height: 150px;animation-delay: 7s;}
.circles li:nth-child(8){left: 50%;width: 25px;height: 25px;animation-delay: 15s;animation-duration: 45s;}
.circles li:nth-child(9){left: 20%;width: 15px;height: 15px;animation-delay: 2s;animation-duration: 35s;}
.circles li:nth-child(10){left: 85%; width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/* nav-tabs-sec */
main .marketing-sec{padding-bottom: 0;}
main .marketing-sec .tab-btn-sec{background: var(--secondarycolor);min-height: 560px;}
main .marketing-sec .tab-btn-sec .tab-bg{background: #D8E6F3;}


main .marketing-sec .top-sec-bg{background: var(--secondarycolor);padding: 50px 0 0;}
main .marketing-sec .sec-title{font-weight: 700; font-size: 40px;text-align: center;max-width: 1080px;margin: 0 auto 70px;line-height: 55px;}
main .marketing-sec .nav-tab-top{display: flex; justify-content: center;}
main .marketing-sec .tab-btn-sec .tab-btns{display: flex; justify-content: center; border-bottom: none;} 
main .marketing-sec .tab-btn-sec .tab-btns .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{border-top: 2px solid var(--themecolor); padding: 10px 25px;background-color: #d8e6f3;}
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text .right-title{font-weight: 700;font-size: 35px;margin-bottom: 25px; color: var(--txttheme);}
main .marketing-sec .tab-btn-sec .inner-content .marketing-right-text p{font-size: 17px;line-height: 32px;font-weight: 500;}
main .marketing-sec .grid{list-style: none;margin-left: -40px;}
main .marketing-sec .gc {box-sizing: border-box;display: inline-block;margin-right: -0.25em;min-height: 1px;padding-left: 40px;vertical-align: top;}
main .marketing-sec .naccs{position: relative;max-width: 900px;margin: 0 auto 0;}
main .marketing-sec .naccs .menu div {padding: 15px 20px 15px 40px;margin-bottom: 10px;color: #99cbf1;background: var(--themecolor);box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);cursor: pointer;position: relative;vertical-align: middle;font-weight: 700;transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);}
main .marketing-sec .naccs .menu div:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
main .marketing-sec .naccs .menu div span.light {height: 10px;width: 10px;position: absolute;top: 24px;left: 15px;background-color: #99cbf1;border-radius: 100%;transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);}
main .marketing-sec .naccs .menu div.active span.light {background-color: #e48258;left: 0;height: 100%;width: 3px;top: 0;border-radius: 0;}
main .marketing-sec .naccs .menu div.active {color: var(--secondarycolor);padding: 15px 20px 15px 20px;}
main .marketing-sec ul.nacc {position: relative; height: 0px;list-style: none;margin: 0;padding: 0;transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);}
main .marketing-sec ul.nacc li {opacity: 0; transform: translateX(50px);position: absolute;list-style: none;transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);}
main .marketing-sec ul.nacc li.active {transition-delay: 0.3s;z-index: 2;opacity: 1;transform: translateX(0px);}
main .marketing-sec ul.nacc li p {margin: 10px; font-size: 15px; line-height: 28px; font-weight: 500;}
main .marketing-sec .demo-btn .marketing-demo-btn{display: flex;justify-content: center; align-items: center;padding-left: 0;}
main .marketing-sec .demo-btn .marketing-demo-btn li{padding-right: 20px;}
main .marketing-sec .demo-btn .marketing-demo-btn li .btn-bg{outline-color: var(--themepink);color: var(--themepink);}
main .marketing-sec .demo-btn .marketing-demo-btn li .btn-bg:hover {background: var(--themepink);outline-color: rgba(228, 136, 217, 0);color: var(--secondarycolor);box-shadow: none;}
main .marketing-sec .nav-link{font-weight: 600; font-size: 20px;}

main .scroll-bg{padding: 0 100px 100px;}
main .parallax-item{position: relative;height: 600px;width: 100%;background: url(../images/home-img/animated-bg.webp);background-size: 190%;border-radius: 20px;display: flex; align-items: flex-end; justify-content: center;background-attachment: fixed;background-position: center;background-size: cover;background-repeat: no-repeat;}
main .parallax-item::before{position: absolute;top: 0; left: 0; height: 600px;width: 100%;background: rgba(0, 0, 0, 0.4);border-radius: 20px;content: '';}
main .parallax-item .animated-text{position: absolute;top: 150px;left: 0;bottom: auto;text-align: center;color: var(--secondarycolor);max-width: 960px;margin: 0 auto;right: 0;}
main .parallax-item .animated-text .parallex-title{font-weight: 700;font-size: 40px;}
main .parallax-item .animated-text p{font-size: 18px;line-height: 32px;font-weight: 500;margin-bottom: 30px; }
main .parallax-btn{outline-color: rgba(255, 255, 255, 0.5); color: var(--secondarycolor);}
main .parallax-btn:hover{background: var(--secondarycolor); color: var(--primarycolor);outline-color: rgba(255, 255, 255, 0);}
main .parallax-item .main-img-bg img{max-width: 800px;border-top-left-radius: 20px;border-top-right-radius: 20px;position: relative; z-index: 1;}
main .parallax-item .main-img-bg .parallax-img{max-width: 300px; position: absolute; right: 240px;top: 580px; box-shadow: 0 0 30px rgba(0, 0, 0, .1); border-radius: 10px;}

/* testimonial-sec */
main .testimonial-sec{background: var(--sectionbackground);}
main .testimonial-sec .story-desc{display: flex; justify-content: center;text-align: center;margin-bottom: 50px;}
main .testimonial-sec .story-desc .title{font-weight: 800;font-size: 37px;line-height: 48px;margin-bottom: 0;}
main .testimonial-sec .story-desc .desc{font-size: 16px;font-weight: 500;color: var(--txtgrey);line-height: 34px;}
main .testimonial-sec .review-slide .review-content{padding: 20px;height: 100%;position: relative; border-radius: 6px;background: var(--secondarycolor);border-bottom: 3px solid var(--themecolor);}
main .testimonial-sec .review-slide .review-content .review-icon{display: flex; align-items: center; padding-left: 0; color: #ffa534;}
main .testimonial-sec .review-slide .review-content p{font-size: 16px;font-weight: 500;line-height: 32px;margin-bottom: 20px;}
main .testimonial-sec .review-slide .review-content .google-icon{	position: absolute;	top: auto;	bottom: 10px;	right: 15px;}
main .testimonial-sec .review-slide .owl-nav{position: absolute; top: 50%; width: 100%; transform: translateY(-50px);transition: all .4s ease;}
main .testimonial-sec .review-slide .owl-nav .owl-prev{position: absolute;	cursor: pointer;	opacity: 0;	left: -36px;	border: 1px solid var(--themecolor);	line-height: 50px;	width: 50px;border-radius: 50%;	font-size: 20px;	transition: all .4s ease;	color: var(--primarycolor);	line-height: 50px;}
main .testimonial-sec .review-slide .owl-nav .owl-next{position: absolute;	cursor: pointer;	opacity: 0;	right: -36px;	border: 1px solid var(--themecolor);	line-height: 50px;	width: 50px;border-radius: 50%;	font-size: 20px;	transition: all .4s ease;	color: var(--primarycolor);	line-height: 50px;}
main .testimonial-sec .review-slide .owl-nav .owl-prev:hover, main .testimonial-sec .review-slide .owl-nav .owl-next:hover{background: var(--themecolor); color: var(--secondarycolor);}
main .testimonial-sec:hover .review-slide .owl-nav .owl-prev, main .testimonial-sec:hover .review-slide .owl-nav .owl-next {opacity: 1;}


/* growth-sec */
main .growth-sec .ceo-sec, main .get-it-sec .ceo-sec{margin-bottom: 100px;}
main .growth-inner-text{padding: 30px;}
main .growth-inner-text .title{font-weight: 700;font-size: 48px;margin-bottom: 25px;}
main .growth-inner-text p{font-size: 18px; line-height: 32px;font-weight: 500; margin-bottom: 30px;}
main .we-work-sec{background: #D8E6F3; margin-bottom: 100px;}

main .growth-img{position: relative;}
main .growth-img .shadow-img{-webkit-box-shadow: -1px 2px 100px 0px rgba(30,130,230,0.36);-moz-box-shadow: -1px 2px 100px 0px rgba(30,130,230,0.36);box-shadow: -1px 2px 100px 0px rgba(30,130,230,0.36);}
main .growth-img .sub-img{position: absolute;max-width: 550px;left: -5%;bottom: 0;border: 8px solid rgba(201, 231, 253, 0.6);box-shadow: 0px 3px 10px rgb(68 71 74 / 7%);}

/* get-it-sec */
main .get-it-sec{background: var(--secondarycolor);}
/* hero: circular connected platform (homepage section 1) */
main .hx-sec{--hx-ink: #14213d; --hx-slate: #5b6477; --hx-blue: #0b75d6; --hx-violet: #7b61ff; --hx-rule: #dfe7f3; --hx-hub: 250px; --hx-node: 68px;
    position: relative; padding: 44px 0 72px; overflow: hidden; background: linear-gradient(180deg, #fbfcff 0%, #ffffff 55%, #f7faff 100%);}
main .hx-sec .hx-bg{position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(560px 520px at 72% 50%, rgba(11,117,214,.09), transparent 70%), radial-gradient(520px 380px at 94% 6%, rgba(123,97,255,.09), transparent 70%), radial-gradient(420px 320px at 4% 96%, rgba(11,117,214,.05), transparent 70%);}
main .hx-sec .hx-bg::before{content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(20,33,61,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.045) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(640px 580px at 72% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(640px 580px at 72% 50%, #000 20%, transparent 75%);}
main .hx-sec .hx-container{position: relative; max-width: 1400px; padding-left: 40px; padding-right: 40px;}
main .hx-sec .hx-grid{display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center;}

/* copy */
main .hx-sec .hx-eyebrow{display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border: 1px solid var(--hx-rule); border-radius: 999px; background: rgba(255,255,255,.8); color: var(--hx-slate); font-size: 14px; font-weight: 600; letter-spacing: .01em;}
main .hx-sec .hx-eyebrow::before{content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--hx-blue), var(--hx-violet)); box-shadow: 0 0 0 4px rgba(11,117,214,.12);}
main .hx-sec .hx-title{color: var(--hx-ink); font-size: 52px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 24px 0 22px; text-wrap: balance;}
main .hx-sec .hx-title span{background: linear-gradient(100deg, var(--hx-blue) 10%, var(--hx-violet) 90%); -webkit-background-clip: text; background-clip: text; color: transparent;}
main .hx-sec .hx-lead{color: var(--hx-slate); font-size: 19px; line-height: 31px; margin: 0 0 36px; max-width: 540px;}
main .hx-sec .hx-actions{display: flex; flex-wrap: wrap; gap: 14px;}
main .hx-sec .hx-btn{display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;}
main .hx-sec .hx-btn--primary::after, main .hx-sec .hx-btn--ghost::before{content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; transition: transform .25s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
main .hx-sec .hx-btn--ghost::before{-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M10%208.5l5%203.5-5%203.5z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M10%208.5l5%203.5-5%203.5z%22%2F%3E%3C%2Fsvg%3E");}
main .hx-sec .hx-btn--primary{background: linear-gradient(100deg, var(--hx-blue), #3d6cf0 60%, var(--hx-violet)); color: #fff; box-shadow: 0 14px 28px -12px rgba(11,117,214,.6);}
main .hx-sec .hx-btn--primary:hover{color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(11,117,214,.7);}
main .hx-sec .hx-btn--primary:hover::after{transform: translateX(3px);}
main .hx-sec .hx-btn--ghost{border: 1px solid var(--hx-rule); background: rgba(255,255,255,.85); color: var(--hx-ink);}
main .hx-sec .hx-btn--ghost:hover{color: var(--hx-blue); border-color: rgba(11,117,214,.35); transform: translateY(-2px);}
main .hx-sec .hx-btn:focus-visible{outline: 2px solid var(--hx-blue); outline-offset: 3px;}
main .hx-sec .hx-note{display: flex; align-items: flex-start; gap: 10px; max-width: 520px; margin: 22px 0 0; color: var(--hx-slate); font-size: 15px; line-height: 24px;}
main .hx-sec .hx-note::before{content: ''; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; background: var(--hx-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-11.6%207.1L4%2020.5l1.4-4.6A8%208%200%201%201%2021%2012z%22%2F%3E%3Cpath%20d%3D%22M8.5%2012h.01M12%2012h.01M15.5%2012h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%200%201-11.6%207.1L4%2020.5l1.4-4.6A8%208%200%201%201%2021%2012z%22%2F%3E%3Cpath%20d%3D%22M8.5%2012h.01M12%2012h.01M15.5%2012h.01%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
main .hx-sec .hx-note strong{color: var(--hx-ink); font-weight: 600;}
main .hx-sec .hx-trust{max-width: 540px; margin: 10px 0 0; color: var(--hx-slate); font-size: 19px; line-height: 31px;}
main .hx-sec .hx-proof{display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hx-rule); color: var(--hx-slate); font-size: 15px;}
main .hx-sec .hx-proof strong{color: var(--hx-ink); font-size: 18px; font-weight: 700; margin-right: 4px;}

/* circular stage: hub in the centre, 12 nodes on one orbit; lines and rings drawn by JS */
main .hx-sec .hx-visual{position: relative;}
main .hx-sec .hx-sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0;}
main .hx-sec .hx-stage{position: relative; width: 100%; max-width: 660px; aspect-ratio: 1 / 1; margin: 0 auto;}
main .hx-sec .hx-stage::before{content: ''; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 30%, rgba(238,244,255,.55) 62%, transparent 72%); pointer-events: none;}
main .hx-sec .hx-links{position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none;}
main .hx-sec .hx-orbit{fill: none; stroke: rgba(11,117,214,.22); stroke-width: 1; stroke-dasharray: 2 7; transform-box: view-box; animation: hx-spin 140s linear infinite;}
main .hx-sec .hx-ticks{fill: none; stroke: rgba(20,33,61,.16); stroke-width: 7; stroke-dasharray: .5 5.5; transform-box: view-box; animation: hx-spin 90s linear infinite reverse;}
main .hx-sec .hx-prog-track{fill: none; stroke: rgba(11,117,214,.10); stroke-width: 3;}
main .hx-sec .hx-prog{fill: none; stroke: url(#hx-grad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transform-box: view-box; transform: rotate(-90deg); filter: url(#hx-glow); transition: opacity .5s ease;}
main .hx-sec .hx-prog.is-on{opacity: 1; transition-duration: .1s;}
@keyframes hx-spin{to{transform: rotate(360deg);}}
main .hx-sec .hx-link{fill: none; stroke: #cddbf5; stroke-width: 1.2; transition: stroke .3s ease;}
main .hx-sec .hx-link.is-hover{stroke: #8fb1ef;}
main .hx-sec .hx-run{fill: none; stroke: #5b86f2; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 93; opacity: .5; animation: hx-run 4s linear infinite;}
main .hx-sec .hx-run.is-hover{opacity: .9;}
@keyframes hx-run{to{stroke-dashoffset: -100;}}
main .hx-sec .hx-hot{fill: none; stroke: url(#hx-grad); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; filter: url(#hx-glow); transition: opacity .6s ease;}
main .hx-sec .hx-hot.is-on{opacity: 1; transition-duration: .1s;}
main .hx-sec .hx-port{fill: #fff; stroke: #9fbcf0; stroke-width: 1.4;}
main .hx-sec .hx-dot{opacity: 0; transition: opacity .2s ease;}
main .hx-sec .hx-dot.is-on{opacity: 1;}
main .hx-sec .hx-dot-halo{fill: rgba(37,99,235,.22); filter: url(#hx-glow);}
main .hx-sec .hx-dot-core{fill: #fff; stroke: #2563eb; stroke-width: 2.6;}

/* central hub: pastel aurora under a frosted disc, a satellite on its rim, traced logo and a live route */
main .hx-sec .hx-hub{position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--hx-hub); aspect-ratio: 1 / 1; padding: 0 26px; transform: translate(-50%,-50%); border-radius: 50%; text-align: center; background: #fff;
    box-shadow: 0 30px 60px -26px rgba(38,60,160,.45), 0 0 0 10px rgba(255,255,255,.7), 0 0 70px -10px rgba(91,110,255,.35); transition: box-shadow .5s ease;}
main .hx-sec .hx-hub::before{content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 200deg, rgba(11,117,214,.65), rgba(123,97,255,.55), rgba(255,255,255,0) 45%, rgba(11,117,214,.4) 75%, rgba(11,117,214,.65));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none;}
main .hx-sec .hx-hub::after{content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(59,130,246,.45); opacity: 0; pointer-events: none;}
main .hx-sec .hx-hub.is-busy{box-shadow: 0 30px 60px -26px rgba(38,60,160,.45), 0 0 0 10px rgba(255,255,255,.7), 0 0 90px -6px rgba(59,130,246,.55);}
main .hx-sec .hx-hub.is-busy::after{animation: hx-ring 1s cubic-bezier(.2,.6,.3,1);}
@keyframes hx-ring{0%{opacity: .9; transform: scale(.96);} 100%{opacity: 0; transform: scale(1.3);}}
main .hx-sec .hx-hub-aurora{position: absolute; inset: 0; border-radius: 50%; overflow: hidden;}
main .hx-sec .hx-hub-aurora::before{content: ''; position: absolute; inset: -25%; background: conic-gradient(from 0deg, #c9dcff, #efe9ff, #ffffff, #cfe9ff, #e2d8ff, #c9dcff); filter: blur(16px); animation: hx-spin 16s linear infinite; transition: filter .5s ease;}
main .hx-sec .hx-hub.is-busy .hx-hub-aurora::before{filter: blur(12px) saturate(1.7);}
main .hx-sec .hx-hub-glass{position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.97), rgba(255,255,255,.84) 70%, rgba(255,255,255,.72));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 6px 18px -8px rgba(91,110,255,.35);}
main .hx-sec .hx-hub-orbit{position: absolute; inset: 4.5%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.95); animation: hx-spin 10s linear infinite;}
main .hx-sec .hx-hub-orbit i{position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, var(--hx-violet)); box-shadow: 0 0 10px 2px rgba(91,110,255,.55);}
main .hx-sec .hx-hub-body{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%;}

/* logo: tracing outline that fills in, a slowly turning gradient on the mark, and a shine sweep */
main .hx-sec .hx-hub-logo{display: block; width: 96px; height: 96px; margin: 0 0 6px; overflow: visible; filter: drop-shadow(0 8px 18px rgba(59,130,246,.3));}
main .hx-sec .hx-logo-draw path{fill: url(#hx-logo-grad); stroke: #3b82f6;}
main .hx-sec .hx-logo-draw path{stroke-width: 0; stroke-linejoin: round; stroke-dasharray: 1 1;}
main .hx-sec .hx-hub-logo.is-trace .hx-logo-draw path{stroke-width: .7; animation: hx-trace 2.2s cubic-bezier(.5,0,.3,1) both; animation-delay: var(--d);}
@keyframes hx-trace{0%{stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1;} 55%{stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1;} 100%{stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0;}}
main .hx-sec .hx-logo-shine{pointer-events: none;}

/* status slot: idle pill, or a source -> destination route while a flow runs */
main .hx-sec .hx-slot{position: relative; width: 100%; height: 58px; margin-top: 12px;}
main .hx-sec .hx-status{position: absolute; left: 50%; top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; transform: translateX(-50%); border: 1px solid #e1e8f7; border-radius: 999px; background: #fff; color: var(--hx-slate); font-size: 12px; font-weight: 600; white-space: nowrap; transition: opacity .3s ease, transform .3s ease;}
main .hx-sec .hx-status-dot{flex: 0 0 7px; height: 7px; border-radius: 50%; background: #1fbf75; box-shadow: 0 0 0 3px rgba(31,191,117,.18);}
main .hx-sec .hx-hub.has-route .hx-status{opacity: 0; transform: translate(-50%,-4px);}
main .hx-sec .hx-route{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease;}
main .hx-sec .hx-hub.has-route .hx-route{opacity: 1; transform: none;}
main .hx-sec .hx-route-row{display: flex; align-items: center; gap: 6px;}
main .hx-sec .hx-chip{display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #dbe5fb; background: #fff; color: var(--hx-blue); box-shadow: 0 4px 10px -6px rgba(37,99,235,.5); transition: background .3s ease, color .3s ease, border-color .3s ease;}
main .hx-sec .hx-chip svg{width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
main .hx-sec .hx-hub.step-a .hx-chip--a, main .hx-sec .hx-hub.step-b .hx-chip--b{background: linear-gradient(145deg, #2f7bf0, var(--hx-violet)); border-color: transparent; color: #fff;}
main .hx-sec .hx-hub.step-b .hx-chip--a{background: #fff; border-color: #dbe5fb; color: var(--hx-blue);}
main .hx-sec .hx-hub.step-done .hx-chip--b{background: #1fbf75; border-color: transparent; color: #fff;}
main .hx-sec .hx-route-line{position: relative; width: 52px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #b9cdf5 0 4px, transparent 4px 8px);}
main .hx-sec .hx-route-line i{position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 0 10px rgba(37,99,235,.6);}
main .hx-sec .hx-hub.step-proc .hx-route-line i{left: calc(100% - 8px); transition: left .95s cubic-bezier(.6,0,.3,1);}
main .hx-sec .hx-route-cap{max-width: 100%; margin-top: 7px; overflow: hidden; color: var(--hx-slate); font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;}
@keyframes hx-blink{50%{box-shadow: 0 0 0 6px rgba(59,130,246,.06);}}

/* module nodes: JS owns transform (centre + float + parallax), so hover lives on the core */
main .hx-sec .hx-node{position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); z-index: 4; width: var(--hx-node); height: var(--hx-node); transform: translate(-50%,-50%); will-change: transform;}
main .hx-sec .hx-node-core{position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: var(--hx-blue); cursor: default;
    background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid #fff;
    box-shadow: 0 0 0 1px rgba(20,33,61,.07), 0 14px 30px -16px rgba(20,40,110,.45), inset 0 -8px 14px -8px rgba(11,117,214,.14);
    transition: scale .35s cubic-bezier(.2,.7,.3,1), background .4s ease, color .4s ease, box-shadow .4s ease;}
main .hx-sec .hx-node-core::before{content: ''; position: absolute; inset: 7px; border-radius: 50%; background: linear-gradient(145deg, #eef4ff, #f2efff); transition: opacity .4s ease;}
main .hx-sec .hx-node-core svg{position: relative; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
main .hx-sec .hx-node-label{position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); color: var(--hx-ink); font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: color .3s ease;}
main .hx-sec .hx-node--up .hx-node-label{top: auto; bottom: calc(100% + 10px);}
main .hx-sec .hx-l-short{display: none;}
main .hx-sec .hx-node-check{position: absolute; top: -3px; right: -3px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #1fbf75; scale: 0; transition: scale .35s cubic-bezier(.3,1.6,.5,1);}
main .hx-sec .hx-node-check svg{width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;}
main .hx-sec .hx-node:hover{z-index: 5;}
main .hx-sec .hx-node:hover .hx-node-core{scale: 1.08; box-shadow: 0 0 0 1px rgba(11,117,214,.22), 0 18px 34px -16px rgba(11,117,214,.5), inset 0 -8px 14px -8px rgba(11,117,214,.14);}
main .hx-sec .hx-node.is-src .hx-node-core, main .hx-sec .hx-node.is-done .hx-node-core{background: linear-gradient(145deg, #2f7bf0, var(--hx-violet)); color: #fff; border-color: transparent;
    box-shadow: 0 0 0 6px rgba(59,130,246,.14), 0 0 0 13px rgba(59,130,246,.06), 0 18px 32px -12px rgba(37,99,235,.6);}
main .hx-sec .hx-node.is-src .hx-node-core::before, main .hx-sec .hx-node.is-done .hx-node-core::before{opacity: 0;}
main .hx-sec .hx-node.is-src .hx-node-label, main .hx-sec .hx-node.is-done .hx-node-label{color: #1d4ed8;}
main .hx-sec .hx-node.is-done .hx-node-check{scale: 1;}

/* live event pill under the circle */
main .hx-sec .hx-feed{display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 9px 18px 9px 13px;
    border: 1px solid #d7e3fb; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px -16px rgba(29,78,216,.5); color: #1d4ed8; font-size: 13.5px; font-weight: 600; white-space: nowrap;}
main .hx-sec .hx-feed-dot{flex: 0 0 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); animation: hx-blink 1.6s ease-in-out infinite;}
main .hx-sec .hx-feed-text{overflow: hidden; text-overflow: ellipsis; transition: opacity .22s ease, transform .22s ease;}
main .hx-sec .hx-feed-text span{color: var(--hx-slate); font-weight: 500;}
main .hx-sec .hx-feed.is-swap .hx-feed-text{opacity: 0; transform: translateY(4px);}

@media (max-width: 1399px){
    main .hx-sec .hx-title{font-size: 46px;}
}
/* below 1200 the copy stacks above the circle */
@media (max-width: 1199px){
    main .hx-sec{padding: 48px 0 72px;}
    main .hx-sec .hx-grid{grid-template-columns: 1fr; gap: 48px;}
    main .hx-sec .hx-copy{text-align: center; max-width: 720px; margin: 0 auto;}
    main .hx-sec .hx-lead{margin-left: auto; margin-right: auto;}
    main .hx-sec .hx-actions, main .hx-sec .hx-proof{justify-content: center;}
    main .hx-sec .hx-note{justify-content: center; margin-left: auto; margin-right: auto; text-align: left;}
    main .hx-sec .hx-trust{margin-left: auto; margin-right: auto;}
    main .hx-sec .hx-stage{max-width: 640px;}
    main .hx-sec .hx-bg::before{-webkit-mask-image: radial-gradient(620px 560px at 50% 70%, #000 20%, transparent 75%); mask-image: radial-gradient(620px 560px at 50% 70%, #000 20%, transparent 75%);}
}
@media (max-width: 767px){
    main .hx-sec{--hx-hub: 190px; --hx-node: 54px;}
    main .hx-sec .hx-container{padding-left: 24px; padding-right: 24px;}
    main .hx-sec .hx-title{font-size: 38px;}
    main .hx-sec .hx-hub{padding: 0 18px;}
    main .hx-sec .hx-hub-logo{width: 70px; height: 70px; margin-bottom: 4px;}
    main .hx-sec .hx-status{top: 4px; padding: 5px 9px; font-size: 10.5px;}
    main .hx-sec .hx-slot{height: 48px; margin-top: 8px;}
    main .hx-sec .hx-chip{width: 26px; height: 26px;}
    main .hx-sec .hx-chip svg{width: 13px; height: 13px;}
    main .hx-sec .hx-route-line{width: 40px;}
    main .hx-sec .hx-route-cap{margin-top: 5px; font-size: 10px;}
    main .hx-sec .hx-node-core svg{width: 22px; height: 22px;}
    main .hx-sec .hx-node-label{font-size: 12px; top: calc(100% + 7px);}
    main .hx-sec .hx-node--up .hx-node-label{bottom: calc(100% + 7px);}
}
/* phones */
@media (max-width: 575px){
    main .hx-sec{--hx-hub: 128px; --hx-node: 42px; padding: 36px 0 52px;}
    main .hx-sec .hx-container{padding-left: 16px; padding-right: 16px;}
    main .hx-sec .hx-eyebrow{font-size: 12px;}
    main .hx-sec .hx-title{font-size: 32px; margin: 18px 0 16px;}
    main .hx-sec .hx-lead{font-size: 16px; line-height: 27px; margin-bottom: 28px;}
    main .hx-sec .hx-actions{flex-direction: column;}
    main .hx-sec .hx-btn{justify-content: center; width: 100%;}
    main .hx-sec .hx-note{margin-top: 18px; font-size: 14px; line-height: 22px;}
    main .hx-sec .hx-trust{font-size: 16px; line-height: 27px;}
    main .hx-sec .hx-proof{gap: 8px 18px; margin-top: 26px; font-size: 13px;}
    main .hx-sec .hx-proof strong{font-size: 15px;}
    main .hx-sec .hx-grid{gap: 36px;}
    main .hx-sec .hx-stage{margin-top: 14px;}
    main .hx-sec .hx-hub{padding: 0 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 20px 40px -20px rgba(38,60,160,.45), 0 0 0 6px rgba(255,255,255,.7), 0 0 50px -10px rgba(91,110,255,.35);}
    main .hx-sec .hx-hub-logo{width: 50px; height: 50px; margin-bottom: 3px;}
    main .hx-sec .hx-status{top: 0; padding: 4px 7px; gap: 5px; font-size: 8.5px;}
    main .hx-sec .hx-slot{height: 24px; margin-top: 2px;}
    main .hx-sec .hx-chip{width: 20px; height: 20px;}
    main .hx-sec .hx-chip svg{width: 10px; height: 10px;}
    main .hx-sec .hx-route-row{gap: 4px;}
    main .hx-sec .hx-route-line{width: 22px;}
    main .hx-sec .hx-route-line i{width: 6px; height: 6px; margin-top: -3px;}
    main .hx-sec .hx-hub.step-proc .hx-route-line i{left: calc(100% - 6px);}
    main .hx-sec .hx-route-cap{display: none;}
    main .hx-sec .hx-hub-orbit i{width: 6px; height: 6px; top: -3px; margin-left: -3px;}
    main .hx-sec .hx-status-dot{flex-basis: 5px; height: 5px;}
    main .hx-sec .hx-node-core::before{inset: 5px;}
    main .hx-sec .hx-node-core svg{width: 18px; height: 18px;}
    main .hx-sec .hx-node-label{font-size: 10.5px; top: calc(100% + 5px);}
    main .hx-sec .hx-node--up .hx-node-label{bottom: calc(100% + 5px);}
    main .hx-sec .hx-l-full{display: none;}
    main .hx-sec .hx-l-short{display: inline;}
    main .hx-sec .hx-node-check{width: 17px; height: 17px; top: -4px; right: -4px;}
    main .hx-sec .hx-node-check svg{width: 9px; height: 9px;}
    main .hx-sec .hx-ticks{stroke-width: 4;}
    main .hx-sec .hx-feed{font-size: 11px; padding: 7px 12px 7px 10px;}
}
@media (prefers-reduced-motion: reduce){
    main .hx-sec .hx-run, main .hx-sec .hx-feed-dot, main .hx-sec .hx-orbit, main .hx-sec .hx-ticks, main .hx-sec .hx-hub-aurora::before, main .hx-sec .hx-hub-orbit{animation: none !important;}
    main .hx-sec .hx-run{opacity: 0;}
}

/* challenges-sec (homepage section 2) */
main .chl-sec{--chl-ink: #14213d; --chl-slate: #5b6477; --chl-blue: #0b75d6; --chl-wash: #eef5fd; --chl-rule: #e2e9f3; --chl-navy: #0b1f3a; --chl-sky: #8fc4f5;
    position: relative; padding: 110px 0 96px; background: linear-gradient(180deg, #f7faff 0%, #ffffff 38%);}
main .chl-sec .chl-head{text-align: center; max-width: 760px; margin: 0 auto 64px;}
main .chl-sec .chl-title{color: var(--chl-ink); font-size: 44px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px;}
main .chl-sec .chl-intro{color: var(--chl-slate); font-size: 19px; line-height: 30px; margin: 0;}

/* questions: open grid, internal hairlines only - nothing here is a link */
main .chl-sec .chl-grid{display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0;}
main .chl-sec .chl-item{min-height: 220px; padding: 40px 40px 36px; border-color: var(--chl-rule); border-style: solid; border-width: 0;}
main .chl-sec .chl-item:nth-child(-n+3){border-bottom-width: 1px;}
main .chl-sec .chl-item:not(:nth-child(3n)){border-right-width: 1px;}
main .chl-sec .chl-icon{display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 50%; background: var(--chl-wash); color: var(--chl-blue);}
main .chl-sec .chl-icon svg{width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
main .chl-sec .chl-q{color: var(--chl-ink); font-size: 20px; line-height: 1.5; font-weight: 600; margin: 0; max-width: 330px;}

/* threads converging into the closing argument */
main .chl-sec .chl-threads{display: block; width: 100%; height: 110px; overflow: visible;}
main .chl-sec .chl-threads path{fill: none; stroke: var(--chl-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .55; stroke-dasharray: 1 1; stroke-dashoffset: 1;}
main .chl-sec.is-in .chl-threads path{animation: chl-draw 1.4s cubic-bezier(.6,.05,.3,1) forwards;}
main .chl-sec.is-in .chl-threads path:nth-child(2){animation-delay: .15s;}
@keyframes chl-draw{to{stroke-dashoffset: 0; stroke-dasharray: 1 0;}}

/* closing block: the argument */
main .chl-sec .chl-close{position: relative; display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; padding: 72px 72px 60px; border-radius: 24px; color: #fff;
    background: radial-gradient(900px 420px at 100% 0%, rgba(11,117,214,.45), transparent 60%), radial-gradient(600px 360px at 0% 100%, rgba(49,147,255,.18), transparent 60%), var(--chl-navy);}
main .chl-sec .chl-close::before{content: ''; position: absolute; top: 0; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--chl-blue); box-shadow: 0 0 0 6px rgba(11,117,214,.18), 0 0 0 12px rgba(11,117,214,.08);}
main .chl-sec .chl-close-body{display: contents;}
main .chl-sec .chl-close-title{color: #fff; font-size: 38px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0;}
main .chl-sec .chl-close-text{color: rgba(255,255,255,.78); font-size: 18px; line-height: 32px; margin: 4px 0 0;}
main .chl-sec .chl-bridge{grid-column: 1 / -1; margin: 52px 0 0; padding-top: 36px; border-top: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 23px; line-height: 1.55; font-weight: 600; max-width: 900px;}
main .chl-sec .chl-bridge span{color: var(--chl-sky);}

/* tablet: 2 x 3 */
@media (max-width: 991px){
    main .chl-sec{padding: 80px 0 90px;}
    main .chl-sec .chl-title{font-size: 34px;}
    main .chl-sec .chl-head{margin-bottom: 48px;}
    main .chl-sec .chl-grid{grid-template-columns: repeat(2, 1fr);}
    main .chl-sec .chl-item{min-height: 200px; padding: 34px 30px; border-width: 0 !important;}
    main .chl-sec .chl-item:nth-child(-n+4){border-bottom-width: 1px !important;}
    main .chl-sec .chl-item:nth-child(odd){border-right-width: 1px !important;}
    main .chl-sec .chl-threads{display: none;}
    main .chl-sec .chl-close{grid-template-columns: 1fr; row-gap: 20px; margin-top: 64px; padding: 56px 44px 48px;}
    main .chl-sec .chl-close-title{font-size: 32px;}
    main .chl-sec .chl-bridge{margin-top: 28px; font-size: 21px;}
}

/* mobile: single column */
@media (max-width: 575px){
    main .chl-sec{padding: 64px 0 72px;}
    main .chl-sec .container{padding-left: 16px; padding-right: 16px;}
    main .chl-sec .chl-title{font-size: 27px;}
    main .chl-sec .chl-intro{font-size: 17px; line-height: 27px;}
    main .chl-sec .chl-grid{grid-template-columns: 1fr;}
    main .chl-sec .chl-item, main .chl-sec .chl-item:nth-child(n){display: flex; align-items: flex-start; gap: 18px; min-height: 0; padding: 24px 0; border-width: 0 !important;}
    main .chl-sec .chl-item:nth-child(n):not(:last-child){border-bottom-width: 1px !important;}
    main .chl-sec .chl-icon{flex: 0 0 44px; width: 44px; height: 44px; margin: 0;}
    main .chl-sec .chl-icon svg{width: 22px; height: 22px;}
    main .chl-sec .chl-q{font-size: 17px; max-width: none;}
    main .chl-sec .chl-close{margin-top: 48px; padding: 44px 24px 36px; border-radius: 18px;}
    main .chl-sec .chl-close-title{font-size: 26px;}
    main .chl-sec .chl-close-text{font-size: 16px; line-height: 28px;}
    main .chl-sec .chl-bridge{font-size: 18px; padding-top: 26px;}
}

@media (prefers-reduced-motion: reduce){
    main .chl-sec .chl-threads path{stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important;}
}

/* key capabilities heading: sits between the industry case studies and CEO Tools (CMS page 903) */
main .kc-head{padding: 8px 0 72px; text-align: center; background: #fff;}
main .kc-head .kc-title{margin: 0; color: #14213d; font-size: 40px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em;}
main .kc-head .kc-title span{color: #0b75d6;}
@media (max-width: 991px){ main .kc-head{padding-bottom: 56px;} main .kc-head .kc-title{font-size: 32px;} }
@media (max-width: 575px){ main .kc-head{padding-bottom: 40px;} main .kc-head .container{padding-left: 16px; padding-right: 16px;} main .kc-head .kc-title{font-size: 25px;} }

/* key capabilities showcase: CMS module rows (pages 48-52) as full-width numbered bands with a screenshot collage.
   Scoped to section.kc-list with an element in the selector so the older growth-sec / media.css rules do not win.
   The zoomed detail card and the lightbox are added by the small script after the section in home.php. */
main section.kc-list{--kc-ink: #14213d; --kc-slate: #5b6477; --kc-blue: #0b75d6; --kc-violet: #7b61ff; --kc-rule: #dfe7f3;
    position: relative; counter-reset: kc; background: #fff;}
main section.kc-list .kc-head{background: transparent; padding: 24px 0 0;}
main section.kc-list .growth-sec, main section.kc-list .get-it-sec{padding: 0; background: transparent;}

/* full-width bands: ceo-sec rows white, we-work-sec rows tinted (they alternate in the CMS) */
main section.kc-list .ceo-sec, main section.kc-list .we-work-sec{counter-increment: kc; position: relative; overflow: hidden; margin: 0; padding: 104px 0; background: #fff;}
main section.kc-list .we-work-sec{background: linear-gradient(180deg, #f1f6fe 0%, #f5f3ff 100%);}
main section.kc-list .we-work-sec::before{content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(20,33,61,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,33,61,.04) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(900px 520px at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(900px 520px at 50% 50%, #000 10%, transparent 75%);}

/* row: keep the CMS alternation (flex + row-reverse), drop the spacer column, text 38% / image 62% */
main section.kc-list .ceo-sec > .row, main section.kc-list .we-work-sec > .row{position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 72px;
    max-width: 1400px; margin: 0 auto; padding: 0 48px;}
main section.kc-list .row > .col-lg-1{display: none;}
main section.kc-list .row > [class*="col-"]{width: auto; max-width: none; padding: 0;}
main section.kc-list .row > .col-lg-4{flex: 0 0 calc(38% - 36px);}
main section.kc-list .row > .col-lg-6{flex: 1 1 0; min-width: 0;}

/* text */
main section.kc-list .growth-inner-text{position: relative; padding: 0;}
main section.kc-list .growth-inner-text .title{position: relative; margin: 0 0 18px; padding-bottom: 18px; color: var(--kc-ink); font-size: 42px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;}
main section.kc-list .growth-inner-text .title::after{content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--kc-blue), var(--kc-violet)); box-shadow: 0 4px 12px -4px rgba(11,117,214,.6);}
main section.kc-list .growth-inner-text p{margin: 0 0 30px; color: var(--kc-slate); font-size: 17px; line-height: 30px; font-weight: 500;}
main section.kc-list .growth-inner-text .btn-5{display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--kc-rule); border-radius: 999px; outline: 0;
    background: #fff; color: var(--kc-ink); font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 6px 16px -10px rgba(20,33,61,.35); transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;}
main section.kc-list .growth-inner-text .btn-5::after{content: ''; width: 16px; height: 16px; background: currentColor; transition: transform .3s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;}
main section.kc-list .growth-inner-text .btn-5:hover{border-color: transparent; background: linear-gradient(100deg, var(--kc-blue), #3d6cf0 60%, var(--kc-violet)); color: #fff; outline: 0; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(11,117,214,.6);}
main section.kc-list .growth-inner-text .btn-5:hover::after{transform: translateX(3px);}
main section.kc-list .growth-inner-text .btn-5:focus-visible{outline: 2px solid var(--kc-blue); outline-offset: 3px;}

/* collage: large screenshot + magnified detail card over its outer corner */
main section.kc-list .growth-img{position: relative; margin-bottom: 36px;}
main section.kc-list .growth-img::after{content: ''; position: absolute; inset: 8% 4% -4% 4%; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(46px); opacity: .6;
    background: radial-gradient(closest-side, rgba(11,117,214,.4), rgba(123,97,255,.22) 60%, transparent);}
main section.kc-list .growth-img > img{position: relative; display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; cursor: zoom-in;
    box-shadow: 0 0 0 1px rgba(20,33,61,.08), 0 32px 64px -30px rgba(38,60,160,.5); transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;}
main section.kc-list .growth-img > img[src*="ceo_tools"]{background: transparent; box-shadow: none;}   /* already a composite with its own shadows */
main section.kc-list .growth-img:hover > img{transform: translateY(-4px);}
main section.kc-list .kc-zoom{position: absolute; bottom: -36px; width: 40%; aspect-ratio: 4 / 3; z-index: 2; padding: 0; border: 6px solid #fff; border-radius: 16px; cursor: zoom-in;
    background-color: #fff; background-repeat: no-repeat; background-size: 250% auto; background-position: 14% 20%;
    box-shadow: 0 0 0 1px rgba(20,33,61,.08), 0 24px 44px -18px rgba(20,40,110,.5); transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;}
main section.kc-list .kc-zoom.is-right{right: -28px;}
main section.kc-list .kc-zoom.is-left{left: -28px;}
main section.kc-list .kc-zoom::after{content: ''; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(20,33,61,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 16px no-repeat;}
main section.kc-list .growth-img:hover .kc-zoom{transform: translateY(-8px) rotate(-1deg); box-shadow: 0 0 0 1px rgba(11,117,214,.18), 0 30px 54px -18px rgba(20,40,110,.55);}
main section.kc-list .kc-zoom:focus-visible, main section.kc-list .growth-img > img:focus-visible{outline: 2px solid var(--kc-blue); outline-offset: 3px;}

/* lightbox */
.kc-lightbox{position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(12,20,40,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; cursor: zoom-out;}
.kc-lightbox.is-open{opacity: 1; visibility: visible;}
.kc-lightbox img{max-width: min(1600px, 100%); max-height: 100%; border-radius: 12px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); transform: scale(.97); transition: transform .25s ease;}
.kc-lightbox.is-open img{transform: none;}
.kc-lightbox button{position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 44px; cursor: pointer;}
.kc-lightbox button:hover{background: rgba(255,255,255,.26);}

@media (max-width: 1199px){
    main section.kc-list .ceo-sec, main section.kc-list .we-work-sec{padding: 88px 0;}
    main section.kc-list .ceo-sec > .row, main section.kc-list .we-work-sec > .row{gap: 48px; padding: 0 32px;}
    main section.kc-list .growth-inner-text .title{font-size: 34px;}
    main section.kc-list .kc-zoom.is-right{right: -12px;}
    main section.kc-list .kc-zoom.is-left{left: -12px;}
}
/* tablets and phones: stack, text first */
@media (max-width: 991px){
    main section.kc-list .ceo-sec, main section.kc-list .we-work-sec{padding: 72px 0 84px;}
    main section.kc-list .ceo-sec > .row, main section.kc-list .we-work-sec > .row{flex-direction: column; align-items: stretch; gap: 40px;}
    main section.kc-list .row > .col-lg-4{order: 1; flex: none;}
    main section.kc-list .row > .col-lg-6{order: 2; flex: none;}
    main section.kc-list .kc-zoom.is-right, main section.kc-list .kc-zoom.is-left{left: auto; right: -8px;}
}
@media (max-width: 575px){
    main section.kc-list .ceo-sec, main section.kc-list .we-work-sec{padding: 56px 0 68px;}
    main section.kc-list .ceo-sec > .row, main section.kc-list .we-work-sec > .row{padding: 0 16px; gap: 32px;}
    main section.kc-list .growth-inner-text .title{font-size: 28px !important; margin-bottom: 14px; padding-bottom: 14px;}
    main section.kc-list .growth-inner-text p{font-size: 16px; line-height: 27px; margin-bottom: 22px;}
    main section.kc-list .growth-img{margin-bottom: 28px;}
    main section.kc-list .growth-img > img{border-radius: 10px;}
    main section.kc-list .kc-zoom{width: 48%; bottom: -26px; border-width: 4px; border-radius: 12px;}
    main section.kc-list .kc-zoom::after{width: 24px; height: 24px; right: 6px; bottom: 6px; background-size: 13px;}
    .kc-lightbox{padding: 12px;}
}
@media (prefers-reduced-motion: reduce){
    main section.kc-list .growth-img > img, main section.kc-list .kc-zoom, .kc-lightbox, .kc-lightbox img{transition: none;}
}

/* industry case studies (follows challenges-sec) */
main .ind-sec{--ind-ink: #14213d; --ind-slate: #5b6477; --ind-blue: #0b75d6; --ind-wash: #eef5fd; --ind-rule: #dbe5f1;
    padding: 0 0 110px; background: #fff;}
main .ind-sec .ind-head{text-align: center; max-width: 980px; margin: 0 auto 40px;}
main .ind-sec .ind-title{color: var(--ind-ink); font-size: 40px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0;}
main .ind-sec .ind-title span{color: var(--ind-blue);}
main .ind-sec .ind-intro{max-width: 720px; color: var(--ind-slate); font-size: 19px; line-height: 30px; margin: 16px auto 0; text-wrap: balance;}

/* industry switcher */
main .ind-sec .ind-tabs{display: flex; flex-wrap: nowrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 32px; padding: 6px; border: 1px solid var(--ind-rule); border-radius: 999px; background: #fff; overflow-x: auto; scrollbar-width: none;}
main .ind-sec .ind-tabs::-webkit-scrollbar{display: none;}
main .ind-sec .ind-tabs .nav-link{flex: 0 0 auto; padding: 11px 26px; border: 0; border-radius: 999px; background: transparent; color: var(--ind-slate); font-size: 16px; font-weight: 600; white-space: nowrap; transition: background .25s ease, color .25s ease;}
main .ind-sec .ind-tabs .nav-link:hover{color: var(--ind-ink);}
main .ind-sec .ind-tabs .nav-link.active{background: var(--ind-blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(11,117,214,.55);}
main .ind-sec .ind-tabs .nav-link:focus-visible{outline: 2px solid var(--ind-blue); outline-offset: 2px;}

/* case study panel - restyles the CMS markup inside each tab */
main .ind-sec .ind-panel{position: relative; padding: 60px 64px; border-radius: 28px; overflow: hidden;
    background: radial-gradient(700px 360px at 100% 0%, rgba(11,117,214,.10), transparent 65%), var(--ind-wash);}
main .ind-sec .ind-panel .inner-content .row{display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; margin: 0; padding: 0 !important;}
main .ind-sec .ind-panel .inner-content .row > [class*="col-"]{width: auto; max-width: none; flex: none; padding: 0; text-align: left;}
main .ind-sec .ind-panel .inner-content .row > .col-lg-1{display: none;}
main .ind-sec .ind-panel .right-title{color: var(--ind-ink); font-size: 32px; line-height: 1.3; font-weight: 700; margin: 0 0 18px;}
main .ind-sec .ind-panel .marketing-right-text p{color: var(--ind-slate); font-size: 17px; line-height: 30px; margin: 0 0 30px;}
main .ind-sec .ind-panel .marketing-right-text .btn{padding: 12px 28px; border-radius: 8px; background: var(--ind-blue); color: #fff; font-weight: 600; outline-color: transparent;}
main .ind-sec .ind-panel .marketing-img img{display: block; width: 100% !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px !important; box-shadow: 0 30px 60px -28px rgba(11,31,58,.45);}

@media (max-width: 991px){
    main .ind-sec{padding-bottom: 80px;}
    main .ind-sec .ind-title{font-size: 32px;}
    main .ind-sec .ind-panel{padding: 44px 40px;}
    main .ind-sec .ind-panel .inner-content .row{grid-template-columns: 1fr; gap: 36px;}
    main .ind-sec .ind-panel .inner-content .row > .col-lg-6{order: -1;}
    main .ind-sec .ind-panel .right-title{font-size: 28px;}
}
@media (max-width: 575px){
    main .ind-sec{padding-bottom: 64px;}
    main .ind-sec .container{padding-left: 16px; padding-right: 16px;}
    main .ind-sec .ind-title{font-size: 25px;}
    main .ind-sec .ind-intro{font-size: 17px; line-height: 27px;}
    main .ind-sec .ind-tabs{margin-bottom: 24px;}
    main .ind-sec .ind-tabs .nav-link{padding: 9px 18px; font-size: 14px;}
    main .ind-sec .ind-panel{padding: 24px 20px 32px; border-radius: 20px;}
    main .ind-sec .ind-panel .inner-content .row{gap: 26px;}
    main .ind-sec .ind-panel .right-title{font-size: 22px;}
    main .ind-sec .ind-panel .marketing-right-text p{font-size: 16px; line-height: 28px;}
    main .ind-sec .ind-panel .marketing-img img{border-radius: 14px !important;}
}