/* ---- Cloudrix logo 2.0 (3.58:1; was 290×56 until 2026-09-27) ---- */
.header_area .navbar,
.header_area .menu_one,
.header_area .navbar > .container {
  overflow: visible;
}

.cloudrix_brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  position: relative;
  z-index: 5;
  max-height: none !important;
  height: auto !important;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1rem;
  background: transparent !important;
}

.cloudrix_brand .cloudrix-logo {
  display: block;
  width: 215px;
  height: 60px;
  max-width: none;
  background: transparent !important;
  object-fit: contain;
}

.footer_area .cloudrix_brand .cloudrix-logo {
  width: 215px;
  height: 60px;
}

/* Banner / dark footer: the white artwork itself (logo-white.svg), so no
   filter is needed and the shine still reads. */
.cloudrix-logo--light {
  filter: none;
}

/* Sticky white header: original brand colors */
.cloudrix-logo--dark {
  filter: none;
}

/* sticky_logo pattern: light on banner, dark when navbar_fixed */
.header_area .sticky_logo.cloudrix_brand .cloudrix-logo--dark {
  display: none;
}

.header_area .sticky_logo.cloudrix_brand .cloudrix-logo--light {
  display: block;
}

.header_area.navbar_fixed .sticky_logo.cloudrix_brand .cloudrix-logo--light {
  display: none;
}

.header_area.navbar_fixed .sticky_logo.cloudrix_brand .cloudrix-logo--dark {
  display: block !important;
}

/* Level the nav with the wordmark's lowercase (x-height) band, not the whole
   mark: the wordmark sits in the lower half of the canvas, under the cloud,
   so the menu and CTA drop 15px, measured from rendered pixels. Desktop only;
   mobile collapses the nav into the toggler. */
@media (min-width: 992px) {
  .header_area .menu_one.menu_eight .navbar-collapse {
    position: relative;
    top: 15px;
  }
}

@media (max-width: 991.98px) {
  .cloudrix_brand .cloudrix-logo {
    width: 172px;
    height: 48px;
  }
}

@media (max-width: 575.98px) {
  .cloudrix_brand .cloudrix-logo {
    width: 143px;
    height: 40px;
  }
}

/* Cloudrix overrides — keep Saasland look, fix layout when copy differs */

/* ---- Header alignment (match menu_eight + security_btn behavior) ---- */
.header_area .menu_one.menu_eight .navbar-collapse {
  align-items: center;
}

.header_area .menu_one.menu_eight .navbar-nav.menu {
  align-items: center;
  flex-wrap: nowrap;
}

/* Slightly larger nav labels for readability (base is 15px) */
.header_area .menu_one.menu_eight .menu > .nav-item > .nav-link {
  font-size: 17px;
}

.header_area .security_btn {
  font-size: 16px;
}

.header_area .security_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  min-height: 40px;
  padding: 8px 28px;
  box-sizing: border-box;
  text-align: center;
}

.header_area.navbar_fixed .security_btn {
  color: #0e79de;
}

.header_area.navbar_fixed .security_btn:hover {
  background: #0e79de;
  color: #fff;
}

/* ---- Hero CTAs: width matches logo row (like master) ---- */
.security_banner_content .hero_cta_stack {
  display: inline-grid;
  grid-template-columns: max-content;
  justify-items: stretch;
  max-width: 100%;
  margin-top: 22px;
  row-gap: 24px;
  box-sizing: border-box;
}

.security_banner_content {
  min-width: 0;
  max-width: 100%;
}

.security_banner_content .hero_free_quote {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

.security_banner_content .action_btn {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  margin-top: 0;
  box-sizing: border-box;
}

.security_banner_content .action_btn .app_btn {
  white-space: nowrap;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.security_banner_content .action_btn .w_btn {
  white-space: nowrap;
  margin-right: 0;
}

/* Logo row defines the stack width */
.security_banner_content .hero_platform_links {
  margin-top: 0;
  flex-wrap: nowrap;
  gap: 14px 18px;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.security_banner_content .hero_cloud_logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}

.security_banner_content .hero_cloud_logo:hover,
.security_banner_content .hero_cloud_logo:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  z-index: 10;
}

/* Labels below icons so they clear the Free Quote button */
.security_banner_content .hero_cloud_logo::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  padding: 8px 14px;
  border-radius: 6px;
  background: #fff;
  color: #677294;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0px 20px 40px 0px rgba(12, 0, 46, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 11;
}

.security_banner_content .hero_cloud_logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-4px);
  border: 6px solid transparent;
  border-bottom-color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 11;
  filter: drop-shadow(0 -2px 4px rgba(12, 0, 46, 0.06));
}

.security_banner_content .hero_cloud_logo:hover::after,
.security_banner_content .hero_cloud_logo:focus-visible::after,
.security_banner_content .hero_cloud_logo:hover::before,
.security_banner_content .hero_cloud_logo:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Keep edge labels on-screen when the row wraps */
.security_banner_content .hero_cloud_logo:first-child::after {
  left: 0;
  transform: translateX(0) translateY(-4px);
}

.security_banner_content .hero_cloud_logo:first-child::before {
  left: 16px;
  transform: translateX(0) translateY(-4px);
}

.security_banner_content .hero_cloud_logo:first-child:hover::after,
.security_banner_content .hero_cloud_logo:first-child:focus-visible::after {
  transform: translateX(0) translateY(0);
}

.security_banner_content .hero_cloud_logo:first-child:hover::before,
.security_banner_content .hero_cloud_logo:first-child:focus-visible::before {
  transform: translateX(0) translateY(0);
}

.security_banner_content .hero_cloud_logo:last-child::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-4px);
}

.security_banner_content .hero_cloud_logo:last-child::before {
  left: auto;
  right: 16px;
  transform: translateX(0) translateY(-4px);
}

.security_banner_content .hero_cloud_logo:last-child:hover::after,
.security_banner_content .hero_cloud_logo:last-child:focus-visible::after {
  transform: translateX(0) translateY(0);
}

.security_banner_content .hero_cloud_logo:last-child:hover::before,
.security_banner_content .hero_cloud_logo:last-child:focus-visible::before {
  transform: translateX(0) translateY(0);
}

.security_banner_content .hero_cloud_logo img {
  display: block;
  width: auto;
  height: 50px;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .security_banner_content .hero_cta_stack {
    display: inline-grid;
    grid-template-columns: minmax(0, max-content);
    max-width: 100%;
  }

  .security_banner_content .hero_free_quote {
    width: 100%;
  }

  .security_banner_content .hero_platform_links {
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .security_banner_content .hero_platform_links {
    gap: 12px 14px;
  }

  .security_banner_content .hero_cloud_logo img {
    height: 36px;
  }

  .security_banner_content .hero_cloud_logo::after {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* ---- Hero typewriter headline ---- */
.security_banner_content .cloudrix_typewriter {
  min-height: 1.2em;
}

.cloudrix_typewriter_caret {
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.12em;
  background: currentColor;
  vertical-align: -0.05em;
  opacity: 1;
}

.cloudrix_typewriter_caret.is-blinking {
  animation: cloudrix_caret_blink 1s steps(1) infinite;
}

@keyframes cloudrix_caret_blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloudrix_typewriter_caret.is-blinking {
    animation: none;
    opacity: 1;
  }
}

/* ---- Hero bullet points (master / non-CLI) ---- */
.security_banner_content .hero_bullets {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  max-width: 34rem;
  font-size: 21px;
}

.security_banner_content .hero_bullets li {
  position: relative;
  padding-left: 1.55em;
  margin-bottom: 0.45em;
}

.security_banner_content .hero_bullets li:last-child {
  margin-bottom: 0;
}

.security_banner_content .hero_bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: url("/img/icons/favicon.svg") center / contain no-repeat;
}

/* Left CTA stack: reserved CLI slot (content TBD) */
.security_banner_content .hero_cli_placeholder {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  min-height: 7.5rem;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.12);
}

/* ---- CLI terminal on the right (replaces banner image, same footprint) ---- */
.h_security_banner_area .hero_terminal_frame {
  width: 100%;
  max-width: 100%;
}

.h_security_banner_area .hero_terminal_slot {
  /* Match home-security banner.png intrinsic ratio (750×650) */
  width: 100%;
  aspect-ratio: 750 / 650;
  max-width: 100%;
}

.h_security_banner_area .hero_terminal_slot .cloudrix_terminal {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0f14;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.h_security_banner_area .hero_terminal_slot .cloudrix_terminal_nav {
  flex: 0 0 auto;
}

.h_security_banner_area .hero_terminal_slot .cloudrix_terminal_body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: 22px;
}

@media (max-width: 991.98px) {
  .h_security_banner_area .hero_terminal_frame {
    margin-top: 28px;
  }

  .h_security_banner_area .hero_terminal_slot .cloudrix_terminal_body {
    font-size: 19px;
  }
}

@media (max-width: 575.98px) {
  .h_security_banner_area .hero_terminal_slot .cloudrix_terminal_body {
    font-size: 17px;
    padding: 14px 12px 16px;
  }
}

/* ---- CLI terminal questions (shared / legacy left styles) ---- */
.security_banner_content .cloudrix_terminal {
  margin-top: 0;
  /* width:0 + min-width:100% => fill the stack track (logo-row width)
     without the long CLI text inflating it and pushing past the last logo */
  width: 0;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0f14;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cloudrix_terminal_chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #151b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cloudrix_terminal_dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.cloudrix_terminal_dot--red {
  background: #ff5f56;
}

.cloudrix_terminal_dot--yellow {
  background: #ffbd2e;
}

.cloudrix_terminal_dot--green {
  background: #27c93f;
}

.cloudrix_terminal_title {
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* Slideshow-style navigation dashes: click to jump to a question */
.cloudrix_terminal_nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #10161d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Fixed size for every dash — the active one differs by colour only, so the
   row never reflows and the dashes keep their spacing. */
.cloudrix_terminal_dash {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.18s ease;
}

/* Invisible hit area — a 6px bar is too small to click reliably. Kept within
   half the 10px gap so neighbouring targets never overlap. */
.cloudrix_terminal_dash::after {
  content: "";
  position: absolute;
  inset: -10px -5px;
}

.cloudrix_terminal_dash:hover {
  background: rgba(255, 255, 255, 0.55);
}

.cloudrix_terminal_dash:focus-visible {
  outline: 2px solid #3ddc97;
  outline-offset: 3px;
}

.cloudrix_terminal_dash.is-active {
  background: #3ddc97;
}

.cloudrix_terminal_body {
  min-height: 10.5rem;
  padding: 18px 18px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.55;
  color: #d7e2ec;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cloudrix_terminal_question {
  color: #e8f1f8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cloudrix_terminal_answer_line {
  margin-top: 8px;
}

.cloudrix_terminal_answer {
  color: #67e8f9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Numbers inside an answer — amber and bold against the cyan copy */
.cloudrix_terminal_metric {
  color: #ffc94d;
  font-weight: 700;
}

.cloudrix_terminal_line {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.cloudrix_terminal_prompt {
  color: #3ddc97;
  white-space: nowrap;
}

.cloudrix_terminal_typed {
  display: inline;
}

.cloudrix_terminal_text {
  color: #e8f1f8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cloudrix_terminal_caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  background: #3ddc97;
  vertical-align: -0.15em;
  opacity: 1;
}

.cloudrix_terminal_caret.is-blinking {
  animation: cloudrix_caret_blink 1s steps(1) infinite;
}

@media (max-width: 991.98px) {
  .security_banner_content .hero_cta_stack {
    width: max-content;
    max-width: 100%;
  }

  .security_banner_content .hero_platform_links {
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .cloudrix_terminal_body {
    font-size: 15px;
    min-height: 6.5rem;
    padding: 16px 14px 18px;
  }

  .cloudrix_terminal_title {
    font-size: 12px;
  }
}

/* ---- Clients compat buttons ---- */
.security_customers_logo_area .d-flex.justify-content-center {
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.security_app_btn {
  white-space: normal;
}

/* ---- Pricing table: horizontal scroll on small screens ---- */
.price_info_two.price_info_three {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Smooth section anchors under sticky header ---- */
[id="home"],
[id="services"],
[id="approach"],
[id="pricing"],
[id="clients"],
[id="platforms"],
[id="contact"] {
  scroll-margin-top: 90px;
}

/* ---- Tablet / small desktop: tighten nav so CTA never wraps ---- */
@media (max-width: 1199.98px) {
  .header_area .menu_one.menu_eight .menu > .nav-item > .nav-link {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header_area .security_btn {
    padding: 7px 20px;
    font-size: 13px;
  }
}

@media (max-width: 991.98px) {
  .header_area .menu_one.menu_eight .navbar-collapse {
    align-items: stretch;
    padding-top: 12px;
    padding-bottom: 16px;
  }

  .header_area .menu_one.menu_eight .navbar-nav.menu {
    flex-wrap: wrap;
    margin-bottom: 12px !important;
  }

  .header_area .security_btn {
    display: inline-flex;
    width: auto;
    margin-left: 15px;
    color: #0e79de;
  }

  .security_banner_content .action_btn {
    flex-direction: column;
    align-items: stretch !important;
  }

  .security_customers_logo_area .d-flex.justify-content-center {
    flex-direction: column;
    align-items: center;
  }

  .security_app_btn + .security_app_btn {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .security_banner_content h2 {
    font-size: 28px;
    line-height: 1.3;
  }

  .hosting_title.security_title h2,
  .hosting_title.analytices_title h2 {
    font-size: 26px;
    line-height: 1.35;
  }
}

/* ---- Contact CTA: keep button single-line and balanced with copy ---- */
.security_action_inner.cloudrix_action_inner {
  gap: 32px;
  align-items: center;
}

.security_action_inner.cloudrix_action_inner .media {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}

.security_action_inner.cloudrix_action_inner .media-body h3 {
  max-width: 36rem;
}

.security_action_inner .cloudrix_action_btn {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: 14px 40px;
  min-width: 160px;
  text-align: center;
}

@media (max-width: 991.98px) {
  .security_action_inner.cloudrix_action_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .security_action_inner .cloudrix_action_btn {
    margin-left: 0;
  }
}

/* ---- WhatsApp FAB: right-aligned, stacked below Tidio ---- */
.cloudrix_whatsapp_fab {
  position: fixed;
  z-index: 999998;
  right: 22px;
  /* starting offset only — WhatsAppButton measures Crisp live and rewrites
     this inline, so the button tracks the greeting card as it opens/collapses */
  bottom: 88px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 0;
  background: transparent;
}

.cloudrix_whatsapp_fab img {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 50%;
}

.cloudrix_whatsapp_fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

@media (max-width: 575.98px) {
  .cloudrix_whatsapp_fab {
    right: 18px;
    bottom: 80px;
    width: 50px;
    height: 50px;
  }

  .cloudrix_whatsapp_fab img {
    width: 50px;
    height: 50px;
  }
}
/* =========================================================================
   Cloudrix — hero bot sweep reveal
   Append to the END of public/css/cloudrix.css
   Replaces the .hero_media_slot placeholder in the hero's left column.
   ========================================================================= */

.security_banner_content .hero_bot_stage {
  --bot-size: 88px;
  --rail-inset: 40px;

  position: relative;
  width: 100%;
  min-height: 250px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* the line the bot walks along */
.hero_bot_rail {
  position: absolute;
  left: var(--rail-inset);
  right: var(--rail-inset);
  bottom: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 12%,
    rgba(255, 255, 255, 0.34) 88%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* phrase, clipped open as the bot passes */
.hero_bot_caption {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 28px;
  text-align: center;
  transition: clip-path 3000ms cubic-bezier(0.45, 0.05, 0.3, 1);
}

.hero_bot_caption span {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: #ffffff;
  white-space: normal;
}

/* track width = travel distance; mover is 100% of that so translateX(100%) crosses the rail */
.hero_bot_travel {
  position: absolute;
  left: var(--rail-inset);
  bottom: 26px;
  width: calc(100% - 2 * var(--rail-inset) - var(--bot-size));
  height: var(--bot-size);
}

.hero_bot_mover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--bot-size);
  transition: transform 3000ms cubic-bezier(0.45, 0.05, 0.3, 1);
  will-change: transform;
}

/* bot sits at the leading edge of the mover */
.hero_bot_walker {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bot-size);
  height: var(--bot-size);
}

.hero_bot_walker img {
  position: relative;
  display: block;
  width: var(--bot-size);
  height: var(--bot-size);
  filter: drop-shadow(0 6px 14px rgba(11, 36, 54, 0.3));
}

.hero_bot_shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 74px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(11, 36, 54, 0.28);
  filter: blur(7px);
}

/* progress pips */
.hero_bot_dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.hero_bot_dots span {
  width: 6px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: width 0.3s ease, background 0.3s ease;
}

.hero_bot_dots span.is-active {
  width: 20px;
  background: rgba(255, 255, 255, 0.85);
}

.hero_bot_stage .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- If/when the hero goes to a white background, flip these ------------ */
.is_light .security_banner_content .hero_bot_stage {
  background: #f7fafc;
  border-color: #dce7ef;
}

.is_light .hero_bot_rail {
  background: linear-gradient(
    90deg,
    rgba(11, 36, 54, 0) 0%,
    rgba(11, 36, 54, 0.16) 12%,
    rgba(11, 36, 54, 0.16) 88%,
    rgba(11, 36, 54, 0) 100%
  );
}

.is_light .hero_bot_caption span {
  color: #0b2436;
}

.is_light .hero_bot_dots span {
  background: rgba(11, 36, 54, 0.2);
}

.is_light .hero_bot_dots span.is-active {
  background: #0e79de;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .security_banner_content .hero_bot_caption span {
    font-size: 24px;
  }
}

@media (max-width: 575.98px) {
  .security_banner_content .hero_bot_stage {
    --bot-size: 62px;
    --rail-inset: 20px;
    min-height: 200px;
  }

  .hero_bot_caption {
    top: 20px;
    left: 12px;
    right: 12px;
  }

  .security_banner_content .hero_bot_caption span {
    font-size: 20px;
  }

  .hero_bot_shadow {
    width: 52px;
    height: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_bot_caption,
  .hero_bot_mover {
    transition: none !important;
  }
}

/* =========================================================================
   Cloudrix — hero video CTA ("Who are We ?")
   Append to the END of public/css/cloudrix.css
   Replaces the orange .app_btn.hero_free_quote pill.
   ========================================================================= */

.security_banner_content .hero_video_btn {
  /* geometry copied from .hero_free_quote so the stack width is unchanged */
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 12px 39px;
  border-radius: 12px; /* matches .hero_bot_stage */
  white-space: nowrap;
  text-align: center;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff;

  background-color: #c1121f;
  box-shadow: 0px 10px 50px 0px rgba(155, 15, 25, 0.28);
  transition: background-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.security_banner_content .hero_video_btn:hover,
.security_banner_content .hero_video_btn:focus-visible {
  background-color: #9d0e19;
  color: #ffffff;
  box-shadow: 0px 6px 24px 0px rgba(155, 15, 25, 0.36);
  transform: translateY(-1px);
}

.security_banner_content .hero_video_btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* white play badge — rounded rectangle */
.hero_video_btn_play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 24px;
  border-radius: 6px;
  background: #ffffff;
  color: #c1121f;
  line-height: 0;
}

.hero_video_btn_play svg {
  display: block;
  margin-left: 1px; /* optical centring of the triangle */
}

.security_banner_content .hero_video_btn:hover .hero_video_btn_play {
  color: #9d0e19;
}

/* white-background hero variant */
.is_light .security_banner_content .hero_video_btn {
  box-shadow: 0px 10px 34px 0px rgba(155, 15, 25, 0.22);
}

@media (max-width: 575.98px) {
  .security_banner_content .hero_video_btn {
    padding: 11px 24px;
    font-size: 15px;
    gap: 10px;
  }

  .hero_video_btn_play {
    width: 30px;
    height: 21px;
  }
}

/* =========================================================================
   Cloudrix — positioning refresh (outcomes + Today/Tomorrow roadmap)
   ========================================================================= */

/*
  Approach (:before) is a huge rotated slab that intentionally bleeds upward.
  In the original template the previous section absorbed it; with Pillars in
  between it covers the cards. Contain the bleed and stack our sections above.
*/
.h_security_about_area {
  overflow: hidden;
  isolation: isolate;
}

.h_security_about_area:before {
  /* Keep the soft angle inside Approach only */
  top: -80px;
  width: 120%;
  height: 280px;
  right: -80px;
}

.cloudrix_footnote {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7c8a;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
}

.cloudrix_roadmap_area,
.cloudrix_pillars_area,
.cloudrix_ai_preview_area {
  position: relative;
  z-index: 2;
  padding: 90px 0;
  background: #ffffff;
}

.cloudrix_roadmap_note {
  max-width: 640px;
  margin: 12px auto 0;
  color: #4a6274;
  padding: 0 12px;
}

.cloudrix_roadmap_row {
  margin-top: 40px;
}

.cloudrix_roadmap_card,
.cloudrix_pillar_card {
  height: 100%;
  padding: 32px 28px;
  border-radius: 12px;
  background: #f7fafc;
  border: 1px solid #dce7ef;
  box-sizing: border-box;
}

.cloudrix_roadmap_card.is_future {
  background: #0b2436;
  border-color: #0b2436;
  color: #ffffff;
}

.cloudrix_roadmap_card h3,
.cloudrix_pillar_card h3,
.cloudrix_ai_preview_area h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 8px 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
}

.cloudrix_roadmap_card p,
.cloudrix_ai_preview_area p {
  color: inherit;
  opacity: 0.92;
}

.cloudrix_roadmap_card.is_future p {
  color: rgba(255, 255, 255, 0.82);
}

.cloudrix_roadmap_eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0e79de;
}

.cloudrix_roadmap_card.is_future .cloudrix_roadmap_eyebrow {
  color: #7ec8ff;
}

.cloudrix_badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #c1121f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cloudrix_check_list {
  margin: 20px 0 0;
  padding: 0;
}

.cloudrix_check_list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.45;
}

.cloudrix_check_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0e79de;
  box-shadow: inset 0 0 0 3px #fff;
}

.cloudrix_roadmap_card.is_future .cloudrix_check_list li::before {
  background: #7ec8ff;
  box-shadow: inset 0 0 0 3px #0b2436;
}

.cloudrix_roadmap_cta,
.cloudrix_ai_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 11px 28px;
  border-radius: 12px;
  background: #c1121f;
  color: #ffffff !important;
  font-weight: 500;
  text-align: center;
}

.cloudrix_roadmap_cta:hover,
.cloudrix_ai_cta:hover {
  background: #9d0e19;
  color: #ffffff !important;
}

.cloudrix_ai_preview_area {
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
}

.cloudrix_ai_list {
  padding: 28px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dce7ef;
}

/* Results metrics — kill template stagger that assumed only 3 tiles */
.security_features_area {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.cloudrix_metrics_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: none;
  margin: 0;
}

.cloudrix_metrics_row .s_features_item {
  flex: 1 1 140px;
  max-width: 180px;
  margin-top: 0 !important;
}

.cloudrix_metric_item {
  width: 100% !important;
  text-align: center;
  padding: 22px 12px !important;
  border-radius: 12px !important;
  box-sizing: border-box;
}

.cloudrix_metric_item h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: #0e79de;
  line-height: 1.1;
}

.cloudrix_metric_item h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #4a6274;
}

.cloudrix_outcome_grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}

.cloudrix_outcome_tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dce7ef;
  min-height: 88px;
  min-width: 0;
}

.cloudrix_outcome_tile strong {
  font-size: 14px;
  font-weight: 600;
  color: #0b2436;
  word-break: break-word;
}

.cloudrix_outcome_tile span {
  font-size: 13px;
  color: #0e79de;
  font-weight: 500;
}

/* Results section — circular knobs + highlight strip */
.cloudrix_knobs {
  padding-top: 40px;
}

.cloudrix_knobs .progress_item {
  margin-bottom: 20px;
}

.cloudrix_knobs .circle {
  display: inline-block;
}

.cloudrix_knobs .circle canvas {
  position: relative;
  z-index: 0;
}

.cloudrix_knobs .number {
  z-index: 1;
  font-size: 34px;
  font-weight: 600;
}

.cloudrix_knobs .number .counter {
  font-weight: 600;
}

.cloudrix_knobs .progress_item h4 {
  margin-bottom: 4px;
  min-height: 60px;
}

@media (max-width: 575px) {
  .cloudrix_knobs .progress_item h4 {
    min-height: 0;
  }
}

.cloudrix_knobs .progress_item p {
  color: #4a6274;
  font-size: 14px;
}

.cloudrix_stat_strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.cloudrix_stat_pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 28px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #dce7ef;
  min-width: 200px;
  text-align: center;
}

.cloudrix_stat_pill strong {
  font-size: 20px;
  font-weight: 700;
  color: #0e79de;
  line-height: 1.1;
}

.cloudrix_stat_pill span {
  font-size: 13px;
  color: #4a6274;
}

@media (max-width: 575px) {
  .cloudrix_stat_pill {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Roadmap — two tracks: static "today" grid + moving "coming soon" carousel */

/* Heading label above each track */
.cloudrix_track_label {
  margin: 54px 0 26px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: #2c2c51;
}

/* Track 1 — static grid of today cards */
.cloudrix_today_grid {
  align-items: stretch;
}
.cloudrix_today_grid > [class*="col-"] {
  display: flex;
  margin-bottom: 26px;
}

/* Track 2 — carousel (standalone; does not use .service_carousel styles) */
.cloudrix_roadmap_carousel {
  margin-top: 6px;
  position: relative;
  padding: 0 58px;
}

/* Room for card shadows without letting off-stage clones bleed in sideways. */
.cloudrix_roadmap_carousel .owl-stage-outer {
  padding: 18px 4px;
}

/* Equal-height cards across the owl stage */
.cloudrix_roadmap_carousel .owl-stage {
  display: flex;
}
.cloudrix_roadmap_carousel .owl-item {
  display: flex;
  height: auto;
}
.cloudrix_roadmap_carousel .owl-item .service_item {
  box-shadow: 0 30px 40px 0 rgba(12, 0, 46, 0.1);
}

/* Nav arrows */
.cloudrix_roadmap_carousel .owl-nav {
  margin: 0;
}
.cloudrix_roadmap_carousel .owl-nav button.owl-prev,
.cloudrix_roadmap_carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 2px 20px 2px rgba(12, 0, 46, 0.08);
  color: #222d39 !important;
  font-size: 16px;
  line-height: 52px;
  transition: all 0.2s linear;
}
.cloudrix_roadmap_carousel .owl-nav button.owl-prev {
  left: 0;
}
.cloudrix_roadmap_carousel .owl-nav button.owl-next {
  right: 0;
}
.cloudrix_roadmap_carousel .owl-nav button.owl-prev:hover,
.cloudrix_roadmap_carousel .owl-nav button.owl-next:hover {
  background: #0e79de !important;
  color: #ffffff !important;
}
.cloudrix_roadmap_carousel .owl-nav button.disabled {
  opacity: 0.4;
}

/* Dash-style pagination (matches the hero robot dots) */
.cloudrix_roadmap_carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.cloudrix_roadmap_carousel .owl-dots .owl-dot {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
}
.cloudrix_roadmap_carousel .owl-dots .owl-dot span {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0;
  border-radius: 50%;
  background: rgba(11, 36, 54, 0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* Active dot: same size (override owl's scale), differentiated by colour + glow */
.cloudrix_roadmap_carousel .owl-dots .owl-dot.active span {
  transform: none;
  background: #0e79de;
  box-shadow: 0 0 0 4px rgba(14, 121, 222, 0.18),
    0 4px 12px rgba(14, 121, 222, 0.6);
}
.cloudrix_roadmap_carousel .owl-dots .owl-dot:hover span {
  background: rgba(14, 121, 222, 0.55);
}
.cloudrix_roadmap_carousel .owl-dots .owl-dot.active:hover span {
  background: #0e79de;
}

@media (max-width: 575px) {
  .cloudrix_roadmap_carousel {
    padding: 0 40px;
  }
  .cloudrix_roadmap_carousel .owl-nav button.owl-prev,
  .cloudrix_roadmap_carousel .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

.cloudrix_roadmap_item {
  padding: 34px 30px;
  border-radius: 16px;
  min-height: 210px;
  width: 100%;
}

.cloudrix_roadmap_item .icon {
  border-radius: 16px;
}

.cloudrix_roadmap_item h4 {
  margin-bottom: 0;
  padding-right: 60px;
}

.cloudrix_phase_tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cloudrix_phase_tag.is_today {
  background: rgba(14, 121, 222, 0.12);
  color: #0e79de;
}

.cloudrix_phase_tag.is_soon {
  background: rgba(193, 18, 31, 0.1);
  color: #c1121f;
}

.cloudrix_roadmap_item.is_future {
  background: #0b2436;
  border-color: #0b2436;
}

.cloudrix_roadmap_item.is_future h4 {
  color: #ffffff !important;
}

.cloudrix_roadmap_item.is_future .cloudrix_phase_tag.is_soon {
  background: rgba(255, 255, 255, 0.12);
  color: #ff8a94;
}

.cloudrix_roadmap_item.is_future:hover {
  border-color: #1d4b6b;
}

.cloudrix_roadmap_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 50px;
  text-align: center;
}

.cloudrix_roadmap_caption {
  margin: 0;
  max-width: 560px;
  color: #4a6274;
  font-size: 15px;
}

.cloudrix_roadmap_caption strong {
  color: #0b2436;
}

.cloudrix_roadmap_footer .cloudrix_roadmap_cta {
  margin-top: 0;
}

.cloudrix_pillar_card {
  margin-bottom: 24px;
  background: #ffffff;
}

.cloudrix_why_us {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 28px 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dce7ef;
}

.cloudrix_why_us h3 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 600;
}

.cloudrix_proof_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cloudrix_proof_tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 10px;
  background: #f7fafc;
  min-width: 0;
}

.cloudrix_proof_tile strong {
  font-size: 18px;
  color: #0e79de;
  font-weight: 700;
}

.cloudrix_proof_tile span {
  font-size: 13px;
  color: #4a6274;
  line-height: 1.35;
}

/* Services side padding blows out on small screens */
@media (max-width: 991.98px) {
  .h_security_area .h_security_item.pr_70,
  .h_security_area .h_security_item.pl_70 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .h_security_area .h_security_item {
    margin-bottom: 28px;
  }

  .cloudrix_ai_preview_area .col-lg-6 + .col-lg-6 {
    margin-top: 28px;
  }

  .security_banner_content h2 {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.2;
  }

  .security_banner_content .hero_cta_stack {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .security_banner_content .hero_video_btn,
  .security_banner_content .hero_bot_stage,
  .security_banner_content .hero_platform_links {
    width: 100%;
    max-width: 100%;
  }

  .security_banner_content .hero_platform_links {
    justify-content: space-between;
  }

  .h_security_banner_area .hero_terminal_frame {
    margin-top: 36px;
    width: 100%;
  }

  .cloudrix_metrics_row .s_features_item {
    flex: 1 1 calc(50% - 16px);
    max-width: none;
  }

  .cloudrix_outcome_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .security_list_area {
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: hidden;
  }

  .security_list_area .macbook_a,
  .security_list_area .lock {
    display: none;
  }

  .cloudrix_why_us {
    margin-top: 32px;
  }
}

@media (max-width: 1199.98px) {
  .cloudrix_outcome_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .cloudrix_roadmap_area,
  .cloudrix_pillars_area,
  .cloudrix_ai_preview_area {
    padding: 56px 0;
  }

  .cloudrix_roadmap_card,
  .cloudrix_pillar_card,
  .cloudrix_ai_list {
    padding: 24px 18px;
  }

  .cloudrix_roadmap_card {
    margin-bottom: 16px;
  }

  .cloudrix_pillar_card {
    margin-bottom: 16px;
  }

  .cloudrix_outcome_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }

  .cloudrix_outcome_tile {
    min-height: 76px;
    padding: 12px 10px;
  }

  .cloudrix_proof_grid {
    grid-template-columns: 1fr;
  }

  .cloudrix_metrics_row {
    gap: 12px;
  }

  .cloudrix_metrics_row .s_features_item {
    flex: 1 1 calc(50% - 12px);
  }

  .cloudrix_metric_item {
    padding: 16px 10px !important;
  }

  .hosting_title h2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .security_customers_logo_area .d-flex.justify-content-center {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .security_customers_logo_area .security_app_btn {
    margin: 0 !important;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .cloudrix_action_inner {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    text-align: center;
  }

  .cloudrix_action_inner .media {
    flex-direction: column;
    align-items: center;
  }

  .cloudrix_action_btn {
    width: 100%;
  }

  .price_info_two .price_head,
  .price_info_two .pr_list {
    overflow-x: auto;
  }
}

@media (max-width: 575.98px) {
  .cloudrix_metrics_row .s_features_item {
    flex: 1 1 100%;
  }

  .cloudrix_outcome_grid {
    grid-template-columns: 1fr;
  }

  .cloudrix_roadmap_cta,
  .cloudrix_ai_cta {
    width: 100%;
  }

  .security_banner_content .hero_platform_links {
    gap: 10px 12px;
  }
}

/* Section rhythm — alternate white / soft tint so adjacent bands read as
   distinct blocks instead of one flat white slab under the blue hero. */
/* AI section — larger, more readable bullets and intro */
#why .analytices_list li {
  font-size: 18px;
  line-height: 30px;
  color: #3c5170;
  margin-top: 22px;
}

#why .analytices_title p {
  font-size: 18px;
  line-height: 30px;
}

#why .cloudrix_proof_tile strong {
  font-size: 19px;
}

#why .cloudrix_proof_tile span {
  font-size: 15px;
}

/* ---- Cookie consent banner (Claude Design handoff) ---- */
/* z-index sits just under the WhatsApp FAB (999998) so the FAB stays clickable */
.cloudrix_cookie_banner {
  position: fixed;
  left: 24px;
  right: 24px;
  /* clears the corner widget stack: the WhatsApp FAB sits 20-76px from the
     bottom and the Tidio bubble is lifted above it, reaching ~182px */
  bottom: 200px;
  z-index: 999997;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  padding: 24px 28px;
  border-radius: 14px;
  background: #0b2436;
  box-shadow: 0 18px 40px rgba(11, 36, 54, 0.35);
  font-family: "Poppins", sans-serif;
  animation: cloudrix_cookie_in 0.2s ease-out both;
}

@keyframes cloudrix_cookie_in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloudrix_cookie_banner {
    animation: none;
  }
}

/* min-width:0 lets the text wrap instead of forcing the row wider */
.cloudrix_cookie_copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloudrix_cookie_title {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.cloudrix_cookie_text {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.cloudrix_cookie_text a {
  color: #7ec8ff;
  text-decoration: none;
}

.cloudrix_cookie_text a:hover {
  text-decoration: underline;
}

.cloudrix_cookie_actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 14px;
}

/* both buttons share geometry; only fill differs, so neither choice is nudged */
.cloudrix_cookie_btn {
  min-width: 150px;
  flex: 1 1 auto;
  padding: 13px 32px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cloudrix_cookie_btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  font-weight: 500;
}

.cloudrix_cookie_btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cloudrix_cookie_btn--primary {
  border: none;
  background: #0e79de;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(14, 121, 222, 0.35);
}

.cloudrix_cookie_btn--primary:hover {
  background: #0b5fb0;
}

.cloudrix_cookie_btn:focus-visible {
  outline: 2px solid #7ec8ff;
  outline-offset: 2px;
}

.cloudrix_cookie_mark {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(3, 159, 245, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .cloudrix_cookie_banner {
    left: 16px;
    right: 16px;
    bottom: 186px;
    padding: 18px 16px;
    gap: 16px 18px;
  }
  .cloudrix_cookie_actions {
    width: 100%;
  }
  .cloudrix_cookie_btn {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* decorative only, and it would otherwise sit orphaned on its own row once
     the buttons stack full width */
  .cloudrix_cookie_mark {
    display: none;
  }
}

/* ---- Legal pages (privacy, terms) ---- */
/* main.js and cloudrix-init both strip .navbar_fixed at scroll top, so the
   solid treatment is declared independently here rather than relying on it. */
.header_area.cloudrix_header_solid {
  position: relative;
  background-color: #ffffff;
  box-shadow: 0 4px 6px 0 rgba(12, 0, 46, 0.06);
}

.header_area.cloudrix_header_solid .menu_one {
  padding: 0;
}

/* brand-blue mark on white, never the white-on-white one */
.header_area.cloudrix_header_solid .sticky_logo .cloudrix-logo--light {
  display: none !important;
}

.header_area.cloudrix_header_solid .sticky_logo .cloudrix-logo--dark {
  display: block !important;
}

.header_area.cloudrix_header_solid .w_menu .nav-item .nav-link {
  color: #051441;
}

.header_area.cloudrix_header_solid .w_menu .nav-item .nav-link:before {
  background: #051441;
}

.header_area.cloudrix_header_solid .security_btn {
  color: #0e79de;
  border-color: #0e79de;
}

.header_area.cloudrix_header_solid .security_btn:hover {
  background: #0e79de;
  color: #fff;
}

.cloudrix_legal_area {
  padding: 160px 0 90px;
  background: #ffffff;
}

.cloudrix_legal_head {
  max-width: 760px;
  margin: 0 auto 44px;
}

.cloudrix_legal_head h1 {
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.2;
  color: #16233d;
  margin-bottom: 12px;
}

.cloudrix_legal_updated {
  margin: 0;
  font-size: 15px;
  color: #6b7c8a;
}

.cloudrix_legal_body {
  max-width: 760px;
  margin: 0 auto;
}

.cloudrix_legal_body section + section {
  margin-top: 40px;
}

.cloudrix_legal_body h2 {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: #16233d;
  margin-bottom: 14px;
}

.cloudrix_legal_body h2 span {
  color: #0e79de;
  margin-right: 6px;
}

.cloudrix_legal_body p {
  font-size: 16px;
  line-height: 29px;
  color: #3c5170;
  margin-bottom: 14px;
}

.cloudrix_legal_body ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cloudrix_legal_body li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 27px;
  color: #3c5170;
}

.cloudrix_legal_body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0e79de;
}

@media (max-width: 767.98px) {
  .cloudrix_legal_area {
    padding: 120px 0 60px;
  }
  .cloudrix_legal_body section + section {
    margin-top: 32px;
  }
  .cloudrix_legal_body h2 {
    font-size: 20px;
  }
}

/* Partner logos — equal-width cells with the mark centred in each, and a
   single fixed render height so wordmarks of different widths carry the same
   optical weight. Column count steps down with the viewport. */
.cloudrix_partner_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Display only (not links), but still lift on hover. */
.cloudrix_partner_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 14px 10px;
  border-radius: 10px;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.cloudrix_partner_logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-2px);
}

/* height fixed, width follows the artwork; never wider than its cell */
.cloudrix_partner_logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .cloudrix_partner_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
  }
  .cloudrix_partner_logo img {
    height: 30px;
  }
}

@media (max-width: 575.98px) {
  .cloudrix_partner_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  .cloudrix_partner_logo {
    padding: 10px 6px;
  }
  .cloudrix_partner_logo img {
    height: 26px;
  }
}

/* ---- Responsive fixes ---- */

/* wow.js leaves the hero column holding fadeInRight's 0% keyframe, a residual
   translateX(20px). That pushed the terminal past the viewport on narrow
   screens and 4px past it at exactly 992px. Drop the slide (the fade still
   plays) so the column always sits inside its grid cell. */
.h_security_banner_area .row > [class*="col-"] {
  transform: none !important;
}

/* Stack card artwork never wider than its card (natural widths are up to
   253px, and the cards get narrower than that between 992 and 1200). */
#platforms .service_item img {
  max-width: 100%;
  height: auto;
}

/* Phase tags were 11px, below comfortable reading size on mobile. */
@media (max-width: 767.98px) {
  .cloudrix_phase_tag {
    font-size: 12px;
  }
}

/* Alternating bands in page order, so every section is visibly separate from
   its neighbours. #services keeps the deeper accent tone. */
#solutions,
#pillars,
#results,
#clients,
#pricing {
  background: #ffffff;
}

#roadmap,
#platforms,
#why,
#approach,
#contact {
  background: #e8f0f8;
}

#services {
  background: #d7e4f2;
}

/* Hairline separator to reinforce the transition between bands. */
#solutions,
#roadmap,
#services,
#results,
#pillars,
#approach,
#pricing,
#why,
#clients,
#platforms,
#contact {
  border-top: 1px solid #e9eef5;
}

/* Problems ("What problems we solve?") — dark carousel band after the hero */
.cloudrix_problems_area {
  position: relative;
  z-index: 2;
  padding: 90px 0 70px;
}

/* These headings sit entirely inside the <span>, which SaaSLand styles at
   font-weight 300 — make them read as full-strength headings. */
#solutions .hosting_title h2 span,
#roadmap .hosting_title h2 span {
  font-weight: 700;
  color: #2c2c51;
}

/* Audit block illustration — the SaaSLand treatment (offset blue bar +
   drop shadow) is built for an opaque photo and looks wrong behind a
   transparent SVG, so drop both and let the artwork sit clean. */
.cloudrix_audit_img:before {
  display: none;
}

/* Top-align the audit row so the artwork and the typewriter heading start on
   the same line; the taller image is free to run on past the text. */
#approach .h_analytices_features_item:first-of-type {
  align-items: flex-start !important;
}

.cloudrix_audit_img {
  text-align: left !important;
}

.cloudrix_audit_img img {
  /* fill the column so it lines up with the card grid above */
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-inline: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px 0 rgba(1, 1, 64, 0.22) !important;
}

@media (max-width: 991px) {
  .cloudrix_audit_img {
    text-align: center !important;
  }
  .cloudrix_audit_img img {
    max-width: 480px;
    margin-inline: auto;
  }
}

/* Gallery row — two illustrations side by side, spanning the same outer width
   as the audit row above. Both artworks have transparent corners and their own
   device frames, so no radius or shadow (those follow the element box, not the
   alpha, and would print into the empty corners). */
#approach .cloudrix_gallery_row {
  align-items: flex-start;
}

.cloudrix_gallery_img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none !important;
}

@media (max-width: 991px) {
  .cloudrix_gallery_img {
    text-align: center;
  }
  .cloudrix_gallery_img img {
    max-width: 420px;
    margin-inline: auto;
  }
  .cloudrix_gallery_row > [class*="col-"] + [class*="col-"] {
    margin-top: 30px;
  }
}

/* Audit heading — real typewriter, styled like the hero terminal */
#approach .cloudrix_audit_heading {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #16233d;
  margin-bottom: 20px;
  min-height: 1.3em;
}

#approach .cloudrix_audit_heading .cloudrix_typewriter_caret {
  background: #0e79de;
}

#approach .h_analytices_features_item:first-of-type .h_analytices_content p {
  margin-bottom: 30px;
  font-size: 17px;
  line-height: 30px;
}

/* Audit standards — bold, scannable chips instead of long bullet prose */
.cloudrix_standards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cloudrix_standards span {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 10px;
  background: #eaf2fb;
  border: 1px solid #c5daf1;
  color: #16233d;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 575px) {
  .cloudrix_standards span {
    padding: 10px 16px;
    font-size: 15px;
  }
}


/* Approach — make the security/compliance standard names stand out */
#approach .h_analytices_content ul li span {
  font-weight: 700;
  color: #16233d;
}

/* Outcomes — text darkened to hold contrast on the accent band */

#services .hosting_title h2,
#services .hosting_title h2 span,
#services .media-body h4 {
  color: #16233d;
}

#services .hosting_title p,
#services .media-body p {
  color: #3c5170;
}

#services .cloudrix_footnote {
  color: #4d6382;
}





/* Pillars — the analytices_price section ships without vertical padding, so
   the emphasized middle card and its shadow were clipping against the band
   edges. Give it room to breathe and space stacked cards. */
#pillars {
  padding: 100px 0;
  overflow: visible;
}

#pillars .hosting_title {
  margin-bottom: 20px;
}

/* Equal-height cards so the side boxes don't look truncated next to the
   taller middle one; the middle card stays emphasized via its shadow. */
#pillars .row {
  align-items: stretch !important;
}

#pillars .analytices_price_item {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

#pillars .analytices_price_item .p_body {
  flex: 1 1 auto;
}

@media (max-width: 991px) {
  #pillars {
    padding: 70px 0;
  }
  #pillars .analytices_price_item {
    margin-bottom: 26px;
  }
}