:root {
  /* Brand palette (XORA Analytics) */
  --primary-color: #1f6fd6;   /* main brand blue */
  --primary-600: #1550a8;     /* deeper shade */
  --primary-700: #0c3775;     /* darkest accent */
  --secondary-color: #f4f7fc;
  --xa3-container: 1300px;
  /* soft cool background tint */

  --text-color: #1f2933;      /* deep blue-gray for body text */
  --muted-text: #6b7280;      /* softer text */
  --accent-color: #1ca4ff;    /* CTA/links highlight blue */
  --accent-contrast: #ffffff; /* text/icon on accent */
 --bg-dark: #050816;
    --text-on-dark: #ddeaf7;    /* readable on dark background */
    --muted-on-dark: #9aa6b8;
     --on-dark: #e6f1fb;     /* main readable text on dark */
    --muted-on-dark: #9aa6b8;/* secondary text on dark */
  /* Neutrals & utility */
  --white-color: #ffffff;
  --surface-color: #ffffff;
  --divider-color: #1f6fd61a;     /* primary @ ~10% opacity */
  --dark-divider-color: #ffffff1a;
  --error-color: #e65757;

  /* Effects & tokens */
  --focus-ring: 0 0 0 3px #1f6fd626; /* subtle blue focus */
  --shadow-sm: 0 4px 18px rgba(15, 23, 42, 0.06);
  --shadow: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* Typography */
  --default-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--default-font);
     --container-max: 1300px;

  /* Premium brand gradient (matches logo X) */
  --brand-gradient: linear-gradient(
    135deg,
    #1f6fd6 0%,
    #1550a8 45%,
    #0c3775 100%
  );
}


/************************************/
/***         02. General css       ***/
/************************************/
body {
  font-family: var(--default-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1em;
  color: var(--text-color);
  background: var(--white-color);
}

::-webkit-scrollbar-track {
  background-color: var(--primary-color);
  border-left: 1px solid var(--primary-color);
}
::-webkit-scrollbar {
  width: 7px;
  background-color: var(--primary-color);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-color);
}

::selection {
  color: var(--primary-color);
  background-color: var(--accent-color);
  filter: invert(1);
}

p {
  line-height: 1.6em;
  margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.1em;
  color: var(--primary-color);
  font-family: var(--heading-font);
}

figure {
  margin: 0;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
  outline: 0;
}

html,
body {
  width: 100%;
  overflow-x: clip;
}

.container {
  max-width: 1300px;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: 15px;
  padding-left: 15px;
}

.image-anime {
  position: relative;
  overflow: hidden;
}
.image-anime:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
}
.image-anime:hover:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}

.reveal {
  position: relative;
  display: inline-flex;
  visibility: hidden;
  overflow: hidden;
}
.reveal img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform-origin: left;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row > * {
  padding-right: 15px;
  padding-left: 15px;
}
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > * {
  padding-right: 0;
  padding-left: 0;
}

/* Buttons (tinted to logo) */
.btn-default {
  position: relative;
  display: inline-block;
  background: var(--accent-color);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-transform: capitalize;
  color: var(--accent-contrast);
  border: none;
  padding: 17px 54px 17px 30px;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  z-index: 0;
}
.btn-default:hover {
  background: transparent;
  color: var(--accent-color);
  box-shadow: var(--shadow);
}
.btn-default:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-default::before {
  content: "\f061";
  font-family: "FontAwesome";
  position: absolute;
  top: 16px;
  right: 30px;
  font-size: 18px;
  color: var(--accent-contrast);
  transform: rotate(-45deg);
  transition: all 0.4s ease-in-out;
}
.btn-default:hover::before {
  color: var(--accent-color);
  transform: rotate(0deg);
}
.btn-default::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  right: 0;
  width: 0;
  height: 106%;
  background: var(--brand-gradient); /* uses logo tones */
  transform: skew(30deg);
  transition: all 0.4s ease-in-out;
  z-index: -1;
}
.btn-default:hover:after {
  width: 100%;
  transform: skew(0deg);
  left: 0;
}

.btn-default.btn-highlighted:hover {
  color: var(--primary-color);
}
.btn-default.btn-highlighted:hover:before {
  color: var(--primary-color);
}
.btn-default.btn-highlighted::after {
  background: var(--white-color);
}

/* Link CTA */
.readmore-btn {
  position: relative;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  color: var(--accent-color);
  padding-right: 25px;
  transition: all 0.4s ease-in-out;
}
.readmore-btn:hover {
  color: var(--primary-color);
}
.readmore-btn:after {
  content: "\f061";
  font-family: "FontAwesome";
  position: absolute;
  top: 50%;
  right: 0;
  font-size: 18px;
  color: var(--accent-color);
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.4s ease-in-out;
}
.readmore-btn:hover:after {
  color: var(--primary-color);
  transform: translateY(-50%) rotate(0deg);
}

/* Cursor & preloader */
.cb-cursor:before {
  background: var(--accent-color);
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-container,
.loading {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  position: relative;
}
.loading-container {
  margin: 40px auto;
}
.loading {
  border: 1px solid transparent;
  border-color: transparent var(--white-color) transparent var(--white-color);
  animation: rotate-loading 1.5s linear infinite;
  transform-origin: 50% 50%;
}
.loading-container:hover .loading,
.loading-container .loading {
  transition: all 0.5s ease-in-out;
}
#loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 66px;
  transform: translate(-50%, -50%);
}
@keyframes rotate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Helpful background and chip styles using the tint */
.bg-tint {
  background: var(--secondary-color);
}
.card {
  background: var(--surface-color);
  border: 1px solid var(--divider-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.chip {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--divider-color);
  color: var(--text-color);
}

/* ===================================
   HEADER
=================================== */
.xa-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider-color);
}

.xa-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 16px 0;
}

/* Logo */
.xa-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.xa-logo img {
  height: 60px;
}
.xa-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.xa-logo-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-700);
}
.xa-logo-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-text);
}

/* Nav desktop base */
.xa-main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.xa-nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.xa-nav-item {
  position: relative;
}

/* links */
.xa-nav-link,
.xa-nav-link--mega {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 6px;
  font-family: var(--default-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.xa-nav-link::after,
.xa-nav-link--mega::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--primary-color);
  transition: width 0.25s ease;
}

.xa-nav-link:hover,
.xa-nav-link--mega:hover,
.xa-nav-link:focus-visible,
.xa-nav-link--mega:focus-visible {
  color: var(--primary-700);
  outline: none;
}

.xa-nav-item:hover .xa-nav-link::after,
.xa-nav-item:hover .xa-nav-link--mega::after,
.xa-nav-item:focus-within .xa-nav-link::after,
.xa-nav-item:focus-within .xa-nav-link--mega::after {
  width: 26px;
}

/* active page (Services) */
.xa-nav-item--active .xa-nav-link--mega {
  color: var(--primary-color);
}
.xa-nav-item--active .xa-nav-link--mega::after {
  width: 36px;
}

/* arrow icon: hidden on desktop */
.xa-nav-icon {
  display: none;
  font-size: 12px;
  color: var(--accent-color);
}

/* ===================================
   MEGA MENU (DESKTOP)
=================================== */
.xa-mega {
  position: absolute;
  left: 200%;
  transform: translate(-50%, 12px);
  width: min(1120px, 80vw);
  background: #f7f9fc;
  border-radius: 20px;
  border: 1px solid var(--divider-color);
  box-shadow: var(--shadow);
  padding: 18px 22px 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

@media (min-width: 992px) {
  .xa-nav-item.has-mega:hover > .xa-mega,
  .xa-nav-item.has-mega:focus-within > .xa-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 18px);
  }
}

.xa-mega-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.xa-mega-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--text-color);
}
.xa-mega-arrow {
  font-size: 18px;
  color: var(--accent-color);
}

/* cards */
.xa-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.xa-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #edf4ff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.xa-service-card:nth-child(1) {
  background: #e8f0ff;
}
.xa-service-card:nth-child(2) {
  background: #e8f0ff;
}
.xa-service-card:nth-child(3) {
  background: #e8f0ff;
}
.xa-service-card:nth-child(4) {
  background: #ffeede;
}
.xa-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
/* mobile panel state helpers */
.xa-mobile-main {
  display: block;
}

.xa-mobile-services-panel {
  display: none;
}

.xa-mobile-main.is-hidden {
  display: none;
}
.xa-mobile-services-panel.is-active {
  display: block;
}

/* .xa-service-icon {
  margin-bottom: 20px;
} */
.xa-service-icon img {
  max-width: 72px;
}
.xa-service-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 10px;
}
.xa-service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.xa-service-card li {
  font-size: 13px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 4px;
}
.xa-service-card li + li {
  margin-top: 4px;
}
.xa-service-card li::after {
  content: "\f061";                /* FA arrow-right / arrow-up-right-style */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;                /* required for solid icons */
  font-size: 11px;
  color: var(--accent-color);
  margin-left: 4px;                /* small gap from text (optional) */
}


/* CTA button */
.xa-header-cta {
  margin-left: 8px;
}
.xa-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border-radius: 999px;
  border: none;
  background: var(--primary-700);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.xa-cta-btn:hover,
.xa-cta-btn:focus-visible {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(12, 55, 117, 0.35);
  outline: none;
}

/* ===================================
   HAMBURGER
=================================== */
.xa-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--divider-color);
  background: #ffffff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}
.xa-nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-color);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.xa-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.xa-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.xa-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===================================
   MOBILE
=================================== */
@media (max-width: 991px) {
  .xa-header-inner {
    padding: 12px 0;
  }

  .xa-nav-toggle {
    display: inline-flex;
  }
  @media (max-width: 991px) {
  /* main mobile menu (first screen) already styled – keep your existing rules */

  /* ==== SERVICES DETAIL SCREEN ==== */
  .xa-mobile-services-panel {
    width: 100%;
  }

  .xa-mobile-back {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-color);
    padding: 0 0 16px;
    cursor: pointer;
  }

  .xa-mobile-back i {
    font-size: 13px;
  }

  .xa-mobile-services-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .xa-mobile-services-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:#1F2933;
    margin-bottom: 4px;
  }

  .xa-mobile-services-title-row i {
    font-size: 11px;
  }

  .xa-mobile-service-group {
    font-size: 14px;
  }

  .xa-mobile-service-group h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
  }

  .xa-mobile-service-group h4 i {
    font-size: 11px;
    color: var(--accent-color);
  }

  .xa-mobile-service-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .xa-mobile-service-group li {
    font-size: 15px;
    color: var(--muted-text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
  }

  .xa-mobile-service-group li + li {
    margin-top: 4px;
  }

  .xa-mobile-service-group li i {
    font-size: 13px;
    color: var(--accent-color);
     display: inline-block;       /* needed so transform works */
  transform: rotate(-35deg);
  }
}



  /* full-screen overlay panel */
  .xa-main-nav {
    display: none;
    position: fixed;
    inset: 83px 0 auto 0;
    background: #ffffff;
    border-top: 1px solid var(--divider-color);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    flex-direction: column;
    padding: 20px 24px 24px;
    z-index: 101;
  }
  body.nav-open .xa-main-nav {
    display: flex;
  }

  .xa-nav-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
  }

  /* Tiger-style row: text left, arrow right */
  .xa-nav-link,
  .xa-nav-link--mega {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-color);
  }

  .xa-nav-link::after,
  .xa-nav-link--mega::after {
    display: none;
  }

  .xa-nav-item--active .xa-nav-link--mega {
    color: var(--primary-color);
  }

  /* show icons on mobile */
  .xa-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--accent-color);
  }

  /* hide mega cards on mobile – simple list only */
  .xa-mega {
    display: none !important;
  }

  /* CTA full width */
  .xa-header-cta {
    width: 100%;
  }
  .xa-cta-btn {
    width: 100%;
    justify-content: center;
  }

  /* Smooth slide/fade between main menu and Services detail on mobile */
@media (max-width: 991px) {
  /* Make the nav scrollable if content is tall */
  .xa-main-nav {
    overflow-y: auto;
  }

  /* Base state for both panels */
  .xa-mobile-main,
  .xa-mobile-services-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    
  }

  /* Main menu is visible by default */
  .xa-mobile-main {
    max-height: 1000px; /* big enough to fit content */
    opacity: 1;
  }

  /* When JS adds/removes these classes, we animate nicely */
  .xa-mobile-main.is-hidden {
    max-height: 0;
    opacity: 0;
  }

  .xa-mobile-services-panel.is-active {
    max-height: 1000px;
    opacity: 1;
  }
}

}

/* Make CTA align as a button inside nav */
.xa-nav-item--cta {
  margin-left: 16px;
}

/* Keep same nice pill styling */
.xa-nav-item--cta .xa-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--primary-700);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  
  transition: 0.25s ease;
}

.xa-nav-item--cta .xa-cta-btn:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
}

/* MOBILE — Full width button */
@media (max-width: 991px) {
  .xa-nav-item--cta {
    width: 100%;
    margin-left: 0;
  }
  .xa-nav-item--cta .xa-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* === Tiger-style mega cards (desktop) ===================== */

/* Grid: 4 equal columns, all cards same height */
.xa-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;          /* make all children stretch */
}

/* Base card */
.xa-service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 26px 26px 22px;
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  min-height: 320px;             /* adjust to taste */
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Pastel backgrounds per card (tweak as you like) */
.xa-service-card:nth-child(1) {
  background: #e1f0ff;
}
.xa-service-card:nth-child(2) {
  background: #e1f0ff;
}
.xa-service-card:nth-child(3) {
  background: #e1f0ff;
}
.xa-service-card:nth-child(4) {
  background: #ffe9d6;
}

/* Hover lift + shadow like Tiger */
.xa-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
}

/* Top icon block */
/* .xa-service-icon {
  margin-bottom: 26px;
} */
.xa-service-icon img {
  max-width: 120px;              /* bigger like the reference */
}

/* Heading with arrow (Font Awesome) */
.xa-service-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* List items with small FA arrow */
.xa-service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.xa-service-card li {
  font-size: 16px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 15px;
}
.xa-service-card li + li {
  margin-top: 4px;
}
.xa-service-card li::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  color: #003366;
  display: inline-block;
  transform: rotate(-35deg);
}


/* ===== HERO BASE ===== */
.xa-hero {
  position: relative;
  min-height: 90vh;
  background: #020b2b;
  color: #ffffff;
}

.xa-hero-swiper,
.xa-hero-swiper .swiper-wrapper,
.xa-hero-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.xa-hero-slide {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center center;
}

/* Hero should fill the viewport */
.xa-hero {
  height: 100vh;                 /* or calc(100vh - 72px) if you want to subtract header height */
}

/* Swiper + slides inherit that height */
.xa-hero-swiper,
.xa-hero-swiper .swiper-wrapper,
.xa-hero-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* Background image behaviour */
.xa-hero-slide {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* dark + gradient overlay so text reads well */
.xa-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 7, 33, 0.9) 0%, rgba(0, 7, 33, 0.2) 52%, rgba(0, 7, 33, 0.85) 100%);
  z-index: 1;
}

.xa-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  margin: 0px 118px;
  padding: 120px 15px 90px;
  display: flex;
  align-items: center;
}

.xa-hero-content {
  max-width: 620px;
}

/* Typography */
.xa-hero-kicker {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9fb7ff;
  margin-bottom: 18px;
}

.xa-hero-title {
  font-family: var(--heading-font, system-ui, sans-serif);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 22px;
  color: white;
}

.xa-hero-text {
  font-size: 16px;
  max-width: 520px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

/* CTA button */
.xa-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  background: #ffffff;
  color: #002b6f;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-decoration: none;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

.xa-hero-cta i {
  font-size: 13px;
  transform: rotate(-35deg);
  transition: transform 0.25s ease;
}

.xa-hero-cta:hover {
  background: var(--primary-color, #1f6fd6);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.xa-hero-cta:hover i {
  transform: rotate(0deg) translateX(2px);
}

/* ===== NAV ARROWS ===== */
.xa-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease, border-color 0.25s ease;
}

.xa-hero-nav i {
  font-size: 18px;
}

.xa-hero-nav--prev {
  left: 40px;
}
.xa-hero-nav--next {
  right: 40px;
}

.xa-hero-nav:hover {
  background: #ffffff;
  color: #001b4c;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  border-color: transparent;
}

/* ===== PAGINATION (lines) ===== */
.xa-hero-pagination {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

.xa-hero-pagination .swiper-pagination-bullet {
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
  margin: 0 !important;
  transition: background 0.25s ease, transform 0.25s ease;
}

.xa-hero-pagination .swiper-pagination-bullet-active {
  background: var(--accent-color, #1ca4ff);
  transform: scaleX(1.05);
}

/* ===== TEXT ENTRANCE ANIMATION ===== */
/* start slightly translated & faded */
.xa-hero-title,
.xa-hero-text,
.xa-hero-kicker,
.xa-hero-cta {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* when slide is active, bring everything in */
.swiper-slide-active .xa-hero-kicker,
.swiper-slide-active .xa-hero-title,
.swiper-slide-active .xa-hero-text,
.swiper-slide-active .xa-hero-cta {
  opacity: 1;
  transform: translateY(0);
}

/* small stagger effect */
.swiper-slide-active .xa-hero-kicker {
  transition-delay: 0.05s;
}
.swiper-slide-active .xa-hero-title {
  transition-delay: 0.12s;
}
.swiper-slide-active .xa-hero-text {
  transition-delay: 0.2s;
}
.swiper-slide-active .xa-hero-cta {
  transition-delay: 0.28s;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .xa-hero-inner {
    padding: 100px 20px 80px;
    margin:0px 20px !important;
  }

  .xa-hero-nav--next{
    display: none !important;
  }
  .xa-hero-nav--prev{
    display: none !important;

  }
  .xa-hero-content {
    max-width: 100%;
  }

  .xa-hero-title {
    font-size: 28px;
  }

  .xa-hero-text {
    font-size: 15px;
  }

  .xa-hero-nav--prev {
    left: 16px;
  }
  .xa-hero-nav--next {
    right: 16px;
  }
}

@media (max-width: 600px) {
  .xa-hero-inner {
    padding: 90px 18px 60px;
  }

  .xa-hero-nav {
    width: 42px;
    height: 42px;
  }
  .xa-hero-nav i {
    font-size: 15px;
  }

  .xa-hero-pagination .swiper-pagination-bullet {
    width: 26px;
  }
}
/* ===== MOBILE: make hero shorter & auto-height ===== */
@media (max-width: 767px) {
  .xa-hero {
    height: auto;           /* let content define height */
    min-height: 55vh;       /* still tall-ish, but not full screen */
  }

  .xa-hero-swiper,
  .xa-hero-swiper .swiper-wrapper,
  .xa-hero-swiper .swiper-slide {
    height: auto;           /* follow content instead of 100vh */
  }

  .xa-hero-inner {
    padding: 80px 18px 60px; /* tighten vertical padding if needed */
  }
}

/* ===================================
   WHAT WE DO SECTION
=================================== */
.xa-wwd {
  background: #050816; /* deep navy to match hero */
  color: #ffffff;
  padding: 96px 0;
}

.xa-wwd-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* LEFT COLUMN */
.xa-wwd-copy {
  flex: 0 0 48%;
  max-width: 620px;
}

.xa-wwd-kicker {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin: 0 0 18px;
}

.xa-wwd-title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px;
}

.xa-wwd-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
}

/* CTA link */
.xa-wwd-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 4px;
}

.xa-wwd-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.25s ease;
  transform-origin: left;
}

.xa-wwd-link i {
  font-size: 14px;
  color: var(--accent-color);
  display: inline-block;
  transform: rotate(-35deg);
  transition: transform 0.25s ease, color 0.25s ease;
}

.xa-wwd-link:hover::before {
  transform: scaleX(1.08);
}
.xa-wwd-link:hover i {
  transform: rotate(0deg) translateX(2px);
  color: var(--primary-color);
}

/* RIGHT COLUMN (IMAGE) */
.xa-wwd-media {
  flex: 1;
}

.xa-wwd-figure {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}

.xa-wwd-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform 0.6s ease;
}

.xa-wwd-figure:hover img {
  transform: scale(1.06);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 991px) {
  .xa-wwd {
    padding: 72px 0;
  }

  .xa-wwd-inner {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .xa-wwd-copy {
    flex: 1;
    max-width: 100%;
  }

  .xa-wwd-figure {
    border-radius: 18px;
  }
}

@media (max-width: 575px) {
  .xa-wwd {
    padding: 56px 0;
  }

  .xa-wwd-title {
    font-size: 24px;
  }

  .xa-wwd-text {
    font-size: 15px;
  }
}

/* ================================
   SERVICES SECTION (XORA)
================================ */
.xa-services {
  padding: 80px 0 90px;
  background:#050816;
}

.xa-services-header {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.xa-services-kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.xa-services-title {
  font-family: var(--heading-font);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-700);
  margin-bottom: 14px;
}

.xa-services-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--accent-contrast);
  margin: 0;
}

/* ===== GRID ===== */
.xa-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* cards */
.xa-service-tile {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

/* tint each tile slightly with brand-friendly colors */
.xa-service-tile:nth-child(1) {
  background: #f9f4ff;
}
.xa-service-tile:nth-child(2) {
  background: #e9f4ff;
}
.xa-service-tile:nth-child(3) {
  background: #e8f9ff;
}
.xa-service-tile:nth-child(4) {
  background: #fef5ea;
}

.xa-service-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 23, 42, 0.08);
}

/* pill label */
.xa-service-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-700);
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

/* title with arrow */
.xa-service-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xa-service-name i {
  font-size: 16px;
  color: var(--accent-color);
  transform: rotate(-35deg);
  transition: transform 0.25s ease, color 0.25s ease;
}

.xa-service-tile:hover .xa-service-name i {
  transform: rotate(0deg) translateX(2px);
  color: var(--primary-color);
}

/* description & list */
.xa-service-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-text);
  margin: 0 0 14px;
}

.xa-service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto; /* pushes list to bottom for equal feel */
}

.xa-service-list li {
  font-size: 15px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.xa-service-list li + li {
  margin-top: 4px;
}

.xa-service-list li::after {
  content: "\f061"; /* Font Awesome arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--accent-color);
  display: inline-block;
  transform: rotate(-35deg);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1199px) {
  .xa-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .xa-services {
    padding: 56px 0 64px;
  }

  .xa-services-header {
    margin-bottom: 32px;
    text-align: left;
  }

  .xa-services-title {
    font-size: 24px;
  }

  .xa-services-grid {
    grid-template-columns: 1fr;
  }

  .xa-service-tile {
    padding: 20px 18px 18px;
  }
}

/* ===================================
   WHY XORA SECTION
=================================== */
.xa-why {
  padding: 80px 0 90px;
  background: #050816; /* deep navy to contrast services */
  color: #ffffff;
}

.xa-why-header {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.xa-why-kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.xa-why-title {
  font-family: var(--heading-font);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 14px;
}

.xa-why-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* VALUE CARDS */
.xa-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 34px;
}

.xa-why-card {
  background: rgba(10, 22, 64, 0.96);
  border-radius: 20px;
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease, background 0.22s ease;
}

.xa-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  border-color: rgba(88, 166, 255, 0.6);
  background: radial-gradient(
    circle at top left,
    rgba(31, 111, 214, 0.25),
    rgba(10, 22, 64, 0.98)
  );
}

.xa-why-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.xa-why-icon i {
  font-size: 18px;
  color: var(--accent-color);
}

.xa-why-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #ffffff;
}

.xa-why-card-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* STATS STRIP */
.xa-why-stats {
  margin-top: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(3, 12, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 32px;
  justify-content: center;
  width: 100%;
}

.xa-why-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.xa-why-stat-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
}

.xa-why-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 991px) {
  .xa-why {
    padding: 64px 0 70px;
  }

  .xa-why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .xa-why-stats {
    flex-wrap: wrap;
    border-radius: 18px;
    row-gap: 10px;
  }
}

@media (max-width: 767px) {
  .xa-why-header {
    text-align: left;
    margin-bottom: 28px;
  }

  .xa-why-grid {
    grid-template-columns: 1fr;
  }

  .xa-why-stats {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
  }
}


/* ================================
   XORA STORY / IMPACT SECTION
================================ */
.xa-story {
  background: linear-gradient(
    135deg,
    #0b2454 0%,
    #0c2f72 45%,
    #0b1640 100%
  ); /* tuned to XORA blues */
  color: #ffffff;
  padding: 80px 0;
}

.xa-story-inner {
  display: flex;
  align-items: stretch;
  gap: 56px;
}

/* LEFT COLUMN */
.xa-story-main {
  flex: 1 1 60%;
  max-width: 720px;
  padding: 10px 0;
}

.xa-story-kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 16px;
}

.xa-story-title {
  font-family: var(--heading-font);
  font-size: clamp(28px, 3.3vw, 38px);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 20px;
  color:#ffffff;
}

.xa-story-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin-bottom: 28px;
}

/* CTA */
.xa-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border-radius: 999px;
  border: 0;
  background: #000000;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

.xa-story-cta i {
  font-size: 13px;
  transform: rotate(-35deg);
  transition: transform 0.25s ease;
}

.xa-story-cta:hover {
  background: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}

.xa-story-cta:hover i {
  transform: rotate(0deg) translateX(2px);
}

/* RIGHT COLUMN (STATS) */
.xa-story-aside {
  flex: 0 0 32%;
  max-width: 360px;
  background: rgba(3, 13, 40, 0.9);
  border-radius: 0 24px 24px 0;
  padding: 32px 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.xa-story-stat {
  display: flex;
  gap: 14px;
}

.xa-story-stat-number {
  font-size: 30px;
  font-weight: 600;
  color: var(--accent-color);
  line-height: 1;
  min-width: 64px;
}

.xa-story-stat-body {
  flex: 1;
}

.xa-story-stat-label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.xa-story-stat-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.xa-story-divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.25);
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 991px) {
  .xa-story {
    padding: 64px 0;
  }

  .xa-story-inner {
    flex-direction: column;
    gap: 32px;
  }

  .xa-story-main {
    flex-basis: auto;
  }

  .xa-story-aside {
    max-width: 100%;
    border-radius: 18px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px 20px;
  }
}

@media (max-width: 575px) {
  .xa-story {
    padding: 52px 0;
  }

  .xa-story-title {
    font-size: 24px;
  }

  .xa-story-text {
    font-size: 15px;
  }

  .xa-story-aside {
    padding: 18px 16px;
  }

  .xa-story-stat-number {
    font-size: 24px;
    min-width: 52px;
  }

  .xa-story-stat-label {
    font-size: 14px;
  }

  .xa-story-stat-text {
    font-size: 12px;
  }
}


/* ================================
   PARTNERSHIPS – LOGO GRID
================================ */
.xa-partners-simple {
  padding: 80px 0 90px;
  background: #050816;
}

.xa-partners-simple-header {
  max-width: 760px;
  margin-bottom: 32px;
}

.xa-partners-simple-title {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  color:white;
  margin: 0 0 12px;
}

.xa-partners-simple-text {
  font-size: 16px;
  line-height: 1.7;
  color: white;
  margin: 0 0 20px;
}

/* "Learn more" link */
.xa-partners-simple-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  padding-bottom: 3px;
  border-bottom: 1px solid white;
}

.xa-partners-simple-link i {
  font-size: 13px;
  transition: transform 0.25s ease;
}

.xa-partners-simple-link:hover i {
  transform: translateX(4px);
}

/* LOGO GRID */
.xa-partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.xa-partners-logo-card {
  background: #f6f7fb; /* soft neutral that fits XORA blues */
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease, background 0.18s ease;
}

.xa-partners-logo-card img {
  max-width: 150px;
  max-height: 40px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.xa-partners-logo-card:hover {
  background: #ffffff;
  border-color: rgba(31, 111, 214, 0.25);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  transform: translateY(-4px);
}

.xa-partners-logo-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.02);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1199px) {
  .xa-partners-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .xa-partners-simple {
    padding: 60px 0 68px;
  }

  .xa-partners-simple-header {
    margin-bottom: 24px;
  }

  .xa-partners-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .xa-partners-logo-card {
    padding: 18px 14px;
  }

  .xa-partners-logo-card img {
    max-width: 120px;
    max-height: 32px;
  }
}




/* ===================================
   SUCCESS STORIES – SPOTLIGHT
=================================== */
.xa-success-spotlight {
  padding: 80px 0 90px;
  background: radial-gradient(circle at top left, #071635 0%, #020617 55%, #020819 100%);
  color: #ffffff;
}

.xa-success-spotlight-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.xa-success-spotlight-kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.xa-success-spotlight-title {
  font-family: var(--heading-font);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  margin-bottom: 12px;
  color:#ffffff;
}

.xa-success-spotlight-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(226, 232, 255, 0.9);
}

/* LAYOUT */
.xa-success-spotlight-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
}

/* ---------- NAV / TIMELINE ---------- */
.xa-success-spotlight-nav {
  position: relative;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xa-success-spotlight-nav::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(148, 163, 255, 0.2),
    rgba(56, 189, 248, 0.7)
  );
}

.xa-success-tab {
  position: relative;
  border: none;
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 0.24s ease, transform 0.18s ease;
}

.xa-success-tab-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #020617;
  border: 2px solid rgba(148, 163, 255, 0.6);
  flex-shrink: 0;
  margin-top: 3px;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.xa-success-tab-label {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: rgba(226, 232, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xa-success-tab-label span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(148, 163, 255, 0.9);
}

.xa-success-tab.is-active {
  background: rgba(15, 23, 42, 0.7);
  transform: translateX(4px);
}

.xa-success-tab.is-active .xa-success-tab-dot {
  background: var(--accent-color);
  border-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.35);
}

/* ---------- PANEL ---------- */
.xa-success-spotlight-detail {
  position: relative;
}

/* panels are now in normal flow; only active one is displayed */
.xa-success-panel {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(31, 111, 214, 0.25), #020c24);
  border: 1px solid rgba(148, 163, 255, 0.4);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  display: none; /* hide by default */
  transition: opacity 0.35s ease, transform 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xa-success-panel.is-active {
  display: flex; /* show active panel */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.xa-success-panel-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(221, 234, 255, 0.98);
  background: rgba(12, 34, 94, 0.96);
  border: 1px solid rgba(148, 163, 255, 0.5);
}

.xa-success-panel-title {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 4px;
}

.xa-success-panel-body {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(226, 232, 255, 0.9);
}

/* metrics styled like mini dashboard tiles */
.xa-success-panel-metrics {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.xa-success-panel-metric {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(6, 17, 45, 0.9);
  border: 1px solid rgba(148, 163, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xa-success-panel-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 255, 0.9);
}

.xa-success-panel-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-color);
}

.xa-success-panel-metric-note {
  font-size: 11px;
  color: rgba(199, 210, 254, 0.9);
}

/* ---------- FOOTER CTA ---------- */
.xa-success-spotlight-footer {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.xa-success-spotlight-footer-text {
  margin: 0;
  font-size: 14px;
  color: rgba(226, 232, 255, 0.8);
}

.xa-success-spotlight-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e5edff;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease, border-color 0.25s ease;
}
@media(max-width:600px){
  .xa-success-spotlight-footer-link{
    font-size: 12px !important;
  }
}

.xa-success-spotlight-footer-link i {
  font-size: 12px;
  transform: rotate(-35deg);
  transition: transform 0.25s ease;
}

.xa-success-spotlight-footer-link:hover {
  background: var(--accent-color);
  color: #001027;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

.xa-success-spotlight-footer-link:hover i {
  transform: rotate(0deg) translateX(2px);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 991px) {
  .xa-success-spotlight {
    padding: 64px 0 76px;
  }

  .xa-success-spotlight-header {
    text-align: left;
  }

  .xa-success-spotlight-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .xa-success-spotlight-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-left: 0;
    padding-bottom: 4px;
  }

  .xa-success-spotlight-nav::before {
    display: none;
  }

  .xa-success-tab {
    min-width: 210px;
    border-radius: 999px;
    padding: 8px 14px;
    border: 1px solid rgba(51, 65, 85, 0.9);
  }

  .xa-success-tab.is-active {
    transform: none;
  }

  .xa-success-tab-dot {
    margin-top: 0;
  }

  .xa-success-spotlight-detail {
    min-height: 0;
  }
}

@media (max-width: 575px) {
  .xa-success-spotlight {
    padding: 52px 0 64px;
  }

  .xa-success-panel {
    padding: 18px 16px;
  }

  .xa-success-panel-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- PANEL ---------- */
.xa-success-spotlight-detail {
  position: relative;
}

/* panels in normal flow, hidden by default */
.xa-success-panel {
  position: relative;
  padding: 22px 24px 20px;
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(31, 111, 214, 0.25), #020c24);
  border: 1px solid rgba(148, 163, 255, 0.4);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);

  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;

  display: none;           /* ONLY here – hide by default */

  transition: opacity 0.35s ease, transform 0.35s ease;
  flex-direction: column;
  gap: 14px;
}

/* active panel shown + animated */
.xa-success-panel.is-active {
  display: flex;           /* show */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 991px) {
  .xa-success-spotlight {
    padding: 56px 0 64px;
  }

  .xa-success-spotlight-header {
    text-align: left;
  }

  /* layout becomes stacked: pills on top, panel below */
  .xa-success-spotlight-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* --- pills nav --- */
  .xa-success-spotlight-nav {
    flex-direction: row;
    align-items: center;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0 -8px;               /* edge-to-edge look */
    padding-inline: 8px;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .xa-success-spotlight-nav::before {
    display: none;                /* hide the vertical line */
  }

  .xa-success-tab {
    min-width: auto;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(51, 65, 85, 0.9);
    background: rgba(15, 23, 42, 0.8);
    justify-content: center;
    gap: 6px;
    transform: none;
  }

  .xa-success-tab-dot {
    display: none;                /* no radio dot on mobile */
  }

  .xa-success-tab-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* hide the small subtitle line on mobile */
  .xa-success-tab-label span {
    display: none;
  }

  .xa-success-tab.is-active {
    background: var(--accent-color);
    border-color: transparent;
  }

  .xa-success-tab.is-active .xa-success-tab-label {
    color: #001027;
  }

  .xa-success-spotlight-detail {
    min-height: 0;                /* grows with panel */
  }
}

@media (max-width: 575px) {
  .xa-success-spotlight {
    padding: 48px 0 56px;
  }

  .xa-success-panel {
    padding: 18px 16px;
  }

  .xa-success-panel-metrics {
    grid-template-columns: 1fr;
  }

  .xa-success-panel-title {
    font-size: 16px;
  }

  .xa-success-panel-body {
    font-size: 13px;
  }
}


/* ===================================
   AWARDS & RECOGNITIONS
=================================== */
.xa-awards {
  padding: 80px 0 90px;
  background: radial-gradient(circle at top right, #071635 0%, #020617 50%, #020819 100%);
  color: #ffffff;
}

.xa-awards-header {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.xa-awards-kicker {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.xa-awards-title {
  font-family: var(--heading-font);
  font-size: clamp(26px, 3.1vw, 34px);
  font-weight: 700;
  margin-bottom: 12px;
  color:white;
}

.xa-awards-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(226, 232, 255, 0.88);
}

/* grid for award cards */
.xa-awards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* individual award card */
.xa-award-card {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(31, 111, 214, 0.2), #020a1e);
  border: 1px solid rgba(148, 163, 255, 0.4);
  box-shadow: 0 20px 45px rgba(3, 7, 18, 0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease,
    background 0.22s ease;
}

.xa-award-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(3, 7, 18, 0.95);
  border-color: var(--accent-color);
  background: radial-gradient(circle at top left, rgba(28, 164, 255, 0.3), #020617);
}

/* logo box */
.xa-award-logo {
  height: 149px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
  justify-content: center;
}

.xa-award-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(1.05);
}

/* meta tags (year, category) */
.xa-award-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xa-award-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.6);
  color: rgba(226, 232, 255, 0.96);
  background: rgba(15, 23, 42, 0.9);
}

/* award content */
.xa-award-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #e5edff;
}

.xa-award-desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: rgba(199, 210, 254, 0.9);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 1199px) {
  .xa-awards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .xa-awards {
    padding: 64px 0 72px;
  }

  .xa-awards-header {
    text-align: left;
    margin-bottom: 26px;
  }

  .xa-awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .xa-awards {
    padding: 52px 0 60px;
  }

  .xa-awards-grid {
    grid-template-columns: 1fr;
  }

  .xa-award-card {
    padding: 16px 16px 18px;
  }

  .xa-award-logo {
    justify-content: center;
  }

  .xa-award-name,
  .xa-award-desc {
    text-align: left;
  }
}

/* ===================================
   LATEST ARTICLES / INSIGHTS
=================================== */
.xa-articles {
  padding: 80px 0 90px;
  background: radial-gradient(circle at top left, #071635 0%, #020617 55%, #020819 100%);
  color: #ffffff;
}

/* Header */
.xa-articles-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.xa-articles-kicker {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.xa-articles-title {
  font-family: var(--heading-font);
  font-size: clamp(26px, 3.1vw, 34px);
  font-weight: 700;
  margin-bottom: 8px;
}

.xa-articles-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(226, 232, 255, 0.88);
}

.xa-articles-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.7);
  color: #e5edff;
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
    box-shadow 0.22s ease, transform 0.22s ease;
}

.xa-articles-all i {
  font-size: 12px;
  transform: rotate(-35deg);
  transition: transform 0.22s ease;
}

.xa-articles-all:hover {
  background: var(--accent-color);
  color: #001027;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
}

.xa-articles-all:hover i {
  transform: rotate(0deg) translateX(2px);
}

/* ===================================
   FEATURE ARTICLE
=================================== */
.xa-article-feature {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 26px;
  padding: 24px 24px 26px;
  border-radius: 26px;
  background: #050b16;
  border: 1px solid rgba(148, 163, 255, 0.45);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.9);
  margin-bottom: 28px;
}

.xa-article-feature-media {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #020617;
}

.xa-article-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

.xa-article-feature:hover .xa-article-feature-media img {
  transform: scale(1.08);
}

.xa-article-feature-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xa-article-pill {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(221, 234, 255, 0.98);
  background: rgba(12, 34, 94, 0.98);
  border: 1px solid rgba(148, 163, 255, 0.6);
}

.xa-article-feature-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color:#ffff;

}

.xa-article-feature-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(226, 232, 255, 0.9);
  margin: 4px 0;
}

.xa-article-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(148, 163, 255, 0.95);
}

.xa-article-feature-meta span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 255, 0.75);
  margin-right: 6px;
}

.xa-article-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  text-decoration: none;
  padding-top: 6px;
  transition: color 0.22s ease, transform 0.22s ease;
}

.xa-article-link i {
  font-size: 12px;
  transform: rotate(-35deg);
  transition: transform 0.22s ease;
}

.xa-article-link:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.xa-article-link:hover i {
  transform: rotate(0deg) translateX(2px);
}

/* ===================================
   ARTICLE CARDS GRID
=================================== */
.xa-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.xa-article-card {
  background: rgba(6, 12, 30, 0.95);
  border-radius: 20px;
  border: 1px solid rgba(30, 64, 175, 0.9);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.xa-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95);
  border-color: var(--accent-color);
}

.xa-article-card-media {
  display: block;
  overflow: hidden;
  background: #020617;
}

.xa-article-card-media img {
  width: 100%;
  height: 390px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.35s ease;
}

.xa-article-card:hover .xa-article-card-media img {
  transform: scale(1.08);
}

.xa-article-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xa-article-tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 255, 0.95);
}

.xa-article-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color:#ffff;
}

.xa-article-card-excerpt {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: rgba(199, 210, 254, 0.92);
}

.xa-article-card-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: rgba(148, 163, 255, 0.95);
}

/* ===================================
   RESPONSIVE
=================================== */
@media (max-width: 1199px) {
  .xa-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .xa-articles {
    padding: 64px 0 72px;
  }

  .xa-articles-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .xa-article-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .xa-articles {
    padding: 52px 0 60px;
  }

  .xa-articles-grid {
    grid-template-columns: 1fr;
  }

  .xa-article-card-media img {
    height: 270px;
  }

  .xa-article-feature {
    padding: 18px 14px 20px;
    border-radius: 22px;
  }

  .xa-article-feature-media {
    border-radius: 18px;
  }
}


/* ===========================
   FOOTER
=========================== */
.xa-footer {
  background: #020617;
  color: rgba(226, 232, 255, 0.86);
  padding: 56px 0 26px;
  border-top: 1px solid var(--divider-color);
}

/* Grid layout */
.xa-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1.4fr 1.4fr 2fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* Headings */
.xa-footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.xa-footer-subheading {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(191, 219, 254, 0.9);
  margin: 25px 0 4px;
  margin-bottom:10px !important;
}

/* Links list */
.xa-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xa-footer-links li + li {
  margin-top: 4px;
}

.xa-footer-links a {
  font-size: 13px;
  color: rgba(148, 163, 255, 0.95);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.xa-footer-links a:hover {
  color: var(--accent-color);
  transform: translateX(2px);
}

/* Utility spacers */
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}

/* Small text / labels */
.xa-footer-copy {
  font-size: 13px;
  margin: 10px 0 8px;
  color: rgba(226, 232, 255, 0.9);
}

/* Social icons */
.xa-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.xa-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(199, 210, 254, 0.98);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease, border-color 0.2s ease;
}

.xa-footer-social a:hover {
  background: var(--accent-color);
  border-color: transparent;
  color: #001027;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

/* Newsletter */
.xa-footer-newsletter {
  margin-top: 18px;
}

.xa-footer-form {
  margin-top: 4px;
}

.xa-footer-input-wrap {
  position: relative;
  border-bottom: 1px solid rgba(51, 65, 85, 0.9);
  padding-right: 40px;
}

.xa-footer-input {
  width: 100%;
  padding: 8px 0 10px;
  border: none;
  background: transparent;
  color: rgba(226, 232, 255, 0.9);
  font-size: 13px;
}

.xa-footer-input::placeholder {
  color: rgba(148, 163, 255, 0.85);
}

.xa-footer-input:focus {
  outline: none;
}

.xa-footer-input-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--accent-color);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0 4px 8px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.xa-footer-input-btn:hover {
  color: #ffffff;
  transform: translateY(-50%) translateX(2px);
}

/* Bottom bar */
.xa-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 1);
  font-size: 12px;
  color: rgba(148, 163, 255, 0.9);
}

.xa-footer-bottom-text {
  margin: 0;
}

.xa-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xa-footer-bottom-links a {
  color: rgba(148, 163, 255, 0.95);
  text-decoration: none;
  transition: color 0.2s ease;
}

.xa-footer-bottom-links a:hover {
  color: var(--accent-color);
}

/* Back to top button */
.xa-footer-backtotop {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--accent-color);
  color: #001027;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.xa-footer-backtotop i {
  font-size: 14px;
}

.xa-footer-backtotop:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.9);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1199px) {
  .xa-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .xa-footer {
    padding: 44px 0 22px;
  }

  .xa-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

@media (max-width: 575px) {
  .xa-footer-grid {
    grid-template-columns: 1fr;
  }

  .xa-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .xa-footer-bottom-links {
    order: 2;
  }

  .xa-footer-backtotop {
    align-self: flex-end;
    margin-top: 4px;
  }
}

/* ===========================
   FOOTER – LIGHT THEME
=========================== */
.xa-footer {
  background: #ffffff;
  color: #1f2933;
  padding: 56px 0 26px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 16px; /* base font size in footer */
}

/* Grid layout */
.xa-footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1.4fr 1.4fr 2fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* Headings */
.xa-footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-700);
  margin-bottom: 10px;
}

.xa-footer-subheading {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4b5563;
  margin: 25px 0 4px;
}

/* Links list */
.xa-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xa-footer-links li + li {
  margin-top: 4px;
}

.xa-footer-links a {
  font-size: 14px;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.xa-footer-links a:hover {
  color: var(--primary-color);
  transform: translateX(2px);
}

/* Utility spacers */
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}

/* Small text / labels */
.xa-footer-copy {
  font-size: 14px;
  margin: 10px 0 8px;
  color: #4b5563;
}

/* Social icons */
.xa-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.xa-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f2933;
  background: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease, border-color 0.2s ease;
}

.xa-footer-social a:hover {
  background: var(--primary-color);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

/* Newsletter */
.xa-footer-newsletter {
  margin-top: 18px;
}

.xa-footer-form {
  margin-top: 4px;
}

.xa-footer-input-wrap {
  position: relative;
  border-bottom: 1px solid rgba(148, 163, 184, 0.9);
  padding-right: 40px;
}

.xa-footer-input {
  width: 100%;
  padding: 8px 0 10px;
  border: none;
  background: transparent;
  color: #1f2933;
  font-size: 14px;
}

.xa-footer-input::placeholder {
  color: #9ca3af;
}

.xa-footer-input:focus {
  outline: none;
}

.xa-footer-input-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--primary-color);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0 4px 8px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.xa-footer-input-btn:hover {
  color: var(--primary-700);
  transform: translateY(-50%) translateX(2px);
}

/* Bottom bar */
.xa-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 13px;
  color: #6b7280;
}

.xa-footer-bottom-text {
  margin: 0;
}

.xa-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xa-footer-bottom-links a {
  color: #4b5563;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.xa-footer-bottom-links a:hover {
  color: var(--primary-color);
}

/* Back to top button */
.xa-footer-backtotop {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--primary-color);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.xa-footer-backtotop i {
  font-size: 14px;
}

.xa-footer-backtotop:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.3);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1199px) {
  .xa-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .xa-footer {
    padding: 44px 0 22px;
  }

  .xa-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

@media (max-width: 575px) {
  .xa-footer-grid {
    grid-template-columns: 1fr;
  }

  .xa-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .xa-footer-bottom-links {
    order: 2;
  }

  .xa-footer-backtotop {
    align-self: flex-end;
    margin-top: 4px;
  }
}

.xa-footer-links li + li {
  margin-top: 15px;  /* ⬆️ increased spacing */
}

/* Premium left-side content enhancement */

.xa-benefit-blocks {
  margin: 22px 0;
  display: grid;
  gap: 24px;
}

.xa-benefit h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--accent-color);
}

.xa-benefit ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.xa-benefit ul li {
  font-size: 15px;
  color: rgba(220, 232, 255, 0.85);
  line-height: 1.55;
  position: relative;
  padding-left: 16px;
}

.xa-benefit ul li::before {
  content: "•";
  color: var(--accent-color);
  position: absolute;
  left: 0;
  font-size: 20px;
  line-height: 0;
  top: 10px;
}

.xa-why-xora {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.xa-why-xora h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #eaf4ff;
}

.xa-why-xora p {
  font-size: 14px;
  color: rgba(220, 232, 255, 0.8);
  line-height: 1.6;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .xa-benefit-blocks {
    gap: 18px;
  }

  .xa-benefit h4 {
    font-size: 15px;
  }

  .xa-benefit ul li {
    font-size: 14px;
  }

  .xa-why-xora {
    margin-top: 16px;
  }
}


  /* Section background matching brand — premium dark-blue */
  .xa-premium-form {
    background: radial-gradient(circle at 10% 5%, rgba(31,111,214,0.06), transparent 8%),
                linear-gradient(180deg, #02061a 0%, #03102a 100%);
    padding: 64px 0;
    color: #e8f3ff;
    font-family: var(--default-font);
  }

  .xa-premium-grid { display: grid; grid-template-columns: 1fr 460px; gap: 36px; align-items: start; }

  /* Left column */
  .xa-kicker {
    display:inline-block;
    color: var(--accent-color);
    font-weight:700;
    letter-spacing: .14em;
    text-transform:uppercase;
    margin-bottom: 12px;
    font-size: 12px;
  }
  .xa-premium-info h2 {
    margin: 0 0 14px;
    font-family: var(--heading-font);
    font-size: clamp(22px, 3.6vw, 34px);
    color: #eaf4ff;
    line-height: 1.03;
    font-weight:800;
  }
  .xa-intro { color: rgba(230,240,255,0.9); font-size:15px; line-height:1.7; margin-bottom:18px; max-width:62ch; }
  .xa-highlights { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px; }
  .xa-highlights li { color: rgba(210,224,240,0.9); font-size:15px; font-weight:700; }
  .xa-highlights li strong { color: rgba(234,244,255,0.98); font-weight:800; }
  .xa-alt { color: rgba(210,224,240,0.8); margin-top:10px; }

  /* Right card (glass) */
  .xa-premium-card {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.98));
    box-shadow: 0 30px 80px rgba(4,11,28,0.65), inset 0 1px 0 rgba(255,255,255,0.6);
    border: 1px solid rgba(20,32,56,0.06);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease;
  }
  .xa-premium-card:hover { transform: translateY(-6px); box-shadow: 0 46px 110px rgba(4,11,28,0.72); }

  .xa-card-inner { padding: 22px; }
  .xa-card-inner h3 { margin:0 0 6px; color: var(--primary-700); font-size:18px; font-weight:800; }
  .xa-sub { margin:0 0 14px; color: rgba(51,65,85,0.85); font-size:14px; }

  /* Form layout */
  .xa-form { width:100%; }
  .xa-field { display:block; margin-bottom:12px; }
  .two-col { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

  .xa-input, .xa-select, .xa-textarea {
    width:100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(17,24,39,0.06);
    background: linear-gradient(180deg,#fff,#fbfdff);
    font-size:14px;
    color: var(--text-color);
    box-shadow: 0 8px 22px rgba(17,24,39,0.03) inset;
    transition: box-shadow .14s ease, border-color .14s ease, transform .1s ease;
    box-sizing: border-box;
  }
  .xa-select { appearance:none; padding-right:38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted-text) 50%), linear-gradient(135deg, var(--muted-text) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size:6px 6px,6px 6px; background-repeat:no-repeat; }

  .xa-textarea { min-height:110px; resize:vertical; }

  .xa-input::placeholder, .xa-textarea::placeholder { color: rgba(110,125,140,0.6); }

  .xa-input:focus, .xa-select:focus, .xa-textarea:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: rgba(31,111,214,0.22);
  }

  /* Checkbox + button row */
  .submit-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; flex-wrap:wrap; }
  .xa-checkbox { display:flex; align-items:center; gap:10px; font-weight:700; color: rgba(51,65,85,0.9); }
  .xa-checkbox input { width:18px; height:18px; accent-color: var(--primary-color); }

  .xa-btn {
    background: linear-gradient(90deg, var(--primary-600), var(--primary-color));
    color: var(--accent-contrast);
    padding: 12px 20px;
    border-radius: 999px;
    font-weight:800;
    border:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow: 0 12px 40px rgba(12,55,117,0.2);
    cursor:pointer;
    transition: transform .12s ease, box-shadow .18s ease;
    font-size:14px;
  }
  .xa-btn:active{ transform: translateY(1px); }
  .xa-btn:focus{ outline:none; box-shadow: var(--focus-ring); }

  /* Form message */
  .xa-form-msg {
    margin-top:12px;
    padding:10px 12px;
    border-radius:8px;
    background: rgba(31,111,214,0.06);
    color: var(--accent-color);
    font-weight:700;
    display:block;
  }

  /* Accessibility helper */
  .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; }

  /* Responsive adjustments */
  @media (max-width: 980px) {
    .xa-premium-grid { grid-template-columns: 1fr; gap:20px; }
    .two-col { grid-template-columns: 1fr; }
    .xa-premium-card { max-width: 720px; margin-left:auto; }
    .submit-row { flex-direction:column-reverse; align-items:stretch; }
    .xa-btn { width:100%; justify-content:center; }
  }

  @media (max-width: 520px) {
    .xa-premium-form { padding: 36px 0; }
    .xa-card-inner { padding:16px; }
    .xa-textarea { min-height:90px; }
    h2#premium-form-title { font-size: clamp(18px, 6vw, 22px); }
  }

  /* Breadcrumb wrapper */
.xa-breadcrumb {
  padding: 10px 0;
  background: transparent; /* change to a tint if needed */
  font-family: var(--default-font, "Inter", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  animation: xa-breadcrumb-fade 360ms ease both;
}

/* container utility (if you already have .container, it will match) */
.xa-breadcrumb .container{
  display:block;
  max-width:1300px;
  margin:0 auto;
  padding: 0 15px;
}

/* semantic ordered list — remove default markers */
.xa-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* allows wrapping on small screens */
  gap: 8px;
  font-size: 15px;          /* you wanted 16px elsewhere — adjust if needed */
  color: var(--muted-text);
}

/* each item inline */
.xa-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 4px 0;
}

/* CHEVRON separator using pseudo — only for items after the first */
.xa-breadcrumb-item + .xa-breadcrumb-item::before{
  content: "›";                 /* elegant chevron */
  color: var(--divider-color, rgba(31,111,214,0.12));
  font-size: 14px;
  margin-right: 6px;
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Links */
.xa-breadcrumb-list a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 180ms ease, text-decoration-color 180ms ease;
  white-space: nowrap;
}

/* hover / focus */
.xa-breadcrumb-list a:hover,
.xa-breadcrumb-list a:focus {
  color: var(--accent-color);
  outline: none;
}

/* current page */
.xa-breadcrumb-list .active {
  color: var(--primary-700);
  font-weight: 600;
  white-space: nowrap;
}

/* small screens: allow wrap and reduce spacing */
@media (max-width: 575px) {
  .xa-breadcrumb-list {
    font-size: 13px;
    gap: 6px;
  }
  .xa-breadcrumb-item + .xa-breadcrumb-item::before{
    margin-right: 6px;
    font-size: 12px;
  }
}

/* optional: clamp long middle items with ellipsis */
.xa-breadcrumb-item a,
.xa-breadcrumb-item.active {
  max-width: 220px; /* adjust as needed */
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* fade animation */
@keyframes xa-breadcrumb-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

 /* Hero layout */
  .hero{
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding: 64px 20px;
  }

  .hero-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 420px;
  }

  /* Left decorative area (uses provided image) */
  .hero-art{
    width: 100%;
    height: 100%;
    min-height: 320px;
    background-image: url("../images/data-engineering.jpg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /* subtle overlay to blend the art into the dark background */
    filter: brightness(1.05) contrast(1.05);
  }

  /* Content */
  .hero-content{
    padding: 8px 12px;
  }

  .hero-title{
    
    font-weight: 700;
    font-size: clamp(28px, 4.2vw, 38px);
    line-height: 1.06;
    margin: 0 0 18px 0;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
  }

  .hero-lead{
    
    color: var(--muted-on-dark);
    max-width: 640px;
    font-size: clamp(14px, 1.4vw, 18px);
    margin: 0 0 28px 0;
  }

  .hero-cta{
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }

  .btn-primary{
    display: inline-block;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-600));
    color: var(--accent-contrast);
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(20, 36, 77, 0.28);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,36,77,0.35); }

  .btn-outline{
    display: inline-block;
    color: var(--text-on-dark);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    background: transparent;
    transition: background .12s ease, color .12s ease;
  }
  .btn-outline:hover{
    background: rgba(255,255,255,0.04);
  }

  /* Responsive */
  @media (max-width: 920px){
    .hero-inner{
      grid-template-columns: 1fr;
      gap: 28px;
      text-align: left;
      padding: 0 6px;
    }
    .hero-art{
      order: 2;
      background-position: center top;
      background-size: 70%;
      height: 220px;
      min-height: 180px;
    }
    .hero-content{ order: 1; }
    .hero-title{ font-size: clamp(22px, 6vw, 34px); }
  }

  @media (max-width: 480px){
    .hero{
      padding: 40px 14px;
    }
    .hero-inner{ gap: 18px; }
    .hero-art{ background-size: 80%; height: 160px; }
    .hero-cta{ gap: 10px; }
  }

   /* SECTION LAYOUT */
  .theme-section {
    background: var(--bg-dark);
    color: var(--on-dark);
    padding: 56px 20px;
 
  }

  .theme-section .container-inner{
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr; /* left tile column / right content */
    gap: 48px;
    align-items: center;
  }

  /* LEFT TILED ART */
  .tiled-left{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 120px 1fr; /* small top tile + big square */
    gap: 0;
    width: 100%;
  }

  .tiled-left .tile{
    background-image: url("../images/data-engineering.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid var(--card-border);
  }

  /* small top square that crops differently for a grid feel */
  .tiled-left .small-tile{
    height: 120px;
    background-position: 12% 8%; /* tweak to show top-left part */
  }

  /* big square */
  .tiled-left .large-tile{
    min-height: 420px;
    background-position: 20% 50%; /* center-ish crop for nicer details */
  }

  /* RIGHT CONTENT */
  .tiled-right{
    padding: 6px 8px;
  }

  .section-title{
    font-size: clamp(26px, 3.8vw, 40px);
    line-height: 1.05;
    margin: 0 0 18px 0;
    color: var(--on-dark);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .tiled-right .text-blocks p{
    color: var(--muted-on-dark);
    font-size: clamp(14px, 1.45vw, 16px);
    line-height: 1.7;
    margin: 0 0 18px 0;
    max-width: 740px;
  }

  /* subtle vertical divider feel on very wide screens (optional) */
  @media (min-width: 1400px){
    .theme-section .container-inner{
      grid-template-columns: 480px 1fr;
      gap: 72px;
    }
    .tiled-left .large-tile{ min-height: 520px; }
  }

  /* RESPONSIVE: stack on smaller widths */
  @media (max-width: 980px){
    .theme-section .container-inner{
      grid-template-columns: 1fr;
      gap: 28px;
    }

    /* place big art first on mobile for visual impact */
    .tiled-left{
      grid-template-rows: 1fr 120px; /* show large tile then small tile */
    }
    .tiled-left .large-tile{ min-height: 320px; background-position: 25% 50%; }
    .tiled-left .small-tile{ height: 96px; background-position: 12% 10%; }

    .tiled-right{ padding-top: 6px; }
    .section-title{ font-size: clamp(20px, 6vw, 28px); }
  }

  @media (max-width: 520px){
    .theme-section{ padding: 36px 14px; }
    .tiled-left .large-tile{ min-height: 220px; background-size: cover; }
    .tiled-left .small-tile{ height: 80px; }
    .tiled-right .text-blocks p{ font-size: 15px; }
  }
  /* SECTION */
  .we-do-section{
    background: var(--bg-dark);
    color: var(--on-dark);
    padding: 56px 20px;
   
  }

  .we-do-inner{
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .we-do-header{
    max-width: 920px;
    margin: 0 0 28px 0;
  }

  .we-do-header h2{
    margin: 0 0 10px 0;
    font-size: clamp(24px, 3.6vw, 36px);
    line-height: 1.04;
    color: var(--on-dark);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .we-do-sub{
    margin: 0;
    color: var(--muted-on-dark);
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.7;
  }

  /* GRID */
  .we-do-grid{
    list-style: none;
    padding: 0;
    margin: 18px 0 24px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .we-do-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    border: 1px solid var(--card-border);
    padding: 20px;
    border-radius: 12px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    outline: none;
  }

  .we-do-card:focus,
  .we-do-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(7,14,30,0.45);
    border-color: rgba(255,255,255,0.08);
  }

  .we-do-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(29,76,160,0.12), rgba(29,76,160,0.06));
    color: var(--accent-color);
    flex-shrink: 0;
  }

  .we-do-card h3{
    margin: 0;
    font-size: 16px;
    color: var(--on-dark);
    font-weight: 700;
  }

  .we-do-card p{
    margin: 0;
    font-size: 14px;
    color: var(--muted-on-dark);
    line-height: 1.6;
    flex: 1 1 auto;
  }

  /* CTA */
  .we-do-cta{
    display: flex;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
  }

  

  /* RESPONSIVE */
  @media (max-width: 1100px){
    .we-do-grid{ grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 860px){
    .we-do-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .we-do-card{ min-height: 150px; }
  }

  @media (max-width: 520px){
    .we-do-grid{ grid-template-columns: 1fr; }
    .we-do-card{ flex-direction: row; gap: 12px; align-items: flex-start; min-height: 88px; padding: 12px; }
    .we-do-icon{ width: 46px; height: 46px; border-radius: 8px; }
    .we-do-card h3{ font-size: 15px; }
    .we-do-card p{ font-size: 13px; }
    .we-do-header h2{ font-size: 20px; }
  }

  
  .de-process-section {
  background: var(--bg-dark);
  padding: 20px 20px;
  font-family: var(--default-font);
  color: var(--text-on-dark);
}

.de-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.de-heading {
  font-family: var(--heading-font);
  font-size: clamp(20px, 4vw, 36px);
  margin-bottom: 14px;
 color: var(--on-dark)  !important;
  font-weight: 700;

}

.de-subtext {
  max-width: 780px;
  font-size: 16px;
  color: var(--muted-on-dark);
  line-height: 1.7;
  margin-bottom: 40px;
}

/* Steps Layout */
.de-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.de-step {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dark-divider-color);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: 0.25s ease;
  box-shadow: var(--shadow-sm);
}

.de-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Number Badge */
.de-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 20px rgba(31, 111, 214, 0.25);
}

.de-step-content h3 {
  font-size: 17px;
  margin: 0 0 6px 0;
  font-weight: 600;
  color: var(--text-on-dark);
}

.de-step-content p {
  color: var(--muted-on-dark);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Responsive — Tablet */
@media (max-width: 1024px) {
  .de-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive — Mobile Timeline */
@media (max-width: 700px) {
  .de-steps {
    grid-template-columns: 1fr;
  }

  .de-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 18px;
  }

  .de-step-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 10px;
    flex-shrink: 0;
  }
  
  .de-step-content h3 {
    font-size: 16px;
  }

  .de-step-content p {
    font-size: 14px;
  }
}



  /* Uses your :root variables (assumes they are present) */
  .de-impact-section {
    background: var(--bg-dark);
    color: var(--on-dark);
    padding: 36px 20px;
    font-family: var(--default-font);
  }

  .de-impact-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
  }

  /* LEFT */
  .de-impact-title {
    font-size: clamp(24px, 3.6vw, 36px);
    margin: 0 0 10px 0;
    font-weight: 700;
   color:var(--accent-contrast)
  }

  .de-impact-lead {
    margin: 0 0 22px 0;
    color: var(--muted-on-dark);
    line-height: 1.7;
    max-width: 780px;
  }

  .de-capabilities { display: grid; gap: 14px; }

  .cap{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255,255,255,0.01);
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--dark-divider-color);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .cap:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: rgba(255,255,255,0.08);
  }

  .cap-icon{
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31,111,214,0.12), rgba(21,80,168,0.06));
    display: grid;
    place-items: center;
    color: var(--accent-color);
    flex-shrink: 0;
  }

  .cap-text h4{
    margin: 0 0 6px 0;
    font-size: 15px;
    color: var(--text-on-dark);
    font-weight: 600;
  }

  .cap-text p{
    margin: 0;
    color: var(--muted-on-dark);
    font-size: 13.5px;
    line-height: 1.55;
  }

  /* RIGHT — metrics */
  .de-impact-right{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .metrics{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    border-radius: 12px;
    border: 1px solid var(--dark-divider-color);
  }

  .metric{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
  }

  .metric-value{
    width: 86px;
    height: 86px;
    border-radius: 14px;
    background: var(--brand-gradient);
    display: grid;
    place-items: center;
    color: var(--accent-contrast);
    font-weight: 800;
    font-size: 26px;
    box-shadow: 0 10px 30px rgba(15,32,75,0.28);
  }

  .metric-label{
    color: var(--on-dark);
    font-size: 14px;
    font-weight: 600;
  }

  .impact-cta{ display:flex; gap:12px; flex-wrap:wrap; }

  .impact-cta .btn-primary{
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--brand-gradient);
    color: var(--accent-contrast);
    text-decoration: none;
    font-weight: 700;
  }

  .impact-cta .btn-outline{
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--on-dark);
    text-decoration: none;
    background: transparent;
    font-weight: 700;
  }

  /* RESPONSIVE */
  @media (max-width: 1100px){
    .de-impact-container{ grid-template-columns: 1fr 360px; gap: 26px; }
  }

  @media (max-width: 860px){
    .de-impact-container{ grid-template-columns: 1fr; }
    .de-impact-right{ order: 2; }
    .de-impact-left{ order: 1; }
    .metrics{ grid-template-columns: repeat(3, 1fr); }
    .metric{ flex-direction: column; align-items: center; text-align: center; padding: 18px; }
    .metric-value{ width: 72px; height: 72px; font-size: 20px; }
    .metric-label{ font-size: 13px; }
  }

  @media (max-width: 520px){
    .cap { padding: 12px; gap: 10px; }
    .cap-icon { width: 40px; height: 40px; }
    .metric-value{ width: 64px; height: 64px; font-size: 18px; }
  }


  .xa-banner-breadcrumb {
    position: relative;
    background-image: url("../images/hr-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
  }
  .xa-banner-breadcrumb-1{
    position: relative;
    background-image: url("../images/banner/Data\ Engineering-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
  }
.xa-banner-breadcrumb-2{
  position: relative;
    background-image: url("../images/banner/Data\ Science-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-3{
  position: relative;
    background-image: url("../images/banner/Data\ Visualization-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-4{
  position: relative;
    background-image: url("../images/banner/Customer\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-5{
  position: relative;
    background-image: url("../images/banner/Data\ Engineering-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-6{
  position: relative;
    background-image: url("../images/banner/Supply\ Chain\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}

.xa-banner-breadcrumb-7{
  position: relative;
    background-image: url("../images/banner/Financial\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-8{
  position: relative;
    background-image: url("../images/banner/Revenue\ Growth\ Management-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-9{
   position: relative;
    background-image: url("../images/banner/Marketing\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-10{
   position: relative;
    background-image: url("../images/banner/Risk\ &\ Fraud\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-11{
   position: relative;
    background-image: url("../images/banner/IoT\ &\ Edge\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-12{
   position: relative;
    background-image: url("../images/banner/Generative\ AI\ \(GenAI\)-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
.xa-banner-breadcrumb-13{
  position: relative;
    background-image: url("../images/banner/Supply\ Chain\ Analytics-banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
}
  /* dark overlay for readability */
  .xa-banner-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,18,0.45), rgba(2,6,18,0.65));
    z-index: 0;
  }

  .xa-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    padding: 28px 18px;
    box-sizing: border-box;
    text-align: center; /* center text horizontally */
  }


  /* breadcrumb pill centered below the title */
  .xa-banner-breadcrumb-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--muted-on-dark);
    font-size: 14px;
    margin-top: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
  }

  .xa-banner-breadcrumb-pill a {
    color: white;
    text-decoration: none;
    font-weight: 600;
  }
  .xa-banner-breadcrumb-pill a:hover { color: var(--text-on-dark); text-decoration: underline; }

  .xa-banner-sep {
    color: white;
    margin: 0 6px;
    font-weight: 700;
  }

  /* smaller on mobile */
  @media (max-width: 760px) {
    .xa-banner-breadcrumb { min-height: 300px; }
    .xa-banner-title { font-size: clamp(18px, 6.8vw, 26px); }
    .xa-banner-breadcrumb-pill { font-size: 13px; padding: 8px 12px; }
  }

  @media (max-width: 420px) {
    .xa-banner-breadcrumb { min-height: 300px; }
    .xa-banner-inner { padding: 18px 12px; }
    .xa-banner-title { font-size: 20px; }
  }


  /* Section base */
.hr-analytics-section {
  background: linear-gradient(180deg, rgba(5,8,22,1) 0%, rgba(3,7,16,1) 100%); /* subtle gradient */
  color: var(--on-dark);
  padding: 40px 20px;

}

/* layout container (centered) */
.hr-analytics-section .hr-container {
  max-width: var(--container-max);
  margin: 0 auto;
 
  
}

/* Title */
.hr-title {
  font-family: var(--heading-font);
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.05;
  margin: 4px 0 18px;
  color: var(--on-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* lead paragraph */
.hr-lead {
  color: var(--text-on-dark);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
 
  margin-bottom: 28px;
  opacity: 0.95;
}

/* Content body */
.hr-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted-on-dark);
  margin: 20px 0;
 
}

/* Sub headings inside content */
.hr-subtitle {
  color: var(--on-dark);
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 26px 0 12px;
  font-weight: 700;
}

/* Make the whole block readable and balanced on large screens */
@media (min-width: 1000px){
  .hr-analytics-section {
    padding: 40px 20px;
  }

  .hr-analytics-section .hr-container {
    display: block;
    padding: 0 28px;
  }

  .hr-title { font-size: 44px; }
  .hr-lead { font-size: 18px; }
  .hr-content p { font-size: 16.5px;  }
}

/* Narrow screens: increase spacing and make full-width feel comfortable */
@media (max-width: 767px){
  .hr-analytics-section {
    padding: 20px 16px;
  }

  .hr-title {
    font-size: clamp(22px, 6.2vw, 28px);
    line-height: 1.08;
  }

  .hr-lead {
    font-size: 15px;
    margin-bottom: 18px;
  }

  .hr-content p {
    font-size: 15px;
    line-height: 1.7;
    margin: 14px 0;
  }

  .hr-subtitle {
    font-size: 16px;
    margin-top: 20px;
  }
}

/* Optional small ornament: faint left border on the first paragraph (desktop only) */
@media (min-width: 900px) {
  .hr-analytics-section .hr-lead {
    position: relative;
    padding-left: 18px;
  }

  .hr-analytics-section .hr-lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent-color), var(--primary-600));
    opacity: 0.9;
  }
}

/* small utilities for links if present */
.hr-analytics-section a {
  color: var(--accent-color);
  text-decoration: underline;
}

/* make sure text contrast looks good on very small devices */
@media (max-width: 420px) {
  .hr-content p, .hr-lead {
    font-size: 14.5px;
  }
}

/* section wrapper */
  .xa-hr-services {
    background: linear-gradient(180deg, rgba(8,12,22,1) 0%, rgba(5,8,22,1) 100%);
    color: var(--text-on-dark);
    padding: 40px 20px;
  }

  .xa-container {
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .xa-hr-grid {
    display: flex;
    gap: 36px;
    align-items: stretch; /* ensures columns equal height in most browsers */
  }

  /* left column */
  .xa-col-left {
    flex: 1 1 60%;
    min-width: 300px;
  }

  .xa-section-title {
    font-family: var(--heading-font);
    font-size: clamp(22px, 3.4vw, 34px);
    margin: 0 0 12px;
    color: var(--on-dark);
    font-weight: 700;
  }

  .xa-section-sub {
    color: var(--muted-on-dark);
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 52em;
  }

  /* services list (compact premium cards) */
  .xa-services-list {
    display: grid;
    gap: 12px;
  }

  .xa-service-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.03);
    padding: 14px 18px;
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: default;
  }

  .xa-service-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(28,164,255,0.12);
  }

  .xa-service-icon {
    min-width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31,111,214,0.12), rgba(12,34,74,0.2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }

  .xa-service-body {
    flex: 1;
  }

  .xa-service-title {
    font-weight: 700;
    color: var(--text-on-dark);
    margin:10px 0px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .xa-service-title .external {
    color: var(--accent-color);
    font-size: 13px;
    opacity: 0.95;
  }

  .xa-service-desc {
    font-size: 13px;
    color: var(--muted-on-dark);
    margin: 0;
    line-height: 1.5;
  }

  /* right column (image) */
  .xa-col-right {
    flex: 0 0 42%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 280px;
  }

  .xa-img-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255,255,255,0.03);
    /* make the image box match left content height because parent flex align-items:stretch */
    display:flex;
  }

  .xa-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }

  /* smaller screens: stack */
  @media (max-width: 900px) {
    .xa-hr-grid {
      flex-direction: column;
    }
    .xa-col-right {
      order: 2;
      flex-basis: auto;
    }
    .xa-col-left {
      order: 1;
    }
  }

  /* very small screens compact list */
  @media (max-width: 480px) {
    .xa-service-item {
      gap:12px;
      padding: 12px;
    }
    .xa-service-icon {
      width:40px;
      height:40px;
      font-size:16px;
    }
    .xa-section-title {
      font-size: 22px;
    }
  }

  /* section wrapper */
  .xa-benefits {
    background: linear-gradient(180deg, var(--bg-dark) 0%, #030612 100%);
    color: var(--text-on-dark);
    padding: 56px 20px;
    font-family: var(--default-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  }
  .xa-container { max-width: var(--container-max); margin: 0 auto; }

  /* header */
  .xa-benefits-head {
    margin-bottom: 20px;
    max-width: 1100px;
  }
  .xa-benefits-kicker {
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 0.18em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .xa-benefits-title {
    font-size: clamp(20px, 3.6vw, 32px);
    line-height: 1.06;
    margin: 0 0 12px;
    color: var(--on-dark);
    font-weight: 700;
  }
  .xa-benefits-lead {
    color: var(--muted-on-dark);
    margin: 0 0 20px;
    
    line-height: 1.6;
    font-size: 15px;
  }

  /* grid: 2 columns on desktop, 1 on small screens */
  .xa-benefits-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    
  }

  /* benefit item */
  .xa-benefit {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.004));
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    transition: transform .16s cubic-bezier(.2,.9,.2,1), box-shadow .16s ease, border-color .16s ease;
    cursor: default;
    min-height: 56px;
  }

  .xa-benefit:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(28,164,255,0.12);
  }

  .xa-benefit-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31,111,214,0.06), rgba(12,34,74,0.12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  }

  .xa-benefit-body {
    flex: 1;
    color: var(--on-dark);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.28;
  }

  .xa-benefit-sub {
    display:block;
    font-size:13px;
    color: var(--muted-on-dark);
    font-weight: 400;
    margin-top:4px;
  }

  /* Smaller, denser layout options */
  @media (max-width: 1024px) {
    .xa-benefits { padding: 48px 18px; }
    .xa-benefit { padding: 11px 14px; min-height: 54px; }
  }

  @media (max-width: 760px) {
    .xa-benefits-list { grid-template-columns: 1fr; }
    .xa-benefits { padding: 36px 14px; }
    .xa-benefit { padding: 10px 12px; min-height: 48px;  }
    .xa-benefit-icon { width:38px; height:38px; font-size:16px; }
    .xa-benefits-title { font-size: 20px; }
  }

  
  /* Section base */
.xa-impl-section{
  background: radial-gradient(circle at top left, #06081a 0%, var(--bg-dark) 100%);
  color: var(--text-on-dark);
  padding: 64px 20px;
}

/* container */
.xa-container{
  max-width: var(--container-max);
  margin: 0 auto;
 
}

/* header */
.xa-impl-title{
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 0 0 8px;
  color: var(--on-dark);
  font-weight: 700;
  line-height: 1.05;
}

.xa-impl-lead{
  color: var(--muted-on-dark);
  margin: 0 0 22px;
  font-size: 15px;
  max-width: 70ch;
}

/* ---------- TWO-COLUMN LIST ---------- */
.xa-impl-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 20px; /* row gap / column gap */
}

/* ensure odd/even spacing remains consistent */
.xa-impl-list > li{
  break-inside: avoid;
}

/* single step card */
.xa-step{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(6,10,28,0.85), rgba(12,18,34,0.95));
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease, background .2s ease;
}

/* hover effect (desktop) */
.xa-step:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.85);
  border-color: rgba(28,164,255,0.22);
  background: linear-gradient(180deg, rgba(28,164,255,0.06), rgba(10,14,28,0.98));
}

/* step number badge */
.xa-step-num{
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(31,111,214,0.18), rgba(12,55,117,0.9));
  color: var(--accent-contrast);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid rgba(28,164,255,0.45);
  flex-shrink: 0;
}

/* step text */
.xa-step-body h4{
  margin:11px 0px;
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
}
.xa-step-body p{
  margin: 0;
  color: var(--muted-on-dark);
  font-size: 13px;
  line-height: 1.55;
}

/* make the grid visually balanced when one column has fewer items */
.xa-impl-list > li:last-child {
  /* no special style needed; kept for future tuning */
}

/* RESPONSIVE: collapse to one column on small screens */
@media (max-width: 900px){
  .xa-impl-list{
    grid-template-columns: 1fr;
  }
  .xa-impl-section{
    padding: 44px 16px;
  }
  .xa-step{
    padding: 10px 12px;
  }
  .xa-step-num{
    min-width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .xa-impl-title{ font-size: clamp(22px, 6vw, 28px); }
}

/* smaller phones: tighten spacing */
@media (max-width: 480px){
  .xa-impl-list{ gap: 10px; }
  .xa-step{ gap: 12px; padding: 10px; }
  .xa-step-body h4{ font-size: 14px; }
  .xa-step-body p{ font-size: 13px; }
}


/* Stack title and breadcrumb one below the other */
.xa-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: center;   /* change to center if you center banner */
  gap: 8px;
}

/* Title with glass / backdrop blur */
.xa-banner-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(20px, 3.8vw, 36px);
  line-height: 1.06;
  color: #fff;
  text-shadow: 0 8px 30px rgba(0,0,0,0.6);

  display: inline-block;
  padding: 8px 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);      /* must be semi-transparent */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
}

/* Breadcrumb pill with blur */
.xa-banner-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
}

.xa-banner-breadcrumb-pill a {
  color: #fff;
  text-decoration: none;
}

.xa-banner-breadcrumb-pill a:hover {
  text-decoration: underline;
}

.xa-banner-sep {
  opacity: 0.7;
}



.xa-mega .xa-service-card ul li a {
  color: #1F2933;
  text-decoration: none; /* optional: remove underline */
}

/* optional hover (slightly darker) */
.xa-mega .xa-service-card ul li a:hover {
  color: #111827;
}

.xa-mobile-services-content a {
  color: #1F2933;
  text-decoration: none;
}

.xa-mobile-services-content a i {
  color: #1F2933; /* arrow icon color also */
}

/* Optional: darker hover */
.xa-mobile-services-content a:hover {
  color: #111827;
}



/* ===== Root tokens ===== */
  :root{
    --xa2-bg: #0B080B; /* UPDATED BACKGROUND COLOR */
    --xa2-primary: #1f6fd6;
    --xa2-primary-600: #1550a8;
    --xa2-accent: #1ca4ff;
    --xa2-on-dark: #e6f1fb;
    --xa2-muted: #9aa6b8;
    --xa2-container: 1300px;
    --xa2-radius-lg: 14px;
    --xa2-radius-md: 10px;
    --xa2-shadow-lg: 0 20px 50px rgba(2,6,15,0.6);
    --xa2-shadow-sm: 0 8px 24px rgba(2,6,15,0.5);
    --xa2-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* ===== Section root ===== */
  .xa2-about-root{
    background: var(--xa2-bg); /* UPDATED */
    color: var(--xa2-on-dark);
    padding: 64px 18px;
    font-family: var(--xa2-font);
  }

  .xa2-about-wrap{
    max-width: var(--xa2-container);
    margin: 0 auto;
  }

  /* ===== Grid layout ===== */
  .xa2-about-grid{
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 36px;
    align-items: stretch;
  }

  /* Left Column */
  .xa2-about-left{ display:flex; flex-direction:column; gap:18px; }

  .xa2-kicker{
    color: var(--xa2-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .xa2-title{
    font-size: clamp(24px, 3vw, 36px);
    color: var(--xa2-on-dark);
    margin: 0;
    line-height: 1.1;
  }

  .xa2-lead{
    color: var(--xa2-muted);
    line-height: 1.7;
    margin: 0 0 6px;
  }

  /* Pillars */
  .xa2-pillars{ display:grid; gap: 14px; }

  .xa2-pill{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 14px;
    border-radius: 14px;
    transition: all .25s ease;
  }

  .xa2-pill:hover{
    transform: translateY(-4px);
    border-color: var(--xa2-accent);
    box-shadow: var(--xa2-shadow-lg);
  }

  .xa2-pill-icon{
    width:46px; height:46px;
    border-radius: 10px;
    background: rgba(28,164,255,0.08);
    color: var(--xa2-accent);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
  }

  .xa2-pill-title{
    font-size:16px;
    font-weight:700;
    margin:0 0 4px;
    color: var(--xa2-on-dark);
  }

  .xa2-pill-text{
    margin:0;
    font-size:14px;
    color: var(--xa2-muted);
  }

  /* CTA */
  .xa2-cta-row{ display:flex; gap:14px; margin-top:8px; }

  .xa2-cta-primary{
    background: var(--xa2-primary);
    padding: 10px 20px;
    border-radius: 10px;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.25s;
  }
  .xa2-cta-primary:hover{ background: var(--xa2-primary-600); transform:translateY(-2px); }

  .xa2-cta-ghost{
    color:var(--xa2-accent);
    font-weight:700;
    text-decoration:none;
  }
  .xa2-cta-ghost:hover{ transform: translateX(3px); }

  /* ===== Right Image ===== */
  .xa2-about-right{ display:flex; align-items:stretch; }
  .xa2-about-visual{
    width:100%;
    height:100%;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: var(--xa2-shadow-lg);
  }
  .xa2-about-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ===== Responsive ===== */
  @media (max-width: 1024px){
    .xa2-about-grid{ grid-template-columns: 1fr; }
    .xa2-about-right{ max-width:680px; margin:0 auto; }
  }

  @media (max-width: 520px){
    .xa2-title{ font-size:22px; }
    .xa2-pill{ padding:12px; }
    .xa2-cta-row{ flex-direction:column; }
    .xa2-cta-primary, .xa2-cta-ghost{ width:100%; text-align:center; }
  }

  /* SECTION ROOT */
  .xa3-values-root{
    background: var(--xa2-bg);
    color: var(--xa2-on-dark);
    padding: 56px 18px;
  }
  .xa3-values-wrap{
    max-width: var(--xa3-container);
    margin: 0 auto;
    padding: 0 18px;
  }

  /* HEADER */
  .xa3-values-head{ text-align: left; margin-bottom: 20px; }
  .xa3-kicker{ color: var(--xa2-accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; display:block; margin-bottom:8px; }
  .xa3-title{ font-size: clamp(20px, 3.2vw, 28px); margin:0 0 8px; color:var(--xa2-on-dark); font-weight:700; }
  .xa3-sub{ color: var(--xa2-muted); margin:0 0 18px; max-width:66ch; line-height:1.6; }

  /* GRID */
  .xa3-grid{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap: 26px;
    align-items: start;
  }

  /* CARDS (LEFT) */
  .xa3-values-cards{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }

  .xa3-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--xa3-radius);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.6);
    transition: transform var(--xa3-transition), box-shadow var(--xa3-transition), border-color var(--xa3-transition);
  }

  .xa3-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--xa3-shadow);
    border-color: rgba(28,164,255,0.12);
  }

  .xa3-card-icon{
    width:44px; height:44px;
    border-radius:10px;
    display:inline-grid;
    place-items:center;
    color:var(--xa2-accent);
    background: rgba(28,164,255,0.06);
    font-size:18px;
  }

  .xa3-card-title{ margin:0; font-size:15px; color:var(--xa2-on-dark); font-weight:700; }
  .xa3-card-text{ margin:0; color:var(--xa2-muted); font-size:13.5px; line-height:1.6; }

  /* IMPACT PANEL (RIGHT) */
  .xa3-impact-panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
    border:1px solid rgba(255,255,255,0.04);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .xa3-vision-title{ margin:0 0 6px; color:var(--xa2-on-dark); font-size:15px; font-weight:700; }
  .xa3-vision-text{ margin:0; color:var(--xa2-muted); font-size:14px; line-height:1.6; }

  /* counters */
  .xa3-counters{ display:flex; gap:10px; flex-direction:column; }
  .xa3-counter{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    background: rgba(255,255,255,0.014);
    border-radius: 10px;
    border:1px solid rgba(255,255,255,0.03);
  }
  .xa3-counter-num{
    font-size:20px;
    font-weight:800;
    color:var(--xa2-accent);
  }
  .xa3-counter-label{ font-size:13px; color:var(--xa2-muted); }

  .xa3-impact-cta{ text-align:center; margin-top:4px; }
  .xa3-cta{
    display:inline-block;
    padding:10px 14px;
    border-radius:10px;
    background: linear-gradient(180deg, var(--xa2-primary), var(--xa2-primary-600));
    color:#fff;
    text-decoration:none;
    font-weight:700;
  }

  /* RESPONSIVE */
  @media (max-width: 980px){
    .xa3-grid{ grid-template-columns: 1fr; }
    .xa3-values-cards{ grid-template-columns: 1fr 1fr; }
    .xa3-impact-panel{ order: 3; }
  }
  @media (max-width: 560px){
    .xa3-values-cards{ grid-template-columns: 1fr; gap:12px; }
    .xa3-counter-num{ font-size:18px; }
    .xa3-values-root{ padding: 40px 12px; }
  }

  /* SECTION ROOT */
  .xa4-why-root { background: var(--xa2-bg); color: var(--xa2-on-dark); padding: 56px 18px; font-family: var(--xa-font); }
  .xa4-wrap { max-width: var(--xa3-container); margin: 0 auto; padding: 0 18px; }

  /* HEADER */
  .xa4-head { margin-bottom: 24px; }
  .xa4-kicker { color: var(--xa2-accent); text-transform: uppercase; letter-spacing: .12em; font-weight:700; font-size:12px; display:block; margin-bottom:8px; }
  .xa4-title { font-size: clamp(22px, 3.2vw, 32px); margin: 0 0 8px; color: var(--xa2-on-dark); line-height:1.06; font-weight:700; }
  .xa4-lead { margin: 0 0 18px; color: var(--xa2-muted); max-width:68ch; line-height:1.6; }

  /* GRID LAYOUT */
  .xa4-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }

  /* REASONS (LEFT) */
  .xa4-reasons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .xa4-reason {
    display:flex;
    gap:12px;
    padding: 14px;
    border-radius: var(--xa4-radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    transition: transform var(--xa4-transition), box-shadow var(--xa4-transition), border-color var(--xa4-transition);
    opacity: 0;
    transform: translateY(14px) scale(.995);
  }
  .xa4-reason[data-reveal].is-visible { opacity:1; transform: translateY(0) scale(1); transition-delay: 60ms; }
  .xa4-reason:hover { transform: translateY(-6px); box-shadow: var(--xa4-shadow); border-color: rgba(28,164,255,0.12); }

  .xa4-reason-icon { width:46px; height:46px; border-radius:10px; display:grid; place-items:center; color: var(--xa2-accent); background: rgba(28,164,255,0.06); font-size:18px; flex-shrink:0; }
  .xa4-reason-title { margin:0; font-size:15px; color: var(--xa2-on-dark); font-weight:700; }
  .xa4-reason-text { margin:0; color: var(--xa2-muted); font-size:13.5px; line-height:1.6; }

  /* TRUST (RIGHT) */
  .xa4-trust {
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 10px 32px rgba(0,0,0,0.6);
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:stretch;
  }

  .xa4-trust-title { margin:0; font-size:16px; color: var(--xa2-on-dark); font-weight:700; }
  .xa4-trust-stats { display:flex; gap:10px; justify-content:space-between; }
  .xa4-stat { flex:1; text-align:center; padding:10px; border-radius:10px; background: rgba(255,255,255,0.008); border:1px solid rgba(255,255,255,0.02); }
  .xa4-stat-num { font-size:20px; font-weight:800; color: var(--xa2-accent); }
  .xa4-stat-label { font-size:12px; color: var(--xa2-muted); margin-top:6px; }

  .xa4-trust-text { margin:0; color: var(--xa2-muted); font-size:14px; line-height:1.6; }

  .xa4-trust-cta { display:flex; gap:10px; margin-top:6px; }
  .xa4-btn-primary {
    flex:1;
    display:inline-flex;
    justify-content:center;
    padding:10px 14px;
    background: linear-gradient(180deg, var(--xa2-primary), #1550a8);
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
  }
  .xa4-btn-ghost {
    flex:1;
    display:inline-flex;
    justify-content:center;
    padding:10px 14px;
    color: var(--xa2-accent);
    background: transparent;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
  }

  /* responsive */
  @media (max-width: 980px){
    .xa4-grid { grid-template-columns: 1fr; }
    .xa4-reasons { grid-template-columns: 1fr 1fr; }
    .xa4-trust { order: 3; }
  }
  @media (max-width: 560px){
    .xa4-reasons { grid-template-columns: 1fr; }
    .xa4-wrap { padding: 0 10px; }
    .xa4-trust-stats { flex-direction: column; }
  }



.xa-cta-simple{
  background: linear-gradient(180deg, var(--bg-dark) 0%, #050816 100%);
  color: var(--text-on-dark);
  padding: 56px 20px;
  font-family: var(--default-font);
}

.xa-cta-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* LEFT */
.xa-cta-left .xa-cta-kicker{
  display:block;
  color: var(--accent-color);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}

.xa-cta-heading{
  font-size: clamp(20px, 3.6vw, 36px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--on-dark);
  font-weight:800;
}

.xa-cta-lead{
  color: var(--muted-on-dark);
  margin: 0 0 18px;
  font-size:16px;
  line-height:1.6;
  max-width: 70ch;
}

.xa-cta-features{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:10px 18px;
  flex-wrap:wrap;
  color:var(--muted-on-dark);
  font-size:14px;
}
.xa-cta-features li{
  background: rgba(255,255,255,0.02);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.02);
}

/* RIGHT (card) */
.xa-cta-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.04);
}

.xa-cta-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* contact item */
.xa-cta-contact-item{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--on-dark);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.02);
  transition: transform .18s ease, box-shadow .18s ease;
}

.xa-cta-contact-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

.xa-cta-icon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(28,164,255,0.06);
  color: var(--accent-color);
  border-radius:10px;
  font-size:18px;
  flex-shrink:0;
  border: 1px solid rgba(28,164,255,0.08);
}

.xa-cta-contact-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.xa-cta-label{
  font-size:12px;
  color:var(--muted-on-dark);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}

.xa-cta-value{
  font-weight:700;
  color:var(--on-dark);
  font-size:16px;
}

/* action button */
.xa-cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  padding:12px 18px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  color: var(--accent-contrast);
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 12px 30px rgba(31,111,214,0.12);
  border: none;
  transition: transform .16s ease, box-shadow .16s ease;
  align-self:flex-start;
}

.xa-cta-button i{ font-size:14px; transform: translateY(-1px); }

.xa-cta-button:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(28,164,255,0.12);
}

/* privacy note */
.xa-cta-privacy{
  color: var(--muted-on-dark);
  font-size:13px;
  margin-top:12px;
}

/* Responsive */
@media (max-width: 980px){
  .xa-cta-inner{
    grid-template-columns: 1fr;
  }
  .xa-cta-card{
    margin-top: 18px;
  }
  .xa-cta-heading{ font-size: 28px; }
}

@media (max-width: 520px){
  .xa-cta-heading{ font-size: 22px; }
  .xa-cta-contact-item{ padding:10px; }
  .xa-cta-icon{ width:40px; height:40px; font-size:16px; }
  .xa-cta-value{ font-size:15px; }
  .xa-cta-button{ width:100%; justify-content:center; }
}


/* Floating button wrapper */
.xa-floating-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* Base button style */
.xa-float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: #1f6fd6; /* XORA tech blue */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: 0.25s ease;
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
}

/* Hover effect - futuristic glow */
.xa-float-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 140, 255, 0.4);
}

/* Call button stays blue */
.xa-call-btn {
  background: linear-gradient(135deg, #1f6fd6, #0c3775);
}

/* WhatsApp button - still tech-styled */
.xa-whatsapp-btn {
  background: linear-gradient(135deg, #25d366, #128c7e);
}


 /* Page container */
    .xora-careers-root{
      padding:72px 20px;
       background: linear-gradient(180deg, var(--bg-dark) 0%, #050816 100%);
    }
    .xora-careers-wrap{
      max-width:var(--container-max);
      margin:0 auto;
      display:grid;
      grid-template-columns: 1fr 460px;
      gap:36px;
      align-items:start;
      width:100%;
      padding:0 12px;
    }

    /* Left copy */
    .xora-careers-left h1{
      margin:0 0 12px;
      font-size:clamp(26px,3.2vw,40px);
      line-height:1.02;
      letter-spacing:-0.02em;
      color:var(--text-on-dark);
      font-weight:800;
    }
    .xora-careers-left p.lead{
      margin:0 0 18px;
      color:var(--muted-on-dark);
      font-size:16px;
      max-width:70ch;
    }
    .xora-careers-features{
      margin-top:18px;
      display:grid;
      gap:12px;
    }
    .xora-career-pill{
      display:flex;
      gap:12px;
      align-items:flex-start;
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.03);
    }
    .xora-career-pill .icon{
      min-width:38px;
      height:38px;
      border-radius:8px;
      display:grid;
      place-items:center;
      font-size:16px;
      background:rgba(28,164,255,0.08);
      color:var(--accent-color);
      flex-shrink:0;
    }
    .xora-career-pill .pill-body h4{
      margin:0 0 4px;
      font-size:15px;
      color:var(--text-on-dark);
      font-weight:700;
    }
    .xora-career-pill .pill-body p{
      margin:0;
      color:var(--muted-on-dark);
      font-size:14px;
    }

    /* RIGHT: form card */
    .xora-careers-card{
      background:var(--card-bg);
      padding:20px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.03);
      box-shadow: 0 14px 40px rgba(2,8,20,0.6);
      width:100%;
      max-width:100%;
    }

    .xora-form-title{
      font-size:18px;
      margin:0 0 8px;
      color:var(--text-on-dark);
      font-weight:700;
    }
    .xora-form-sub{
      margin:0 0 14px;
      color:var(--muted-on-dark);
      font-size:14px;
    }

    form.xora-careers-form{ display:grid; gap:12px; }
    .xora-field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .xora-field label{
      font-size:13px;
      color:var(--muted-on-dark);
    }
    .xora-input, .xora-textarea, .xora-select {
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.003));
      border:1px solid rgba(255,255,255,0.04);
      color:var(--text-on-dark);
      padding:12px 14px;
      border-radius:10px;
      font-size:14px;
      outline:none;
      width:100%;
      max-width:100%;
    }
    .xora-input:focus, .xora-textarea:focus, .xora-select:focus {
      box-shadow: 0 6px 24px rgba(28,164,255,0.06);
      border-color: var(--accent-color);
    }
    .xora-textarea{ min-height:110px; resize:vertical; }

    .xora-file-note{ font-size:13px; color:var(--muted-on-dark); margin-top:6px; }

    .xora-submit-row{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      margin-top:6px;
      flex-wrap:wrap;
    }
    .xora-btn{
      background:linear-gradient(180deg,var(--primary-color),var(--primary-600));
      color:white;
      padding:10px 16px;
      border-radius:12px;
      border:none;
      cursor:pointer;
      font-weight:700;
      font-size:15px;
    }
    .xora-btn:active{ transform:translateY(1px); }
    .xora-legal{ font-size:12px; color:var(--muted-on-dark); min-width:220px; }

    /* new helper: two-column area used in form */
    .xora-two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      width:100%;
    }

    /* success / error message */
    .xora-alert{
      padding:10px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.03);
      background: linear-gradient(180deg, rgba(28,164,255,0.07), rgba(255,255,255,0.01));
      color:var(--text-on-dark);
      font-weight:600;
      font-size:14px;
      margin-bottom:12px;
    }

    /* small screens: stack */
    @media (max-width:980px){
      .xora-careers-wrap{ grid-template-columns: 1fr; gap:20px; }
      .xora-careers-left{ order:1 }
      .xora-careers-card{ order:2; }
      .xora-careers-root{ padding:36px 12px; }
      .xora-legal{ min-width:auto; width:100%; order:2; }
      .xora-submit-row{ justify-content:space-between; }
    }

    /* force two-column to 1 column on small devices */
    @media (max-width:680px){
      .xora-two-col{ grid-template-columns:1fr; }
      .xora-submit-row{ flex-direction:column-reverse; align-items:flex-start; gap:10px; }
      .xora-submit-row .xora-btn{ width:100%; }
    }

    /* tiny screens */
    @media (max-width:520px){
      .xora-careers-root{ padding:20px 12px; }
      .xora-career-pill{ padding:10px; }
      .xora-form-title{ font-size:16px; }
    }
    
    
    /* Loading (sending) — subtle tinted background, accent colored text */
.loading-message {
 color:#02071B;
}

/* Confirmation (success) — solid primary with readable contrast */
.confirmation-message {
  color:#02071B;
}