:root {
  --nav-bg: #0e0e0e;
  --nav-text: #A7A7A7;
  --nav-text-muted: #bdbdbd;
  --nav-accent: #e53935;
  --nav-accent-2: #ff5a4d;
  /* mega-menu hover/active highlight */
  --mega-blue: #1b55b8;
}

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  background: #fff;
  color: var(--nav-text);
}

.container {
  max-width: 1400px;
}

/* extra Bootstrap-style spacing steps (scale continues past 5) */
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }

site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: top 0.3s ease;
}

site-header.scrolled {
  top: 10px;
}

.container-fluid {
    --bs-gutter-x: 0rem;}
.site-navbar {
  position: relative;
  background: var(--nav-bg);
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.06); */
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease, margin 0.3s ease, border-radius 0.3s ease,
    box-shadow 0.3s ease;
}

.site-navbar.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  margin: 0 1rem;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
}

.site-navbar.scrolled .nav-link {
  color: #444a55;
}

.site-navbar.scrolled .nav-link:hover,
.site-navbar.scrolled .nav-link:focus,
.site-navbar.scrolled .nav-link.show,
.site-navbar.scrolled .nav-link.active {
  color: #0e0e0e;
}

.site-navbar.scrolled .nav-link.nav-pill {
  color: #ffffff;
}

.site-navbar.scrolled .btn-cta {
  background: #000;
  color: #ffffff;
}


.site-navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cg stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'%3e%3cline x1='5' y1='9' x2='25' y2='9'/%3e%3cline x1='5' y1='15' x2='25' y2='15'/%3e%3cline x1='13' y1='21' x2='25' y2='21'/%3e%3c/g%3e%3c/svg%3e");
}

.brand-logo {
  height: 45px;
  width: auto;
  display: block;
}

.site-navbar .nav-link {
  color: var(--nav-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.15rem .6rem !important;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.show {
  color: #ffffff;
}

.site-navbar .nav-link:focus,
.site-navbar .nav-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.site-navbar .nav-link.active {
  color: #ffffff;
}

.site-navbar .nav-link.nav-pill {
  /* background: linear-gradient(120deg, var(--nav-accent), var(--nav-accent-2)); */
  background: var(--mega-blue);
  color: #ffffff;
  font-weight: 600;
  /* box-shadow: 0 6px 18px rgba(229, 57, 53, 0.55); */
}

.site-navbar .nav-link.nav-pill:hover {
  filter: brightness(1.08);
}

.site-navbar .nav-link.nav-pill .bi {
  font-size: 0.85rem;
  vertical-align: middle;
}

.site-navbar .dropdown-toggle::after {
  display: none;
}

.mega-caret {
  /* inline-block is required — transform is ignored on inline elements */
  display: inline-block;
  font-size: 0.7rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.site-navbar .dropdown-toggle.show .mega-caret,
.site-navbar .nav-item.dropdown:hover .mega-caret {
  transform: rotate(180deg);
}

.site-navbar .dropdown-menu.mega-menu {
  width: auto;
  left: 20px;
  right: 20px;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0px 0px 15px 15px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Three parts: promo panel | category list | image that swaps to the sub-menu. */
.mega-inner {
  display: flex;
  min-height: 500px;
}

.mega-promo {
  flex: 0 0 22%;
  background: var(--mega-blue);
  color: #ffffff;
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mega-promo-title {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  margin-bottom: 1.1rem;
}

.mega-promo-title i {
  font-size: 1.5rem;
  transition: transform 0.2s ease;
}

.mega-promo-title:hover {
  color: #ffffff;
}

.mega-promo-title:hover i {
  transform: translateX(6px);
}

.mega-promo-text {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.mega-sidebar {
  flex: 0 0 26%;
  background: #ededed;
  padding: 1.1rem 0;
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
}

.mega-cat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.8rem 1.7rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.mega-cat i {
  font-size: .8rem;
  flex: 0 0 auto;
  color: #4a4a4a;
  transition: color 0.18s ease;
}

.mega-cat:hover,
.mega-cat.active {
  background: #f7f7f7;
  color: var(--mega-blue);
}

.mega-cat:hover i,
.mega-cat.active i {
  color: var(--mega-blue);
}

/* points at the panel this category opens */
.mega-cat-arrow {
  margin-left: auto;
  font-size: 0.66rem;
  color: #9a9a9a;
  transition: color 0.18s ease, transform 0.18s ease;
}

.mega-cat:hover .mega-cat-arrow,
.mega-cat.active .mega-cat-arrow {
  color: var(--mega-blue);
  transform: translateX(3px);
}

.mega-content {
  flex: 1;
  background: #f7f7f7;
  padding: 1.6rem 2.2rem;
  max-height: 560px;
  overflow-y: auto;
  display: none;
}

/* Promo image fills the panel area until a category is hovered. */
.mega-visual {
  flex: 1;
  overflow: hidden;
}

.mega-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mega-inner.is-open .mega-visual {
  display: none;
}

.mega-inner.is-open .mega-content {
  display: block;
}

.mega-panel {
  display: none;
}

.mega-panel.active {
  display: block;
  animation: megaFade 0.2s ease;
}

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

.mega-link {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.mega-link:hover {
  color: var(--mega-blue);
  transform: translateX(5px);
}

.mega-link.active {
  color: var(--mega-blue);
  font-weight: 600;
}

/* The Services panels hold up to ten links, so they flow into as many columns
   as the panel width allows instead of one very tall list. */
.mega-panel.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 0 1.4rem;
  align-content: start;
}

/* ===== Flat icon panel (Industries) =====
   Same full-width sheet as the mega menu, but the blue intro column sits next to a
   plain icon grid instead of a category sidebar — no hover switching needed. */
/* Height follows the item count — About has 5 entries, Industries 16 — with a floor
   that keeps the blue intro column from getting cramped. */
.panel-inner {
  display: flex;
  min-height: 280px;
}

.panel-grid {
  flex: 1;
  background-color: #ededed;
  /* Column rules are drawn on the container rather than as per-item borders, so
     they stay full-length and even however many items land in the last row.
     content-box origin insets them by the grid's own padding. */
  background-repeat: no-repeat;
  background-origin: content-box;
  padding: 1.7rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(var(--dd-cols, 3), minmax(0, 1fr));
  align-content: start;
  max-height: 560px;
  overflow-y: auto;
}

/* One rule line per column boundary — hence a variant per column count. */
.panel-grid--2col {
  background-image: linear-gradient(#dcdcdc, #dcdcdc);
  background-size: 1px 100%;
  background-position: 50% 0;
}

.panel-grid--3col {
  background-image: linear-gradient(#dcdcdc, #dcdcdc), linear-gradient(#dcdcdc, #dcdcdc);
  background-size: 1px 100%, 1px 100%;
  background-position: 33.333% 0, 66.667% 0;
}

.panel-grid--4col {
  background-image: linear-gradient(#dcdcdc, #dcdcdc), linear-gradient(#dcdcdc, #dcdcdc),
    linear-gradient(#dcdcdc, #dcdcdc);
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position: 25% 0, 50% 0, 75% 0;
}

/* Headed column (Company): a title above its own set of links. */
.panel-group-title {
  padding: 0 1.6rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7c8698;
}

.panel-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.18s ease;
}

/* Fixed slot per row so labels line up. Logos get a wider, shorter box than the
   glyph icons — several are wordmarks (Next.js, Java) that a square would shrink. */
.panel-link i {
  flex: 0 0 22px;
  text-align: center;
  font-size: 1.3rem;
  color: #3d3d3d;
  transition: color 0.18s ease;
}

/* Brand logos are flattened to one slate tone so a row reads like a single icon
   set rather than a strip of coloured stickers. brightness(0) collapses every
   colour to black while keeping the alpha channel, then the invert/sepia/hue
   chain tints that black to the slate grey. */
.panel-link img {
  flex: 0 0 30px;
  width: 30px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(38%) sepia(9%) saturate(880%)
    hue-rotate(184deg) brightness(94%) contrast(88%);
  transition: filter 0.18s ease;
}

/* A logo that is a filled tile with the mark knocked out in white (TypeScript,
   BNB) has no interior alpha, so tinting would leave a featureless blob — those
   desaturate instead, which keeps the mark readable. */
.panel-link img.is-badge {
  filter: grayscale(1) brightness(0.62) contrast(1.05) sepia(0.18) hue-rotate(176deg)
    saturate(1.6);
}

.panel-link:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(87%) saturate(2100%)
    hue-rotate(207deg) brightness(94%) contrast(96%);
}

.panel-link:hover img.is-badge {
  filter: grayscale(1) brightness(0.75) contrast(1.05) sepia(0.5) hue-rotate(184deg)
    saturate(4);
}

.panel-link:hover,
.panel-link:hover i,
.panel-link.active,
.panel-link.active i {
  color: var(--mega-blue);
}

.mobile-menu {
  background: var(--nav-bg);
  color: var(--nav-text);
  width: 320px;
  max-width: 88vw;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.mobile-menu .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu .offcanvas-title {
  font-weight: 600;
  font-size: 1rem;
}

.mobile-menu .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.mobile-link {
  display: block;
  padding: 0.55rem 0.2rem;
  color: #cfd6e4;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.18s ease;
}

.mobile-link:hover,
.mobile-link.active {
  color: #ffffff;
}

.mobile-pill {
  display: inline-block;
  margin: 0.55rem 0;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--nav-accent), var(--nav-accent-2));
  color: #ffffff;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4);
}

/* column heading inside a panel menu's mobile accordion — the same uppercase
   label the desktop mega menu uses above each column */
.mobile-section-label {
  margin: 0.85rem 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a93a6;
  font-weight: 600;
}

/* the first heading sits right under the parent button, so it does not need
   the separating margin the later ones do */
.mobile-acc-panel > .mobile-section-label:first-child { margin-top: 0.15rem; }

.mobile-acc-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  background: transparent;
  border: none;
  color: #cfd6e4;
  font-weight: 500;
  font-size: 0.86rem;
  padding: 0.55rem 0.2rem;
  cursor: pointer;
}

.mobile-acc-btn .bi {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
  color: #aab4c8;
}

.mobile-acc-btn.open .bi {
  transform: rotate(180deg);
  color: var(--nav-accent-2);
}

.mobile-acc-panel {
  display: none;
  padding: 0.2rem 0 0.6rem 0.6rem;
}

.mobile-acc-panel.open {
  display: block;
}

.mobile-sublink {
  display: block;
  padding: 0.4rem 0.2rem;
  color: #aab4c8;
  font-size: 0.76rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.mobile-sublink:hover,
.mobile-sublink.active {
  color: var(--nav-accent-2);
}

/* Second level of the mobile menu — the Services categories nested inside the
   Services accordion. */
.mobile-acc-item--sub {
  border-bottom: none;
}

.mobile-acc-btn--sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: #96a3ba;
}

.mobile-acc-item--sub > .mobile-acc-panel {
  padding: 0.1rem 0 0.4rem 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-left: 0.2rem;
}

.btn-cta {
  background: #ffffff;
  color: #000;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus {
  color: var(--nav-accent);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  background: #ffffff;
}

.btn-cta .bi {
  font-size: 1.05rem;
}

.navbar-toggler {
  border: none;
  padding: 0.25rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.hero {
  background: #0a0a0a;

}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  min-height: 520px;
  padding: 3rem 3.5rem 2rem;
  background:
    linear-gradient(to bottom, transparent 75%, #000 100%),
    radial-gradient(78% 66% at 46% 100%, rgba(195, 110, 255, 0.98), transparent 66%),
    radial-gradient(55% 44% at 27% 100%, rgba(246, 82, 170, 0.75), transparent 64%),
    radial-gradient(52% 42% at 66% 98%, rgba(228, 85, 248, 0.7), transparent 64%),
    radial-gradient(95% 78% at 50% 122%, rgba(115, 85, 245, 0.72), transparent 74%),
    radial-gradient(70% 58% at 80% 52%, rgba(120, 50, 210, 0.6), transparent 68%),
    linear-gradient(175deg, #000 0%, #000 35%, #000 100%);
  border: none;
}

.hero-tag {
  position: absolute;
  top: 1.8rem;
  right: 2.2rem;
  z-index: 2;
  min-height: 3em;
}

.hero-tag-item {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.hero-tag-item.active {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero-title {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  margin: 0 0 2.4rem;
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.hero-laptop {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 1100px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  text-align: center;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stat-num {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}

.stat-label {
  color: #9aa0aa;
  font-size: 0.9rem;
  line-height: 1.35;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cg stroke='%23A7A7A7' stroke-width='2.2' stroke-linecap='round'%3e%3cline x1='5' y1='9' x2='25' y2='9'/%3e%3cline x1='5' y1='15' x2='25' y2='15'/%3e%3cline x1='13' y1='21' x2='25' y2='21'/%3e%3c/g%3e%3c/svg%3e");
}
.nav-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}


.trusted {
   background: linear-gradient(to bottom, #fff 0%, #fff 55%, #fff 100%);
}

.trusted-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: 18px;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background: transparent;
  overflow: hidden;
}

.trusted-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.04);
  border: 1px solid rgba(15, 15, 15, 0.12);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trusted-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nav-accent);
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18);
}

.trusted-marquee {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* fade the logos out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.trusted-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  padding-right: 4rem;
  animation: trusted-scroll 45s linear infinite;
}

.trusted-marquee:hover .trusted-track {
  animation-play-state: paused;
}

.trusted-logo {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  /* dark, uniform logo strip */
  /* filter: brightness(0) invert(0); */
  transition: opacity 0.2s ease, filter 0.2s ease;
}


@keyframes trusted-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ===== About / Transforming Ideas section ===== */
.about {
  --about-blue: #1b3a8f;
  --about-blue-2: #2456c8;

}

/* left: image with overlapping CTA card */
.about-media {
  position: relative;
}

.about-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 28px 65px rgba(20, 30, 60, 0.26);
}

.about-cta {
  position: absolute;
  top: 10px;outline: 13px solid #ededed;
  left: 10px;
  width: 66%;
  border-radius: 10px;
  background: #fffffff7;
  box-shadow: 0 32px 70px rgba(20, 30, 60, 0.28);
  z-index: 2;
}

@media (max-width: 991.98px) {
  .about-cta {
    width: 78%;
    left: 0;
  }
}

/* on desktop, image fills the column so its bottom aligns with the right side */
@media (min-width: 992px) {
  .about-media,
  .about-img {
    height: 100%;
  }
}

.about-cta-title {
  color: var(--about-blue);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
}

.about-cta-text {
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
}

.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--about-blue);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.about-cta-link .bi {
  font-size: 1.2rem;
  color: var(--about-blue-2);
}

.about-cta-link:hover {
  gap: 0.8rem;
  color: var(--about-blue-2);
}

/* right column */
.about-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.about-lead {
  color: #54585f;
  font-size: 1.02rem;
  line-height: 1.7;
}

.about-subtitle {
  color: #15171c;
  font-weight: 700;
  font-size: 1.35rem;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #2b2f36;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.30rem 0;
}

.about-list .bi {
  color: #8a90a0;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* experience badge */
.about-badge {
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(27, 58, 143, 0.18);
  box-shadow: 0 28px 65px rgba(20, 30, 60, 0.22);
}

.about-badge-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.about-badge-num {
  font-weight: 800;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--about-blue);
}

.about-badge-title {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--about-blue);
}

.about-badge-text {
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ===== Stats cards ===== */


.stat-card {
  border-radius: 16px;
  background: linear-gradient(150deg, #0a1f4d 0%, #103a86 55%, #1a55b0 100%);
  box-shadow: 0 22px 50px rgba(12, 30, 70, 0.22);
  text-align: center;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(12, 30, 70, 0.3);
}

.stat-card-num {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.stat-card-label {
  color: #b9c6e2;
  font-size: 0.98rem;
  font-weight: 500;
}

/* ===== Innovation Backed By Understanding ===== */
.innov {
  --innov-blue: #1b3a8f;
  --innov-blue-2: #2456c8;
  background: #ffffff;
}

/* left feature rows */
.innov-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(27, 58, 143, 0.06), rgba(27, 58, 143, 0) 70%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.innov-feature:hover {
  background: linear-gradient(110deg, rgba(27, 58, 143, 0.1), rgba(27, 58, 143, 0.02) 75%);
  transform: translateX(3px);
}

.innov-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #ffffff;
  color: var(--innov-blue);
  font-size: 1.5rem;
  box-shadow: 0 10px 24px rgba(12, 30, 70, 0.12);
}

.innov-feature-title {
  color: var(--innov-blue);
  font-weight: 600;
  font-size: 1.3rem;
}

.innov-feature-text {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* right column */
.innov-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.innov-lead {
  color: #54585f;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* image + overlapping card */
.innov-media {
  position: relative;
}

/* faint offset card peeking behind the image (layered shape) */
.innov-media::before {
  content: "";
  position: absolute;
  top: 22px;
  right: -22px;
  bottom: -22px;
  left: 22px;
  border-radius: 18px;
  background: #eef1f7;
  z-index: 0;
}

.innov-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;

  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 28px 65px rgba(12, 30, 70, 0.28);
}

.innov-card {
  position: absolute;
  z-index: 2;
  right: -8px;
  bottom: -28px;
  width: 58%;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 28px 60px rgba(12, 30, 70, 0.2);
}

.innov-card-title {
  color: #15171c;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
}

.innov-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--innov-blue);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.innov-card-link .bi {
  font-size: 1.2rem;
  color: var(--innov-blue-2);
}

.innov-card-link:hover {
  gap: 0.8rem;
  color: var(--innov-blue-2);
}

@media (max-width: 575.98px) {
  .innov-card {
    position: static;
    width: 100%;
    margin-top: 1rem;
  }
}

/* ===== Drive Growth With Intelligent AI ===== */
.ai {
  position: relative;
  overflow: hidden;
  background-color: #050f26;
  background-image:
    radial-gradient(80% 70% at 85% 20%, rgba(30, 80, 180, 0.35), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(40, 109, 244, 0.18), transparent 60%),
    linear-gradient(rgba(120, 170, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 255, 0.05) 1px, transparent 1px),
    linear-gradient(140deg, #0a1f4d 0%, #0a1b3e 45%, #050f26 100%);
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
}

.ai-hand {
margin-top: 50px;
  max-width: 650px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.ai-title {
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.ai-lead {
  color: #aab6d4;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 44ch;
}

.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0a1f4d;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.ai-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1452c8, #2a6df4);
  color: #ffffff;
  font-size: 1.1rem;
}

/* service cards */
.ai-card {
  height: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ai-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(120, 170, 255, 0.5);
  transform: translateY(-4px);
}

.ai-card-ico {
  display: inline-flex;
  color: #6ea2ff;
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}

.ai-card-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.ai-card-text {
  color: #9fabcb;
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 991.98px) {
  .ai-hand {
    display: none;
  }
}



/* keep content above the decorative background */
.about > .container,
.stats > .container,
.innov > .container,
.services > .container {
  position: relative;
  z-index: 1;
}

/* ===== Our Digital Transformation Solutions ===== */
.services-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.service-card {
  height: 100%;
  text-align: center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(27, 58, 143, 0.35);
  box-shadow: 0 14px 34px rgba(20, 30, 70, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  border-color: #1b3a8f;
  box-shadow: 0 24px 50px rgba(20, 30, 70, 0.16);
}

.service-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.6rem;
  box-shadow: 0 10px 22px rgba(27, 58, 143, 0.3);
}

.service-card-title {
  color: #15171c;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 0.7rem;
}

.service-card-text {
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #1b3a8f;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.service-link .bi {
  font-size: 0.95rem;
}

.service-link:hover {
  gap: 0.7rem;
  color: #2456c8;
}

/* bottom CTA bar */
.services-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
}

.services-cta-text {
  color: #2b2f36;
  font-size: 1.05rem;
  font-weight: 500;
}

.services-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.5rem 0.5rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(27, 58, 143, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.services-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(27, 58, 143, 0.4);
}

.services-cta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1rem;
}

/* ===== Business CTA banner ===== */
.business-cta-box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background-color: #05060a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 3rem;
  min-height: 280px;
}

.business-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 4, 8, 0.92) 0%, rgba(3, 4, 8, 0.7) 38%, rgba(3, 4, 8, 0.15) 70%, rgba(3, 4, 8, 0) 100%);
}

.business-cta-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

/* centered variant (CRM page CTA) */
.business-cta-box--center { text-align: center; }
.business-cta-box--center .business-cta-content {
  max-width: 760px;
  margin: 0 auto;
}

/* blue glow from the top-left corner + dark base for readable centred text */
.business-cta-box--center::before {
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(27, 85, 184, 0.65) 0%, rgba(10, 42, 110, 0.4) 24%, rgba(3, 4, 8, 0) 55%),
    linear-gradient(90deg, rgba(3, 4, 8, 0.82) 0%, rgba(3, 4, 8, 0.72) 55%, rgba(3, 4, 8, 0.6) 100%);
}

.business-cta-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 1.1rem;
}

.business-cta-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.business-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.55rem 0.55rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.business-cta-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.business-cta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  color: #1b55b8;
  font-size: 1rem;
}

/* ===== Big staggered stats ===== */
/* Each column is a tall track and the number+label inside it is sticky. The
   three stats start diagonally and, as you scroll, pin to the same spot below
   the header one after another (200+ then 180+ then 100+); once the last has
   pinned, all three release and scroll away together. */
.bigstats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* pin each column's stat independently within its track */
  position: relative; /* anchors the divider lines */
}

/* full-height divider lines, kept equal regardless of the columns' heights */
.bigstats-row::before,
.bigstats-row::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: #e3e6ea;
  pointer-events: none;
}
.bigstats-row::before { left: 33.333%; }
.bigstats-row::after { left: 66.667%; }

/* every column is the same tall track, giving each stat room to pin at the top
   and then release together with the others */
.bigstats-item {
  padding: 0 2.5rem;
  min-height: 80vh;
}

.bigstats-sticky {
  position: sticky;
  top: 100px; /* all three pin at the SAME spot, just below the sticky header */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* start diagonally (like the image); because they begin at different heights
   they reach the top one after another — 200+ pins first, then 180+, then 100+
   — and once the last has pinned all three scroll away together */
.bigstats-item:nth-child(1) .bigstats-sticky { margin-top: 0; }
.bigstats-item:nth-child(2) .bigstats-sticky { margin-top: 20vh; }
.bigstats-item:nth-child(3) .bigstats-sticky { margin-top: 40vh; }

.bigstats-num {
  color: #0c0d10;
  font-weight: 800;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.bigstats-label {
  color: #2b2f36;
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 0.6rem;
}

/* ===== Our Advanced Blockchain Development Solutions (expanding panels) ===== */
.tech {
  position: relative;
  overflow: hidden;
  background-image:
    /* soft colour glows */
    radial-gradient(38% 45% at 90% 12%, rgba(27, 58, 143, 0.10), transparent 60%),
    radial-gradient(34% 40% at 6% 90%, rgba(27, 58, 143, 0.08), transparent 60%),
    /* box / grid pattern */
    linear-gradient(rgba(20, 40, 90, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 40, 90, 0.06) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

.tech-ball {
  position: absolute;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  max-width: 32%;
  height: auto;
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
}

.tech-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 850px;
}

.tech-row {
  display: flex;
  gap: 1rem;
}

.tech-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #0a0f1a;
  box-shadow: 0 16px 38px rgba(20, 30, 70, 0.16);
  transition: flex-grow 0.5s ease;
}

/* dark overlay for readability */
.tech-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 10, 25, 0.85) 0%, rgba(5, 10, 25, 0.2) 45%, rgba(5, 10, 25, 0) 70%);
  transition: opacity 0.4s ease;
}

/* default expanded card + any hovered card */
.tech-card.active {
  flex-grow: 2;
}

.tech-row:hover .tech-card {
  flex-grow: 1;
}

.tech-row:hover .tech-card:hover {
  flex-grow: 2;
}

.tech-card-body {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: transparent;
  transition: background 0.4s ease;
}

.tech-card-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.2;
}

.tech-card-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

/* show blue card + description on expanded/hovered */
.tech-card.active .tech-card-body,
.tech-card:hover .tech-card-body {
  background: linear-gradient(135deg, #1452c8, #2a6df4);
  box-shadow: 0 14px 30px rgba(20, 50, 130, 0.4);
}

.tech-card.active .tech-card-text,
.tech-card:hover .tech-card-text {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.6rem;
}

/* hide the dark gradient on the expanded one so the image reads brighter */
.tech-card.active::after,
.tech-card:hover::after {
  opacity: 0.5;
}

/* when hovering another card, the default-active card gives up its effect */
.tech-row:hover .tech-card.active:not(:hover) .tech-card-body {
  background: transparent;
  box-shadow: none;
}

.tech-row:hover .tech-card.active:not(:hover) .tech-card-text {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.tech-row:hover .tech-card.active:not(:hover)::after {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .tech-row {
    flex-direction: column;
  }
  .tech-card {
    height: 240px;
    flex: none;
  }
  /* on mobile show all descriptions (no hover) */
  .tech-card .tech-card-body {
    background: linear-gradient(135deg, #1452c8, #2a6df4);
  }
  .tech-card .tech-card-text {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.6rem;
  }
  .tech-ball {
    display: none;
  }
}

/* ===== Our Work, Your Future (sticky stacked case studies) ===== */
.works {
  position: relative;

}

.works-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.works-intro {
  color: #54585f;
  font-size: 1rem;
  line-height: 1.6;
}

.works-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #1b3a8f;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}

.works-link .bi {
  font-size: 1.2rem;
  color: #2456c8;
}

.works-link:hover {
  gap: 0.8rem;
  color: #2456c8;
}

.works-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* each card sticks and the next scrolls on top — stacked deck effect */
.work-card {
  position: sticky;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(27, 58, 143, 0.35);
  box-shadow: 0 20px 50px rgba(20, 30, 70, 0.1);
}

.work-card:nth-child(1) { top: 90px; }
.work-card:nth-child(2) { top: 108px; }
.work-card:nth-child(3) { top: 126px; }
.work-card:nth-child(4) { top: 144px; }
.work-card:nth-child(5) { top: 162px; }

.work-name {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.work-desc {
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.65;
}

.work-desc strong {
  color: #15171c;
}

.work-sub {
  color: #15171c;
  font-weight: 700;
  font-size: 1.05rem;
}

.work-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
  color: #3a3f47;
  font-size: 0.95rem;
}

.work-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1b3a8f;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.work-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(27, 58, 143, 0.4);
  color: #1b3a8f;
  font-size: 0.82rem;
  font-weight: 600;
  background: #ffffff;
}

.work-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

@media (max-width: 991.98px) {
  /* drop the sticky stacking on small screens — simple stacked cards */
  .work-card {
    position: static;
  }
}

/* ===== Tech Stack tabs ===== */
.techstack {
  position: relative;
}

.techstack-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Nine categories read better as an underlined rail than as nine filled pills —
   the labels carry the weight and a single bar marks the open one. */
.techstack-nav {
  flex-wrap: nowrap;
  justify-content: center !important;
  gap: 0 2.1rem;
  border-bottom: 1px solid #e3e8f2;
}

.techstack-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: #1b1c1e;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  padding: 0.65rem 0.15rem 0.85rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* the moving indicator; scaled rather than shown so it wipes out from the middle */
.techstack-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #0a2a6e, #1b55b8);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}

.techstack-tab:hover {
  color: #1b3a8f;
}

.techstack-tab:hover::after {
  transform: scaleX(0.45);
  opacity: 0.45;
}

.techstack-tab.active {
  color: #0d1b3e;
}

.techstack-tab.active::after {
  transform: scaleX(1);
  opacity: 1;
}

.techstack-panel {
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%);
  border: 1px solid #e7ebf3;
}

/* Sized off the widest name rather than a fixed column count, so the grid keeps
   its shape whether a category holds four entries or thirteen. */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 0.9rem;
}

/* logo on the left, name beside it */
.ts-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 30, 70, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ts-card:hover {
  transform: translateY(-5px);
  border-color: rgba(27, 58, 143, 0.35);
  box-shadow: 0 18px 38px rgba(20, 30, 70, 0.16);
}

/* A tinted plate gives every logo the same footprint. It widens for the marks
   that are wordmarks rather than square glyphs, so those stay readable instead
   of being shrunk to fit a circle. */
.ts-logo {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f6fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-logo img {
  width: auto;
  height: auto;
  max-width: 62px;
  max-height: 26px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.ts-card:hover .ts-logo img {
  transform: scale(1.1);
}

.ts-label {
  color: #2b2f36;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 1199.98px) {
  .techstack-nav {
    gap: 0 1.5rem;
  }
}

/* below the desktop breakpoint the rail scrolls instead of shrinking further */
@media (max-width: 991.98px) {
  .techstack-nav {
    justify-content: flex-start !important;
    overflow-x: auto;
    gap: 0 1.4rem;
  }
  .techstack-tab {
    font-size: 0.88rem;
  }
}

@media (max-width: 575.98px) {
  .ts-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.7rem;
  }
  .ts-card {
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
  }
  .ts-logo {
    min-width: 38px;
    height: 38px;
    padding: 0 7px;
  }
  .ts-logo img {
    max-width: 52px;
    max-height: 22px;
  }
  .ts-label {
    font-size: 0.8rem;
  }
}

/* ===== Testimonials ===== */
.testi {
  position: relative;
  background: #fbfbfd;
}

.testi-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.testi-sub {
  color: #54585f;
  font-size: 1.05rem;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

/* marquee */
.testi-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.testi-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: max-content;
  padding: 1rem 0.75rem;
  animation: testi-scroll 48s linear infinite;
}

.testi-marquee:hover .testi-track {
  animation-play-state: paused;
}

@keyframes testi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

.testi-card {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(27, 58, 143, 0.18);
  box-shadow: 0 14px 34px rgba(20, 30, 70, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.testi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(20, 30, 70, 0.14);
}

.testi-mark {
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(27, 58, 143, 0.18);
  margin-bottom: 0.2rem;
}

.testi-stars {
  display: flex;
  gap: 0.2rem;
  color: #f5a623;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.testi-quote {
  color: #3a3f47;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  flex: 1 1 auto;
}

.testi-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.testi-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.testi-name {
  color: #1b3a8f;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: right;
}

/* blue (filled) variant */
.testi-card--blue {
  background: linear-gradient(150deg, #0a2a6e, #1452c8);
  border-color: transparent;
  box-shadow: 0 18px 42px rgba(20, 50, 130, 0.28);
}

.testi-card--blue .testi-quote {
  color: rgba(255, 255, 255, 0.95);
}

.testi-card--blue .testi-name {
  color: #ffffff;
}

.testi-card--blue .testi-mark {
  color: rgba(255, 255, 255, 0.35);
}

/* ===== Testimonials — grid cards (redesigned) ===== */
.tcard {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 20px;
  padding: 1.7rem;
  box-shadow: 0 10px 30px rgba(20, 30, 70, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(20, 30, 70, 0.13);
}

.tcard-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.tcard-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

.tcard-meta { display: flex; flex-direction: column; }

.tcard-name {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0;
}

.tcard-role {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  color: #1b55b8;
  font-size: 0.78rem;
  font-weight: 600;
}

.tcard-mark {
  margin-left: auto;
  align-self: flex-start;
  font-size: 2.2rem;
  line-height: 1;
  color: #e3e9f5;
}

.tcard-stars {
  display: flex;
  gap: 0.18rem;
  color: #f5a623;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.tcard-text {
  margin: 0;
  flex: 1 1 auto;
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* highlighted card */
.tcard--blue {
  background: linear-gradient(155deg, #0a2a6e, #1452c8);
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(20, 50, 130, 0.28);
}

.tcard--blue .tcard-name { color: #ffffff; }
.tcard--blue .tcard-role { color: rgba(255, 255, 255, 0.85); }
.tcard--blue .tcard-text { color: rgba(255, 255, 255, 0.92); }
.tcard--blue .tcard-mark { color: rgba(255, 255, 255, 0.25); }

/* ===== Connect / social ===== */


/* top row: logo --- line --- socials (independent of the text below) */
.connect-top {
  display: flex;
  align-items: center;

}

.connect-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #d9e0ec;
  box-shadow: 0 10px 28px rgba(20, 30, 70, 0.08);
}

.connect-logo img {
  width: 52px;
  height: auto;
}

.connect-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, #15171c40 0%, #afafaf 100%);
}

.connect-socials {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* slight overlap like the reference */
.connect-ico:not(:first-child) {
  margin-left: -13px;
}

.connect-ico {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #b8b9ba82;
  box-shadow: 0 8px 20px rgba(20, 30, 70, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.connect-ico img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.connect-ico:hover {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(20, 30, 70, 0.16);
}

/* bottom row: brand text under the logo, "Connect" text under the socials */
.connect-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1.4rem;
}

.connect-cta {
  /* width matches the 7-icon social cluster so "Connect" sits under the first icon */
  width: 358px;
  flex: 0 0 auto;
  text-align: left;
}

.connect-name {
  color: #15171c;
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
}

.connect-text {
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 40ch;
}

@media (max-width: 767.98px) {
  .connect-top {
    flex-direction: column;
    gap: 1.5rem;
  }
  .connect-line {
    display: none;
  }
  .connect-socials {
    flex-wrap: wrap;
    justify-content: center;
  }
  .connect-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .connect-cta {
    width: auto;
  }
  .connect-text {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Contact banner ===== */
.contact-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0;
  overflow: hidden;
}

.contact-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 8, 14, 0.92) 0%, rgba(6, 8, 14, 0.78) 45%, rgba(6, 8, 14, 0.6) 100%);
}

/* left copy */
.contact-banner-title {
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.3rem;
}

.contact-banner-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 1.8rem;
}

.contact-banner-next {
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 1.2rem;
}

.contact-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-steps li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-step-num {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #1b55b8;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

.contact-step-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
}

.contact-banner-mail {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  margin: 0;
}

.contact-banner-mail a {
  color: #6ea8ff;
  text-decoration: none;
  font-weight: 600;
}

.contact-banner-mail a:hover {
  text-decoration: underline;
}

/* right form card */
.contact-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: rgba(10, 14, 24, 0.45);
  backdrop-filter: blur(8px);
  padding: 2.4rem;
}

.contact-card-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

.cf-field {
  position: relative;
  margin-bottom: 1.8rem;
}

.cf-line {
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.cf-line:focus {
  outline: none;
  border-bottom-color: #1b55b8;
}

.cf-textarea {
  resize: vertical;
  min-height: 48px;
}

/* floating label */
.cf-label {
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}

.cf-line:focus + .cf-label,
.cf-line:not(:placeholder-shown) + .cf-label {
  transform: translateY(-1.4rem);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

/* phone row */
.cf-phone-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.cf-phone-input {
  flex: 1;
}

.cf-phone-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* country-code dropdown */
.cc {
  position: relative;
  flex: 0 0 auto;
}

.cc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.cc-flag {
  width: 24px;
  height: auto;
  border-radius: 2px;
}

.cc-caret {
  font-size: 0.75rem;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.cc.open .cc-caret {
  transform: rotate(180deg);
}

.cc-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 230px;
  max-height: 280px;
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.cc.open .cc-menu {
  display: flex;
}

.cc-search {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: none;
  border-bottom: 1px solid #ececec;
  font-size: 0.9rem;
  font-family: inherit;
  color: #15171c;
  outline: none;
}

.cc-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
}

.cc-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  color: #15171c;
  font-size: 0.95rem;
  cursor: pointer;
}

.cc-item img {
  width: 26px;
  height: auto;
  border-radius: 2px;
  flex: 0 0 auto;
}

.cc-item:hover,
.cc-item.active {
  background: #1b55b8;
  color: #ffffff;
}

.cc-item-name {
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-empty {
  padding: 0.8rem;
  text-align: center;
  color: #9aa1ad;
  font-size: 0.88rem;
}

/* checkboxes */
.cf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  cursor: pointer;
}

.cf-check input {
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  accent-color: #1b55b8;
  flex: 0 0 auto;
}

.cf-submit {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 999px;
  background: #1b55b8;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cf-submit:hover {
  background: #1546a0;
  transform: translateY(-1px);
}

/* live badge */
.contact-live {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 2;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  background: #ffffff;
  color: #15171c;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

@media (max-width: 575.98px) {
  .contact-banner { padding: 3rem 0; }
  .contact-card { padding: 1.6rem; }
  .contact-banner-text { font-size: 0.95rem; }
  .contact-live { display: none; }
}

/* trusted-by on white (contact page) */
.trusted-plain {
  background: #ffffff;
}



.offices-title {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.01em;
}

.offices-sub {
  color: #54585f;
  font-size: 1.05rem;
}

.office-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
 background: linear-gradient(150deg, #0a1f4d 0%, #103a86 55%, #1a55b0 100%);
  box-shadow: 0 22px 50px rgba(12, 30, 70, 0.22);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(10, 32, 90, 0.25);
}


.office-card-inner {
  position: relative;
  z-index: 1;
  padding: 1.8rem;
  color: #ffffff;
}

.office-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.office-flag {
  width: 30px;
  height: auto;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.office-country {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}

.office-address {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.office-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.2rem 0;
}

.office-line:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .office-card-inner { padding: 1.4rem; }
}

/* ===== FAQ ===== */
.faq-eyebrow {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(27, 58, 143, 0.08);
  color: #1b3a8f;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.faq-title {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.faq-sub {
  color: #54585f;
  font-size: 1.05rem;
  margin: 0;
}

.faq-accordion {
  max-width: 1000px;
  margin: 0 auto;
}

.faq-accordion .accordion-item {
  margin-bottom: 0.9rem;
  border: 1px solid #e6ecf6;
  border-radius: 14px !important;
  overflow: hidden;
  background: #ffffff;
}

.faq-accordion .accordion-button {
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: #15171c;
  background: #ffffff;
  box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #1b55b8;
  background: #f4f7fc;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
}

.faq-accordion .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
}

.faq-accordion .accordion-body {
  padding: 0 1.3rem 1.2rem;
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.7;
}

.faq-accordion .accordion-body a {
  color: #1b55b8;
  text-decoration: none;
  font-weight: 600;
}

.faq-accordion .accordion-body a:hover {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .faq-accordion .accordion-button { font-size: 0.95rem; padding: 0.9rem 1rem; }
  .faq-accordion .accordion-body { padding: 0 1rem 1rem; font-size: 0.9rem; }
}

/* ===== About mission banner ===== */
.mission-banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-color: #000002;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 2.5rem;
}

.mission-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 2.4rem;
  border-radius: 18px;
  background: rgba(12, 14, 20, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.mission-title {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.mission-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.mission-text:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .mission-banner { min-height: 0; padding: 1.4rem; }
  .mission-card { padding: 1.6rem; }
}

/* ===== About two feature cards ===== */
.duo-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.8rem 2.6rem;
  border-radius: 24px;
  color: #ffffff;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.duo-card:hover {
  transform: translateY(-6px);
}

/* soft corner glow + faint grid texture */
.duo-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}

.duo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  opacity: 0.6;
}

.duo-card--blue {
  background: linear-gradient(150deg, #1c63cc, #0a3a8c);
  box-shadow: 0 22px 50px rgba(13, 63, 149, 0.28);
}

.duo-card--blue:hover {
  box-shadow: 0 30px 60px rgba(13, 63, 149, 0.4);
}

.duo-card--dark {
  background: linear-gradient(150deg, #11203a, #060a14);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
}

.duo-card--dark:hover {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.duo-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.4rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.5rem;
}

.duo-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 1.1rem;
}

.duo-title em {
  font-style: italic;
  font-weight: 700;
}

.duo-text {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.duo-card .business-cta-btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

@media (max-width: 575.98px) {
  .duo-card { padding: 2rem 1.5rem; }
  .duo-ico { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ===== About alternating image/text sections ===== */
.aboutalt-media {
  position: relative;
  border-radius: 20px;
  padding: 14px;
}

/* offset accent block peeking behind the image */
.aboutalt-media::before {
  content: "";
  position: absolute;
  width: 62%;
  height: 70%;
  border-radius: 20px;
  z-index: 0;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
}

.aboutalt-media--left::before {
  top: -16px;
  left: -16px;
}

.aboutalt-media--right::before {
  bottom: -16px;
  right: -16px;
  background: linear-gradient(135deg, #b3261e, #ff5a4d);
}

.aboutalt-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(16, 32, 70, 0.18);
}

.aboutalt-eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.32rem 0.95rem;
  border-radius: 999px;
  background: rgba(27, 58, 143, 0.08);
  color: #1b3a8f;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aboutalt-eyebrow--red {
  background: rgba(229, 57, 53, 0.09);
  color: #c5302b;
}

.aboutalt-title {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.aboutalt-text {
  color: #54585f;
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.aboutalt-subtitle {
  color: #15171c;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 1.4rem 0 0.9rem;
}

.aboutalt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.aboutalt-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: #f4f7fc;
  border: 1px solid #e6ecf6;
  color: #2b2f36;
  font-size: 0.98rem;
  font-weight: 500;
}

.aboutalt-list li::before {
  content: "\2713";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .aboutalt-media { padding: 10px; }
  .aboutalt-media::before { width: 55%; height: 60%; }
}

/* ===== About page ===== */
.about-hero {
  background-color: #050608;
  background-image:
    radial-gradient(42% 55% at 12% 18%, rgba(229, 57, 53, 0.30), transparent 60%),
    radial-gradient(38% 48% at 90% 6%, rgba(255, 90, 77, 0.22), transparent 62%);
  background-repeat: no-repeat;
  padding-top: 3.5rem;
  text-align: center;
  overflow: hidden;
}

/* black text area; bottom padding stays black (gap before the image) */
.about-hero-top {
  padding-bottom: .5rem;
}

.about-hero-title {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.about-hero-sub {
  max-width: 820px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* upper part transparent so the section's red glow shows through (no seam); lower part white */
.about-hero-stage {
  background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
}

.about-hero-img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

/* who we are */
.who-eyebrow {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(27, 58, 143, 0.08);
  color: #1b3a8f;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.who-title {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.who-text {
  color: #54585f;
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.who-stat {
  height: 100%;
  padding: 1.6rem 1.4rem;
  border-radius: 16px;
  background: #f4f7fc;
  border: 1px solid #e6ecf6;
}

.who-stat-num {
  display: block;
  color: #1b55b8;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
}

.who-stat-label {
  display: block;
  margin-top: 0.4rem;
  color: #54585f;
  font-size: 0.95rem;
}

/* mission & vision */
.mv-card {
  height: 100%;
  padding: 2rem;
  border-radius: 18px;
  background: linear-gradient(160deg, #0a2a6e, #0c1424);
  color: #ffffff;
}

.mv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.mv-title {
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.mv-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* why choose */
.why-title {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.01em;
}

.why-sub {
  color: #54585f;
  font-size: 1.05rem;
}

.why-card {
  height: 100%;
  padding: 1.8rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e9ecf1;
  box-shadow: 0 12px 34px rgba(16, 32, 70, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16, 32, 70, 0.12);
}

.why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.why-card-title {
  color: #15171c;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.why-card-text {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 767.98px) {
  .about-hero-title { font-size: 1.8rem; }
  .about-hero-sub { font-size: 0.92rem; }
  .who-stat { padding: 1.2rem 1rem; }
  .who-stat-num { font-size: 1.9rem; }
  .mv-card { padding: 1.5rem; }
  .why-card { padding: 1.4rem; }
}

/* ===== Legal pages (Privacy, Terms, Disclaimer, Refund) ===== */
.legal-hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(46% 80% at 88% 8%, rgba(38, 86, 200, 0.28), transparent 62%),
    radial-gradient(40% 70% at 4% 96%, rgba(20, 44, 120, 0.22), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
}

/* thin accent line along the bottom edge */
.legal-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1b55b8 30%, #2a78ff 50%, #1b55b8 70%, transparent);
  opacity: 0.7;
}

.legal-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.legal-title {
  text-shadow: 0 2px 30px rgba(20, 50, 130, 0.4);
}

.legal-breadcrumb {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.8rem;
}

.legal-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.legal-breadcrumb a:hover {
  color: #ffffff;
}

.legal-title {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.legal-updated {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  margin: 0;
}

.legal-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.6rem 3rem;
  background: #ffffff;
  border: 1px solid #e9ecf1;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(16, 32, 70, 0.08);
}

@media (max-width: 575.98px) {
  .legal-body { padding: 1.5rem 1.3rem; border-radius: 14px; }
}

.legal-body h2 {
  color: #15171c;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 2.2rem 0 0.8rem;
}

.legal-body h2:first-of-type {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  color: #54585f;
  font-size: 1rem;
  line-height: 1.75;
}

.legal-body ul {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.legal-body li {
  margin-bottom: 0.4rem;
}

.legal-body a {
  color: #1b55b8;
  text-decoration: none;
  font-weight: 600;
}

.legal-body a:hover {
  text-decoration: underline;
}

.legal-contact-box {
  margin-top: 2.5rem;
  padding: 1.6rem 1.8rem;
  border-radius: 16px;
  background: #f4f7fc;
  border: 1px solid #e6ecf6;
}

.legal-contact-box h3 {
  color: #15171c;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.legal-contact-box p {
  margin: 0.2rem 0;
  font-size: 0.96rem;
}

/* ===== Footer ===== */
.site-footer {
  display: block;
  position: relative;
  /* dark base + soft red glow that matches the logo */
  background:
    radial-gradient(46% 70% at 8% 0%, rgba(229, 57, 53, 0.16), transparent 60%),
    radial-gradient(42% 75% at 100% 12%, rgba(229, 57, 53, 0.15), transparent 60%),
    #0a0a0a;
  color: #c7ccd6;
}

/* thin red accent line that matches the logo across the top */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2) 35%, transparent 70%);
}

.footer-logo {
  height: 42px;
  width: auto;
  /* subtle red glow tinted to the logo colour */
  filter: drop-shadow(0 6px 16px rgba(229, 57, 53, 0.45));
}

.footer-desc {
  color: #A7A7A7;
  font-size: 0.92rem;
  line-height: 1.7;
}

.footer-head {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 1.1rem;
}

/* One grid for all four link groups. Grid rows share a height, so "Crypto
   Solutions" and "More Solutions" start on the same line regardless of how many
   links sit above each of them. */
.footer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem 2.5rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* CSS columns balance the list itself; the old markup cut each list into two
   col-6 halves by hand, which left one side short */
.footer-links--2col {
  columns: 2;
  column-gap: 1.5rem;
}

.footer-links li {
  margin-bottom: 0.7rem;
  break-inside: avoid;
}

.footer-links a {
  color: #A7A7A7;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.footer-links a:hover {
  color: #ffffff;
  padding-left: 4px;
}

.footer-reach {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}

.footer-reach-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
}

.footer-reach-label {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.reach-lines {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem 1.8rem;
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #A7A7A7;
  font-size: 0.92rem;
  text-decoration: none;
  margin-bottom: 0;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.footer-contact .bi {
  color: #A7A7A7;
  font-size: 1rem;
}

.footer-contact:hover {
  color: #ffffff;
}

.footer-address {
  color: #A7A7A7;
  font-size: 0.87rem;
  line-height: 1.8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.4rem 0;
  text-align: center;
}

.footer-bottom p {
  color: #8a93a6;
  font-size: 0.8rem;
}

/* Below tablet the two group columns would leave each list column around 115px
   wide and every second label would wrap. One group per row instead, so each
   list still gets two readable columns. */
@media (max-width: 767.98px) {
  .footer-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }
}

@media (max-width: 575.98px) {
  .reach-lines {
    flex-wrap: wrap;
  }
}

/* ===================== Responsive / compact pass ===================== */
/* kill horizontal scroll from decorative offsets (clip keeps sticky working) */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* tablet & down: tighten the section rhythm */
@media (max-width: 991.98px) {
  .py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .pt-6 { padding-top: 3rem !important; }
  .pb-6 { padding-bottom: 3rem !important; }
  .my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .mt-6 { margin-top: 3rem !important; }
  .mb-6 { margin-bottom: 3rem !important; }

  .hero-card { padding: 2.5rem 2rem 1.75rem; min-height: 440px; }

  /* keep the innovation image overlay inside the viewport */
  .innov-media::before { right: -10px; left: 10px; }
  .innov-card { right: 0; }
}

/* phones: maximum compactness */
@media (max-width: 767.98px) {
  .py-6 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .pt-6 { padding-top: 2.25rem !important; }
  .pb-6 { padding-bottom: 2.25rem !important; }
  .my-6 { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; }
  .mt-6 { margin-top: 2.25rem !important; }
  .mb-6 { margin-bottom: 2.25rem !important; }

  .pt-5 { padding-top: 1.5rem !important; }
  .pb-4, .pb-5 { padding-bottom: 1.25rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }

  /* hero */
  .hero-card { padding: 1.75rem 1.25rem 1.25rem; min-height: 360px; border-radius: 22px; }
  .hero-title { font-size: 1.85rem; margin-bottom: 1.5rem; }
  .hero-tag-item { font-size: 0.95rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.75rem; margin-top: 1.75rem; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: 0.8rem; }
  .hero-btn { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

  /* trim Bootstrap p-4 (1.5rem) on the cards */
  .about-cta.p-4, .about-badge.p-4, .innov-feature.p-4,
  .ai-card.p-4, .service-card.p-4, .stat-card.p-4,
  .work-card.p-4, .testi-card.p-4, .techstack-panel.p-4 {
    padding: 1.15rem !important;
  }

  /* big staggered stats -> stacked, no stagger/dividers, no sticky */
  .bigstats-row { grid-template-columns: 1fr; gap: 1.8rem; }
  .bigstats-row::before, .bigstats-row::after { display: none; }
  .bigstats-item,
  .bigstats-item:nth-child(1),
  .bigstats-item:nth-child(2),
  .bigstats-item:nth-child(3) { padding: 0; min-height: 0; }
  .bigstats-sticky,
  .bigstats-item:nth-child(1) .bigstats-sticky,
  .bigstats-item:nth-child(2) .bigstats-sticky,
  .bigstats-item:nth-child(3) .bigstats-sticky { position: static; margin-top: 0; top: auto; }
  .bigstats-num { font-size: 3rem; }
  .bigstats-label { font-size: 1.1rem; }

  /* business CTA banner */
  .business-cta-box { padding: 2.4rem 1.5rem; min-height: 0; }
  .business-cta-title { font-size: 1.6rem; }
  .business-cta-text { font-size: 0.92rem; }
  .business-cta-box::before {
    background: linear-gradient(90deg, rgba(3, 4, 8, 0.92) 0%, rgba(3, 4, 8, 0.78) 60%, rgba(3, 4, 8, 0.35) 100%);
  }

  /* section titles */
  .about-title, .innov-title, .services-title, .tech-title,
  .works-title, .ai-title { font-size: 1.5rem; }
  .techstack-title { font-size: 1.55rem; }
  .testi-title { font-size: 1.6rem; }

  /* body copy */
  .about-lead, .innov-lead, .ai-lead, .works-intro,
  .testi-sub, .services-cta-text { font-size: 0.92rem; }
  .about-subtitle { font-size: 1.15rem; }
  .about-list li, .innov-feature-text, .service-card-text,
  .ai-card-text, .work-desc { font-size: 0.88rem; }
  .innov-feature-title { font-size: 1.1rem; }
  .service-card-title, .ai-card-title, .innov-card-title { font-size: 1.05rem; }

  /* stat cards */
  .stat-card-num { font-size: 1.9rem; }
  .stat-card-label { font-size: 0.85rem; }

  /* about CTA + experience badge */
  .about-badge-num { font-size: 2.4rem; }
  .about-cta-title { font-size: 1.2rem; }
  .about-cta-text { font-size: 0.85rem; }

  /* work cards */
  .work-name { font-size: 1.35rem; }
  .work-tag { font-size: 0.75rem; padding: 0.3rem 0.75rem; }

  /* testimonials: narrower cards so they fit small screens */
  .testi-card { width: 84vw; max-width: 320px; }
  .testi-quote { font-size: 0.88rem; }

  /* connect */
  .connect-name { font-size: 1.25rem; }
  .connect-text { font-size: 0.9rem; }
  .connect-ico { width: 55px; height:55px; }
  .connect-ico img { width: 25px; height: 25px; }
  .connect-ico:not(:first-child) { margin-left: -5px; }
  .connect-logo { width: 70px; height: 70px; }
  .connect-logo img { width: 38px; }

  .services-cta-btn { font-size: 0.88rem; }

  /* smaller header logo on mobile */
  .brand-logo { height: 34px; }
}

/* very small phones */
@media (max-width: 400px) {
  .hero-title { font-size: 1.6rem; }
  .hero-stats { gap: 1rem 0.5rem; }
  .stat-num { font-size: 1.3rem; }
  .testi-title { font-size: 1.45rem; }
}

/* ===== Global mobile compacting (all pages) ===== */
@media (max-width: 767.98px) {
  /* shrink the rem base so fonts + spacing scale down everywhere */
  html { font-size: 14.5px; }

  /* tighten the large section spacing utilities */
  .py-6 { padding-top: 2.2rem !important; padding-bottom: 2.2rem !important; }
  .pt-6 { padding-top: 2.2rem !important; }
  .pb-6 { padding-bottom: 2.2rem !important; }

  /* legal pages */
  .legal-title { font-size: 1.7rem; }
  .legal-body { padding: 1.5rem 1.3rem; border-radius: 14px; }
  .legal-body h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
  .legal-body p, .legal-body li { font-size: 0.9rem; line-height: 1.65; }
  .legal-contact-box { padding: 1.1rem 1.2rem; }
  .legal-contact-box p { font-size: 0.88rem; }

  /* contact page */
  .contact-banner-title { font-size: 1.9rem; }
  .contact-banner-text, .contact-step-text { font-size: 0.9rem; }
  .contact-banner-next { font-size: 1.05rem; }
  .contact-card-title { font-size: 1.35rem; }
  .cf-line, .cf-phone-code, .cc-toggle { font-size: 0.92rem; }
  .cf-check { font-size: 0.82rem; }

  /* offices */
  .offices-title { font-size: 1.6rem; }
  .offices-sub { font-size: 0.92rem; }
  .office-country { font-size: 1.05rem; }
  .office-address, .office-line { font-size: 0.88rem; }
}

@media (max-width: 400px) {
  html { font-size: 13.5px; }
}

/* ===================== Portfolio page ===================== */
.pf-hero {
  position: relative;
  /* bottom colour matches .pf-work top so the two sections blend with no seam */
  background: linear-gradient(180deg, #eef4ff 0%, #f6f9ff 50%, #f4f7fc 100%);
  overflow: hidden;
  padding-bottom: 2.5rem;
}

/* soft shadow strip that bridges the hero into the work section (the blend) */
.pf-hero-shadow {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* single full-width blue waves band across the top */
.pf-hero-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(220px, 30vw, 430px);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.pf-hero-inner {
  position: relative;
  z-index: 1;
}

/* work section shares the hero's bottom tone -> seamless two-section blend */
.pf-work {
  position: relative;
  background: linear-gradient(180deg, #f5f4f5 0%, #ffffff 240px);
}

.pf-eyebrow {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: #1b55b8;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.pf-hero-title {
  color: #0e1736;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}

.pf-hero-title .pf-accent { color: #1b55b8; }

.pf-hero-sub {
  max-width: 720px;
  margin: 0 auto;
  color: #54585f;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* recent work */
.pf-work-title {
  color: #0e1736;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 1.6rem);
  letter-spacing: -0.01em;
}

.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.pf-filter {
  border: none;
  background: #00000012;
  color: #2a2f3a;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pf-filter:hover {
  background: #00000029;

}

.pf-filter.active {
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;

}

/* cards */
.pf-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 54, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(15, 23, 54, 0.22);
}

.pf-card-media {
  padding: 0.9rem 0.9rem 0;
}

.pf-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}

.pf-card-body {
  padding: 1.25rem 1.4rem 1.6rem;
}

.pf-card-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.pf-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #00000012;
  color: #111;
  font-size: 0.82rem;
  font-weight: 500;
}

/* hidden state for filtering / load-more */
.pf-item.is-hidden { display: none; }

.pf-empty { display: none; color: #54585f; font-size: 1rem; }
.pf-empty.is-visible { display: block; }

.pf-loadmore {
  border: none;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(27, 85, 184, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pf-loadmore:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(27, 85, 184, 0.34);
}

.pf-loadmore.is-hidden { display: none; }

@media (max-width: 767.98px) {
  .pf-hero-waves { opacity: 0.3; }
  .pf-card-title { font-size: 1.12rem; }
  .pf-filter { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
  .pf-tag { font-size: 0.76rem; padding: 0.35rem 0.75rem; }
}

/* ===================== Blog page ===================== */
.blog-eyebrow {
  display: inline-block;
  margin-bottom: 0.7rem;
  color: #1b55b8;
  font-weight: 600;
  font-size: 0.9rem;
}

/* featured post */
.blog-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.2rem;
  align-items: center;
  text-decoration: none;
  border: 1px solid #eef1f6;
  border-radius: 22px;
  padding: 1rem;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 54, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 54, 0.14);
}

.blog-feature-media {
  border-radius: 16px;
  overflow: hidden;
}

.blog-feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.blog-feature-body { padding: 0.5rem 1rem; }

.blog-feature-title {
  color: #0e1736;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.blog-feature-text {
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}

.blog-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #1b55b8;
  font-weight: 600;
  font-size: 0.95rem;
}

/* toolbar */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.blog-search {
  position: relative;
  flex: 0 0 260px;
  max-width: 100%;
}

.blog-search .bi {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa1ad;
  font-size: 0.95rem;
}

.blog-search input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border: 1px solid #e4e8ef;
  border-radius: 999px;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  color: #15171c;
  outline: none;
}

.blog-search input:focus { border-color: #1b55b8; }

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* blog filter buttons reuse the portfolio .pf-filter styling */

/* list rows */
.blog-list { display: flex; flex-direction: column; gap: 1.25rem; }

.blog-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.4rem;
  text-decoration: none;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  padding: 0.9rem;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 54, 0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 54, 0.13);
}

/* Announcement rows with no thumbnail — the text is the whole item, so the media
   column collapses away instead of leaving a 240px gap. */
.blog-row--text {
  grid-template-columns: 1fr;
}

.blog-row--text .blog-row-body {
  padding: 0.5rem 0.6rem;
}

.blog-row-media {
  border-radius: 13px;
  overflow: hidden;
}

.blog-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}

.blog-row-body { padding: 0.4rem 0.6rem 0.4rem 0; }

.blog-cat {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #1b55b8;
  font-weight: 600;
  font-size: 0.82rem;
}

.blog-row-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.blog-row-text {
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  color: #8a9099;
  font-size: 0.82rem;
}

.blog-meta .bi { color: #1b55b8; margin-right: 0.25rem; }

.blog-row.is-hidden { display: none; }

/* The page ships the featured card empty; itspectrum.js reveals it once it has
   a post to put in it. */
.blog-feature.is-hidden { display: none; }

.blog-empty { display: none; color: #54585f; }
.blog-empty.is-visible { display: block; }

/* sidebar form */
.blog-form-card {
  position: sticky;
  top: 110px;
  background: linear-gradient(160deg, #000 0%, #0a2a6e 100%);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(10, 42, 110, 0.3);
}

.blog-form-title {
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.blog-form-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.bf-field { margin-bottom: 1.4rem; }

.bf-phone-field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.bf-line {
  width: 100%;
  padding: 0.55rem 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.98rem;
  outline: none;
}

.bf-line::placeholder { color: rgba(255, 255, 255, 0.7); }
.bf-line:focus { border-bottom-color: #ffffff; }

.bf-textarea { resize: vertical; min-height: 60px; }

.bf-submit {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 12px;
  background: #ffffff;
  color: #0a2a6e;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991.98px) {
  .blog-feature { grid-template-columns: 1fr; gap: 1rem; }
  .blog-form-card { position: static; margin-top: 1rem; }
}

@media (max-width: 575.98px) {
  .blog-row { grid-template-columns: 1fr; }
  .blog-row-media img { min-height: 180px; aspect-ratio: 2 / 1; height: auto; }
  .blog-row-body { padding: 0.2rem 0.4rem 0.5rem; }
  .blog-toolbar { gap: 0.85rem; }
  .blog-search { flex-basis: 100%; }
}

/* ===================== Blog details page ===================== */
.bd-head { background: linear-gradient(180deg, #f4f7fc 0%, #ffffff 100%); }

.bd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #8a9099;
}

.bd-crumb a { color: #1b55b8; text-decoration: none; }
.bd-crumb a:hover { text-decoration: underline; }
.bd-crumb .bi { font-size: 0.7rem; opacity: 0.7; }
.bd-crumb-cur { color: #54585f; }

.bd-title {
  color: #0e1736;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 1.8rem);
  line-height: 1.2;
  margin: 0.6rem 0 1.1rem;
}

.bd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  color: #8a9099;
  font-size: 0.88rem;
}

.bd-meta .bi { color: #1b55b8; margin-right: 0.3rem; }

.bd-hero-img img {
  display: block;
  width: 100%;
  
  object-fit: cover;
  border-radius: 20px;
}

/* article prose */
.bd-prose { color: #3f444c; font-size: 1.02rem; line-height: 1.8; }
.bd-prose p { margin-bottom: 1.3rem; }
.bd-prose strong { color: #1b2a4a; }

.bd-prose h2 {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 2.2rem 0 1rem;
}

.bd-prose h3 {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.22rem;
  margin: 1.6rem 0 0.8rem;
}

.bd-prose ul {
  margin: 0 0 1.4rem;
  padding-left: 0;
  list-style: none;
}

.bd-prose ul li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
}

.bd-prose ul li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #1b55b8;
  font-size: 0.95rem;
}

.bd-prose blockquote {
  margin: 1.8rem 0;
  padding: 1.1rem 1.5rem;
  border-left: 4px solid #1b55b8;
  background: #f4f7fc;
  border-radius: 0 12px 12px 0;
  color: #1b2a4a;
  font-style: italic;
  font-size: 1.05rem;
}

.bd-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.bd-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid #eef1f6;
}

.bd-share-label { color: #54585f; font-weight: 600; font-size: 0.92rem; }

.bd-share-icons { display: flex; gap: 0.6rem; }

.bd-share-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f4f9;
  color: #1b55b8;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.bd-share-icons a:hover { background: #1b55b8; color: #ffffff; }

/* sidebar */
.bd-recent {
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 8px 20px rgba(15, 23, 54, 0.06);
}

.bd-recent-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
}

.bd-recent-item {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  text-decoration: none;
  padding: 0.7rem 0;
  border-top: 1px solid #f0f2f6;
}

.bd-recent-item:first-of-type { border-top: none; padding-top: 0; }

.bd-recent-item img {
  flex: 0 0 84px;
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

.bd-recent-cat { color: #1b55b8; font-weight: 600; font-size: 0.76rem; }

.bd-recent-name {
  color: #0e1736;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0.2rem 0 0;
}

.bd-recent-item:hover .bd-recent-name { color: #1b55b8; }

/* ===================== Career page ===================== */
/* narrower, centred content area for the open-positions section */
.career .container { max-width: 1240px; }

/* hero reuses .contact-banner + .contact-banner-title + .about-hero-sub */
.career-hero { padding: 6rem 0; }

.career-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(14, 14, 14) 0%, rgba(22, 26, 34, 0.78) 100%);
}

.career-hero .about-hero-sub { max-width: 640px; }

.career-label {
  color: #0e1736;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.7rem;
}

/* department buttons reuse .pf-filter, stacked full-width */
.career-dept {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.career-dept .pf-filter {
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  padding: 0.6rem 1.1rem;
}

/* HR contact card */
.career-hr {
  background: #f4f7fc;
  border: 1px solid #e6edf7;
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
}

.career-hr-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.career-hr-text {
  color: #54585f;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}

.career-hr-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1b3a8f;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.career-hr-line:last-child { margin-bottom: 0; }
.career-hr-line .bi { color: #1b55b8; }

/* job cards */
.career-jobs { display: flex; flex-direction: column; gap: 1rem; }

.career-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 8px 20px rgba(15, 23, 54, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career-job:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 54, 0.12);
}

.career-job-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.career-job-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.career-job-head .pf-tag { font-size: 0.72rem; padding: 0.25rem 0.7rem; }

.career-job-meta { color: #8a9099; font-size: 0.86rem; }

.career-btn {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(27, 85, 184, 0.3);
}

.career-job.is-hidden { display: none; }

.career-empty {
  display: none;
  text-align: center;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 20px;
  padding: 3.5rem 2rem;
  box-shadow: 0 8px 24px rgba(15, 23, 54, 0.05);
}

.career-empty.is-visible { display: block; }

.career-empty-ico {
  display: inline-flex;
  font-size: 2.8rem;
  color: #9aa1ad;
  margin-bottom: 0.8rem;
  line-height: 1;
}

.career-empty-title {
  color: #0e1736;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.career-empty-text {
  color: #54585f;
  font-size: 0.98rem;
  margin: 0;
}

@media (max-width: 575.98px) {
  .career-job { flex-direction: column; align-items: flex-start; }
  .career-btn { align-self: stretch; text-align: center; }
}

/* ===================== Apply form page ===================== */
.apply { background: linear-gradient(180deg, #f4f7fc 0%, #ffffff 220px); }
.apply .container { max-width: 920px; }

.apply-card {
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 22px;
  padding: 2.4rem;
  box-shadow: 0 14px 40px rgba(15, 23, 54, 0.08);
}

.apply-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #54585f;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.apply-back span { color: #1b55b8; font-weight: 600; }
.apply-back:hover span { text-decoration: underline; }

.apply-title {
  color: #0e1736;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.6rem;
}

.req { color: #e53935; }

/* resume upload */
.apply-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border: 1.5px dashed #9bbcf0;
  background: #f1f6fe;
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}

.apply-upload-info { display: flex; align-items: center; gap: 0.9rem; }

.apply-upload-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.2rem;
}

.apply-upload-label { color: #0e1736; font-weight: 700; font-size: 0.95rem; margin: 0; }
.apply-upload-hint { color: #8a9099; font-size: 0.8rem; margin: 0.15rem 0 0; }

.apply-upload-btn {
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1.3rem;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.apply-section {
  color: #0e1736;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 2rem 0 1.2rem;
}

.apply-sublabel { color: #8a9099; font-size: 0.85rem; margin-bottom: 0.3rem; }
.apply-help { color: #8a9099; font-size: 0.82rem; margin: 0.5rem 0 0; }

/* light floating-label fields */
.af-field { position: relative; }

.af-line {
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid #d7dce4;
  background: transparent;
  color: #15171c;
  font-size: 0.98rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.af-line:focus { outline: none; border-bottom-color: #1b55b8; }

.af-select { cursor: pointer; }

.af-label {
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #8a9099;
  font-size: 0.98rem;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}

.af-line:focus + .af-label,
.af-line:not(:placeholder-shown) + .af-label {
  transform: translateY(-1.35rem);
  font-size: 0.76rem;
  color: #1b55b8;
}

/* select + currency labels stay raised */
.af-label--fixed,
.af-label--cur {
  transform: translateY(-1.35rem);
  font-size: 0.76rem;
  color: #1b55b8;
}

.af-cur-field { display: flex; align-items: flex-end; gap: 0.6rem; }

.af-cur {
  flex: 0 0 auto;
  padding: 0.5rem 0;
  color: #54585f;
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid #d7dce4;
}

.af-cur-field .af-line { flex: 1 1 auto; }

/* skills */
.af-skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #d7dce4;
  padding: 0.4rem 0;
}

.af-skills-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.af-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eaf1fc;
  color: #1b55b8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.af-skill button {
  border: none;
  background: transparent;
  color: #1b55b8;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.af-skills-input {
  flex: 1 1 160px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: #15171c;
  outline: none;
  padding: 0.3rem 0;
}

/* consent + robot */
.af-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.8rem 0 1.2rem;
  color: #54585f;
  font-size: 0.9rem;
  line-height: 1.5;
}

.af-check input { margin-top: 0.2rem; accent-color: #1b55b8; }
.af-check a { color: #1b55b8; }

.af-robot {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #d7dce4;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.8rem;
  background: #f9fafb;
}

.af-robot-box {
  width: 24px;
  height: 24px;
  border: 2px solid #c2c8d2;
  border-radius: 4px;
  background: #ffffff;
}

.af-robot-text { color: #15171c; font-size: 0.92rem; }

.af-robot-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 1.4rem;
  color: #8a9099;
  font-size: 0.72rem;
}

.apply-submit { display: block; border: none; cursor: pointer; padding: 0.7rem 2rem; }

@media (max-width: 575.98px) {
  .apply-card { padding: 1.5rem; }
}

/* ===================== CRM solution page ===================== */
/* FAQ — modern numbered accordion */
@media (min-width: 992px) {
  .crm-faq-sticky { position: sticky; top: 100px; }
}

/* decorative background — sphere (bottom-left), question mark + dotted grid (right) */
.crm-faq {
  position: relative;
  background-color: #fafbfe;
  background-image:
    url("../img/faq-right-img.png"),
    url("../img/faq-question-grid.png"),
    url("../img/faq-left-img.png");
  background-repeat: no-repeat;
  background-position:
    right 3% top 14%,
    right 0 top 4%,
    left 0 bottom 8%;
  background-size:
    auto clamp(240px, 30vw, 420px),
    clamp(340px, 46vw, 700px) auto,
    clamp(110px, 15vw, 220px) auto;
}
/* keep the FAQ content above the decorative layers */
.crm-faq > .container { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
  .crm-faq {
    background-position:
      right 2% top 6%,
      right -4% top 2%,
      left -3% bottom 3%;
    background-size:
      auto clamp(170px, 30vw, 280px),
      clamp(240px, 55vw, 440px) auto,
      clamp(80px, 18vw, 140px) auto;
  }
}

@media (max-width: 575.98px) {
  /* phones: keep only the faint question mark so text stays clean */
  .crm-faq {
    background-image: url("../img/faq-right-img.png");
    background-position: right -10% top 3%;
    background-size: auto 140px;
  }
}

.crm-faq .faq-accordion { counter-reset: faq; }

.crm-faq .accordion-item {
  border: 1px solid #e6e9f0;
  border-radius: 14px !important;
  margin-bottom: 0.9rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 54, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.crm-faq .accordion-item:last-child { margin-bottom: 0; }

.crm-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: #1b55b8;
  box-shadow: 0 14px 30px rgba(27, 85, 184, 0.12);
}

.crm-faq .accordion-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0e1736;
  background: transparent;
  box-shadow: none !important;
}

.crm-faq .accordion-button:not(.collapsed) {
  color: #1b55b8;
  background: #f1f6fe;
}

/* number badge */
.crm-faq .accordion-button::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eaf1fc;
  color: #1b55b8;
  font-size: 0.82rem;
  font-weight: 700;
}

.crm-faq .accordion-button:not(.collapsed)::before {
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
}

/* custom +/× toggle replacing the default chevron */
.crm-faq .accordion-button::after {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background-color: #eaf1fc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b55b8'%3E%3Cpath d='M8 3a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2H9v3a1 1 0 1 1-2 0V9H4a1 1 0 1 1 0-2h3V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease, background-color 0.2s ease;
}

.crm-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(135deg);
  background-color: #1b55b8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 3a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2H9v3a1 1 0 1 1-2 0V9H4a1 1 0 1 1 0-2h3V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.crm-faq .accordion-button:focus { box-shadow: none; }

.crm-faq .accordion-body {
  padding: 0 1.25rem 1.2rem 4.5rem;
  color: #54585f;
  font-size: 0.94rem;
  line-height: 1.7;
}

@media (max-width: 575.98px) {
  .crm-faq .accordion-button { font-size: 0.95rem; gap: 0.7rem; padding: 0.9rem 1rem; }
  .crm-faq .accordion-body { padding-left: 1rem; }
}

/* ===== P2P Exchange — development process timeline ===== */
.p2p-proc-heading {
  text-align: center;
  font-weight: 800;
  color: #0e1736;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.p2p-proc-lead {
  max-width: 760px;
  margin: 0 auto 2.8rem;
  text-align: center;
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.7;
}

/* ===== P2P Exchange — technology stack ===== */
.p2p-tech-heading {
  font-weight: 800;
  color: #0e1736;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.p2p-tech-text {
  max-width: 520px;
  margin: 0;
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.8;
}

.p2p-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
  align-items: center;
  justify-items: center;
}

.p2p-tech-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 100%;
}

.p2p-tech-logo img {
  max-height: 60px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.p2p-tech-logo img:hover { transform: scale(1.08); }

@media (max-width: 991.98px) {
  .p2p-tech-text { max-width: none; }
  .p2p-tech-grid { gap: 2rem 1rem; margin-top: 1.75rem; }
}

@media (max-width: 575.98px) {
  .p2p-tech-logo { height: 48px; }
  .p2p-tech-logo img { max-height: 44px; max-width: 100px; }
}

.p2p-proc-list {
  max-width: 1200px;
  margin: 0 auto;
}

.p2p-proc-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(190px, 250px) 1fr;
  align-items: center;
  gap: 1rem 1.75rem;
  background: #f2f4f9;
  border-radius: 16px;
  padding: 1.5rem 1.9rem;
  margin-bottom: 1.1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.p2p-proc-item:last-child { margin-bottom: 0; }

.p2p-proc-item:hover {
  box-shadow: 0 14px 30px rgba(15, 23, 54, 0.08);
  transform: translateY(-2px);
}

/* vertical connector linking one icon to the next */
.p2p-proc-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(1.9rem + 26px);
  transform: translateX(-50%);
  width: 2px;
  height: 1.1rem;
  background: #d3dae8;
}

.p2p-proc-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.3rem;
  box-shadow: 0 8px 18px rgba(27, 85, 184, 0.25);
}

.p2p-proc-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0e1736;
  line-height: 1.35;
}

.p2p-proc-text {
  margin: 0;
  color: #54585f;
  font-size: 0.94rem;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .p2p-proc-item {
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    padding: 1.25rem 1.25rem;
  }
  .p2p-proc-text { grid-column: 1 / -1; }
  .p2p-proc-item:not(:last-child)::after { left: calc(1.25rem + 26px); }
}

/* hero */
.crm-hero {
  position: relative;
  background:
    radial-gradient(60% 90% at 78% 28%, rgba(34, 96, 210, 0.5) 0%, rgba(34, 96, 210, 0) 58%),
    linear-gradient(180deg, #05070f 0%, #0a1733 42%, #0c2862 100%);
  padding: 4.5rem 0 4rem;
  overflow: hidden;
}

/* faint grid texture over the hero */
.crm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 90% at 70% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.crm-hero .container { position: relative; z-index: 1; }

.crm-hero-tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
}

.crm-hero-title {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.crm-hero-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 1.8rem;
}

.crm-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0a2a6e;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crm-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }

.crm-hero-img { width: 100%; max-width: 380px; height: auto; }
.crm-hero-img--lg { max-width: 500px; }

/* trusted strip */
.crm-trust {
  background: linear-gradient(180deg, #071c4d 0%, #0a2a6e 100%);
  padding-bottom: 1.6rem;
}

.crm-trust-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1rem 1.5rem;
}

.crm-trust-label { color: #ffffff; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

.crm-trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  align-items: center;
}

.crm-trust-item { color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.98rem; }

/* services — shares the glow + grid background defined with .crm-proc-wrap below */

.crm-serv {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 8px 22px rgba(15, 23, 54, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crm-serv:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 23, 54, 0.12); }

.crm-serv-main { flex: 1 1 auto; }

.crm-serv-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.crm-serv-badge {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf1fc;
  color: #1b55b8;
  font-size: 1.15rem;
}

.crm-serv-title { color: #0e1736; font-weight: 700; font-size: 1.15rem; margin: 0; }
.crm-serv-text { color: #54585f; font-size: 0.9rem; line-height: 1.6; margin: 0; }

.crm-serv-art {
  flex: 0 0 auto;
  width: 75px;
  height: 75px;
  object-fit: contain;
  opacity: 0.9;
}

/* mobile app development — alternating service cards */
.mad-services { background: #f5f7fb; }

.mad-list { display: flex; flex-direction: column; gap: 1.75rem; }

.mad-card {
  background: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 18px;
  padding: 2rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mad-card:hover {
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
  transform: translateY(-3px);
}

.mad-card-title { color: #0e1736; font-weight: 700; font-size: 1.3rem; margin: 0 0 0.65rem; }
.mad-card-text { color: #54585f; font-size: 0.95rem; line-height: 1.65; margin: 0 0 1.1rem; }
.mad-card-sub { color: #0e1736; font-weight: 600; font-size: 1rem; margin: 0 0 0.75rem; }

.mad-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.55rem;
}

.mad-card-list li {
  position: relative;
  padding-left: 1.6rem;
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.5;
}

.mad-card-list li::before {
  content: "\F26E"; /* bootstrap-icons check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: #1b55b8;
  font-size: 0.9rem;
}

.mad-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: #1b55b8;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.mad-btn:hover { background: #0e1736; color: #ffffff; }

.mad-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
}

/* width auto + capped height keeps tall/portrait artwork from towering over the text */
.mad-card-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .mad-card { padding: 1.5rem; }
  .mad-card-img { max-height: 240px; }
}

/* mobile app development — why choose grid */
.mad-why { background: #fafbfd; }

.mad-why-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 18px;
  padding: 1.75rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mad-why-card:hover {
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
  transform: translateY(-3px);
}

.mad-why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaf1fc;
  color: #1b55b8;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

.mad-why-title { color: #0e1736; font-weight: 700; font-size: 1.2rem; margin: 0 0 0.65rem; }
.mad-why-text { color: #54585f; font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* the dark feature tile: photo background with a scrim so the text stays readable */
.mad-why-card--feature {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background-color: #0b1020;
  background-size: cover;
  background-position: center;
  min-height: 360px;
}

.mad-why-card--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.92) 0%, rgba(6, 10, 24, 0.72) 45%, rgba(6, 10, 24, 0.25) 100%);
}

.mad-why-card--feature > * { position: relative; z-index: 1; }
.mad-why-card--feature .mad-why-ico { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.mad-why-card--feature .mad-why-title { color: #ffffff; }
.mad-why-card--feature .mad-why-text { color: rgba(255, 255, 255, 0.85); }

.mad-why-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.mad-why-stack .mad-why-card { height: auto; flex: 1; }

@media (max-width: 991.98px) {
  .mad-why-card { padding: 1.5rem; }
  .mad-why-card--feature { min-height: 300px; }
}

/* layer 2 blockchain — services list beside a sticky intro */
.l2-services { background: #ffffff; }

.l2-intro-title { color: #0e1736; font-weight: 700; font-size: 1.75rem; line-height: 1.3; margin: 0 0 1rem; }
.l2-intro-text { color: #2b3040; font-size: 0.95rem; line-height: 1.7; margin: 0 0 2rem; }

.l2-intro-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  margin: 0 auto;
}

.l2-serv-list { display: flex; flex-direction: column; }

/* each service divided by a hairline; the last one drops it so the list ends clean */
.l2-serv {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e6ebf3;
}

.l2-serv:first-child { padding-top: 0; }
.l2-serv:last-child { border-bottom: 0; padding-bottom: 0; }

.l2-serv-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b55b8;
  color: #ffffff;
  font-size: 1.05rem;
}

.l2-serv-title { color: #0e1736; font-weight: 700; font-size: 1.1rem; margin: 0 0 0.4rem; }
.l2-serv-text { color: #2b3040; font-size: 0.92rem; line-height: 1.65; margin: 0; }

@media (min-width: 992px) {
  /* the intro parks itself while the longer service list scrolls past it */
  .l2-intro {
    position: sticky;
    top: 100px;
    align-self: start;
  }

  .l2-serv-list { padding-left: 2rem; }
}

/* layer 2 — benefits flanking the centre artwork */
.l2-benefits { background: #fafbfd; }

.l2-benefits-lead {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.l2-ben-col { display: flex; flex-direction: column; gap: 2rem; }

.l2-ben { display: flex; gap: 0.9rem; align-items: flex-start; }

.l2-ben-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b55b8;
  color: #ffffff;
  font-size: 0.85rem;
}

.l2-ben-title { color: #0e1736; font-weight: 700; font-size: 1rem; margin: 0 0 0.35rem; }
.l2-ben-text { color: #2b3040; font-size: 0.88rem; line-height: 1.6; margin: 0; }

/* left column mirrors the layout so both sets point inward at the artwork */
@media (min-width: 992px) {
  .l2-ben-col--left .l2-ben-title,
  .l2-ben-col--left .l2-ben-text { text-align: right; }
}

.l2-ben-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 380px;
  margin: 0 auto;
}

/* layer 2 — stat bar */
.l2-stats { background: #fafbfd; }

.l2-stat {
  height: 100%;
  background: #1b55b8;
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: #ffffff;
}

.l2-stat-num { display: block; font-weight: 700; font-size: 2rem; line-height: 1.1; margin-bottom: 0.35rem; }
.l2-stat-label { display: block; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }

@media (max-width: 991.98px) {
  .l2-intro-title { font-size: 1.5rem; }
  .l2-intro-img { max-height: 220px; margin-bottom: 1rem; }
  .l2-ben-img { max-height: 280px; }
  .l2-stat { padding: 1.35rem 1rem; }
  .l2-stat-num { font-size: 1.65rem; }
}

/* layer 2 — partner cards with an optional artwork strip down one edge */
.l2-partner { background: #fff; }

.l2-partner-lead {
  color: #2b3040;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.l2-part-card {
  display: flex;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(14, 23, 54, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.l2-part-card:hover {
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.1);
  transform: translateY(-3px);
}

/* the strip is decorative — it stretches to the card height and crops rather than scales */
.l2-part-strip {
  flex: 0 0 auto;
  width: 210px;
  align-self: stretch;
  object-fit: cover;
}

.l2-part-body { padding: 1.85rem; }

.l2-part-title { color: #0e1736; font-weight: 700; font-size: 1.2rem; line-height: 1.35; margin: 0 0 0.75rem; }
.l2-part-text { color: #2b3040; font-size: 0.92rem; line-height: 1.7; margin: 0; }

@media (max-width: 575.98px) {
  .l2-part-strip { display: none; }
  .l2-part-body { padding: 1.5rem; }
}

/* smart contract — working process artwork */
.sc-work-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.12);
}

/* nft — capabilities staggered around the centre artwork */
.nft-cap { background: #fafbfd; }

.nft-cap-lead {
  color: #2b3040;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.nft-cap-stage { position: relative; margin-top: 2.5rem; }

.nft-cap-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  margin: 0 auto;
}

.nft-cap-grid { display: flex; flex-direction: column; gap: 1.5rem; }

.nft-cap-card {
  background: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 16px;
  padding: 1.5rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nft-cap-card:hover {
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
  transform: translateY(-3px);
}

.nft-cap-title { color: #0e1736; font-weight: 700; font-size: 1.05rem; line-height: 1.4; margin: 0 0 0.55rem; }
.nft-cap-text { color: #2b3040; font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* on desktop the artwork parks in the middle while the alternating cards scroll past it */
@media (min-width: 992px) {
  .nft-cap-sticky {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .nft-cap-sticky .nft-cap-img {
    position: sticky;
    top: 22vh;
    align-self: flex-start;
    max-height: 750px;
  }

  .nft-cap-grid { gap: 3rem; position: relative; }
  .nft-cap-card { width: 40%; }
  .nft-cap-card--right { align-self: flex-end; }
}

/* nft — token type tiles */
.nft-types { background: #ffffff; }

.nft-type {
  height: 100%;
  background: #f5f7fb;
  border: 1px solid #e6ebf3;
  border-radius: 14px;
  padding: 1.15rem 0.75rem;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nft-type:hover { background: #ffffff; border-color: #1b55b8; transform: translateY(-3px); }

.nft-type i { display: block; color: #1b55b8; font-size: 1.35rem; margin-bottom: 0.6rem; }
.nft-type span { display: block; color: #0e1736; font-size: 0.8rem; font-weight: 600; line-height: 1.35; }

/* nft — marketplace feature panels */
.nft-feat-wrap { background: #ffffff; }

.nft-feat-heading { color: #0e1736; font-weight: 700; font-size: 1.75rem; line-height: 1.3; margin: 0 0 1rem; }
.nft-feat-lead { color: #2b3040; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.75rem; }

.nft-feat-list { display: flex; flex-direction: column; gap: 1.25rem; }

.nft-feat-item {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0d2a5e 0%, #1b55b8 100%);
  border-radius: 20px;
  padding: 2rem 2.25rem 4.5rem;
  color: #ffffff;
}

.nft-feat-title { color: #ffffff; font-weight: 700; font-size: 1.25rem; margin: 0 0 0.65rem; }
.nft-feat-text { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 90%; }

/* oversized watermark of the panel's own icon, tucked into the bottom-right */
.nft-feat-mark {
  position: absolute;
  right: 1.5rem;
  bottom: 0.75rem;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

@media (min-width: 992px) {
  .nft-feat-intro { position: sticky; top: 110px; }
}

/* nft — process as a connected timeline */
.nft-proc { background: #fafbfd; }

.nft-track { position: relative; display: flex; flex-direction: column; gap: 1.5rem; }

/* the rail the step markers sit on — vertical when stacked, horizontal on desktop */
.nft-track-line {
  position: absolute;
  left: 27px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, #1b55b8 0%, rgba(27, 85, 184, 0.15) 100%);
}

.nft-track-step { position: relative; display: flex; gap: 1.25rem; align-items: flex-start; }

.nft-track-dot {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b55b8;
  color: #ffffff;
  font-size: 1.25rem;
  box-shadow: 0 0 0 6px #fafbfd;
}

.nft-track-card {
  background: #ffffff;
  border: 1px solid #e6ebf3;
  border-radius: 16px;
  padding: 1.5rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nft-track-card:hover {
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
  transform: translateY(-3px);
}

.nft-track-num {
  display: inline-block;
  color: #1b55b8;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.nft-track-title { color: #0e1736; font-weight: 700; font-size: 1.05rem; line-height: 1.4; margin: 0 0 0.55rem; }
.nft-track-text { color: #2b3040; font-size: 0.88rem; line-height: 1.6; margin: 0; }

@media (min-width: 992px) {
  .nft-track { flex-direction: row; gap: 1.25rem; }

  .nft-track-line {
    left: 0;
    right: 0;
    top: 28px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, #1b55b8 0%, rgba(27, 85, 184, 0.15) 100%);
  }

  .nft-track-step { flex: 1; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .nft-track-card { flex: 1; }
}

@media (max-width: 991.98px) {
  .nft-cap-img { max-height: 240px; }
  .nft-feat-heading { font-size: 1.5rem; }
  .nft-feat-item { padding: 1.5rem 1.5rem 3.5rem; }
  .nft-feat-mark { font-size: 3.25rem; }
}

/* key features — top-left corner glow + grid only */
.crm-features {
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(27, 85, 184, 0.13) 0%, rgba(27, 85, 184, 0) 55%),
    #ffffff;
  position: relative;
}

.crm-features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 320px;
  background-image:
    linear-gradient(to right, rgba(27, 85, 184, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 85, 184, 0.18) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(circle at top left, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at top left, #000 0%, transparent 72%);
}

.crm-features .container { position: relative; z-index: 1; }

.crm-feat-img { display: block; width: 85%; max-width: 320px; height: auto; margin: 0 auto; border-radius: 18px; }

/* on desktop keep it proportional and vertically centered beside the feature list */
@media (min-width: 992px) {
  .crm-feat-img { height: auto; object-fit: contain; align-self: center; }

  /* crm.html: image stretches to the full height of the feature list */
  .crm-feat-img-col { display: flex; }
  .crm-feat-img--fill {
    width: 100%;
    max-width: none;
    height: 100%;
    /* object-fit: cover; */
    align-self: stretch;
  }

  /* for tall/portrait artwork — bounded by height so the column never
     outgrows the feature list beside it */
  .crm-feat-img--tall {
    width: auto;
    max-width: 100%;
    max-height: 440px;
    height: auto;
    object-fit: contain;
    align-self: center;
    margin: auto;
  }

  /* for wide artwork that must not be cropped — fills the column, stays whole */
  .crm-feat-img--contain {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    align-self: center;
  }
}

.crm-feat {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 2.6rem;
}

.crm-feat:last-child { margin-bottom: 0; }

.crm-feat-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.1rem;
}

.crm-feat-title { color: #0e1736; font-weight: 700; font-size: 1.05rem; margin-bottom: 0.35rem; }
.crm-feat-text { color: #54585f; font-size: 0.88rem; line-height: 1.55; margin: 0; }

/* trusted decentralized tech */
.crm-tech { background: #f7f9fc; }
.crm-tech-title { color: #0e1736; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }

/* industries */
.crm-ind {
  background: linear-gradient(150deg, #0a2a6e, #1452c8);
  border-radius: 24px;
  padding: 2.5rem;
}

.crm-ind-title { color: #ffffff; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; margin-bottom: 1rem; }
.crm-ind-text { color: rgba(255, 255, 255, 0.8); font-size: 0.96rem; line-height: 1.7; margin-bottom: 1.5rem; }

.crm-ind-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: #0a2a6e;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
}

.crm-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.crm-ind-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 1.1rem 0.7rem;
  min-height: 96px;
}

.crm-ind-item i { font-size: 1.5rem; color: #1b55b8; }
.crm-ind-item span { color: #0e1736; font-weight: 600; font-size: 0.8rem; line-height: 1.2; }

/* capabilities */
.crm-cap-heading { color: #0e1736; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 1rem; }
.crm-cap-lead { color: #54585f; font-size: 0.96rem; line-height: 1.7; }

.crm-cap-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 8px 22px rgba(15, 23, 54, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crm-cap-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 23, 54, 0.12); }

.crm-cap-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eaf1fc;
  color: #1b55b8;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.crm-cap-title { color: #0e1736; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.4rem; }
.crm-cap-text { color: #54585f; font-size: 0.88rem; line-height: 1.6; margin: 0; }

.crm-cap-card--blue { background: linear-gradient(150deg, #0a2a6e, #1452c8); border-color: transparent; }
.crm-cap-card--blue .crm-cap-ico { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
.crm-cap-card--blue .crm-cap-title { color: #ffffff; }
.crm-cap-card--blue .crm-cap-text { color: rgba(255, 255, 255, 0.85); }

/* process + services share the same glow + grid background */
.crm-proc-wrap,
.crm-services {
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(27, 85, 184, 0.13) 0%, rgba(27, 85, 184, 0) 55%),
    radial-gradient(60% 70% at 100% 100%, rgba(27, 85, 184, 0.13) 0%, rgba(27, 85, 184, 0) 55%),
    #ffffff;
  position: relative;
  /* note: no overflow:hidden here — it would break position:sticky on .crm-proc-sticky.
     the corner grids are sized to stay within the section, so no clipping is needed. */
}

/* faint grid-square decoration in the top-left and bottom-right corners */
.crm-proc-wrap::before,
.crm-proc-wrap::after,
.crm-services::before,
.crm-services::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 320px;
  background-image:
    linear-gradient(to right, rgba(27, 85, 184, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 85, 184, 0.18) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  z-index: 0;
}

.crm-proc-wrap::before,
.crm-services::before {
  top: 0;
  left: 0;
  -webkit-mask-image: radial-gradient(circle at top left, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at top left, #000 0%, transparent 72%);
}

.crm-proc-wrap::after,
.crm-services::after {
  bottom: 0;
  right: 0;
  -webkit-mask-image: radial-gradient(circle at bottom right, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at bottom right, #000 0%, transparent 72%);
}

.crm-proc-wrap .container,
.crm-services .container { position: relative; z-index: 1; }

@media (min-width: 992px) {
  .crm-proc-sticky { position: sticky; top: 100px; }
}
.crm-proc-heading { color: #0e1736; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; margin-bottom: 1rem; }
.crm-proc-lead { color: #54585f; font-size: 0.96rem; line-height: 1.7; margin-bottom: 1.8rem; }
.crm-proc-img { width: 100%; max-width: 350px; height: auto; display: block; }

/* product-screenshot artwork needs more width than the original illustration */
.crm-proc-img--wide { max-width: 540px; margin-left: -20px; }

/* the Industries pages put a photograph in this slot rather than an
   illustration, so it needs the frame the flat SVGs don't */
.crm-proc-photo {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(16, 32, 70, 0.16);
}

.crm-proc-steps { display: flex; flex-direction: column; }

.crm-proc-step {
  position: relative;
  padding: 1.9rem 0;
}

.crm-proc-step:first-child { padding-top: 0.5rem; }

.crm-proc-step:not(:last-child) { border-bottom: 1px solid #e6e9f0; }

.crm-proc-ico {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}

/* timeline connector running up from each icon */
.crm-proc-ico::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: 1.9rem;
  background: #cdd6e6;
}

.crm-proc-step:first-child .crm-proc-ico::before { height: 0.5rem; }

.crm-proc-title { color: #0e1736; font-weight: 700; font-size: 1.18rem; margin-bottom: 0.4rem; }
.crm-proc-text { color: #54585f; font-size: 0.92rem; line-height: 1.6; margin: 0; max-width: 460px; }

@media (max-width: 991.98px) {
  .crm-ind-grid { grid-template-columns: repeat(3, 1fr); }
  .crm-ind { padding: 1.8rem; }
}

@media (max-width: 575.98px) {
  .crm-hero { padding: 2.4rem 0; }
  .crm-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .crm-ind { padding: 1.4rem; }
  .crm-serv { padding: 1.2rem; }
  .crm-serv-art { width: 56px; height: 56px; }
  .crm-cap-card { padding: 1.1rem; }
}

/* ===================================================================
   Web3 solutions page
   =================================================================== */

/* web3 — tabbed services (numbered list on a blue panel + detail pane) */
.w3-serv { background: #f7f9fc; }

.w3-serv-lead {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 820px;
  margin: 0 auto;
}

.w3-serv-box {
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e7ebf3;
  box-shadow: 0 18px 40px rgba(20, 30, 70, 0.08);
}

.w3-serv-nav {
  height: 100%;
  padding: 1.4rem 1.6rem 2rem;
  background: linear-gradient(180deg, #0a2a6e 0%, #0d47a6 100%);
}

.w3-serv-tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0.3rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 1.08rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.w3-serv-tab:hover { color: #ffffff; }
.w3-serv-tab.active { color: #ffffff; padding-left: 0.6rem; }
.w3-serv-num { font-weight: 700; min-width: 2.3rem; }

/* detail pane — the artwork sits behind the copy, so it never blocks a click */
.w3-serv-panels {
  position: relative;
  height: 100%;
  padding: 2.2rem 2.4rem;
  overflow: hidden;
}

.w3-serv-mark {
  position: absolute;
  right: -20px;
  bottom: -10px;
  width: 230px;
  max-width: 45%;
  opacity: 0.14;
  pointer-events: none;
}

.w3-serv-panels .tab-pane { position: relative; z-index: 1; }

.w3-serv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.5rem;
}

.w3-serv-title { color: #0e1736; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.8rem; }
.w3-serv-text { color: #54585f; font-size: 0.95rem; line-height: 1.75; margin: 0; }
.w3-serv-sub { color: #0e1736; font-weight: 700; font-size: 1rem; margin: 1.3rem 0 0.6rem; }

.w3-serv-list, .w3-eco-list { list-style: none; padding: 0; margin: 0; }

.w3-serv-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
}

.w3-serv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1b55b8;
}

/* web3 — blockchain ecosystem tabs */
.w3-eco { background: #ffffff; }

.w3-eco-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 2rem;
}

.w3-eco-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid #dfe4ee;
  border-radius: 12px;
  background: #ffffff;
  color: #15171c;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.w3-eco-tab img { width: 22px; height: 22px; object-fit: contain; }
.w3-eco-tab:hover { border-color: rgba(27, 58, 143, 0.5); color: #1b3a8f; }

.w3-eco-tab.active {
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(27, 58, 143, 0.28);
}

.w3-eco-card {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 2.4rem;
  border: 1px solid #e7ebf3;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(20, 30, 70, 0.07);
}

/* oversized chain logo washed into the corner of the card */
.w3-eco-mark {
  position: absolute;
  right: 2.5rem;
  bottom: 1.5rem;
  width: 170px;
  max-width: 30%;
  opacity: 0.09;
  pointer-events: none;
}

.w3-eco-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e7ebf3;
  box-shadow: 0 8px 18px rgba(20, 30, 70, 0.08);
}

.w3-eco-logo img { width: 30px; height: 30px; object-fit: contain; }

.w3-eco-title { color: #0e1736; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.7rem; }
.w3-eco-text { position: relative; color: #54585f; font-size: 0.95rem; line-height: 1.75; margin: 0; max-width: 1000px; }
.w3-eco-sub { color: #0e1736; font-weight: 700; font-size: 1rem; margin: 1.3rem 0 0.6rem; }

.w3-eco-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* drawn tick rather than an icon font, so the bullet never depends on a webfont load */
.w3-eco-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.28rem;
  width: 6px;
  height: 11px;
  border: solid #1b55b8;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* web3 — success roadmap timeline */
.w3-road { background: #ffffff; }

.w3-road-lead {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 900px;
  margin: 0 auto;
}

.w3-road-steps {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* the spine runs between the first and last icon centres */
.w3-road-steps::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: rgba(27, 85, 184, 0.3);
}

.w3-road-step { position: relative; display: flex; align-items: center; gap: 2.2rem; }

.w3-road-ico {
  position: relative;
  z-index: 1;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.2rem;
}

/* dashed leader from the icon across to its card */
.w3-road-ico::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 2.2rem;
  border-top: 1px dashed rgba(27, 85, 184, 0.55);
}

.w3-road-card {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.3rem 1.6rem;
  border: 1px solid rgba(27, 85, 184, 0.35);
  border-radius: 14px;
  background: #ffffff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.w3-road-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 30, 70, 0.08);
}

.w3-road-title { flex: 0 0 36%; color: #0e1736; font-weight: 700; font-size: 1.1rem; line-height: 1.35; margin: 0; }
.w3-road-text { color: #54585f; font-size: 0.9rem; line-height: 1.65; margin: 0; }

@media (max-width: 991.98px) {
  .w3-serv-nav { padding: 1.2rem 1.2rem 1.6rem; }
  .w3-serv-panels { padding: 1.8rem 1.5rem; }
  .w3-serv-mark { width: 160px; }
  .w3-eco-card { padding: 1.8rem 1.5rem; }
  .w3-eco-mark { right: 1rem; bottom: 1rem; width: 120px; }
  .w3-road-card { flex-direction: column; gap: 0.5rem; }
  .w3-road-title { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
  .w3-serv-tab { font-size: 0.95rem; padding: 0.9rem 0.2rem; gap: 0.6rem; }
  .w3-serv-num { min-width: 1.9rem; }
  .w3-serv-title { font-size: 1.25rem; }
  .w3-serv-mark { display: none; }
  .w3-eco-tab { font-size: 0.85rem; padding: 0.5rem 0.9rem; }
  .w3-eco-tab img { width: 18px; height: 18px; }
  .w3-eco-title { font-size: 1.2rem; }
  .w3-eco-mark { display: none; }
  .w3-road-step { gap: 1rem; }
  .w3-road-ico { flex: 0 0 42px; width: 42px; height: 42px; font-size: 1rem; }
  .w3-road-ico::after { width: 1rem; }
  .w3-road-steps::before { left: 21px; top: 21px; bottom: 21px; }
  .w3-road-card { padding: 1rem 1.1rem; }
  .w3-road-title { font-size: 1rem; }
}

/* web3 — business benefits (intro + artwork on the left, divided list on the right) */
.w3-biz { background: #f7f9fc; }

.w3-biz-heading {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.w3-biz-lead { color: #54585f; font-size: 0.95rem; line-height: 1.75; margin: 0; }

.w3-biz-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  margin: 1.8rem auto 0;
}

.w3-biz-list { display: flex; flex-direction: column; }

/* hairline between entries; the last one drops it so the column ends clean */
.w3-biz-item { padding: 1.6rem 0; border-bottom: 1px solid #e2e7f0; }
.w3-biz-item:first-child { padding-top: 0; }
.w3-biz-item:last-child { border-bottom: 0; padding-bottom: 0; }

.w3-biz-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.25rem;
}

.w3-biz-title { color: #0e1736; font-weight: 700; font-size: 1.35rem; margin-bottom: 0.5rem; }
.w3-biz-text { color: #54585f; font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 620px; }

@media (max-width: 991.98px) {
  .w3-biz-img { max-height: 240px; }
  .w3-biz-item { padding: 1.3rem 0; }
  .w3-biz-title { font-size: 1.2rem; }
}

/* web3 — quick insight cards (big numeral over a deep blue gradient) */
.w3-insight { background: #f7f9fc; }

.w3-insight-lead {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.w3-insight-card {
  height: 100%;
  padding: 1.6rem 1.5rem 2.2rem;
  border-radius: 18px;
  background: linear-gradient(180deg, #06214f 0%, #0f3f96 100%);
  box-shadow: 0 16px 34px rgba(9, 32, 79, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w3-insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(9, 32, 79, 0.28);
}

.w3-insight-num {
  display: block;
  color: #ffffff;
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 1.4rem;
}

.w3-insight-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 0.7rem;
}

.w3-insight-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 575.98px) {
  .w3-insight-card { padding: 1.3rem 1.2rem 1.6rem; }
  .w3-insight-num { font-size: 2.3rem; margin-bottom: 1rem; }
}

/* ===================================================================
   Metaverse page
   =================================================================== */

.mv-lead {
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 860px;
  margin: 0 auto;
}

/* metaverse — service rows: artwork on the left, copy and bullets on the right */
.mv-serv { background: #f7f9fc; }

.mv-rows { display: flex; flex-direction: column; gap: 2.5rem; }

/* each row sticks and the next scrolls over it — same stacked deck as the home page work cards */
.mv-row {
  position: sticky;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 1.6rem;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(27, 58, 143, 0.35);
  box-shadow: 0 20px 50px rgba(20, 30, 70, 0.1);
}

.mv-row:nth-child(1) { top: 90px; }
.mv-row:nth-child(2) { top: 106px; }
.mv-row:nth-child(3) { top: 122px; }
.mv-row:nth-child(4) { top: 138px; }
.mv-row:nth-child(5) { top: 154px; }
.mv-row:nth-child(6) { top: 170px; }
.mv-row:nth-child(7) { top: 186px; }
.mv-row:nth-child(8) { top: 202px; }

.mv-row-img {
  flex: 0 0 40%;
  width: 40%;
  height: 340px;
  object-fit: cover;
  border-radius: 18px;
}

.mv-row-body { flex: 1; padding: 0.4rem 0.8rem 0.4rem 0; }
.mv-row-title { color: #15171c; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.7rem; }
.mv-row-text { color: #54585f; font-size: 0.96rem; line-height: 1.7; margin-bottom: 1rem; }

.mv-row-list { list-style: none; padding: 0; margin: 0; }

.mv-row-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.4rem;
  color: #54585f;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* drawn tick keeps the bullet independent of the icon webfont */
.mv-row-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.2rem;
  width: 5px;
  height: 10px;
  border: solid #1b55b8;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* metaverse — platform feature cards */
.mv-feat { background: #ffffff; }

.mv-feat-card {
  height: 100%;
  padding: 1.8rem 1.6rem;
  text-align: center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mv-feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 18px 36px rgba(20, 30, 70, 0.09);
}

.mv-feat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.4rem;
}

.mv-feat-title { color: #0e1736; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.6rem; }
.mv-feat-text { color: #54585f; font-size: 0.9rem; line-height: 1.65; margin: 0; }

/* metaverse — end-to-end process */
.mv-proc { background: #f7f9fc; }

.mv-proc-heading {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.mv-proc-lead { color: #54585f; font-size: 0.95rem; line-height: 1.75; max-width: 760px; margin: 0; }

.mv-proc-steps { display: flex; flex-direction: column; }

/* dot per step, with the connector drawn from the dot down to the next one */
.mv-proc-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding-bottom: 1.9rem;
}

.mv-proc-step:last-child { padding-bottom: 0; }

.mv-proc-step::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 21px;
  bottom: 0;
  width: 1px;
  background: rgba(27, 85, 184, 0.35);
}

.mv-proc-step:last-child::before { display: none; }

.mv-proc-ico {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  margin-top: 0.42rem;
  border-radius: 50%;
  background: #1b55b8;
}

.mv-proc-title { color: #15171c; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.35rem; }
.mv-proc-text { color: #54585f; font-size: 0.93rem; line-height: 1.7; margin: 0; max-width: 560px; }

/* the artwork trails the step list instead of scrolling away with it
   (sticky sits on the wrapper — the column stretches to the row height, which is what it sticks within) */
.mv-proc-visual {
  position: sticky;
  top: 110px;
}

.mv-proc-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(20, 30, 70, 0.12);
}

@media (max-width: 991.98px) {
  .mv-proc-visual { position: static; }
}

/* metaverse — why choose us grid (first cell inverted, hairlines between) */
.mv-why { background: #ffffff; }

.mv-why-heading {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mv-why-lead { color: #54585f; font-size: 0.95rem; line-height: 1.75; margin: 0; }

.mv-why-grid {
  border: 1px solid #e2e7f0;
  border-radius: 18px;
  overflow: hidden;
}

.mv-why-cell {
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: #ffffff;
  border-right: 1px solid #e2e7f0;
  border-bottom: 1px solid #e2e7f0;
}

.mv-why-cell--dark {
  background: linear-gradient(160deg, #06214f 0%, #0f3f96 100%);
  border-color: transparent;
}

.mv-why-ico { display: inline-block; margin-bottom: 0.8rem; color: #1b55b8; font-size: 1.3rem; }
.mv-why-title { color: #1b3a8f; font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin-bottom: 0.5rem; }
.mv-why-text { color: #54585f; font-size: 0.88rem; line-height: 1.65; margin: 0; }

.mv-why-cell--dark .mv-why-ico { color: #ffffff; }
.mv-why-cell--dark .mv-why-title { color: #ffffff; }
.mv-why-cell--dark .mv-why-text { color: rgba(255, 255, 255, 0.82); }

@media (max-width: 991.98px) {
  /* drop the sticky stacking on small screens — plain stacked cards */
  .mv-rows { gap: 1.4rem; }
  .mv-row { position: static; flex-direction: column; gap: 1.2rem; padding: 1.2rem; }
  .mv-row-img { flex: 0 0 auto; width: 100%; height: 240px; }
  .mv-row-body { padding: 0 0.3rem 0.4rem; }
  .mv-row-title { font-size: 1.3rem; }
  .mv-proc-img { margin-top: 1.5rem; }
}

@media (max-width: 767.98px) {
  .mv-why-cell { border-right: 0; }
}

@media (max-width: 575.98px) {
  .mv-row { padding: 0.9rem; }
  .mv-row-img { height: 170px; }
  .mv-row-title { font-size: 1.1rem; }
  .mv-feat-card { padding: 1.4rem 1.2rem; }
  .mv-why-cell { padding: 1.3rem 1.2rem; }
}

/* ===================================================================
   Telegram mini game page
   =================================================================== */

.tg-serv { background: #f7f9fc; }

.tg-serv-heading {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.tg-serv-lead { color: #54585f; font-size: 0.95rem; line-height: 1.8; max-width: 1100px; margin: 0; }

.tg-serv-box {
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(20, 30, 70, 0.08);
}

.tg-serv-nav { height: 100%; padding: 1.6rem 1.4rem; background: #ffffff; }

/* active tab is marked with a rule down the inner edge rather than a fill */
.tg-serv-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.4rem 1rem 0.4rem;
  background: transparent;
  border: 0;
  color: #15171c;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.tg-serv-tab i { flex: 0 0 auto; color: #1b55b8; font-size: 1.1rem; }
.tg-serv-tab:hover { color: #1b3a8f; }
.tg-serv-tab.active { color: #1b55b8; }

.tg-serv-tab.active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  background: #1b55b8;
}

.tg-serv-panels {
  position: relative;
  height: 100%;
  padding: 2rem 2.2rem;
  overflow: hidden;
  background: linear-gradient(160deg, #0b3f9e 0%, #0a3486 100%);
}

/* oversized copy of the active icon, washed into the corner */
.tg-serv-mark {
  position: absolute;
  right: 1.2rem;
  bottom: 0.6rem;
  color: #ffffff;
  opacity: 0.12;
  font-size: 7rem;
  line-height: 1;
  pointer-events: none;
}

.tg-serv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.15rem;
}

.tg-serv-title { color: #ffffff; font-weight: 700; font-size: 1.35rem; line-height: 1.3; margin-bottom: 0.8rem; }
.tg-serv-text { color: rgba(255, 255, 255, 0.85); font-size: 0.93rem; line-height: 1.7; margin: 0; }

.tg-serv-list { list-style: none; padding: 0; margin: 0.8rem 0 1rem; }

.tg-serv-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.6;
}

.tg-serv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

/* telegram — why choose us cards */
.tg-why { background: #f7f9fc; }

.tg-why-card {
  height: 100%;
  padding: 1.6rem 1.5rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tg-why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 18px 36px rgba(20, 30, 70, 0.09);
}

/* the first card carries a tinted border so the grid has an entry point */
.tg-why-card--lead {
  border-color: rgba(27, 85, 184, 0.55);
  box-shadow: 0 14px 30px rgba(27, 85, 184, 0.1);
}

.tg-why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.05rem;
}

.tg-why-title { color: #15171c; font-weight: 700; font-size: 1.15rem; line-height: 1.35; margin-bottom: 0.6rem; }
.tg-why-text { color: #54585f; font-size: 0.9rem; line-height: 1.7; margin: 0; }

@media (max-width: 991.98px) {
  .tg-serv-nav { padding: 1.2rem 1.1rem; }
  .tg-serv-tab { padding: 0.85rem 1rem 0.85rem 0.3rem; font-size: 0.93rem; }
  .tg-serv-panels { padding: 1.7rem 1.5rem; }
  .tg-serv-mark { font-size: 5.5rem; }
}

@media (max-width: 575.98px) {
  .tg-serv-title { font-size: 1.15rem; }
  .tg-serv-mark { display: none; }
  .tg-why-card { padding: 1.3rem 1.2rem; }
}

/* telegram — monetisation split: two card columns flanking the artwork */
.tg-mon { background: #ffffff; }

.tg-mon-col { display: flex; flex-direction: column; gap: 1rem; }

.tg-mon-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: #f7f9fc;
  border: 1px solid #e7ebf3;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tg-mon-item:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 14px 30px rgba(20, 30, 70, 0.08);
}

/* the left column mirrors itself so both sets of cards face the artwork */
.tg-mon-col--left .tg-mon-item { flex-direction: row-reverse; }
.tg-mon-col--left .tg-mon-body { text-align: right; }

.tg-mon-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 0.95rem;
}

.tg-mon-title { color: #15171c; font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.tg-mon-text { color: #54585f; font-size: 0.88rem; line-height: 1.65; margin: 0; }

.tg-mon-img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  /* stacked: artwork first and smaller, then both columns reading left-to-right */
  .tg-mon-col--left { margin-top: 1rem; }
  .tg-mon-col--left .tg-mon-item { flex-direction: row; }
  .tg-mon-col--left .tg-mon-body { text-align: left; }
  .tg-mon-img { max-width: 240px; }
}

@media (max-width: 575.98px) {
  .tg-mon-img { max-width: 190px; }
  .tg-mon-item { padding: 0.95rem 1rem; }
}

/* ===================================================================
   Play-to-earn game page
   =================================================================== */

.p2e-sol { background: #f7f9fc; }

.p2e-heading {
  color: #15171c;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.p2e-lead { color: #54585f; font-size: 0.95rem; line-height: 1.75; max-width: 640px; margin: 0; }

/* solution tile: soft card with a washed-out copy of its icon in the corner */
.p2e-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 200px;
  padding: 2rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e7f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.p2e-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 18px 36px rgba(20, 30, 70, 0.09);
}

.p2e-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: #e9f0fb;
  color: #1b55b8;
  font-size: 1.25rem;
}

.p2e-mark {
  position: absolute;
  right: 0.4rem;
  bottom: 0.1rem;
  color: #0e1736;
  opacity: 0.06;
  font-size: 4.6rem;
  line-height: 1;
  pointer-events: none;
}

.p2e-title { color: #0e1736; font-weight: 700; font-size: 1rem; line-height: 1.4; margin: 0; }

/* photo tiles sit in the same grid — scrim keeps the label readable */
.p2e-card--img {
  justify-content: flex-end;
  border: 0;
  background-size: cover;
  background-position: center;
}

.p2e-card--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0.25) 0%, rgba(4, 8, 20, 0.55) 60%, rgba(4, 8, 20, 0.8) 100%);
}

.p2e-card--img .p2e-title { position: relative; z-index: 1; color: #ffffff; }

@media (max-width: 575.98px) {
  .p2e-card { min-height: 170px; padding: 1.6rem 1.1rem 1.3rem; }
  .p2e-ico { width: 46px; height: 46px; margin-bottom: 0.9rem; }
  .p2e-mark { font-size: 3.6rem; }
}

/* ===================== News (timeline feed) =====================
   Deliberately unlike the blog listing: no thumbnails, no card grid and no
   sidebar — announcements hang off a dated vertical spine so the page reads as a
   changelog rather than a set of articles. */
/* A single reading column: the toolbar, feed and subscribe strip all share this
   width so nothing floats off on its own at wide viewports. */
.news-inner {
  max-width: 880px;
  margin: 0 auto;
}

.news-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.news-search {
  position: relative;
  flex: 0 0 280px;
  max-width: 100%;
}

.news-search .bi {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa1ad;
  font-size: 0.95rem;
}

.news-search input {
  width: 100%;
  border: 1px solid #e3e8f2;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.62rem 1rem 0.62rem 2.5rem;
  font-size: 0.9rem;
  color: #0e1736;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-search input:focus {
  border-color: rgba(27, 85, 184, 0.55);
  box-shadow: 0 0 0 4px rgba(27, 85, 184, 0.1);
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-filter {
  border: 1px solid #e3e8f2;
  background: #ffffff;
  color: #54585f;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.news-filter:hover {
  color: var(--mega-blue);
  border-color: rgba(27, 85, 184, 0.45);
}

.news-filter.active {
  background: #0f1b33;
  border-color: #0f1b33;
  color: #ffffff;
}

/* ----- the feed ----- */

.news-year {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.6rem;
  color: #0f1b33;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.news-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6ebf5;
}

.news-year + .news-item {
  margin-top: 0;
}

.news-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.5rem;
}

.news-date {
  text-align: right;
  padding-top: 0.1rem;
}

.news-date-day {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: #0f1b33;
}

.news-date-mon {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8a94a8;
}

/* The spine is a border on the body column, so it stays continuous between
   items no matter how tall each one is. */
.news-body {
  position: relative;
  border-left: 2px solid #e6ebf5;
  padding: 0 0 2.1rem 1.9rem;
}

.news-body::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--mega-blue);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.news-item:last-child .news-body {
  border-left-color: transparent;
  padding-bottom: 0;
}

.news-item:hover .news-body::before {
  transform: scale(1.2);
  border-color: #0f1b33;
}

.news-tag {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.7rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.news-tag--product { background: #e8f0ff; color: #1b55b8; }
.news-tag--company { background: #e6f6ed; color: #1c7a4a; }
.news-tag--events  { background: #fdf1e4; color: #a75d10; }

.news-title {
  margin: 0 0 0.5rem;
  color: #0e1736;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.35;
}

.news-text {
  margin: 0;
  color: #54585f;
  font-size: 0.95rem;
  line-height: 1.65;
}

.news-item.is-hidden,
.news-year.is-hidden { display: none; }

.news-empty { display: none; color: #54585f; }
.news-empty.is-visible { display: block; }

/* ----- slim subscribe strip (replaces the blog's tall sidebar card) ----- */
.news-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1rem;
  padding: 1.5rem 1.8rem;
  border-radius: 18px;
  background: linear-gradient(120deg, #0f1b33, #1b55b8);
  color: #ffffff;
}

.news-sub-copy { flex: 1 1 260px; }

.news-sub-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.news-sub-text {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.news-sub-form {
  display: flex;
  flex: 1 1 340px;
  gap: 0.6rem;
}

.news-sub-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  color: #ffffff;
  outline: none;
}

.news-sub-form input::placeholder { color: rgba(255, 255, 255, 0.6); }

.news-sub-form input:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
}

.news-sub-form button {
  border: none;
  border-radius: 999px;
  background: #ffffff;
  color: #0f1b33;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.news-sub-form button:hover { transform: translateY(-1px); }

@media (max-width: 767.98px) {
  .news-item {
    grid-template-columns: 54px 1fr;
    gap: 1rem;
  }
  .news-date-day { font-size: 1.2rem; }
  .news-body { padding-left: 1.4rem; padding-bottom: 1.7rem; }
  .news-title { font-size: 1.05rem; }
  .news-text { font-size: 0.9rem; }
  .news-sub { padding: 1.3rem 1.2rem; }
  .news-sub-form { flex-direction: column; }
  .news-sub-form button { width: 100%; }
}

/* ===================== Partner with Us =====================
   Sales page rather than a service page: the models, the benefits and the
   application all sit on one scroll, and the form section is dark so it can
   reuse the contact page's .contact-card / .cf-* form as-is. */
.ptn-hero { padding: 6rem 0 4.5rem; }

/* darker on the left than .contact-banner-overlay, plus a blue corner glow so
   the hero doesn't read as a straight copy of the contact banner */
.ptn-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 110% at 100% 0%, rgba(27, 85, 184, 0.55) 0%, rgba(10, 42, 110, 0.25) 35%, rgba(4, 6, 12, 0) 62%),
    linear-gradient(90deg, rgba(4, 6, 12, 0.94) 0%, rgba(4, 6, 12, 0.86) 50%, rgba(4, 6, 12, 0.62) 100%);
}

/* small caps pill above a section heading — shared by the partner, why-us,
   process and life pages */
.sec-eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* same pill on a light section */
.sec-eyebrow--dark {
  border-color: rgba(27, 85, 184, 0.3);
  background: rgba(27, 85, 184, 0.08);
  color: var(--mega-blue);
}

.ptn-hero-sub {
  margin: 0 0 2rem;
  max-width: 640px;
}

.ptn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

/* secondary action beside the pill button — text only, so the two don't compete */
.sec-btn-ghost {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.55rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sec-btn-ghost:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.ptn-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ptn-stat-num {
  display: block;
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
}

.ptn-stat-label {
  display: block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
}

/* ----- partnership models ----- */
.ptn-models { background: #ffffff; }

.ptn-model {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 2.2rem 2rem;
  border: 1px solid #e6ebf5;
  border-radius: 20px;
  background: #ffffff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ptn-model:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 85, 184, 0.4);
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.09);
}

/* oversized index washed into the corner, same watermark idiom as the other card grids */
.ptn-model-num {
  position: absolute;
  top: 0.6rem;
  right: 1.2rem;
  color: rgba(14, 23, 54, 0.05);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.ptn-model-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: rgba(27, 85, 184, 0.1);
  color: var(--mega-blue);
  font-size: 1.35rem;
}

.ptn-model-title {
  margin: 0 0 0.7rem;
  color: #0e1736;
  font-size: 1.28rem;
  font-weight: 700;
}

.ptn-model-text {
  margin: 0 0 1.2rem;
  color: #54585f;
  font-size: 0.96rem;
  line-height: 1.65;
}

.ptn-model-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.ptn-model-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.55;
}

/* drawn tick so the bullet doesn't depend on the icon webfont loading */
.ptn-model-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 6px;
  height: 11px;
  border: solid var(--mega-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* footer line is separated by a hairline so the "best for" reads as a verdict */
.ptn-model-best {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px dashed #e0e6f2;
  color: #54585f;
  font-size: 0.88rem;
  line-height: 1.5;
}

.ptn-model-best strong { color: #0e1736; }

/* ----- why partner with us ----- */
.ptn-why { background: #f6f8fc; }

.ptn-why-lead {
  color: #54585f;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.ptn-why-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mega-blue);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.ptn-why-link i { transition: transform 0.2s ease; }
.ptn-why-link:hover i { transform: translateX(4px); }

.ptn-why-card {
  height: 100%;
  padding: 1.7rem 1.6rem;
  border: 1px solid #e6ebf5;
  border-radius: 16px;
  background: #ffffff;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.ptn-why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(27, 85, 184, 0.35);
}

.ptn-why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: #0f1b33;
  color: #ffffff;
  font-size: 1.1rem;
}

.ptn-why-title {
  margin: 0 0 0.5rem;
  color: #0e1736;
  font-size: 1.05rem;
  font-weight: 700;
}

.ptn-why-text {
  margin: 0;
  color: #54585f;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ----- how it works ----- */
.ptn-steps { background: #ffffff; }

.ptn-step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.ptn-step { position: relative; }

.ptn-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--mega-blue);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
}

/* dashed leader from each number across to the next one */
@media (min-width: 992px) {
  .ptn-step::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 66px;
    right: -1.8rem;
    height: 2px;
    background: repeating-linear-gradient(90deg, #cfd9ea 0 6px, transparent 6px 12px);
  }
  .ptn-step:last-child::after { display: none; }
}

.ptn-step-title {
  margin: 0 0 0.5rem;
  color: #0e1736;
  font-size: 1.1rem;
  font-weight: 700;
}

.ptn-step-text {
  margin: 0;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ----- who we partner with ----- */
.ptn-who { background: #ffffff; }

.ptn-who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.ptn-who-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
  background: #f9fbfe;
  color: #0e1736;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.4;
}

.ptn-who-item i {
  flex: 0 0 auto;
  color: var(--mega-blue);
  font-size: 1.25rem;
}

/* ----- application form -----
   Dark section so the reused .contact-card (white text on a translucent panel)
   lands the same way it does on the contact page. */
.ptn-apply {
  position: relative;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(27, 85, 184, 0.4) 0%, rgba(10, 42, 110, 0.15) 40%, rgba(6, 9, 18, 0) 70%),
    linear-gradient(160deg, #0b1226 0%, #06090f 100%);
}

.ptn-apply .contact-banner-title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }

/* the select can't use the floating label (it is never empty-looking), so it
   carries its own resting colour instead */
.cf-select {
  appearance: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 14px;
  padding-right: 1.6rem;
}

.cf-select:valid { color: #ffffff; }
.cf-select option { color: #0e1736; background: #ffffff; }

@media (max-width: 991.98px) {
  .ptn-hero { padding: 4.5rem 0 3.2rem; }
  .ptn-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    gap: 1.4rem;
  }
  .ptn-model { padding: 1.7rem 1.5rem; }
  .ptn-step-row { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .ptn-who-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .ptn-hero { padding: 3.4rem 0 2.6rem; }
  .ptn-hero-sub { font-size: 0.95rem; }
  .ptn-hero-actions { gap: 0.5rem; }
  .sec-btn-ghost { padding: 0.5rem 0; }
  .ptn-model { padding: 1.4rem 1.25rem; }
  .ptn-model-num { font-size: 3.2rem; }
  .ptn-model-title { font-size: 1.15rem; }
  .ptn-why-card { padding: 1.3rem 1.2rem; }
  .ptn-step-row { grid-template-columns: 1fr; gap: 1.3rem; }
  .ptn-step-num { width: 44px; height: 44px; font-size: 1rem; margin-bottom: 0.8rem; }
  .ptn-who-grid { grid-template-columns: 1fr; }
}

/* ===================== Shared centred page hero =====================
   Used by why-us, our-process and life-at-its. Sits on .contact-banner for the
   background handling and only adds the scrim, width and button row. */
.sec-hero { padding: 3.5rem 0 3.5rem; }

/* even scrim rather than the contact page's left-weighted one, because the copy
   is centred here */
.sec-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(27, 85, 184, 0.32) 0%, rgba(4, 6, 12, 0) 60%),
    linear-gradient(180deg, rgba(4, 6, 12, 0.9) 0%, rgba(4, 6, 12, 0.82) 55%, rgba(4, 6, 12, 0.9) 100%);
}

.sec-hero-sub {
  max-width: 700px;
  margin: 0 auto 2.2rem;
}

/* that 2.2rem exists to separate the copy from the button row; with no buttons
   it would stack on the section padding and unbalance the banner */
.sec-hero-sub:last-child { margin-bottom: 0; }

/* .sec-hero-actions was the centred button row under the banner copy. Removed
   with the buttons themselves — it was: display:flex; flex-wrap:wrap;
   align-items:center; justify-content:center; gap:0.9rem. */

/* ===================== Why Us =====================
   Proof-led page: numbers, then differentiators, then a like-for-like
   comparison, then the commitments that back all of it. */
/* deliberately no artwork behind this band — the numbers are the content, and a
   photo or watermark under them only fought with the text */
.wu-stats {
  position: relative;
  padding: 3.4rem 0;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(27, 85, 184, 0.35) 0%, rgba(6, 9, 18, 0) 65%),
    linear-gradient(90deg, #0b1226 0%, #060910 100%);
}

.wu-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

/* hairline between stats instead of boxes, so the band stays a band */
.wu-stat + .wu-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 1.6rem;
}

.wu-stat-num {
  display: block;
  color: #ffffff;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}

.wu-stat-label {
  display: block;
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wu-reasons { background: #ffffff; }

/* one connected block divided by hairlines rather than six separate cards */
.wu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e6ebf5;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.wu-reason {
  padding: 2rem 1.8rem;
  border-right: 1px solid #e6ebf5;
  border-bottom: 1px solid #e6ebf5;
  transition: background 0.25s ease;
}

/* drop the outer edges so the block reads as one panel */
.wu-reason:nth-child(3n) { border-right: none; }
.wu-reason:nth-last-child(-n + 3) { border-bottom: none; }

.wu-reason:hover { background: #f7f9fd; }

.wu-reason-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: rgba(27, 85, 184, 0.1);
  color: var(--mega-blue);
  font-size: 1.3rem;
}

.wu-reason-title {
  margin: 0 0 0.6rem;
  color: #0e1736;
  font-size: 1.12rem;
  font-weight: 700;
}

.wu-reason-text {
  margin: 0;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ----- comparison grid ----- */
.wu-compare { background: #f6f8fc; }

.wu-table {
  border: 1px solid #e3e8f2;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.wu-table-head,
.wu-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
}

.wu-table-head { background: #0f1b33; }

.wu-th {
  padding: 1rem 1.4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wu-th--us { color: #ffffff; background: var(--mega-blue); }

.wu-row + .wu-row { border-top: 1px solid #eef1f7; }

.wu-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.1rem 1.4rem;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.5;
}

.wu-cell--topic {
  color: #0e1736;
  font-weight: 700;
}

.wu-cell--them i { color: #b8bfcc; }

/* our column is tinted the whole way down so the eye lands on it */
.wu-cell--us {
  background: rgba(27, 85, 184, 0.05);
  color: #0e1736;
}

.wu-cell--us i { color: var(--mega-blue); }

.wu-cell i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  font-size: 0.95rem;
}

/* ----- commitments (dark) ----- */
.wu-promise {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(27, 85, 184, 0.35) 0%, rgba(6, 9, 18, 0) 60%),
    linear-gradient(160deg, #0b1226 0%, #06090f 100%);
}

.wu-promise-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }

.wu-promise-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

.wu-promise-card {
  height: 100%;
  padding: 1.8rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.wu-promise-card:hover {
  border-color: rgba(110, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.wu-promise-num {
  display: block;
  margin-bottom: 0.7rem;
  color: #6ea8ff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.wu-promise-card-title {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}

.wu-promise-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

.wu-voices { background: #f6f8fc; }

@media (max-width: 991.98px) {
  .sec-hero { padding: 2.6rem 0 2.6rem; }
  .wu-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .wu-stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .wu-grid { grid-template-columns: repeat(2, 1fr); }
  .wu-reason:nth-child(3n) { border-right: 1px solid #e6ebf5; }
  .wu-reason:nth-child(2n) { border-right: none; }
  .wu-reason:nth-last-child(-n + 3) { border-bottom: 1px solid #e6ebf5; }
  .wu-reason:nth-last-child(-n + 2) { border-bottom: none; }
  .wu-promise-card { padding: 1.4rem 1.3rem; }
}

/* stacked comparison: the head row goes away and each cell names its own side */
@media (max-width: 767.98px) {
  .wu-table-head { display: none; }
  .wu-row { display: block; padding: 0.4rem 0 0.9rem; }
  .wu-cell { padding: 0.5rem 1.1rem; }
  .wu-cell--topic { padding-top: 1rem; font-size: 1rem; }
  .wu-cell--them::before,
  .wu-cell--us::before {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a94a8;
  }
  .wu-cell--them::before { content: "Usual"; }
  .wu-cell--us::before { content: "Us"; color: var(--mega-blue); }
  .wu-cell--us { background: transparent; }
}

@media (max-width: 575.98px) {
  .wu-grid { grid-template-columns: 1fr; }
  .wu-reason { border-right: none !important; border-bottom: 1px solid #e6ebf5 !important; padding: 1.5rem 1.3rem; }
  .wu-reason:last-child { border-bottom: none !important; }
  .wu-stat-grid { grid-template-columns: 1fr; }
  .wu-stat + .wu-stat { border-left: none; padding-left: 0; }
}

/* ===================== Our Process =====================
   The page is one long timeline, so everything around it stays low-contrast —
   the phases are the only thing with weight. */
.proc-principles { background: #f6f8fc; }

.proc-principle-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.proc-principle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.proc-principle-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e3e8f2;
  color: var(--mega-blue);
  font-size: 1.15rem;
}

.proc-principle-title {
  margin: 0 0 0.3rem;
  color: #0e1736;
  font-size: 1.02rem;
  font-weight: 700;
}

.proc-principle-text {
  margin: 0;
  color: #54585f;
  font-size: 0.9rem;
  line-height: 1.55;
}

.proc-phases { background: #ffffff; }

.proc-list {
  max-width: 980px;
  margin: 0 auto;
}

.proc-phase {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
}

.proc-phase-side {
  text-align: right;
  padding-top: 0.1rem;
}

.proc-phase-num {
  display: block;
  color: var(--mega-blue);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.proc-phase-time {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: #f0f4fb;
  color: #54585f;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* the spine is a border on the body column so it stays continuous however tall
   each phase turns out to be */
.proc-phase-body {
  position: relative;
  border-left: 2px solid #e6ebf5;
  padding: 0 0 2.6rem 2.2rem;
}

.proc-phase-body::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.3rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--mega-blue);
}

.proc-phase:last-child .proc-phase-body {
  border-left-color: transparent;
  padding-bottom: 0;
}

.proc-phase-title {
  margin: 0 0 0.6rem;
  color: #0e1736;
  font-size: 1.25rem;
  font-weight: 700;
}

.proc-phase-text {
  margin: 0 0 1.1rem;
  color: #54585f;
  font-size: 0.96rem;
  line-height: 1.7;
}

.proc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* what you walk away with at the end of the phase */
.proc-chip {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #e3e8f2;
  background: #f9fbfe;
  color: #0e1736;
  font-size: 0.8rem;
  font-weight: 600;
}

.proc-models { background: #f6f8fc; }

.proc-model {
  position: relative;
  height: 100%;
  padding: 2rem 1.8rem;
  border: 1px solid #e6ebf5;
  border-radius: 20px;
  background: #ffffff;
}

/* the middle option carries a blue edge so the grid has a recommended path */
.proc-model--featured {
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
}

.proc-model-tag {
  position: absolute;
  top: -0.75rem;
  left: 1.8rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--mega-blue);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.proc-model-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: #0f1b33;
  color: #ffffff;
  font-size: 1.2rem;
}

.proc-model-title {
  margin: 0 0 0.6rem;
  color: #0e1736;
  font-size: 1.2rem;
  font-weight: 700;
}

.proc-model-text {
  margin: 0 0 1.1rem;
  color: #54585f;
  font-size: 0.94rem;
  line-height: 1.65;
}

.proc-model-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.proc-model-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #54585f;
  font-size: 0.9rem;
}

.proc-model-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 6px;
  height: 11px;
  border: solid var(--mega-blue);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.proc-quality { background: #ffffff; }

.proc-quality-lead {
  color: #54585f;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.proc-gate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.proc-gate {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
  background: #f9fbfe;
  color: #0e1736;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.4;
}

.proc-gate i {
  flex: 0 0 auto;
  color: var(--mega-blue);
  font-size: 1.2rem;
}

.proc-tools { background: #ffffff; }

.proc-tool-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

/* brand mark sits inside the pill; the logos are colour SVGs so the row carries
   its own palette and the pill itself stays neutral */
.proc-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.2rem 0.5rem 0.85rem;
  border: 1px solid #e3e8f2;
  border-radius: 999px;
  background: #ffffff;
  color: #0e1736;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.proc-tool img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.proc-tool:hover {
  transform: translateY(-2px);
  border-color: rgba(27, 85, 184, 0.45);
  box-shadow: 0 8px 20px rgba(14, 23, 54, 0.07);
}

@media (max-width: 991.98px) {
  .proc-principle-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .proc-phase { grid-template-columns: 84px 1fr; gap: 1.2rem; }
  .proc-phase-num { font-size: 1.5rem; }
  .proc-phase-body { padding-left: 1.6rem; padding-bottom: 2.1rem; }
  .proc-phase-title { font-size: 1.12rem; }
  .proc-model { padding: 1.6rem 1.4rem; }
  .proc-gate-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .proc-phase { grid-template-columns: 64px 1fr; gap: 0.9rem; }
  .proc-phase-num { font-size: 1.3rem; }
  .proc-phase-time { font-size: 0.68rem; padding: 0.15rem 0.45rem; }
  .proc-phase-body { padding-left: 1.3rem; }
  .proc-phase-text { font-size: 0.92rem; }
  .proc-chip { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
}

/* ===================== Life at ITS =====================
   Culture page — photography carries it, so the surrounding blocks are quiet
   and the gallery is the only place with scale. */
.life-band {
  background: #0f1b33;
  padding: 2.4rem 0;
}

.life-band-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.life-band-num {
  display: block;
  color: #ffffff;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
}

.life-band-label {
  display: block;
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.life-values { background: #ffffff; }

.life-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.life-value {
  padding: 1.8rem 1.6rem;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  background: #ffffff;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.life-value:hover {
  transform: translateY(-3px);
  border-color: rgba(27, 85, 184, 0.35);
}

.life-value-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(27, 85, 184, 0.1);
  color: var(--mega-blue);
  font-size: 1.2rem;
}

.life-value-title {
  margin: 0 0 0.5rem;
  color: #0e1736;
  font-size: 1.08rem;
  font-weight: 700;
}

.life-value-text {
  margin: 0;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ----- gallery: one tall lead tile, four square ones beside it ----- */
.life-gallery { background: #ffffff; }

.life-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 195px;
  gap: 1rem;
}

.life-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0f1b33;
}

.life-tile--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.life-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.life-tile:hover img { transform: scale(1.05); }

.life-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;
  background: linear-gradient(180deg, rgba(4, 8, 20, 0) 0%, rgba(4, 8, 20, 0.8) 100%);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
}

.life-perks { background: #f6f8fc; }

.life-perk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.life-perk {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 1.2rem 1.2rem;
  border: 1px solid #e6ebf5;
  border-radius: 14px;
  background: #ffffff;
  color: #0e1736;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.life-perk i {
  flex: 0 0 auto;
  color: var(--mega-blue);
  font-size: 1.25rem;
}

/* ----- team quotes ----- */
.life-voices { background: #ffffff; }

.life-quote {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 2rem 1.7rem 1.6rem;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  background: #f9fbfe;
  display: flex;
  flex-direction: column;
}

.life-quote-mark {
  position: absolute;
  top: 1rem;
  right: 1.3rem;
  color: rgba(27, 85, 184, 0.16);
  font-size: 2.6rem;
  line-height: 1;
}

.life-quote-text {
  flex: 1;
  margin: 0 0 1.4rem;
  color: #3c4250;
  font-size: 0.96rem;
  line-height: 1.7;
}

.life-quote-who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e6ebf5;
}

.life-quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
}

.life-quote-name {
  display: block;
  color: #0e1736;
  font-size: 0.95rem;
  font-weight: 700;
}

.life-quote-role {
  display: block;
  color: #8a94a8;
  font-size: 0.82rem;
}

.life-hiring { background: #ffffff; }

@media (max-width: 991.98px) {
  .life-band-row { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .life-value-grid { grid-template-columns: repeat(2, 1fr); }
  .life-perk-grid { grid-template-columns: repeat(2, 1fr); }
  .life-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; }
  .life-tile--wide { grid-row: span 1; }
  .life-value { padding: 1.5rem 1.3rem; }
}

@media (max-width: 575.98px) {
  .life-value-grid { grid-template-columns: 1fr; }
  .life-perk-grid { grid-template-columns: 1fr; }
  .life-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .life-tile--wide { grid-column: span 1; }
  .life-quote { padding: 1.6rem 1.3rem 1.3rem; }
}

/* ===================== Service pages (shared) =====================
   One layout shared by every page under the Services menu, so a new service
   only needs content. Reuses .crm-hero for the hero and .faq-accordion for the
   questions; everything between them lives here. */
.svc-usps {
  background: #0b1428;
  padding: 1.9rem 0;
}

.svc-usp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.svc-usp + .svc-usp {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 1.4rem;
}

.svc-usp-num {
  display: block;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.svc-usp-label {
  display: block;
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.87rem;
  line-height: 1.5;
}

/* ----- what we build ----- */
.svc-build { background: #ffffff; }

.svc-card {
  height: 100%;
  padding: 1.9rem 1.6rem;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  background: #ffffff;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(27, 85, 184, 0.4);
  box-shadow: 0 18px 40px rgba(14, 23, 54, 0.08);
}

.svc-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: rgba(27, 85, 184, 0.1);
  color: var(--mega-blue);
  font-size: 1.3rem;
}

.svc-card-title {
  margin: 0 0 0.55rem;
  color: #0e1736;
  font-size: 1.1rem;
  font-weight: 700;
}

.svc-card-text {
  margin: 0;
  color: #54585f;
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ----- product mockup artwork -----
   Each page ships a screenshot of the thing it describes, rendered on a
   transparent canvas with its own shadow. The accent halo behind it is CSS so
   it stays crisp at any size and adds nothing to the image weight. */
.svc-art {
  position: relative;
  display: block;
  max-width: 620px;
  margin: 0 auto;
}

.svc-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  padding-bottom: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--art-glow, #2563eb) 0%, rgba(0, 0, 0, 0) 70%);
  opacity: 0.3;
  pointer-events: none;
}

/* on the light section the halo would muddy the screenshot, so it barely shows */
.svc-art--soft::before { opacity: 0.1; }

.svc-art-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

/* the hero column is narrow, so on wide screens the mockup is allowed to run
   slightly past it — the same way a real product shot bleeds off the edge */
@media (min-width: 1200px) {
  .crm-hero .svc-art { max-width: 660px; margin-right: -60px; }
}

/* ----- approach split ----- */
.svc-why { background: #f6f8fc; }

.svc-why-text {
  color: #54585f;
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* ----- capability list: two columns divided by hairlines ----- */
.svc-features { background: #ffffff; }

.svc-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid #e6ebf5;
  border-radius: 20px;
  overflow: hidden;
}

.svc-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.7rem 1.6rem;
  border-right: 1px solid #e6ebf5;
  border-bottom: 1px solid #e6ebf5;
}

.svc-feature:nth-child(2n) { border-right: none; }
.svc-feature:nth-last-child(-n + 2) { border-bottom: none; }

.svc-feature-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #0f1b33;
  color: #ffffff;
  font-size: 1.1rem;
}

.svc-feature-title {
  margin: 0 0 0.35rem;
  color: #0e1736;
  font-size: 1.02rem;
  font-weight: 700;
}

.svc-feature-text {
  margin: 0;
  color: #54585f;
  font-size: 0.91rem;
  line-height: 1.6;
}

/* ----- process ----- */
.svc-process { background: #f6f8fc; }

.svc-step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.svc-step {
  position: relative;
  padding: 1.7rem 1.4rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e6ebf5;
}

.svc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--mega-blue);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.svc-step-title {
  margin: 0 0 0.45rem;
  color: #0e1736;
  font-size: 1.05rem;
  font-weight: 700;
}

.svc-step-text {
  margin: 0;
  color: #54585f;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ----- closing CTA: gradient rather than a photo, so no service page has to
   borrow imagery from another ----- */
.svc-cta {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 3rem;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(27, 85, 184, 0.55) 0%, rgba(10, 42, 110, 0.25) 38%, rgba(4, 6, 12, 0) 70%),
    linear-gradient(120deg, #0b1226 0%, #06090f 60%, #0a1733 100%);
}

/* faint grid, same texture as the hero, so the two bookend the page */
.svc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 90% at 80% 30%, #000 0%, transparent 78%);
}

.svc-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

/* centred variant, matching the CTA on the hand-built service pages */
.svc-cta--center { text-align: center; }

.svc-cta--center .svc-cta-inner {
  max-width: 760px;
  margin: 0 auto;
}

.svc-cta--center::before {
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(80% 100% at 50% 0%, #000 0%, transparent 78%);
}

@media (max-width: 991.98px) {
  .svc-usp-row { grid-template-columns: 1fr; gap: 1.1rem; }
  .svc-usp + .svc-usp { border-left: none; padding-left: 0; }
  .svc-feature-grid { grid-template-columns: 1fr; }
  .svc-feature { border-right: none !important; }
  .svc-feature:nth-last-child(-n + 2) { border-bottom: 1px solid #e6ebf5; }
  .svc-feature:last-child { border-bottom: none; }
  .svc-step-row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .svc-cta { padding: 2.2rem 1.6rem; }
}

@media (max-width: 575.98px) {
  .svc-card { padding: 1.5rem 1.3rem; }
  .svc-feature { padding: 1.4rem 1.2rem; gap: 0.85rem; }
  .svc-step-row { grid-template-columns: 1fr; }
  .svc-step { padding: 1.4rem 1.2rem; }
  .svc-cta { padding: 1.8rem 1.3rem; }
}

/* ===================== Technologies =====================
   A reference page rather than a pitch: every entry from the stack list, grouped
   the way the team actually reaches for them. */

/* The page opens straight into its content, so the title block does the work a
   hero banner would normally do. */
.tech-intro {
  max-width: 820px;
  margin: 0 0 3rem;
}

.tech-intro-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem;
}

.tech-intro-sub {
  color: #5c6472;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

/* one block per category; the offset keeps a linked-to heading clear of the
   sticky site header */
.tech-cat {
  scroll-margin-top: 96px;
}

.tech-cat + .tech-cat {
  margin-top: 3.2rem;
}

.tech-cat-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.tech-cat-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a2a6e, #1b55b8);
  color: #ffffff;
  font-size: 1.4rem;
  box-shadow: 0 10px 24px rgba(27, 58, 143, 0.28);
}

.tech-cat-title {
  color: #15171c;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  margin: 0;
}

.tech-cat-count {
  color: #6f7684;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.15rem 0 0;
}

/* the only copy on the page — what the group covers and how we choose within it */
.tech-cat-desc {
  max-width: 920px;
  color: #5c6472;
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 1.5rem;
}

/* Sized off the longest name rather than a fixed column count, so the grid keeps
   its shape whether a category holds ten entries or eighteen. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 0.9rem;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1px solid #eaeff8;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 30, 70, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tech-item:hover {
  transform: translateY(-5px);
  border-color: rgba(27, 58, 143, 0.35);
  box-shadow: 0 18px 38px rgba(20, 30, 70, 0.14);
}

.tech-logo {
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f6fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-logo img {
  width: auto;
  height: auto;
  max-width: 62px;
  max-height: 26px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.tech-item:hover .tech-logo img {
  transform: scale(1.1);
}

/* A dozen of these brands have no mark in any icon set we can reach, so they
   carry their initials instead of a borrowed or broken logo. */
.tech-logo--mono {
  width: 44px;
  padding: 0;
  color: #1b55b8;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.tech-name {
  color: #2b2f36;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 575.98px) {
  .tech-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.7rem;
  }
  .tech-item {
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
  }
  .tech-logo {
    min-width: 38px;
    height: 38px;
    padding: 0 7px;
  }
  .tech-logo--mono {
    width: 38px;
    font-size: 0.85rem;
  }
  .tech-logo img {
    max-width: 52px;
    max-height: 22px;
  }
  .tech-name {
    font-size: 0.8rem;
  }
  .tech-cat-desc {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
  }
  .tech-intro {
    margin-bottom: 2.2rem;
  }
  .tech-intro-sub {
    font-size: 0.92rem;
  }
  .tech-cat-ico {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.15rem;
  }
  .tech-cat + .tech-cat {
    margin-top: 2.4rem;
  }
}

/* Blog cards — shared by /blogs index and the BlogList PageBuilder block. */
.blog-card-grid .blog-card {
    display: flex;
    flex-direction: column;
    background: #f4f2f280;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.blog-card-grid .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
}

.blog-card-media {
    overflow: hidden;
    border-radius: 1rem;
    margin: .75rem .75rem 0;
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%);
    position: relative;
}

.blog-card-media_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .35s ease;
}

.blog-card:hover .blog-card-media_image {
    transform: scale(1.04);
}

.blog-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .35);
    font-size: 3.5rem;
}

.blog-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blog-card-date {
    display: inline-block;
    background: #e53935;
    color: #fff;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .9rem;
}

.blog-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1f2e;
    margin: 0 0 .65rem;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-card-title {
    color: #e53935;
}

.blog-card-excerpt {
    color: #475569;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-category {
    display: inline-block;
    margin-top: auto;
    padding: .2rem .65rem;
    background: #fef3c7;
    color: #92400e;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Pagination — used under .blog-card-grid. */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.blog-pagination-page,
.blog-pagination-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .65rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.blog-pagination-page:hover,
.blog-pagination-arrow:hover {
    background: #e53935;
    color: #fff;
    transform: translateY(-1px);
}

.blog-pagination-page.active {
    background: #000;
    color: #fff;
    box-shadow: 0 6px 14px rgba(217, 119, 6, .28);
}

.blog-pagination-arrow.disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    color: #94a3b8;
}

.blog-pagination-arrow i {
    font-size: 1rem;
}

.blog-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.5rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .1em;
}

/* Staggered entrance — replays on every SSR render. */
.blog-card-grid .blog-card-cell {
    animation: blogCardEnter .75s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.blog-pagination {
    animation: blogPaginationEnter .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: 250ms;
}
.breadcrumb-item a {
  color: #e53935;
}
@keyframes blogCardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
        clip-path: inset(0 100% 0 0 round 1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0 round 1rem);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .blog-card-grid .blog-card-cell,
    .blog-pagination { animation: none; }
    .blog-card-grid .blog-card-cell { clip-path: none; }
}


.btn_style {color: #fff; position: relative; font-weight: 500; background:#e53935; background-size: 200% 100%; text-decoration: none; z-index: 1; border-radius: 30px; text-align: center; display: inline-block; padding: 10px 40px;}
.btn_style:hover{background:#000; color: #fff;}

/* ===================== CMS blog article wrapper =====================
   Blog posts render through the CMS's BlogDetail component, which wraps the
   body in its own chrome: a .container, a hero <figure>, a title block, an
   <hr> and a "Back to all blog posts" link. Posts whose body carries this
   design's article markup (.bd-head / .bd-prose) supply all of that
   themselves, so the CMS chrome is hidden and its container flattened to let
   the body's full-width sections lay out. :has() keeps posts written as plain
   text in the admin on the CMS's default article layout. */
.banner-padding:has(+ .bd .bd-prose) { display: none; }

.bd:has(.bd-prose) > .container {
  max-width: none;
  padding: 0 !important;
}

.blog-detail:has(.bd-prose) > .blog-hero,
.blog-detail:has(.bd-prose) > .blog-header,
.blog-detail:has(.bd-prose) > [aria-label="breadcrumb"],
.blog-detail:has(.bd-prose) > hr,
.blog-detail:has(.bd-prose) > .btn_style {
  display: none;
}

/* The CMS's default.css styles h1/h2/p/a/img under .blog-body strongly enough
   to override this design's article markup, so itspectrum.js renames that
   wrapper to .bd-cms-body on design posts. Until it has, the body stays hidden
   rather than flashing the wrong styles; if the script never runs, the
   keyframe reveals it after 2s so the article is still readable. */
@keyframes itsp-article-reveal {
  to {
    visibility: visible;
  }
}

.blog-body:has(.bd-prose) {
  visibility: hidden;
  animation: itsp-article-reveal 0s linear 2s forwards;
}