/* Six focused refinements requested for the public landing page. */

/* 1. Bela Call feature: the character is a purposeful focal point, not an empty ornament. */
.bela-call-gallery-images .bela-image-wide {
  background-position: 58% 56% !important;
  background-size: 92% auto !important;
}

.bela-call-gallery-images::before,
.bela-call-gallery-images::after {
  content: '';
  position: absolute;
  border: 1px solid #8ce5ff42;
  border-radius: 50%;
  pointer-events: none;
}

.bela-call-gallery-images::before {
  width: 230px;
  height: 230px;
  right: 17%;
  top: 38px;
  box-shadow: 0 0 0 32px #8ce5ff0d, 0 0 0 64px #8ce5ff08;
}

.bela-call-gallery-images::after {
  width: 12px;
  height: 12px;
  right: 8%;
  top: 18%;
  background: #5ee2d4;
  box-shadow: -310px 250px 0 #6bc2ff, -245px -22px 0 #8ce5ff;
}

/* 2. The floating entry is now visibly Bela Call rather than a generic star. */
.bela-float > .bela-float-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #9ee6f5;
  border-radius: 12px;
  background: linear-gradient(145deg, #e9f8ff, #d8f4ef) center / cover;
  box-shadow: inset 0 0 0 2px #ffffffb8;
  overflow: hidden;
}

.bela-float > .bela-float-avatar::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('bela_call_avatar.png') center / 112% auto no-repeat;
}

.bela-float {
  right: 28px !important;
  bottom: 26px !important;
  min-width: 218px;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 2px solid #123b68 !important;
  box-shadow: 0 18px 34px #0828474d, 0 6px 14px #0828472b !important;
}

.bela-float > .bela-float-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 13px;
}

.bela-float b {
  font-size: 13px !important;
}

.bela-float small {
  font-size: 10px !important;
}

.bela-float > strong {
  margin-left: auto !important;
  font-size: 21px !important;
}

/* Header: the brand leads, navigation supports, and the entry action is unmistakable. */
.site-header {
  min-height: 86px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  background: linear-gradient(100deg, #ffffff 0%, #fbfdff 58%, #eef9ff 100%) !important;
  border-bottom-color: #b9dfee !important;
  box-shadow: 0 8px 24px #123b6812 !important;
}

.site-header .brand {
  min-height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-header .brand img {
  width: 184px !important;
  height: 64px !important;
  object-fit: contain;
  mix-blend-mode: multiply;
}

footer .brand { padding: 0; background: transparent; box-shadow: none; }
footer .brand img { width: 164px !important; height: 60px !important; object-fit: contain; mix-blend-mode: multiply; }

.site-header nav {
  gap: 8px !important;
}

.site-header nav a:not(.header-cta) {
  padding: 11px 12px;
  border-bottom: 2px solid transparent;
  color: #173b61;
}

.site-header nav a:not(.header-cta):hover {
  color: #126ff2;
  border-bottom-color: #45cbbf;
}

.site-header .header-cta {
  min-height: 46px;
  padding: 12px 22px !important;
  border: 1px solid #0c4fa5;
  border-radius: 9px;
  background: linear-gradient(135deg, #0d3970, #126ff2 72%) !important;
  box-shadow: 0 12px 22px #126ff235 !important;
}

/* 3. Six module slides: remove the rigid divider and center the content area. */
.module-card {
  display: none !important;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-left: 7% !important;
  padding-right: 43% !important;
  color: #f7fbff;
  border-color: #5ebee8 !important;
  border-top-color: #55e0d1 !important;
  background: linear-gradient(135deg, #0b2748 0%, #123b68 68%, #eaf6ff 68%, #eaf6ff 100%) !important;
  box-shadow: 0 20px 42px #102f5530 !important;
}

.module-card.active {
  display: flex !important;
  isolation: isolate;
}

.module-card::before {
  content: '';
  position: absolute;
  inset: 0 38% 0 0;
  z-index: 0;
  background:
    linear-gradient(132deg, transparent 0 42%, #a3eff10d 42.2% 42.8%, transparent 43% 100%),
    linear-gradient(132deg, transparent 0 58%, #a3eff10d 58.2% 58.8%, transparent 59% 100%),
    repeating-linear-gradient(90deg, transparent 0 54px, #9de9ef0a 54px 55px),
    repeating-linear-gradient(0deg, transparent 0 54px, #9de9ef08 54px 55px);
  clip-path: polygon(0 0, 88% 0, 100% 26%, 100% 74%, 88% 100%, 0 100%);
  pointer-events: none;
}

.module-card::after {
  right: 44% !important;
  bottom: -36px !important;
  width: 170px !important;
  height: 170px !important;
  border-color: #72e4df20 !important;
  box-shadow: 0 0 0 24px #72e4df0a, 0 0 0 48px #72e4df06 !important;
  z-index: 0;
}

.module-card .module-index,
.module-card .module-icon,
.module-card > p,
.module-card ul,
.module-card .button {
  align-self: center;
  position: relative;
  z-index: 1;
}

.module-card h3 {
  position: relative;
  z-index: 1;
}

.module-card ul {
  justify-content: center;
}

.module-card .module-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid #8be7e34a;
  border-radius: 7px;
  color: #8fece0;
  background: #ffffff0b;
  box-shadow: inset 0 0 0 1px #ffffff08;
  font-size: 15px;
  letter-spacing: .08em;
}

.module-card h3 {
  color: #ffffff;
}

.module-card > p {
  color: #d7e9f8;
}

.module-card ul {
  color: #e6f3ff;
}

.module-card li::before {
  color: #55e0d1;
}

.module-card .module-icon {
  background: linear-gradient(145deg, #1a5689, #0e2f55);
  box-shadow: 0 10px 24px #03192f66;
}

.module-card .button.small {
  color: #082542;
  background: #ffffff;
  box-shadow: 0 10px 20px #03192f44;
}

.module-card .button.small:hover {
  color: #ffffff;
  background: #126ff2;
}

.module-visual {
  border-left: 0 !important;
  z-index: 1;
}

.module-visual::before {
  background: linear-gradient(90deg, #ffffffb8 0%, #ffffff24 34%, transparent 68%) !important;
}

/* 4. Four complete benefits, with a clearer, more substantial visual hierarchy. */
.trust-band {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.35fr !important;
  gap: 0 !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  color: #eaf5ff !important;
  background:
    linear-gradient(132deg, transparent 0 78%, #8be7e30b 78.2% 78.8%, transparent 79% 100%),
    linear-gradient(132deg, transparent 0 88%, #8be7e30b 88.2% 88.8%, transparent 89% 100%),
    linear-gradient(105deg, #0a2545 0%, #12395f 58%, #115b70 100%) !important;
}

.trust-band > div:not(.trust-note) {
  min-height: 76px;
  justify-content: center;
  padding: 0 24px !important;
  text-align: left;
  gap: 13px !important;
  border-right-color: #bfe7f133 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.trust-band > div:not(.trust-note) span {
  display: block;
  color: #d9edfc;
}

.trust-band > div:not(.trust-note) strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #76dbed8a;
  border-radius: 50%;
  color: #73e6d8 !important;
  background: #ffffff12;
  box-shadow: inset 0 0 0 5px #ffffff08;
  font-size: 13px !important;
  font-weight: 900;
}

.trust-band > div:not(.trust-note) b {
  color: #ffffff !important;
  font-size: 14px;
}

.trust-band .trust-implementation {
  min-width: 0;
}

.trust-band .trust-implementation span {
  white-space: normal;
  line-height: 1.45;
}

.trust-band .trust-implementation .implementation-line {
  display: inline-block;
  white-space: nowrap;
  font-size: inherit;
}

.trust-note {
  justify-self: stretch !important;
  max-width: none !important;
  padding-left: 24px;
  text-align: center;
  color: #c6e8f6 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* The statement gets quiet structural shapes without interrupting its message. */
.statement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(112deg, #ffffff 0%, #f5fbff 67%, #eefaf8 100%) !important;
}

.statement::before,
.statement::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.statement::before {
  width: 300px;
  height: 210px;
  right: -72px;
  top: -42px;
  border: 1px solid #329fc82b;
  border-radius: 28px;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, #329fc80b 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 38px, #329fc80b 38px 39px);
  box-shadow: -34px 38px 0 -1px #63d8cf0d;
  transform: rotate(-14deg);
}

.statement::after {
  width: 155px;
  height: 155px;
  left: -92px;
  bottom: -86px;
  border: 1px solid #2f9ae52b;
  border-radius: 24px;
  background: linear-gradient(135deg, #41d0c414 0 48%, transparent 48.5% 100%);
  box-shadow: 34px -28px 0 -1px #2f9ae510;
  transform: rotate(24deg);
}

.statement > * {
  position: relative;
  z-index: 1;
}

/* 5. Security becomes a distinct deep-blue protection zone. */
.security {
  color: #edf8ff;
  background:
    radial-gradient(circle at 88% 24%, #1b86aa52 0 12%, transparent 12.5%),
    radial-gradient(circle at 8% 100%, #0c75a444 0 13%, transparent 13.5%),
    linear-gradient(118deg, #071e3a 0%, #0d355c 53%, #0d566b 100%) !important;
}

.security .eyebrow {
  color: #69e2d4;
}

.security .section-heading h2 {
  color: #ffffff;
}

.security .section-heading > p {
  color: #c9e6f6;
}

.security::before {
  content: '' !important;
  width: 390px;
  height: 390px;
  right: -94px;
  top: -185px;
  border: 1px solid #8fe8fa45;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 48%, #d8fbff88 0 7%, transparent 7.5% 19%, #4dd7cf21 19.5% 27%, transparent 27.5% 100%);
  box-shadow: 0 0 0 42px #8fe8fa10, 0 0 0 84px #8fe8fa08;
}

.security::after {
  content: '';
  position: absolute;
  left: 7%;
  bottom: 40px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #55e0d1;
  box-shadow: 48px -20px 0 #2b9cff, 92px 6px 0 #8ce5ff;
}

.security .section-heading,
.security-grid {
  position: relative;
  z-index: 1;
  gap: 18px;
}

.security-grid > div {
  min-height: 188px;
  padding: 28px 27px;
  border: 1px solid #a9e9f036;
  border-left: 3px solid #55e0d1;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff16, #8beeff08);
  box-shadow: 0 18px 34px #0215253b;
  backdrop-filter: blur(7px);
}

.security-grid > div span {
  color: #77e9dc;
  font-size: 12px;
}

.security-grid > div h3 {
  color: #ffffff;
  font-size: 20px;
}

.security-grid > div p {
  color: #d2eafa;
  font-size: 14px;
  line-height: 1.6;
}

/* The demo invitation follows Bela Call and brings the page back to a light close. */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 88px 22px !important;
  color: #102f52;
  background:
    linear-gradient(135deg, transparent 0 48%, #4bcbd112 48.2% 48.8%, transparent 49% 100%),
    radial-gradient(circle at 14% 84%, #44d2c218 0 8%, transparent 8.5%),
    linear-gradient(112deg, #f7fcff 0%, #e8f6ff 58%, #e2f8f2 100%) !important;
}

.final-cta::before,
.final-cta::after {
  content: '';
  position: absolute;
  border: 1px solid #2d98c52b;
  pointer-events: none;
}

.final-cta::before {
  width: 230px;
  height: 230px;
  right: 8%;
  top: -116px;
  border-radius: 34px;
  transform: rotate(28deg);
  box-shadow: 0 0 0 30px #48c3d009, 0 0 0 60px #48c3d006;
}

.final-cta::after {
  width: 16px;
  height: 16px;
  left: 16%;
  bottom: 30px;
  border-radius: 50%;
  background: #43cabd;
  box-shadow: 54px -24px 0 #2c9df3, 112px 7px 0 #8adff0;
}

.final-cta .eyebrow {
  position: relative;
  z-index: 1;
  color: #147ec5;
}

.final-cta h2 {
  position: relative;
  z-index: 1;
  color: #102f52;
}

.final-cta p:not(.eyebrow) {
  position: relative;
  z-index: 1;
  color: #567491;
}

.final-cta .button {
  position: relative;
  z-index: 1;
}

/* 6. Implementation image is part of the section background, not a white tile. */
.method {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, transparent 0 47%, #35b8cf08 47.2% 47.8%, transparent 48% 100%),
    linear-gradient(112deg, #fafdff 0%, #effaff 58%, #edf9f7 100%) !important;
}

.method::before,
.method::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.method::before {
  width: 380px;
  height: 270px;
  right: -78px;
  top: 42px;
  border: 1px solid #49b7d126;
  border-radius: 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, #3caac50b 44px 45px),
    repeating-linear-gradient(0deg, transparent 0 44px, #3caac50b 44px 45px);
  transform: rotate(-12deg);
  box-shadow: -38px 46px 0 -1px #d7f3f633;
}

.method::after {
  width: 160px;
  height: 160px;
  left: -88px;
  bottom: -66px;
  border: 1px solid #28afbd26;
  border-radius: 28px;
  background: linear-gradient(135deg, #58d4c416 0 48%, transparent 48.5% 100%);
  box-shadow: 34px -30px 0 -1px #2c9cf312;
  transform: rotate(24deg);
}

.method > * {
  position: relative;
  z-index: 1;
}

.method-art {
  position: relative;
  min-height: 470px;
  background-color: transparent !important;
  background-position: center 58% !important;
  background-size: 112% auto !important;
  box-shadow: none !important;
}

.method-art::before {
  content: none;
}

@media (max-width: 900px) {
  .trust-band {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .trust-note {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .module-card {
    padding: 245px 24px 30px !important;
    text-align: left;
    background: linear-gradient(180deg, #eaf6ff 0 220px, #0b2748 220px, #123b68 100%) !important;
  }

  .module-card::before {
    inset: 220px 0 0;
    clip-path: none;
  }

  .module-card::after {
    right: -44px !important;
    bottom: -50px !important;
  }

  .module-card .module-index,
  .module-card .module-icon,
  .module-card > p,
  .module-card ul,
  .module-card .button {
    align-self: flex-start;
  }

  .module-card ul {
    justify-content: flex-start;
  }

  .trust-band {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .trust-band > div:not(.trust-note) {
    min-height: 82px;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 8px;
    background: #ffffff0d;
  }

  .method-art {
    min-height: 340px;
    background-size: 96% auto !important;
  }

  .bela-float {
    right: 14px !important;
    bottom: 14px !important;
    min-width: 0;
    padding: 10px 12px !important;
  }

  .bela-float > .bela-float-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .site-header .brand {
    padding: 0;
  }

  .site-header .brand img {
    width: 128px !important;
    height: 52px !important;
  }

  footer .brand img { width: 134px !important; height: 52px !important; }
}