/* Portable static layout for ordinary Nginx/Apache hosting. */
:root { --clm-blue: #1f6fff; --clm-deep: #12275a; --clm-soft: #f4f8ff; }
html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: #22304a; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
img, svg, video { display: block; max-width: 100%; height: auto; }
canvas, #infobg { display: none !important; }
.container-fluid { width: 100%; padding-left: 0; padding-right: 0; }
.container { width: min(100% - 40px, 1160px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
[class*="col-"] { min-width: 0; padding-left: 12px; padding-right: 12px; }
a { transition: none !important; }

#header { position: relative !important; z-index: 10; width: 100%; min-height: 88px; padding: 14px 0; background: rgba(255,255,255,.98); box-shadow: 0 5px 24px rgba(18,39,90,.08); }
#header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#header a.logo { position: static !important; float: none !important; flex: 0 0 auto; margin: 0; }
#header a.logo img.logo { width: auto !important; max-width: 190px !important; max-height: 58px !important; }
#header ul.top-nav { display: flex; float: none !important; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; margin: 0; padding: 0; list-style: none; order: 2; }
#header ul.top-nav > li { float: none !important; margin: 0 !important; }
#header ul.top-nav > li > a { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 15px !important; border-radius: 999px; line-height: 1.25 !important; white-space: nowrap; }
#header ul.top-nav > li.primary-action > a,
#header a.choose-language { color: #fff !important; background: var(--clm-blue) !important; border: 0 !important; }
#languageChooserContent { display: none !important; }

#top-content { width: 100%; background: linear-gradient(145deg, #eef5ff 0%, #fff 55%, #edf4ff 100%) !important; }
#main-slider, #main-slider .slide { width: 100%; }
#main-slider .slide {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  grid-template-areas: "copy image" "actions image";
  align-items: center;
  min-height: 610px !important;
  padding: 70px 0 !important;
  overflow: visible !important;
}
#main-slider .slide .image-holder {
  position: static !important; grid-area: image; width: 100% !important; height: auto !important;
  display: flex; align-items: center; justify-content: center; margin: 0 !important;
}
#main-slider .slide .image-holder img { width: min(100%, 560px) !important; max-height: 500px; object-fit: contain; margin: 0 auto; }
#main-slider .slide .text-holder {
  position: static !important; grid-area: copy; width: 100% !important; margin: 0 !important; padding: 0 20px 12px 0;
  color: var(--clm-deep) !important; text-align: left !important; font-size: 24px !important; line-height: 1.6 !important;
}
#main-slider .brand-cta { display: inline-block; color: var(--clm-deep) !important; font-size: clamp(48px, 7vw, 82px); font-weight: 800; line-height: 1.08; }
#main-slider .slide .button-holder {
  position: static !important; grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; width: 100% !important; margin: 0 !important; padding-right: 20px;
}
#main-slider .slide .button-holder a.blue-button {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; margin: 0 !important; padding: 12px 19px !important;
  color: #fff !important; background: var(--clm-blue) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 12px 26px rgba(31,111,255,.22);
}
#main-slider .slide .button-holder a.hero-experience { background: #10b981 !important; }

#info { position: relative !important; width: 100%; padding: 72px 0 !important; color: #fff; background: linear-gradient(135deg, #1f6fff, #5a43d6) !important; text-align: center; overflow: hidden; }
#info .container, #info .row, #info [class*="col-"] { position: relative; z-index: 1; }
#info .info-text { margin: 0 auto 26px !important; color: #fff !important; font-size: clamp(26px, 4vw, 42px) !important; line-height: 1.5 !important; }
#info .white-green-shadow-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 28px; border-radius: 10px; }

#features, #pricing, #apps, #testimonials, #more-features, #bluebg-info, #main-body-holder, #footer { position: relative; width: 100%; overflow: hidden; }
#features, #pricing, #apps, #testimonials, #more-features, #main-body-holder { padding: 76px 0 !important; }
.row-title { max-width: 820px; margin: 0 auto 44px !important; text-align: center; font-size: clamp(28px, 4vw, 42px) !important; line-height: 1.3 !important; }
#features .mfeature-box, #more-features .mfeature-box { height: 100% !important; margin: 0 0 24px !important; padding: 30px 24px !important; border: 1px solid #e6edfa; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px rgba(18,39,90,.08); }
#features .mfeature-box.active { transform: none !important; }

#pricing { background: var(--clm-soft) !important; }
#pricing .pricing-box { position: relative !important; height: 100% !important; min-height: 510px; margin: 0 0 28px !important; padding: 0 !important; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 16px 38px rgba(18,39,90,.1); }
#pricing .pricing-title { position: static !important; width: 100% !important; min-height: 72px; padding: 20px !important; color: #fff !important; background: var(--clm-blue) !important; text-align: center; font-size: 26px !important; line-height: 1.2 !important; }
#pricing .pricing-title::before, #pricing .pricing-title::after,
#pricing .pricing-box-body::before, #pricing .pricing-box-body::after,
#pricing .pricing-amount::before, #pricing .pricing-amount::after,
#pricing .pricing-details::before, #pricing .pricing-details::after { display: none !important; content: none !important; }
#pricing .pricing-box-body { position: static !important; width: 100% !important; min-height: 0 !important; padding: 30px 24px !important; background: #fff !important; border-radius: 0 !important; }
#pricing .pricing-amount, #pricing .pricing-details { position: static !important; width: 100% !important; height: auto !important; margin: 0 0 24px !important; padding: 0 !important; }
#pricing .pricing-details ul { margin: 0; padding: 0; list-style: none; }
#pricing .pricing-details li { padding: 9px 0 !important; border-bottom: 1px solid #edf1f8; }
#pricing .pricing-button { position: static !important; width: 100% !important; margin-top: 22px; }
#pricing a.pricing-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px !important; border-radius: 10px !important; }

#apps .app-holder, #testimonials .testimonial-box, #main-body-holder .announcement-single { max-width: 100%; }
#bluebg-info { padding: 72px 0 !important; }
#footer { padding: 64px 0 44px !important; }
#footer .row { align-items: flex-start; }
#fullpage-overlay, .fullpage-overlay, .promowidget { display: none !important; }
.animated, .fadeIn, .fadeInUp, [class*="animated"] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }

@media (max-width: 991px) {
  #header .container { flex-direction: column; align-items: center; }
  #header ul.top-nav { justify-content: center; }
  #main-slider .slide { grid-template-columns: 1fr; grid-template-areas: "image" "copy" "actions"; min-height: auto !important; padding: 46px 0 60px !important; }
  #main-slider .slide .image-holder img { width: min(100%, 480px) !important; }
  #main-slider .slide .text-holder { padding: 28px 0 18px; text-align: center !important; }
  #main-slider .slide .button-holder { justify-content: center; padding: 0; }
  #features .col-sm-4, #pricing .col-md-4 { width: 100%; flex: 0 0 100%; }
  #pricing .pricing-box { min-height: 0; }
}

@media (max-width: 575px) {
  .container { width: min(100% - 28px, 1160px); }
  #header ul.top-nav { width: 100%; display: grid; grid-template-columns: 1fr; }
  #header ul.top-nav > li, #header ul.top-nav > li > a { width: 100%; justify-content: center; text-align: center; }
  #main-slider .brand-cta { font-size: 46px; }
  #main-slider .slide .text-holder { font-size: 19px !important; }
  #main-slider .slide .button-holder { flex-direction: column; }
  #main-slider .slide .button-holder a.blue-button { width: 100%; }
  #features, #pricing, #apps, #testimonials, #more-features, #main-body-holder { padding: 54px 0 !important; }
  #footer .col-xs-6, #footer .col-xs-12 { width: 100%; flex: 0 0 100%; }
}