:root{
  --primary:#0284c7;
  --primary-dark:#1e3a8a;
  --dark:#101828;
  --dark2:#172033;
  --muted:#667085;
  --soft:#e0f2fe;
  --soft2:#f0f9ff;
  --line:#e7eaf0;
  --white:#ffffff;
  --success:#1f7a4d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--dark);
  background:#fff;
  overflow-x:hidden;
}
a{text-decoration:none}
img{max-width:100%;height:auto}
p{line-height:1.75}
.top-bar{
  background:var(--dark);
  color:#fff;
  font-size:14px;
  padding:8px 0;
}
.top-bar a{color:#fff;margin-right:18px}
.navbar{padding:15px 0}
.navbar-brand{
  font-size:31px;
  font-weight:950;
  letter-spacing:-1px;
  color:var(--dark)!important;
}
.navbar-brand span{color:var(--primary)}
.nav-link{
  color:var(--dark)!important;
  font-weight:850;
  margin:0 7px;
  position:relative;
}
.nav-link:after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:3px;
  height:2px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}
.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
.btn-main,.btn-darkx,.btn-outline-main{
  border-radius:50px;
  padding:13px 26px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.25s ease;
}
.btn-main{background:var(--primary);color:#fff;border:0}
.btn-main:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px)}
.btn-darkx{background:var(--dark);color:#fff;border:0}
.btn-darkx:hover{color:#fff;transform:translateY(-2px)}
.btn-outline-main{border:2px solid var(--primary);color:var(--primary);background:#fff}
.btn-outline-main:hover{background:var(--primary);color:#fff}
.hero{
  position:relative;
  background:
    radial-gradient(circle at 83% 10%,#ffd8ae 0,transparent 25%),
    radial-gradient(circle at 10% 90%,#fff0dd 0,transparent 28%),
    linear-gradient(135deg,#fff8f0 0%,#fff 62%);
  padding:105px 0 78px;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  width:460px;height:460px;
  border-radius:50%;
  border:70px solid rgba(255,122,0,.08);
  right:-170px;top:-180px;
  animation:floatShape 8s ease-in-out infinite;
}
.hero h1,.page-hero h1{
  font-size:clamp(42px,6vw,80px);
  font-weight:950;
  line-height:.98;
  letter-spacing:-3px;
}
.hero p,.page-hero p{
  color:var(--muted);
  font-size:20px;
  max-width:720px;
  margin:24px 0 32px;
}
.page-hero{
  background:
    radial-gradient(circle at 85% 15%,#ffe4c7 0,transparent 26%),
    linear-gradient(135deg,#fff8f0,#fff);
  padding:90px 0;
  position:relative;
  overflow:hidden;
}
.badge-x{
  background:var(--primary);
  color:#fff;
  border-radius:50px;
  padding:9px 15px;
  font-size:13px;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.section{padding:90px 0}
.bg-soft{background:var(--soft)}
.bg-soft2{background:var(--soft2)}
.section-title{
  font-size:clamp(31px,4vw,55px);
  font-weight:950;
  letter-spacing:-2px;
  line-height:1.05;
}
.section-sub{
  color:var(--muted);
  font-size:18px;
  max-width:820px;
  margin:0 auto 45px;
}
.card-x{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px;
  height:100%;
  transition:.28s ease;
  position:relative;
  overflow:hidden;
}
.card-x:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,122,0,.06),transparent 40%);
  opacity:0;
  transition:.28s ease;
}
.card-x:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 70px rgba(16,24,40,.10);
}
.card-x:hover:before{opacity:1}
.card-x > *{position:relative}
.card-x h3,.card-x h4{font-weight:950}
.card-x p{color:var(--muted)}
.icon{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--soft);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:20px;
}
.hero-card,.panel-card{
  background:#fff;
  border-radius:34px;
  box-shadow:0 28px 85px rgba(16,24,40,.13);
  padding:32px;
  position:relative;
}
.metric{
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  background:#fff;
}
.metric h3{
  font-size:38px;
  font-weight:950;
  color:var(--primary);
  margin:0;
}
.image-placeholder{
  min-height:380px;
  border-radius:32px;
  background:
    linear-gradient(135deg,rgba(255,122,0,.18),rgba(16,24,40,.08)),
    repeating-linear-gradient(45deg,#fff,#fff 12px,#fff7ef 12px,#fff7ef 24px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:35px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(16,24,40,.06);
}
.image-placeholder strong{font-size:28px;line-height:1.1}
.video-placeholder{
  min-height:380px;
  border-radius:30px;
  background:
    radial-gradient(circle at top right,rgba(255,122,0,.35),transparent 35%),
    linear-gradient(135deg,#101828,#25344d);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.play{
  width:82px;height:82px;
  border-radius:50%;
  background:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  margin:0 auto 18px;
  box-shadow:0 0 0 12px rgba(255,122,0,.2);
  animation:pulse 2.2s infinite;
}
.check-list{padding-left:0;list-style:none}
.check-list li{
  margin-bottom:14px;
  color:var(--muted);
  display:flex;
  gap:10px;
}
.check-list i{color:var(--primary);margin-top:4px}
.cta-band{
  background:var(--dark);
  color:#fff;
  border-radius:38px;
  padding:56px;
  position:relative;
  overflow:hidden;
}
.cta-band:after{
  content:"";
  position:absolute;
  width:330px;height:330px;
  border-radius:50%;
  background:rgba(255,122,0,.16);
  right:-100px;bottom:-160px;
}
.cta-band p{color:#d0d5dd}
.cta-band > *{position:relative;z-index:2}
.review-card{
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px;
  background:#fff;
  height:100%;
  box-shadow:0 18px 50px rgba(16,24,40,.06);
}
.stars{color:#ffb000;letter-spacing:2px}
.avatar{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--soft);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  margin-right:14px;
}
.tools-logo{
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  text-align:center;
  font-weight:950;
  color:var(--muted);
  background:#fff;
  transition:.25s ease;
}
.tools-logo:hover{transform:translateY(-6px);color:var(--primary)}
.timeline-step{
  position:relative;
  padding:0 0 28px 42px;
}
.timeline-step:before{
  content:"";
  position:absolute;
  left:6px;top:5px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 8px rgba(255,122,0,.14);
}
.timeline-step:after{
  content:"";
  position:absolute;
  left:15px;top:34px;
  width:2px;height:calc(100% - 25px);
  background:#ffd3a6;
}
.timeline-step:last-child:after{display:none}
.process-number{
  font-size:54px;
  font-weight:950;
  color:rgba(255,122,0,.22);
  line-height:1;
}
.usecase-tag{
  display:inline-block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50px;
  padding:8px 14px;
  color:var(--muted);
  font-weight:800;
  margin:4px;
}
footer{
  background:var(--dark);
  color:#fff;
  padding:74px 0 24px;
}
footer a{
  color:#d0d5dd;
  display:block;
  margin-bottom:10px;
}
footer a:hover{color:#fff}
footer p{color:#d0d5dd}
.footer-brand{
  font-size:31px;
  font-weight:950;
}
.footer-brand span{color:var(--primary)}
.reveal-up{animation:revealUp .8s ease both}
.float-card{animation:floatCard 6s ease-in-out infinite}
@keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatShape{0%,100%{transform:translateY(0)}50%{transform:translateY(24px)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse{0%{box-shadow:0 0 0 8px rgba(255,122,0,.24)}70%{box-shadow:0 0 0 20px rgba(255,122,0,0)}100%{box-shadow:0 0 0 8px rgba(255,122,0,0)}}
@media(max-width:991px){
  .navbar-nav{padding-top:15px}
  .nav-link:after{display:none}
  .hero-card{margin-top:10px}
  .section{padding:70px 0}
}
@media(max-width:768px){
  .top-bar{text-align:center}
  .top-bar a{display:inline-block;margin:4px 8px}
  .hero,.page-hero{padding:64px 0}
  .hero h1,.page-hero h1{letter-spacing:-2px}
  .hero p,.page-hero p{font-size:18px}
  .cta-band{padding:34px}
  .image-placeholder,.video-placeholder{min-height:300px}
}
@media(max-width:480px){
  .btn-main,.btn-darkx,.btn-outline-main{width:100%;margin-bottom:8px}
  .hero-card,.panel-card,.card-x{padding:24px}
  .section-title{letter-spacing:-1px}
}


/* Service dropdown + long service page improvements */
.dropdown-menu{
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px;
  box-shadow:0 24px 70px rgba(16,24,40,.12);
  min-width:280px;
}
.dropdown-item{
  font-weight:800;
  border-radius:13px;
  padding:11px 14px;
  color:var(--dark);
}
.dropdown-item:hover{
  background:var(--soft);
  color:var(--primary);
}
.service-detail-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:36px;
  height:100%;
  box-shadow:0 20px 55px rgba(16,24,40,.06);
}
.service-mini-nav{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  position:sticky;
  top:100px;
}
.service-mini-nav a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  font-weight:850;
  color:var(--dark);
}
.service-mini-nav a:hover{
  background:var(--soft);
  color:var(--primary);
}
.package-card{
  border:1px solid var(--line);
  border-radius:28px;
  padding:30px;
  background:#fff;
  height:100%;
  transition:.25s ease;
}
.package-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 65px rgba(16,24,40,.09);
}


/* V6 menu update: remove bottom underline and split Services dropdown */
.nav-link:after{
  display:none !important;
}
.service-menu-wrap{
  display:flex;
  align-items:center;
}
.service-menu-wrap .service-main-link{
  padding-right:4px;
}
.service-arrow-btn{
  border:0;
  background:transparent;
  color:var(--dark);
  font-weight:900;
  padding:8px 8px;
  line-height:1;
}
.service-arrow-btn:focus{
  box-shadow:none;
}
.service-arrow-btn::after{
  display:none;
}
@media(max-width:991px){
  .service-menu-wrap{
    justify-content:space-between;
    width:100%;
  }
  .service-menu-wrap .service-main-link{
    flex:1;
  }
}


/* V7 Client Review Slider */
#clientReviewSlider .carousel-indicators{
  bottom:-12px;
}
#clientReviewSlider .carousel-indicators button{
  width:11px;
  height:11px;
  border-radius:50%;
  background-color:var(--primary);
}
.review-control{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--dark);
  top:45%;
  opacity:1;
}
.review-control:hover{
  background:var(--primary);
}
.carousel-control-prev.review-control{
  left:-18px;
}
.carousel-control-next.review-control{
  right:-18px;
}
@media(max-width:991px){
  .carousel-control-prev.review-control{
    left:0;
  }
  .carousel-control-next.review-control{
    right:0;
  }
}
@media(max-width:768px){
  .review-control{
    display:none;
  }
  #clientReviewSlider .carousel-inner{
    padding-bottom:42px;
  }
}


/* V8 Easy replace image/video tags */
.media-holder{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 55px rgba(16,24,40,.08);
  background:#fff;
  min-height:360px;
}
.replaceable-image{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}
.media-label{
  position:absolute;
  left:22px;
  bottom:22px;
  background:rgba(16,24,40,.82);
  color:#fff;
  padding:14px 18px;
  border-radius:18px;
  font-weight:900;
  backdrop-filter:blur(8px);
}
.media-label small{
  color:#d0d5dd;
  font-weight:600;
}
.video-media{
  background:#101828;
}
.replaceable-video{
  width:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
  background:#101828;
}
.video-overlay-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,rgba(16,24,40,.62),rgba(16,24,40,.25));
  pointer-events:none;
  padding:30px;
}
.video-overlay-label h3{
  font-weight:950;
}
.video-overlay-label p{
  color:#d0d5dd;
  margin-bottom:0;
}
@media(max-width:768px){
  .media-holder,.replaceable-image,.replaceable-video{
    min-height:280px;
  }
}