:root {
  /* palette */
  --navy: #03045e;
  --blue: #0077b6;
  --cyan: #00b4d8;
  --sky: #90e0ef;
  --ice: #caf0f8;
  --white: #ffffff;

  /* roles */
  --bg: #caf0f8;
  --surface: #ffffff;
  --surface-tint: #eaf9fd;
  --text: #03045e;
  --muted: rgba(3, 4, 94, 0.66);
  --muted-2: rgba(3, 4, 94, 0.6);
  --line: rgba(3, 4, 94, 0.1);
  --line-soft: rgba(3, 4, 94, 0.06);

  /* shape */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(3, 4, 94, 0.04);
  --sh-2: 0 2px 8px rgba(3, 4, 94, 0.05), 0 12px 32px rgba(3, 4, 94, 0.05);
  --sh-3: 0 4px 12px rgba(3, 4, 94, 0.06), 0 24px 60px rgba(3, 4, 94, 0.07);

  /* rhythm */
  --pad-sec: 120px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui,
    "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h1 {
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 700;
}
h2 {
  font-size: clamp(32px, 4vw, 48px);
}
h3 {
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -0.024em;
}
h4 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
strong {
  font-weight: 600;
}
:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  z-index: 300;
}
.skip:focus {
  left: 16px;
  top: 16px;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 820px) {
  :root {
    --pad-sec: 80px;
  }
  .wrap,
  .narrow {
    padding: 0 24px;
  }
  body {
    font-size: 16px;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 24px;
  background: var(--surface-tint);
  padding: 8px 16px;
  border-radius: var(--r-pill);
}
.band-navy .eyebrow {
  background: rgba(255, 255, 255, 0.1);
}
.lead {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--muted);
  line-height: 1.65;
  max-width: 58ch;
}
.sec-head {
  max-width: 760px;
  margin-bottom: 72px;
}
.sec-head h2 {
  margin-bottom: 22px;
}
.center {
  text-align: center;
}
.center .sec-head {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 119, 182, 0.22);
}
.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(3, 4, 94, 0.2);
}
.btn-ghost {
  background: transparent;
  border-color: rgba(3, 4, 94, 0.16);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-light {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--sh-2);
}
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-3);
}
.btn-sm {
  padding: 12px 22px;
  font-size: 14.5px;
}
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    text-align: center;
    padding: 15px 24px;
  }
  .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
}
.btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- header ---------- */
/* ==============================
   Header
================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 200;

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-bottom: 1px solid rgba(3, 4, 94, 0.05);
}

.topbar-inner {
  width: min(1410px, calc(100% - 64px));

  min-height: 76px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 32px;
}

/* ==============================
   Brand
================================ */

.brand {
  display: flex;
  align-items: center;

  gap: 14px;

  flex-shrink: 0;

  color: var(--navy);
}

.brand-logo {
  display: block;

  width: 165px;
  height: 34px;

  object-fit: contain;
}

.brand-sub {
  position: relative;

  padding-left: 15px;

  color: var(--muted);

  font-size: 14px;
  font-weight: 400;

  line-height: 1;

  white-space: nowrap;
}

.brand-sub::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 1px;
  height: 24px;

  transform: translateY(-50%);

  background: rgba(3, 4, 94, 0.16);
}

/* ==============================
   Navigation
================================ */

.top-nav {
  flex: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 36px;

  margin-left: 20px;
}

.top-nav a {
  position: relative;

  color: var(--navy);

  font-size: 15px;
  font-weight: 500;

  line-height: 1;

  padding: 10px 2px;

  transition: color 0.2s ease;
}

.top-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 0;
  height: 2px;

  border-radius: 999px;

  background: var(--cyan);

  transition: width 0.2s ease;
}

.top-nav a:hover {
  color: var(--blue);
}

.top-nav a:hover::after {
  width: 100%;
}

/* ==============================
   Header CTA
================================ */

.top-cta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 170px;

  padding: 13px 22px;

  background: var(--blue);

  color: #fff;

  border-radius: 999px;

  box-shadow: 0 6px 18px rgba(0, 119, 182, 0.18);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.top-cta:hover {
  background: var(--navy);

  transform: translateY(-1px);

  box-shadow: 0 10px 26px rgba(3, 4, 94, 0.18);
}

.top-cta span {
  font-size: 18px;
  line-height: 1;
}

/* ==============================
   Tablet
================================ */

@media (max-width: 1050px) {
  .topbar-inner {
    width: min(100% - 40px, 1200px);
  }

  .top-nav {
    gap: 22px;
    margin-left: 10px;
  }

  .brand-sub {
    display: none;
  }

  .top-cta {
    min-width: auto;
  }
}

/* ==============================
   Mobile
================================ */

@media (max-width: 820px) {
  .topbar-inner {
    min-height: 68px;

    width: calc(100% - 32px);

    gap: 16px;
  }

  .brand-logo {
    width: 135px;
    height: auto;
  }

  .top-nav {
    display: none;
  }

  .top-cta {
    margin-left: auto;

    padding: 11px 16px;

    font-size: 13px;

    min-width: auto;
  }
}

@media (max-width: 480px) {
  .topbar-inner {
    width: calc(100% - 24px);
  }

  .brand-logo {
    width: 120px;
  }

  .top-cta {
    padding: 10px 13px;

    font-size: 12px;
  }

  .top-cta span {
    display: none;
  }
}
/* =========================================================
   HERO — REFERENCE DESIGN
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 42px;

  background:
    radial-gradient(
      circle at 88% 42%,
      rgba(144, 224, 239, 0.55) 0%,
      rgba(202, 240, 248, 0.38) 28%,
      transparent 55%
    ),
    linear-gradient(120deg, #ffffff 0%, #ffffff 35%, #caf0f8 100%);
}

/* =========================================================
   WIDER CONTAINER
========================================================= */

.hero .wrap {
  width: min(1428px, calc(100% - 80px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   MAIN HERO GRID
========================================================= */

.hero-grid {
  display: grid;

  /*
     Reference:
     Left = large text area
     Right = image/dashboard composition
  */
  grid-template-columns: 600px minmax(0, 1fr);

  gap: 42px;

  align-items: center;

  min-height: 600px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;

  height: 38px;

  margin-bottom: 28px;
  padding: 0 17px;

  background: rgba(234, 249, 253, 0.92);

  border-radius: 999px;

  color: #0077b6;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.07em;
  text-transform: uppercase;

  white-space: nowrap;
}

/* =========================================================
   HERO HEADING
========================================================= */

.hero h1 {
  max-width: 610px;

  margin: 0 0 28px;

  color: #03045e;

  font-size: clamp(54px, 4.2vw, 68px);
  font-weight: 700;

  line-height: 0.99;

  letter-spacing: -0.055em;
}

.hero h1 span {
  color: #0077b6;
}

/* =========================================================
   LEAD
========================================================= */

.hero .lead {
  max-width: 570px;

  margin: 0 0 20px;

  color: rgba(3, 4, 94, 0.66);

  font-size: 19px;
  line-height: 1.68;
}

/* =========================================================
   SEO / SUPPORTING TEXT
========================================================= */

.hero-seo {
  max-width: 580px;

  margin: 0 0 34px;

  color: #03045e;

  font-size: 15.5px;
  line-height: 1.55;
}

/* =========================================================
   BUTTONS
========================================================= */

.hero .btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero .btn {
  min-height: 58px;

  padding: 0 28px;

  border-radius: 999px;

  font-size: 15.5px;
  font-weight: 600;
}

.hero .btn-primary {
  background: #0077b6;
  color: #ffffff;

  box-shadow: 0 8px 24px rgba(0, 119, 182, 0.22);
}

.hero .btn-primary:hover {
  background: #03045e;
}

.hero .btn-ghost {
  background: #ffffff;

  border: 1.5px solid rgba(0, 119, 182, 0.25);

  color: #03045e;
}

.hero .btn-ghost:hover {
  border-color: #00b4d8;
  color: #0077b6;
}

/* =========================================================
   RIGHT VISUAL AREA
========================================================= */

.hero-viz {
  position: relative;

  width: 100%;
  height: 620px;

  display: flex;
  align-items: center;

  min-width: 0;

  z-index: 2;
}

.hero-image-wrap {
  position: relative;

  width: 100%;
  height: 620px;
}

/* =========================================================
   INDUSTRIAL IMAGE
========================================================= */

.hero-image {
  position: absolute;

  top: 0;
  right: -20px;

  width: 650px;
  height: 610px;

  max-width: none;

  object-fit: cover;
  object-position: center;

  border-radius: 36px;

  box-shadow: 0 30px 80px rgba(3, 4, 94, 0.13);

  /*
     IMPORTANT:
     Keep the left side transparent/soft so
     the dashboard can overlap the image.
  */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 17%,
    #000000 32%,
    #000000 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 17%,
    #000000 32%,
    #000000 100%
  );
}

/* =========================================================
   IMAGE SOFT BLUE OVERLAY
========================================================= */

.hero-image-wrap::after {
  content: "";

  position: absolute;

  top: 0;
  right: -20px;

  width: 650px;
  height: 610px;

  border-radius: 36px;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(202, 240, 248, 0.95) 0%,
    rgba(202, 240, 248, 0.55) 18%,
    rgba(202, 240, 248, 0.1) 43%,
    transparent 68%
  );
}

/* =========================================================
   DASHBOARD CARD
========================================================= */

.hero-card {
  position: absolute;

  /*
     Dashboard sits in front of image.
  */
  left: 0;
  top: 105px;

  width: 520px;

  background: #ffffff;

  border-radius: 25px;

  overflow: hidden;

  box-shadow:
    0 12px 32px rgba(3, 4, 94, 0.1),
    0 28px 70px rgba(3, 4, 94, 0.14);

  z-index: 5;

  transform: scale(0.8);

  transform-origin: left top;
}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.hero-card-bar {
  display: flex;
  align-items: center;

  height: 62px;

  padding: 0 27px;

  border-bottom: 1px solid rgba(3, 4, 94, 0.06);

  color: rgba(3, 4, 94, 0.6);

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.hero-card-bar .live {
  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 7px;

  color: #0077b6;
}

.hero-card-bar .live b {
  width: 8px;
  height: 8px;

  display: block;

  border-radius: 50%;

  background: #00b4d8;
}

/* =========================================================
   PLATFORM FLOAT
========================================================= */

.hero-float {
  position: absolute;

  left: 85px;
  bottom: 35px;

  width: 470px;

  min-height: 78px;

  display: flex;
  align-items: center;

  gap: 20px;

  padding: 18px 25px;

  background: #03045e;

  color: #ffffff;

  border-radius: 20px;

  box-shadow: 0 16px 38px rgba(3, 4, 94, 0.22);

  z-index: 8;
}

.hero-float .hf-n {
  flex: 0 0 auto;

  color: #00b4d8;

  font-size: 38px;
  font-weight: 700;

  line-height: 1;
}

.hero-float .hf-t {
  color: rgba(255, 255, 255, 0.8);

  font-size: 14px;
  line-height: 1.45;
}

/* =========================================================
   SECTOR STRIP
========================================================= */

.sectors {
  position: relative;

  z-index: 20;

  margin-top: 0;

  padding-top: 28px;


}

.sectors-label {
  margin: 0 0 16px;

  color: #0077b6;

  font-size: 14px;
  font-weight: 600;
}

.sectors-row {
  display: grid;

  grid-template-columns: repeat(9, 1fr);

  gap: 14px;
}

.sector-pill {
  min-height: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
  padding: 14px 10px;

  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 119, 182, 0.08);
  border-radius: 16px;

  color: #03045e;

  font-size: 13px;
  font-weight: 500;
  text-align: center;

  box-shadow: 0 4px 14px rgba(3, 4, 94, 0.045);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.sector-pill i {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #eaf9fd;
  color: #0077b6;

  font-size: 16px;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.sector-pill span {
  display: block;
}

.sector-pill:hover {
  transform: translateY(-4px);

  background: #ffffff;
  border-color: rgba(0, 180, 216, 0.25);

  box-shadow:
    0 10px 24px rgba(3, 4, 94, 0.08),
    0 0 0 1px rgba(0, 180, 216, 0.04);
}

.sector-pill:hover i {
  background: #0077b6;
  color: #ffffff;
  transform: scale(1.08);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1500px) {
  .hero .wrap {
    width: min(1380px, calc(100% - 70px));
  }

  .hero-grid {
    grid-template-columns: 570px minmax(0, 1fr);
    gap: 35px;
  }

  .hero h1 {
    font-size: 62px;
  }

  .hero-image {
    width: 620px;
  }

  .hero-image-wrap::after {
    width: 620px;
  }

  .hero-card {
    transform: scale(0.77);
  }
}

/* =========================================================
   1200–1350
========================================================= */

@media (max-width: 1350px) {
  .hero .wrap {
    width: min(1160px, calc(100% - 60px));
  }

  .hero-grid {
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 25px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero .lead {
    font-size: 17px;
  }

  .hero-seo {
    font-size: 14px;
  }

  .hero-image {
    right: -10px;

    width: 580px;
    height: 590px;
  }

  .hero-image-wrap::after {
    right: -10px;

    width: 580px;
    height: 590px;
  }

  .hero-card {
    left: -5px;
    top: 95px;

    transform: scale(0.72);
  }

  .hero-float {
    left: 50px;
    bottom: 30px;

    width: 430px;
  }

  .sectors-row {
    gap: 10px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {
  .hero {
    padding: 55px 0 70px;
  }

  .hero .wrap {
    width: calc(100% - 48px);
  }

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 45px;

    min-height: auto;
  }

  .hero-content {
    max-width: 700px;
  }

  .hero h1 {
    max-width: 700px;
    font-size: clamp(48px, 7vw, 64px);
  }

  .hero-viz {
    height: 600px;
  }

  .hero-image-wrap {
    height: 600px;
  }

  .hero-image {
    right: 0;
    width: 680px;
    height: 600px;
  }

  .hero-image-wrap::after {
    right: 0;
    width: 680px;
    height: 600px;
  }

  .hero-card {
    left: 10px;
    top: 70px;

    transform: scale(0.82);
  }

  .hero-float {
    left: 70px;
    bottom: 25px;
  }

  .sectors-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .hero {
    padding: 42px 0 55px;
  }

  .hero .wrap {
    width: calc(100% - 32px);
  }

  .hero h1 {
    font-size: 45px;
    line-height: 1;
  }

  .hero .lead {
    font-size: 16px;
  }

  .hero-seo {
    font-size: 14px;
  }

  .hero .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-viz {
    height: 520px;
  }

  .hero-image-wrap {
    height: 520px;
  }

  .hero-image {
    width: 100%;
    height: 520px;

    right: 0;

    border-radius: 28px;
  }

  .hero-image-wrap::after {
    width: 100%;
    height: 520px;

    right: 0;

    border-radius: 28px;
  }

  .hero-card {
    left: 0;
    top: 30px;

    width: 520px;

    transform: scale(0.65);
    transform-origin: left top;
  }

  .hero-float {
    left: 15px;
    right: 15px;
    bottom: 15px;

    width: auto;

    padding: 16px 20px;
  }

  .hero-float .hf-n {
    font-size: 32px;
  }

  .hero-float .hf-t {
    font-size: 12px;
  }

  .sectors {
    padding-top: 24px;
  }

  .sectors-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .sector-pill {
    min-height: 65px;
    font-size: 12px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero-viz {
    height: 450px;
  }

  .hero-image-wrap {
    height: 450px;
  }

  .hero-image {
    height: 450px;
  }

  .hero-image-wrap::after {
    height: 450px;
  }

  .hero-card {
    transform: scale(0.56);
  }

  .hero-float {
    bottom: 10px;
  }
}
/* ---------- flow cards ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.flow-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 34px 28px;
  box-shadow: var(--sh-1);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.flow-card:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}
.flow-mark {
  height: 46px;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.flow-mark img {
  max-height: 46px;
  max-width: 104px;
  width: auto;
  height: auto;
}
.flow-step {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 14px;
}
.flow-card h3 {
  font-size: 23px;
  margin-bottom: 10px;
}
.flow-card p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .flow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .flow {
    grid-template-columns: 1fr;
  }
}

/* ---------- problem ---------- */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 36px 30px;
  box-shadow: var(--sh-1);
}
.card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.card p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
}
@media (max-width: 1000px) {
  .cards-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .cards-4 {
    grid-template-columns: 1fr;
  }
}

.quote {
  margin-top: 56px;
  padding: 44px 48px;
  background: var(--sky);
  border-radius: var(--r-lg);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.45;
  max-width: 900px;
}
@media (max-width: 600px) {
  .quote {
    padding: 32px 26px;
  }
}

/* ---------- platform blocks ---------- */
.pf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 0;
}
.pf + .pf {
  margin-top: 104px;
}
.pf.rev .pf-viz {
  order: -1;
}
@media (max-width: 960px) {
  .pf {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .pf.rev .pf-viz {
    order: 0;
  }
  .pf + .pf {
    margin-top: 72px;
  }
}

.pf-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}
.pf-mark {
  max-height: 60px;
  max-width: 124px;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--surface-tint);
  padding: 8px 16px;
  border-radius: var(--r-pill);
}
.pf-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  font-style: normal;
}
.pf h3 {
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -0.032em;
  margin-bottom: 10px;
}
.pf-tag {
  font-size: 17px;
  color: var(--blue);
  font-weight: 500;
  margin-bottom: 24px;
}
.pf-lede {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 34px;
}

.pf-caps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  margin-bottom: 36px;
}
.pf-caps li {
  font-size: 15.5px;
  padding-left: 26px;
  position: relative;
  color: var(--text);
  line-height: 1.5;
}
.pf-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
  border-radius: 1px;
}
@media (max-width: 560px) {
  .pf-caps {
    grid-template-columns: 1fr;
  }
}

.pf-sectors {
  background: var(--surface-tint);
  border-radius: var(--r-md);
  padding: 28px 30px;
  margin-bottom: 34px;
}
.pf-sectors h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.pf-sectors ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.pf-sectors li {
  font-size: 14.5px;
  font-weight: 500;
  background: var(--white);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}

/* visuals */
.viz {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.viz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.viz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}
.viz svg {
  width: 100%;
  height: auto;
}
.viz-note {
  padding: 16px 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--muted-2);
}

/* ---------- clients ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.logo-slot {
  background: var(--surface);
  box-shadow: var(--sh-1);
  border-radius: var(--r-md);
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.logo-slot:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.logo-slot img {
  max-height: 68px;
  max-width: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 520px) {
  .logo-slot {
    min-height: 100px;
    padding: 16px;
  }
  .logo-slot img {
    max-height: 52px;
    max-width: 92%;
  }
}
@media (max-width: 900px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- brownfield ---------- */
.bf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.bf-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 34px 28px;
  box-shadow: var(--sh-1);
}
.bf-from {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.bf-mid {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
.bf-mid svg {
  width: 16px;
  height: 16px;
}
.bf-to {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 1000px) {
  .bf {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .bf {
    grid-template-columns: 1fr;
  }
}

/* ---------- integration ---------- */
.int {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}
.int-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: 36px 32px;
}
.int-card h3 {
  font-size: 21px;
  margin-bottom: 6px;
}
.int-card .int-sub {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 24px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
.int-card p {
  font-size: 15px;
  margin-top: 22px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .int {
    grid-template-columns: 1fr;
  }
}

.sec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 56px;
}
.sec-list div {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.72);
  padding-left: 28px;
  position: relative;
  line-height: 1.6;
}
.sec-list div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
}
.sec-list b {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 700px) {
  .sec-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- industries ---------- */
.ind-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 56px;
}
.ind-btn {
  padding: 13px 24px;
  background: var(--surface);
  border: 1.5px solid transparent;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: all 0.2s ease;
}
.ind-btn:hover {
  color: var(--navy);
}
.ind-btn[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 18px rgba(3, 4, 94, 0.2);
}
.ind-panel[hidden] {
  display: none;
}
.ind-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .ind-panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.ind-panel h3 {
  margin-bottom: 18px;
}
.ind-desc {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 26px;
  line-height: 1.7;
}
.ind-assets {
  font-size: 15px;
  color: var(--blue);
  margin-bottom: 28px;
  line-height: 1.9;
}
.ind-ref {
  background: var(--sky);
  border-radius: var(--r-md);
  padding: 22px 26px;
  font-size: 15px;
  margin-bottom: 30px;
  line-height: 1.6;
}
.ind-list {
  list-style: none;
  background: var(--surface-tint);
  border-radius: var(--r-md);
  padding: 12px 30px;
}
.ind-list li {
  font-size: 15.5px;
  padding: 17px 0 17px 26px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.ind-list li:last-child {
  border-bottom: none;
}
.ind-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ---------- maturity ---------- */
.mat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.mat-card {
  background: var(--surface);
  box-shadow: var(--sh-1);
  border-radius: var(--r-md);
  padding: 36px 30px;
}
.mat-card.on {
  background: var(--navy);
  box-shadow: 0 10px 30px rgba(3, 4, 94, 0.18);
}
.mat-card.on h3 {
  color: #fff;
}
.mat-card.on p {
  color: rgba(255, 255, 255, 0.7);
}
.mat-card.on .mat-lv {
  color: var(--sky);
}
.mat-lv {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.mat-card h3 {
  font-size: 21px;
  margin-bottom: 12px;
}
.mat-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 1000px) {
  .mat {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .mat {
    grid-template-columns: 1fr;
  }
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 64px;
}
.stat h3 {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 14px;
}
.stat p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 760px) {
  .stats {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.disciplines span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 16px;
  border-radius: var(--r-pill);
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  background: var(--surface-tint);
  border-radius: var(--r-md);
  padding: 38px 32px;
}
.step-n {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 24px;
}
.step h3 {
  font-size: 19px;
  margin-bottom: 12px;
}
.step p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- pilot ---------- */
.pilot-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 44px auto 36px;
  max-width: 840px;
}
.pilot-tags span {
  font-size: 15.5px;
  font-weight: 500;
  padding: 12px 22px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}
.pilot-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.pilot-flow i {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  font-style: normal;
}

/* ---------- form ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
}
@media (max-width: 960px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.form-copy h2 {
  margin-bottom: 24px;
}
.form-copy > .lead {
  margin-bottom: 36px;
}
.fc {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
}
.fc svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue);
}
.contact {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--muted);
  line-height: 2;
}
.contact strong {
  color: var(--text);
}
.contact a {
  color: var(--blue);
  font-weight: 500;
}

.lead-form {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 48px;
  box-shadow: var(--sh-3);
}
@media (max-width: 600px) {
  .lead-form {
    padding: 32px 24px;
  }
}
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .f-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.field {
  margin-bottom: 20px;
}
.field label,
.field legend {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-tint);
  border: 1.5px solid transparent;
  color: var(--text);
  padding: 15px 18px;
  font-family: inherit;
  font-size: 16px;
  border-radius: var(--r-sm);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted-2);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--white);
  border-color: var(--blue);
  outline: none;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
fieldset {
  border: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 11px 18px;
  background: var(--surface-tint);
  border: 1.5px solid transparent;
  font-size: 15px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: all 0.16s ease;
}
.chip input:hover + span {
  border-color: var(--sky);
}
.chip input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.chip input:focus-visible + span {
  outline: 2.5px solid var(--navy);
  outline-offset: 2px;
}
.file-field {
  background: var(--surface-tint);
  border-radius: var(--r-sm);
  padding: 22px;
  margin-bottom: 24px;
}
.file-field label {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.file-field input[type="file"] {
  font-size: 14px;
  color: var(--muted);
  width: 100%;
  font-family: inherit;
}
.hp {
  position: absolute;
  left: -9999px;
}
.lead-form .btn {
  width: 100%;
  justify-content: center;
  padding: 18px;
}
.f-fine {
  font-size: 14px;
  color: var(--muted-2);
  margin-top: 18px;
  text-align: center;
}

/* ---------- faq ---------- */
/* =========================================================
   FAQ — CLEAN MODERN UI
========================================================= */

#faq {
  background: #ffffff;
}

#faq .narrow {
  max-width: 920px;
}

/* FAQ heading */
#faq .sec-head {
  margin-bottom: 42px !important;
}

#faq .eyebrow {
  margin-bottom: 18px;
}

#faq .sec-head h2 {
  max-width: 720px;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

/* FAQ list */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual item */
.faq-item {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(3, 4, 94, 0.09);
  border-radius: 18px;
  overflow: hidden;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.025),
    0 8px 24px rgba(3, 4, 94, 0.035);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Hover */
.faq-item:hover {
  border-color: rgba(0, 119, 182, 0.22);

  box-shadow:
    0 4px 12px rgba(3, 4, 94, 0.04),
    0 14px 32px rgba(3, 4, 94, 0.07);

  transform: translateY(-1px);
}

/* Open state */
.faq-item[open] {
  border-color: rgba(0, 180, 216, 0.28);

  box-shadow:
    0 6px 18px rgba(3, 4, 94, 0.06),
    0 18px 40px rgba(3, 4, 94, 0.07);
}

/* Question */
.faq-item summary {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 76px;
  padding: 22px 26px;

  color: var(--navy);

  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;

  cursor: pointer;
  list-style: none;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}

/* Remove default browser arrow */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
}

/* Question hover */
.faq-item summary:hover {
  color: var(--blue);
}

/* Custom icon */
.faq-ic {
  position: relative;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  margin-left: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--surface-tint);
  border: 1px solid rgba(0, 119, 182, 0.08);

  transition:
    background 0.25s ease,
    transform 0.3s ease,
    border-color 0.25s ease;
}

/* Plus */
.faq-ic::before,
.faq-ic::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 1.5px;

  border-radius: 2px;

  background: var(--blue);

  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

.faq-ic::after {
  transform: rotate(90deg);
}

/* Open icon */
.faq-item[open] .faq-ic {
  background: var(--blue);
  border-color: var(--blue);
  transform: rotate(180deg);
}

.faq-item[open] .faq-ic::before,
.faq-item[open] .faq-ic::after {
  background: #ffffff;
}

.faq-item[open] .faq-ic::after {
  transform: rotate(0deg);
}

/* Answer */
.faq-item p {
  max-width: 760px;

  margin: 0;
  padding: 0 82px 27px 26px;

  color: var(--muted);

  font-size: 15.5px;
  line-height: 1.7;
  letter-spacing: -0.005em;

  animation: faqOpen 0.25s ease;
}

/* Small accent line above answer */
.faq-item[open] p {
  position: relative;
}

.faq-item[open] p::before {
  content: "";

  display: block;

  width: 34px;
  height: 2px;

  margin-bottom: 18px;

  border-radius: 10px;

  background: var(--cyan);
}

/* Opening animation */
@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyboard accessibility */
.faq-item summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
  border-radius: 18px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {
  #faq .narrow {
    padding: 0 20px;
  }

  #faq .sec-head {
    margin-bottom: 30px !important;
  }

  #faq .sec-head h2 {
    font-size: 34px;
  }

  .faq {
    gap: 10px;
  }

  .faq-item {
    border-radius: 16px;
  }

  .faq-item summary {
    min-height: 68px;
    padding: 19px 20px;

    font-size: 15.5px;
  }

  .faq-item p {
    padding: 0 58px 23px 20px;
    font-size: 15px;
  }

  .faq-ic {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    margin-left: 14px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {
  #faq {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  #faq .narrow {
    padding: 0 16px;
  }

  #faq .sec-head h2 {
    font-size: 30px;
    line-height: 1.1;
  }

  #faq .eyebrow {
    font-size: 11px;
    padding: 7px 13px;
    margin-bottom: 15px;
  }

  .faq-item summary {
    min-height: 66px;
    padding: 18px 16px;

    font-size: 15px;
  }

  .faq-item p {
    padding: 0 18px 22px 16px;

    font-size: 14.5px;
    line-height: 1.65;
  }

  .faq-item[open] p::before {
    margin-bottom: 15px;
  }

  .faq-ic {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    margin-left: 12px;
  }

  .faq-ic::before,
  .faq-ic::after {
    width: 10px;
  }
}

/* ---------- glossary ---------- */
.gloss {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.gloss-item {
  background: var(--surface-tint);
  border-radius: var(--r-md);
  padding: 34px 32px;
}
.gloss-item dt {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
}
.gloss-item dd {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
}
@media (max-width: 760px) {
  .gloss {
    grid-template-columns: 1fr;
  }
}

/* ---------- final ---------- */
.final {
  text-align: center;
  padding: 140px 0;
}
.final h2 {
  font-size: clamp(34px, 5vw, 60px);
  margin-bottom: 22px;
}
.final p {
  font-size: clamp(17px, 2vw, 20px);
  margin-bottom: 44px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.final-brands {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.final-brands span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 18px;
  border-radius: var(--r-pill);
}
@media (max-width: 820px) {
  .final {
    padding: 88px 0;
  }
}

footer {
  padding: 44px 0;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.56);
}
.foot-logo {
  height: 26px;
  width: auto;
  margin-right: 6px;
}
.foot a {
  color: rgba(255, 255, 255, 0.78);
}
.foot a:hover {
  color: var(--cyan);
}

::selection {
  background: var(--cyan);
  color: var(--navy);
}






.sector-pill {
  min-height: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;
  padding: 14px 10px;

  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: 16px;

  color: var(--navy);

  font-size: 13px;
  font-weight: 500;
  text-align: center;

  box-shadow: var(--sh-1);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* Icon */
.sector-pill i {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-size: 16px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

/* Same brand palette — different shades */
.sector-pill:nth-child(1) i {
  background: var(--ice);
  color: var(--blue);
}

.sector-pill:nth-child(2) i {
  background: rgba(3, 4, 94, 0.08);
  color: var(--navy);
}

.sector-pill:nth-child(3) i {
  background: rgba(0, 119, 182, 0.12);
  color: var(--blue);
}

.sector-pill:nth-child(4) i {
  background: var(--sky);
  color: var(--navy);
}

.sector-pill:nth-child(5) i {
  background: rgba(0, 180, 216, 0.12);
  color: var(--cyan);
}

.sector-pill:nth-child(6) i {
  background: var(--ice);
  color: var(--cyan);
}

.sector-pill:nth-child(7) i {
  background: rgba(144, 224, 239, 0.45);
  color: var(--blue);
}

.sector-pill:nth-child(8) i {
  background: rgba(0, 119, 182, 0.10);
  color: var(--blue);
}

.sector-pill:nth-child(9) i {
  background: rgba(3, 4, 94, 0.08);
  color: var(--navy);
}

/* Hover */
.sector-pill:hover {
  transform: translateY(-4px);

  background: var(--white);
  border-color: rgba(0, 180, 216, 0.25);

  box-shadow: var(--sh-2);
}

.sector-pill:hover i {
  transform: scale(1.08);
}

.platforms{
   
    display: flex;
    align-items: center;
    justify-content: center;
    Padding: 20px;
}
.products {
    background:var(--white);
}















/* =========================================================
   PLATFORM CARDS — REFINED UI
   Appended override: keeps the existing site system intact.
   ========================================================= */

.platforms {
  position: relative;
 

  overflow: hidden;
  background:
    radial-gradient(circle at 8% 100%, rgba(144, 224, 239, .55), transparent 30%),
    radial-gradient(circle at 92% 0%, rgba(0, 180, 216, .10), transparent 28%),
    linear-gradient(180deg, #caf0f8 0%, #dff7fb 52%, #caf0f8 100%);
}

.platforms::before,
.platforms::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
}

.platforms::before {
  width: 420px;
  height: 420px;
  left: -250px;
  top: 20%;
  background: rgba(255,255,255,.42);
}

.platforms::after {
  width: 360px;
  height: 360px;
  right: -220px;
  bottom: -180px;
  background: rgba(144,224,239,.28);
}

.platforms > .wrap {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 48px));
  max-width: none;
  padding: 0;
}

.platforms .flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.platforms .flow-card {
  position: relative;
  min-height: 318px;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 24px;
  overflow: hidden;
  isolation: isolate;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(3,4,94,.055);
  border-radius: 24px;

  box-shadow:
    0 1px 2px rgba(3,4,94,.025),
    0 12px 30px rgba(3,4,94,.055);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.platforms .flow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  opacity: .9;
  z-index: 2;
}

.platforms .flow-card--nexview::before {
  background: linear-gradient(90deg, #00a6c7, #00b4d8);
}

.platforms .flow-card--proset360::before {
  background: linear-gradient(90deg, #f59b23, #ffb347);
}

.platforms .flow-card--nexverse::before {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
}

.platforms .flow-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0,180,216,.20);
  box-shadow:
    0 4px 10px rgba(3,4,94,.04),
    0 20px 45px rgba(3,4,94,.10);
}

.platforms .flow-card__top {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 82px;
  margin-bottom: 22px;
}

.platforms .flow-mark {
  height: 64px;
  margin: 0;
  display: flex;
  align-items: center;
}

.platforms .flow-mark img {
  max-width: 96px;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: left center;
  transition: transform .25s ease;
}

.platforms .flow-card:hover .flow-mark img {
  transform: scale(1.045);
}

.platforms .flow-index {
  position: absolute;
  right: 0;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eaf9fd;
  color: #0077b6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

.platforms .flow-step {
  position: absolute;
  left: 0;
  bottom: -22px;
  margin: 0;
  color: #0077b6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .10em;
}

.platforms .flow-card--proset360 .flow-step {
  color: #e77900;
}

.platforms .flow-card--nexverse .flow-step {
  color: #5146d8;
}

.platforms .flow-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  font-size: clamp(23px, 2vw, 27px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.platforms .flow-card p {
  position: relative;
  z-index: 2;
  max-width: 31ch;
  margin: 0;
  color: rgba(3,4,94,.64);
  font-size: 15.5px;
  line-height: 1.62;
}

.platforms .flow-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: auto;
  padding-top: 22px;

  color: #0077b6;
  font-size: 14px;
  font-weight: 700;
}

.platforms .flow-link span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0077b6;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease;
}

.platforms .flow-link:hover span:last-child {
  transform: translateX(4px);
}

.platforms .flow-card--proset360 .flow-link {
  color: #e77900;
}

.platforms .flow-card--proset360 .flow-link span:last-child {
  background: #f28c18;
}

.platforms .flow-card--nexverse .flow-link {
  color: #5146d8;
}

.platforms .flow-card--nexverse .flow-link span:last-child {
  background: #5146d8;
}

.platforms .flow-glow {
  position: absolute;
  right: -55px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,180,216,.14), transparent 68%);
  z-index: 0;
  pointer-events: none;
}

.platforms .flow-card--nexwave .flow-glow {
  background: radial-gradient(circle, rgba(0,119,182,.13), transparent 68%);
}

.platforms .flow-card--proset360 .flow-glow {
  background: radial-gradient(circle, rgba(245,155,35,.14), transparent 68%);
}

.platforms .flow-card--nexverse .flow-glow {
  background: radial-gradient(circle, rgba(79,70,229,.12), transparent 68%);
}

@media (max-width: 1050px) {
  .platforms {
    padding: 44px 0 60px;
  }

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

@media (max-width: 620px) {
  .platforms > .wrap {
    width: min(100% - 32px, 520px);
  }

  .platforms .flow {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .platforms .flow-card {
    min-height: 290px;
    padding: 27px 24px 22px;
  }
}

/* =========================================================
   NEXWAVE — SAME ALIGNMENT AS NAVBAR
========================================================= */

#platforms .wrap {
  width: min(1410px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}


/* MAIN TWO-COLUMN LAYOUT */
#nexwave {
  width: 100%;
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 0;
  align-items: center;

  padding: 20px 0;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

#nexwave .pf-content {
  width: 100%;
  max-width: 680px;
  padding-right: 50px;

  position: relative;
  z-index: 3;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

#nexwave .pf-image-wrap {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  position: relative;
  overflow: visible;
}


#nexwave .pf-image {
  display: block;

  width: 100%;
  max-width: 760px;
  height: auto;

  object-fit: contain;
  object-position: center right;

  border-radius: 0;

  position: relative;
  z-index: 2;

  transform: translateX(0);
}


/* =========================================================
   TEXT
========================================================= */

#nexwave .pf-head {
  margin-bottom: 24px;
}

#nexwave h3 {
  font-size: clamp(38px, 3.5vw, 52px);
  margin-bottom: 12px;
}

#nexwave .pf-tag {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 25px;
}

#nexwave .pf-lede {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 34px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

#nexwave .pf-caps {
  grid-template-columns: 1fr 1fr;
  gap: 16px 35px;
  margin-bottom: 36px;
}


/* =========================================================
   RIGHT COLUMN — capabilities stacked above the image.
   The text column is much taller than the image, and .pf
   centres its tracks, so the image alone left a large gap at
   the top of column 2. The capability list fills it and the
   text column stops running long.
========================================================= */

#nexwave .pf-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  min-width: 0;
}

/* The list's own bottom margin would stack on top of the flex
   gap; the gap owns that spacing here. */
#nexwave .pf-side .pf-caps {
  margin-bottom: 0;
}


/* =========================================================
   PROVEN IN
========================================================= */

#nexwave .pf-sectors {
  padding: 28px 30px;
  margin-bottom: 30px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  #platforms .wrap {
    width: min(1410px, calc(100% - 64px));
  }

  #nexwave {
    grid-template-columns: 47% 53%;
  }

  #nexwave .pf-content {
    padding-right: 60px;
  }

  #nexwave .pf-image {
    max-width: 780px;
  }
}


/* =========================================================
   1200–1500
========================================================= */

@media (max-width: 1500px) and (min-width: 961px) {

  #nexwave {
    grid-template-columns: 48% 52%;
  }

  #nexwave .pf-content {
    padding-right: 40px;
  }

  #nexwave .pf-image {
    max-width: 720px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  #platforms .wrap {
    width: calc(100% - 48px);
  }

  #nexwave {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  #nexwave .pf-content {
    max-width: 750px;
    padding-right: 0;
  }

  #nexwave .pf-image-wrap {
    justify-content: center;
  }

  #nexwave .pf-image {
    width: 100%;
    max-width: 750px;
  }
    /* REMOVE RIGHT-SIDE IMAGE ON MOBILE */
  #nexwave .pf-image-wrap {
    display: none;
  }

  /* Single column here, and the image is gone, so the right
     column is just the capability list stacked under the text. */
  #nexwave .pf-side {
    max-width: 750px;
    gap: 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 600px) {

  #platforms .wrap {
    width: calc(100% - 32px);
  }

  #nexwave {
    gap: 35px;
  }

  #nexwave .pf-caps {
    grid-template-columns: 1fr;
  }



}



/* =========================================================
   NEXVIEW — NEW IMAGE VISUAL
   Image LEFT | Text RIGHT
========================================================= */

#nexview.pf {
  grid-template-columns: 0.78fr 1.22fr;
  gap: 65px;
  align-items: center;
  padding: 25px 0;
}

/* Left image container */
#nexview .pf-viz {
  order: -1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* New NexView image */
#nexview .nexview-image {
  display: block;
  width: 100%;
  max-width: 610px;
  height: auto;
  object-fit: contain;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

  #nexview.pf {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #nexview .pf-viz {
    order: 0;
  }

  #nexview .nexview-image {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

    #nexview .pf-viz {
    display: none !important;
  }

  #nexview {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  #nexview.pf {
    gap: 32px;
  }

  #nexview .nexview-image {
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    box-shadow:
      0 10px 28px rgba(3, 4, 94, 0.10);
  }
}

/* =========================================================
   ALL PLATFORM SECTIONS — SAME WIDTH / SAME ALIGNMENT
========================================================= */

#platforms .wrap {
  width: min(1410px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   PROSET360 — SAME AS NEXWAVE
   ========================================================= */

#proset360.pf {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* LEFT CONTENT */
#proset360 .pf-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* RIGHT IMAGE WRAPPER */
#proset360 .pf-image-wrap {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

/* RIGHT IMAGE */
#proset360 .pf-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  object-fit: contain;
}


/* =========================================================
   TABLET — HIDE RIGHT IMAGE
   ========================================================= */

@media (max-width: 960px) {

  #platforms .wrap {
    width: calc(100% - 48px);
  }

  #proset360.pf {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Hide image completely */
  #proset360 .pf-image-wrap {
    display: none !important;
  }

}


/* =========================================================
   MOBILE — HIDE RIGHT IMAGE
   ========================================================= */

@media (max-width: 700px) {

  #platforms .wrap {
    width: calc(100% - 32px);
  }

  #proset360.pf {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Make sure image stays hidden */
  #proset360 .pf-image-wrap {
    display: none !important;
  }

}


/* =========================================================
   NEXVERSE — IMAGE LEFT / WIDER TEXT RIGHT
========================================================= */

#nexverse {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 70px;
  align-items: center;
  width: 100%;
}

/* LEFT IMAGE */
#nexverse .pf-viz {
  order: -1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* NEXVERSE IMAGE */
#nexverse .nexverse-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* RIGHT TEXT */
#nexverse .pf-content {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   NEXVERSE — TABLET
========================================================= */

@media (max-width: 1100px) {

  #nexverse {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 50px;
  }

}


/* =========================================================
   NEXVERSE — MOBILE
========================================================= */

/* =========================================================
   NEXVERSE — HIDE IMAGE ON MOBILE
========================================================= */

@media (max-width: 960px) {
  #nexverse .nexverse-visual {
    display: none !important;
  }

  #nexverse {
    grid-template-columns: 1fr;
  }

  #nexverse .pf-content {
    width: 100%;
    max-width: 100%;
  }
}


/* =========================================================
   NEXVERSE — SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

  #nexverse {
    gap: 32px;
  }

  #nexverse .nexverse-image {
    width: 100%;
  }

}




/* =========================================================
   CLIENTS — MODERN LOGO SHOWCASE
========================================================= */

.clients-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(144, 224, 239, 0.32),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(0, 180, 216, 0.10),
      transparent 30%
    ),
    #f8fdff;
}


/* subtle background decoration */

.clients-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  top: -260px;
  right: -180px;
  border-radius: 50%;
  background: rgba(202, 240, 248, 0.38);
  filter: blur(4px);
  pointer-events: none;
}

.clients-section::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  bottom: -180px;
  left: -140px;
  border-radius: 50%;
  background: rgba(144, 224, 239, 0.18);
  pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.clients-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto 62px;
}

.clients-head .eyebrow {
  margin-bottom: 20px;
}

.clients-head h2 {
  margin-bottom: 18px;
  color: var(--navy);
}

.clients-intro {
  max-width: 650px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}


/* =========================================================
   LOGO GRID
========================================================= */

.clients-section .logo-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;

  width: 100%;
}


/* =========================================================
   LOGO CARD
========================================================= */

.clients-section .logo-slot {
  position: relative;

  min-height: 132px;
  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 255, 255, 0.82)
    );

  border: 1px solid rgba(0, 119, 182, 0.08);
  border-radius: 20px;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.035),
    0 12px 30px rgba(3, 4, 94, 0.035);

  overflow: hidden;

  transition:
    transform 0.3s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


/* top accent line */

.clients-section .logo-slot::before {
  content: "";

  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;

  height: 2px;

  border-radius: 0 0 999px 999px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--cyan),
    transparent
  );

  opacity: 0;

  transform: scaleX(0.5);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


/* soft hover glow */

.clients-section .logo-slot::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: rgba(144, 224, 239, 0.12);

  filter: blur(25px);

  opacity: 0;

  transition: opacity 0.3s ease;

  pointer-events: none;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.clients-section .logo-slot img {
  position: relative;
  z-index: 2;

  display: block;

  max-width: 82%;
  max-height: 62px;

  width: auto;
  height: auto;

  object-fit: contain;

  filter: saturate(0.92);

  opacity: 0.88;

  transform: scale(0.96);

  transition:
    transform 0.35s cubic-bezier(.2,.7,.2,1),
    opacity 0.3s ease,
    filter 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.clients-section .logo-slot:hover {
  transform: translateY(-7px);

  background: #ffffff;

  border-color: rgba(0, 180, 216, 0.25);

  box-shadow:
    0 10px 25px rgba(3, 4, 94, 0.07),
    0 24px 50px rgba(0, 119, 182, 0.08);
}

.clients-section .logo-slot:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.clients-section .logo-slot:hover::after {
  opacity: 1;
}

.clients-section .logo-slot:hover img {
  transform: scale(1.05);
  opacity: 1;
  filter: saturate(1);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .clients-section {
    padding: 100px 0;
  }

  .clients-section .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

  .clients-section .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .clients-section .logo-slot {
    min-height: 120px;
    padding: 20px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .clients-section {
    padding: 80px 0;
  }

  .clients-head {
    margin-bottom: 42px;
  }

  .clients-head h2 {
    font-size: 32px;
  }

  .clients-intro {
    font-size: 15px;
  }

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

  .clients-section .logo-slot {
    min-height: 105px;
    padding: 16px;
    border-radius: 16px;
  }

  .clients-section .logo-slot img {
    max-width: 88%;
    max-height: 52px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .clients-section .logo-grid {
    gap: 10px;
  }

  .clients-section .logo-slot {
    min-height: 95px;
    padding: 12px;
  }

  .clients-section .logo-slot img {
    max-height: 46px;
  }

}



/* =========================================================
   BROWNFIELD — PREMIUM UI
========================================================= */

.brownfield-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(144, 224, 239, 0.22),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fcfe 100%
    );
}


/* ---------- HEADER ---------- */

.brownfield-head {
  max-width: 820px;
  margin-bottom: 64px;
}

.brownfield-head h2 {
  max-width: 780px;
}


/* ---------- GRID ---------- */

.bf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 42px;
}


/* ---------- CARD ---------- */

.bf-card {
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;

  padding: 30px 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(234, 249, 253, 0.65)
    );

  border: 1px solid rgba(3, 4, 94, 0.075);
  border-radius: 24px;

  box-shadow:
    0 2px 6px rgba(3, 4, 94, 0.035),
    0 18px 45px rgba(3, 4, 94, 0.055);

  overflow: hidden;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}


/* subtle top glow */

.bf-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--blue),
    var(--cyan),
    transparent
  );

  opacity: 0.75;
}


/* hover */

.bf-card:hover {
  transform: translateY(-8px);

  border-color: rgba(0, 180, 216, 0.2);

  box-shadow:
    0 8px 20px rgba(3, 4, 94, 0.06),
    0 28px 65px rgba(3, 4, 94, 0.11);
}


/* ---------- NUMBER ---------- */

.bf-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  margin-bottom: 24px;

  border-radius: 12px;

  background: var(--navy);
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;

  box-shadow:
    0 8px 18px rgba(3, 4, 94, 0.16);
}


/* ---------- LABEL ---------- */

.bf-label {
  margin-bottom: 9px;

  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/* ---------- EXISTING SYSTEM ---------- */

.bf-from {
  max-width: 260px;

  margin: 0;

  color: var(--navy);

  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
}


/* ---------- DIVIDER ---------- */

.bf-divider {
  width: 100%;
  height: 1px;

  margin: 24px 0 20px;

  background:
    linear-gradient(
      90deg,
      rgba(0, 119, 182, 0.18),
      rgba(3, 4, 94, 0.04),
      transparent
    );
}


/* ---------- ASSESSED ---------- */

.bf-mid {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 14px;

  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}


/* ---------- ARROW ---------- */

.bf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  background: var(--surface-tint);

  color: var(--cyan);

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.bf-arrow svg {
  width: 15px;
  height: 15px;
}

.bf-card:hover .bf-arrow {
  background: var(--blue);
  color: #ffffff;
  transform: translateY(3px);
}


/* ---------- RESULT ---------- */

.bf-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: auto;

  color: var(--muted);

  font-size: 14.5px;
  line-height: 1.55;
}

.bf-result strong {
  color: var(--navy);
  font-weight: 650;
}


/* ---------- RESULT DOT ---------- */

.bf-result-dot {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  margin-top: 7px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 0 5px rgba(0, 180, 216, 0.08);
}


/* =========================================================
   BROWNFIELD CTA
========================================================= */

.bf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 26px 30px;

  background:
    linear-gradient(
      110deg,
      var(--navy) 0%,
      #064b88 65%,
      var(--blue) 100%
    );

  border-radius: 22px;

  box-shadow:
    0 16px 40px rgba(3, 4, 94, 0.16);
}


.bf-cta-copy {
  max-width: 620px;
}


.bf-cta-eyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--cyan);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.bf-cta-copy p {
  color: rgba(255, 255, 255, 0.82);

  font-size: 15px;
  line-height: 1.55;
}


.bf-btn {
  flex-shrink: 0;

  background: #ffffff;
  color: var(--navy);

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.12);
}


.bf-btn:hover {
  background: var(--cyan);
  color: var(--navy);
}


.bf-btn .btn-arrow {
  transition: transform 0.25s ease;
}


.bf-btn:hover .btn-arrow {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .brownfield-section {
    padding: 100px 0;
  }

  .bf {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .bf-card {
    min-height: 310px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .brownfield-section {
    padding: 80px 0;
  }

  .brownfield-head {
    margin-bottom: 46px;
  }

  .bf {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .bf-card {
    min-height: auto;
    padding: 26px 24px;
  }

  .bf-from {
    max-width: none;
    font-size: 18px;
  }

  .bf-divider {
    margin: 20px 0 17px;
  }

  .bf-result {
    margin-top: 0;
  }

  .bf-cta {
    flex-direction: column;
    align-items: stretch;

    padding: 25px 22px;

    border-radius: 20px;
  }

  .bf-btn {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .brownfield-section {
    padding: 70px 0;
  }

  .bf-card {
    padding: 23px 20px;
  }

  .bf-number {
    width: 34px;
    height: 34px;

    margin-bottom: 20px;

    font-size: 11px;
  }

  .bf-from {
    font-size: 17px;
  }

  .bf-result {
    font-size: 14px;
  }

}




/* =========================================================
   BROWNFIELD FIRST
   PREMIUM INDUSTRIAL / DIGITALIZATION UI
========================================================= */

.brownfield-section {
  position: relative;
  overflow: hidden;

  padding: 125px 0;

  background:
    radial-gradient(
      circle at 0% 15%,
      rgba(144,224,239,.22),
      transparent 31%
    ),
    radial-gradient(
      circle at 100% 80%,
      rgba(0,180,216,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcfe 100%
    );
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.brownfield-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(3,4,94,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(3,4,94,.022) 1px,
      transparent 1px
    );

  background-size: 50px 50px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 20%,
      #000 80%,
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.bf-header {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, .8fr);

  gap: 100px;

  align-items: end;

  margin-bottom: 70px;
}


.bf-heading {
  max-width: 760px;
}


.bf-heading .eyebrow {
  margin-bottom: 22px;
}


.bf-heading h2 {
  margin: 0;

  max-width: 720px;

  font-size:
    clamp(40px, 4.7vw, 60px);

  line-height: .99;

  letter-spacing: -.052em;
}


.bf-header-copy {
  display: flex;

  gap: 18px;

  max-width: 450px;

  padding-bottom: 5px;
}


.bf-header-accent {
  width: 3px;
  min-width: 3px;

  height: 78px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      var(--cyan),
      var(--blue)
    );
}


.bf-header-copy p {
  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.72;
}


/* =========================================================
   MAP
========================================================= */

.bf-map {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  gap: 12px;

  padding-top: 36px;
}


/* =========================================================
   SIDE LABELS
========================================================= */

.bf-map-label {
  position: absolute;

  top: 0;

  display: flex;

  align-items: center;

  gap: 9px;

  color: rgba(3,4,94,.42);

  font-size: 9.5px;

  font-weight: 700;

  letter-spacing: .15em;
}


.bf-map-label-left {
  left: 28px;
}


.bf-map-label-right {
  right: 28px;
}


.bf-label-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 0 5px rgba(0,180,216,.08);
}


/* =========================================================
   CENTRAL FLOW LINE
========================================================= */

.bf-center-line {
  position: absolute;

  left: 50%;

  top: 48px;
  bottom: 48px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,180,216,.22) 10%,
      rgba(0,180,216,.22) 90%,
      transparent
    );

  transform: translateX(-50%);

  pointer-events: none;
}


.bf-line-glow {
  position: absolute;

  left: 50%;

  top: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--cyan);

  transform: translateX(-50%);

  box-shadow:
    0 0 0 5px rgba(0,180,216,.07),
    0 0 20px rgba(0,180,216,.22);
}


/* =========================================================
   NODE
========================================================= */

.bf-node {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    150px
    minmax(0, 1fr);

  align-items: center;

  min-height: 118px;

  padding: 16px 18px;

  background:
    rgba(255,255,255,.92);

  border:
    1px solid rgba(3,4,94,.075);

  border-radius: 20px;

  box-shadow:
    0 2px 4px rgba(3,4,94,.025),
    0 12px 35px rgba(3,4,94,.045);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .35s ease;
}


.bf-node:hover {
  transform: translateY(-5px);

  border-color:
    rgba(0,180,216,.25);

  box-shadow:
    0 5px 10px rgba(3,4,94,.03),
    0 22px 50px rgba(3,4,94,.09);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.bf-node-left {
  display: flex;

  align-items: center;

  gap: 20px;

  min-width: 0;
}


.bf-index {
  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 45px;
  height: 45px;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      var(--navy),
      #023e8a
    );

  color: #ffffff;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .06em;

  box-shadow:
    0 6px 15px rgba(3,4,94,.12);

  transition:
    transform .3s ease,
    background .3s ease;
}


.bf-node:hover .bf-index {
  background: var(--blue);

  transform: scale(1.06);
}


.bf-overline {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.bf-node h3 {
  margin: 0;

  color: var(--navy);

  font-size: 19px;

  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -.025em;
}


.bf-node h3 span {
  color: rgba(3,4,94,.48);
}


/* =========================================================
   MIDDLE
========================================================= */

.bf-node-middle {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;
}


.bf-assessed {
  color: rgba(3,4,94,.42);

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: .14em;
}


.bf-node-arrow {
  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: var(--surface-tint);

  color: var(--cyan);

  border:
    1px solid rgba(0,180,216,.10);

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}


.bf-node-arrow svg {
  width: 17px;
  height: 17px;
}


.bf-node:hover .bf-node-arrow {
  background: var(--blue);

  color: #ffffff;

  transform: translateX(4px);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.bf-node-right {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding-left: 24px;

  border-left:
    1px solid rgba(3,4,94,.07);
}


.bf-capability {
  display: inline-block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .13em;
}


.bf-node-right strong {
  max-width: 260px;

  color: var(--navy);

  font-size: 17px;

  line-height: 1.35;

  font-weight: 600;

  letter-spacing: -.018em;
}


/* =========================================================
   FOOTER
========================================================= */

.bf-footer {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 28px;

  padding: 19px 20px 19px 22px;

  border-radius: 20px;

  background:
    linear-gradient(
      110deg,
      var(--navy),
      #023e8a 65%,
      var(--blue)
    );

  box-shadow:
    0 18px 45px rgba(3,4,94,.14);
}


.bf-footer-message {
  display: flex;

  align-items: center;

  gap: 15px;
}


.bf-footer-icon {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: var(--cyan);

  background:
    rgba(255,255,255,.08);
}


.bf-footer-icon svg {
  width: 22px;
  height: 22px;
}


.bf-footer-message span {
  display: block;

  margin-bottom: 2px;

  color: var(--sky);

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: .15em;
}


.bf-footer-message strong {
  display: block;

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

  line-height: 1.35;
}


/* =========================================================
   CTA
========================================================= */

.bf-footer-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 47px;

  padding: 0 20px;

  border-radius: 999px;

  background: #ffffff;

  color: var(--navy);

  font-size: 12.5px;

  font-weight: 700;

  white-space: nowrap;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}


.bf-footer-button svg {
  width: 16px;
  height: 16px;

  transition:
    transform .3s ease;
}


.bf-footer-button:hover {
  background: var(--cyan);

  color: #ffffff;

  transform: translateY(-2px);
}


.bf-footer-button:hover svg {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .brownfield-section {
    padding: 100px 0;
  }

  .bf-header {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-bottom: 50px;
  }

  .bf-header-copy {
    max-width: 650px;
  }

  .bf-node {
    grid-template-columns:
      minmax(0, 1fr)
      125px
      minmax(0, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .brownfield-section {
    padding: 78px 0;
  }

  .bf-heading h2 {
    font-size: 38px;
  }

  .bf-map {
    padding-top: 0;

    gap: 14px;
  }

  .bf-map-label {
    display: none;
  }

  .bf-center-line {
    display: none;
  }

  .bf-node {
    display: block;

    min-height: 0;

    padding: 20px;
  }

  .bf-node-left {
    margin-bottom: 18px;
  }

  .bf-node h3 {
    font-size: 19px;
  }

  .bf-node-middle {
    justify-content: flex-start;

    padding: 12px 0;

    border-top:
      1px solid rgba(3,4,94,.06);

    border-bottom:
      1px solid rgba(3,4,94,.06);
  }

  .bf-node-right {
    padding: 15px 0 0;

    border-left: 0;
  }

  .bf-footer {
    flex-direction: column;

    align-items: stretch;

    gap: 18px;

    padding: 20px;
  }

  .bf-footer-button {
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .brownfield-section {
    padding: 65px 0;
  }

  .bf-heading h2 {
    font-size: 33px;
  }

  .bf-header-copy p {
    font-size: 14.5px;
  }

  .bf-node {
    padding: 17px;
    border-radius: 18px;
  }

  .bf-index {
    width: 40px;
    height: 40px;

    border-radius: 11px;
  }

  .bf-node-left {
    gap: 14px;
  }

  .bf-node h3 {
    font-size: 18px;
  }

  .bf-footer-message strong {
    font-size: 13.5px;
  }

}


/* =========================================================
   FINAL CTA — PREMIUM CONVERSION SECTION
========================================================= */

.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  padding: 128px 0 132px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0, 180, 216, 0.20) 0%,
      rgba(0, 180, 216, 0.08) 22%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #03045e 0%,
      #03156f 48%,
      #03045e 100%
    );
}

/* subtle technical grid */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image:
    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: 56px 56px;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%
  );
}

/* atmospheric glow */
.final::after {
  content: "";
  position: absolute;
  z-index: -1;

  width: 520px;
  height: 520px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: rgba(0, 180, 216, 0.10);

  filter: blur(90px);

  pointer-events: none;
}

/* content width */
.final .wrap {
  position: relative;
  z-index: 2;

  max-width: 900px;
}

/* small top indicator */
.final .wrap::before {
  content: "NEXT STEP";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 34px;

  margin-bottom: 30px;
  padding: 0 15px;

  border: 1px solid rgba(144, 224, 239, 0.24);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  color: var(--sky);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* heading */
.final h2 {
  max-width: 820px;
  margin: 0 auto 22px;

  color: #ffffff;

  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

/* subtle cyan emphasis */
.final h2::after {
  content: "";

  display: block;

  width: 54px;
  height: 3px;

  margin: 28px auto 0;

  border-radius: 999px;

  background: var(--cyan);
}

/* supporting copy */
.final p {
  max-width: 610px;

  margin: 26px auto 38px;

  color: rgba(255, 255, 255, 0.68);

  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.7;
}

/* CTA */
.final .btn-light {
  position: relative;

  min-height: 58px;

  padding: 0 27px;

  background: #ffffff;
  color: var(--navy);

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.14),
    0 20px 50px rgba(0, 180, 216, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.final .btn-light:hover {
  transform: translateY(-4px);

  background: #eaf9fd;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 24px 60px rgba(0, 180, 216, 0.20);
}

/* arrow animation */
.final .btn-light .btn-arrow {
  transition:
    transform 0.25s ease;
}

.final .btn-light:hover .btn-arrow {
  transform: translateX(5px);
}

/* =========================================================
   OPTIONAL — BRANDS / TRUST ITEMS
========================================================= */

.final .final-brands {
  position: relative;

  margin-top: 68px;
  padding-top: 28px;

  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.final .final-brands::before {
  content: "BUILT FOR OPERATING ENVIRONMENTS";

  display: block;

  margin-bottom: 18px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {
  .final {
    padding: 92px 0 96px;
  }

  .final .wrap {
    padding: 0 28px;
  }

  .final h2 {
    font-size: clamp(38px, 8vw, 54px);
  }

  .final p {
    margin-bottom: 32px;
  }

  .final::before {
    background-size: 42px 42px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {
  .final {
    padding: 78px 0 82px;
  }

  .final .wrap {
    padding: 0 22px;
  }

  .final .wrap::before {
    height: 31px;
    margin-bottom: 24px;
    padding: 0 13px;

    font-size: 10px;
  }

  .final h2 {
    font-size: 38px;
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  .final h2::after {
    width: 42px;
    margin-top: 23px;
  }

  .final p {
    margin-top: 22px;
    margin-bottom: 30px;

    font-size: 16px;
    line-height: 1.65;
  }

  .final .btn-light {
    width: 100%;
    justify-content: center;

    min-height: 56px;

    padding: 0 20px;

    font-size: 15px;
  }

  .final .final-brands {
    margin-top: 48px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .final .btn-light,
  .final .btn-light .btn-arrow {
    transition: none;
  }
}


/* =========================================================
   GLOSSARY — PREMIUM TECHNICAL REFERENCE
========================================================= */

.glossary-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #ffffff;
}

/* subtle background atmosphere */
.glossary-section::before {
  content: "";
  position: absolute;

  width: 520px;
  height: 520px;

  top: 0;
  right: -220px;

  border-radius: 50%;

  background: rgba(144, 224, 239, 0.14);

  filter: blur(80px);

  pointer-events: none;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.glossary-head {
  position: relative;
  z-index: 2;

  max-width: 780px;

  margin-bottom: 62px;
}

.glossary-head .eyebrow {
  margin-bottom: 22px;
}

.glossary-head h2 {
  margin-bottom: 20px;

  font-size: clamp(38px, 4.5vw, 56px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.glossary-head .lead {
  max-width: 650px;

  font-size: 18px;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   GLOSSARY GRID
--------------------------------------------------------- */

.gloss {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px 20px;

  margin: 0;
}

/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.gloss-item {
  position: relative;

  min-height: 210px;

  padding: 30px 32px 32px;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfeff 100%
    );

  border: 1px solid rgba(3, 4, 94, 0.08);

  border-radius: 22px;

  box-shadow:
    0 2px 6px rgba(3, 4, 94, 0.025),
    0 12px 32px rgba(3, 4, 94, 0.045);

  overflow: hidden;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

/* cyan accent line */
.gloss-item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 3px;
  height: 0;

  background: var(--cyan);

  border-radius: 0 0 4px 0;

  transition: height 0.3s ease;
}

/* subtle corner glow */
.gloss-item::after {
  content: "";

  position: absolute;

  width: 110px;
  height: 110px;

  right: -55px;
  top: -55px;

  border-radius: 50%;

  background: rgba(0, 180, 216, 0.06);

  pointer-events: none;

  transition: transform 0.3s ease;
}

.gloss-item:hover {
  transform: translateY(-5px);

  border-color: rgba(0, 180, 216, 0.24);

  background: #ffffff;

  box-shadow:
    0 8px 18px rgba(3, 4, 94, 0.06),
    0 22px 48px rgba(3, 4, 94, 0.08);
}

.gloss-item:hover::before {
  height: 100%;
}

.gloss-item:hover::after {
  transform: scale(1.5);
}

/* ---------------------------------------------------------
   TERM
--------------------------------------------------------- */

.gloss-item dt {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  color: var(--navy);

  font-size: 19px;
  font-weight: 650;

  line-height: 1.3;
  letter-spacing: -0.022em;
}

/* numbered indicator */
.gloss-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 36px;
  height: 36px;

  border-radius: 11px;

  background: var(--surface-tint);

  color: var(--blue);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.04em;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.gloss-item:hover .gloss-number {
  background: var(--blue);
  color: #ffffff;

  transform: scale(1.05);
}

/* ---------------------------------------------------------
   DEFINITION
--------------------------------------------------------- */

.gloss-item dd {
  margin: 0;
  padding-left: 50px;

  color: var(--muted);

  font-size: 15.5px;

  line-height: 1.7;
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {
  .glossary-section {
    padding: 95px 0;
  }

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

  .gloss-item {
    min-height: auto;
  }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {
  .glossary-section {
    padding: 76px 0;
  }

  .glossary-head {
    margin-bottom: 42px;
  }

  .glossary-head h2 {
    font-size: 38px;
  }

  .glossary-head .lead {
    font-size: 16px;
  }

  .gloss {
    gap: 14px;
  }

  .gloss-item {
    padding: 24px 22px 26px;

    border-radius: 18px;
  }

  .gloss-item dt {
    gap: 11px;

    font-size: 17px;
  }

  .gloss-number {
    width: 32px;
    height: 32px;

    border-radius: 9px;

    font-size: 10px;
  }

  .gloss-item dd {
    padding-left: 43px;

    font-size: 14.5px;
    line-height: 1.65;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gloss-item,
  .gloss-item::before,
  .gloss-item::after,
  .gloss-number {
    transition: none;
  }
}

.industries,.maturity{
 padding: 10px 0;
}



/* =========================================================
   MAINTENANCE MATURITY
========================================================= */

.maturity {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 92% 18%,
      rgba(144, 224, 239, 0.22),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fdff 100%
    );
}


/* ---------- header ---------- */

.maturity-head {
  position: relative;
  max-width: 790px;
  margin-bottom: 68px;
}

.maturity-head h2 {
  max-width: 760px;
  margin-bottom: 22px;
}

.maturity-head h2 span {
  color: var(--blue);
}


/* ---------- cards ---------- */

.mat {
  position: relative;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 52px;
}


/* progression line */

.mat::before {
  content: "";

  position: absolute;

  left: 7%;
  right: 7%;
  top: 42px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(0, 119, 182, 0.08),
      rgba(0, 180, 216, 0.32),
      rgba(0, 119, 182, 0.08)
    );

  z-index: 0;
}


/* ---------- individual card ---------- */

.mat-card {
  position: relative;
  z-index: 1;

  min-height: 355px;

  display: flex;
  flex-direction: column;

  padding: 30px 28px 26px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(3, 4, 94, 0.075);

  border-radius: 22px;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.035),
    0 14px 38px rgba(3, 4, 94, 0.045);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.mat-card::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--blue),
    var(--cyan)
  );

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.3s ease;
}


.mat-card:hover {
  transform: translateY(-7px);

  border-color: rgba(0, 119, 182, 0.18);

  box-shadow:
    0 8px 20px rgba(3, 4, 94, 0.06),
    0 25px 55px rgba(3, 4, 94, 0.09);
}


.mat-card:hover::after {
  transform: scaleX(1);
}


/* ---------- active card ---------- */

.mat-card.on {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 180, 216, 0.22),
      transparent 38%
    ),
    var(--navy);

  border-color: var(--navy);

  box-shadow:
    0 12px 30px rgba(3, 4, 94, 0.16),
    0 30px 65px rgba(3, 4, 94, 0.14);

  transform: translateY(-6px);
}


.mat-card.on:hover {
  transform: translateY(-10px);
}


.mat-card.on::after {
  background: linear-gradient(
    90deg,
    var(--cyan),
    var(--sky)
  );

  transform: scaleX(1);
}


/* ---------- card header ---------- */

.mat-top {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 34px;

  margin-bottom: 22px;
}


.mat-number {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--surface-tint);

  color: var(--blue);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.02em;
}


.mat-card.on .mat-number {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sky);
}


.mat-lv {
  margin: 0;

  color: var(--muted-2);

  font-size: 11.5px;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.mat-card.on .mat-lv {
  color: var(--sky);
}


/* ---------- divider ---------- */

.mat-line {
  width: 100%;
  height: 1px;

  margin-bottom: 26px;

  background: var(--line-soft);
}


.mat-card.on .mat-line {
  background: rgba(255, 255, 255, 0.1);
}


/* ---------- typography ---------- */

.mat-card h3 {
  margin-bottom: 13px;

  font-size: clamp(21px, 2vw, 25px);

  letter-spacing: -0.025em;
}


.mat-card p {
  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.68;
}


.mat-card.on h3 {
  color: #fff;
}


.mat-card.on p {
  color: rgba(255, 255, 255, 0.7);
}


/* ---------- card footer ---------- */

.mat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: auto;
  padding-top: 28px;
}


.mat-status {
  display: inline-flex;
  align-items: center;

  padding: 7px 12px;

  border-radius: 999px;

  background: var(--surface-tint);

  color: var(--blue);

  font-size: 11.5px;
  font-weight: 600;

  letter-spacing: 0.02em;
}


.mat-card.on .mat-status {
  background: rgba(255, 255, 255, 0.09);
  color: var(--sky);
}


.mat-arrow {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  color: var(--cyan);

  font-size: 16px;
}


/* =========================================================
   CTA
========================================================= */

.mat-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding: 28px 30px;

  background: var(--surface-tint);

  border: 1px solid rgba(0, 119, 182, 0.08);

  border-radius: 20px;
}


.mat-cta-copy {
  max-width: 650px;
}


.mat-cta-label {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 11.5px;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.mat-cta-copy p {
  margin: 0;

  color: var(--text);

  font-size: 15.5px;
  line-height: 1.55;
}


.mat-cta .btn {
  flex-shrink: 0;

  background: #fff;
}


.mat-cta .btn span {
  font-size: 18px;

  transition: transform 0.2s ease;
}


.mat-cta .btn:hover span {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .maturity {
    padding: 95px 0;
  }

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

  .mat::before {
    display: none;
  }

  .mat-card {
    min-height: 320px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .maturity {
    padding: 78px 0;
  }

  .maturity-head {
    margin-bottom: 48px;
  }

  .mat {
    grid-template-columns: 1fr;

    gap: 16px;

    margin-bottom: 36px;
  }

  .mat-card,
  .mat-card.on {
    min-height: auto;

    padding: 27px 24px 24px;

    transform: none;
  }

  .mat-card:hover,
  .mat-card.on:hover {
    transform: translateY(-4px);
  }

  .mat-top {
    margin-bottom: 20px;
  }

  .mat-line {
    margin-bottom: 22px;
  }

  .mat-card p {
    font-size: 15px;
  }

  .mat-cta {
    flex-direction: column;
    align-items: flex-start;

    gap: 22px;

    padding: 24px;
  }

  .mat-cta .btn {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mat-card,
  .mat-card::after,
  .mat-arrow,
  .mat-cta .btn span {
    transition: none !important;
  }

}


/* =========================================================
   TECHNICAL ASSESSMENT
========================================================= */

.assessment {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(144, 224, 239, 0.2),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fdff 100%
    );
}


/* ---------- header ---------- */

.assessment-head {
  max-width: 790px;
  margin-bottom: 68px;
}

.assessment-head h2 {
  margin-bottom: 22px;
}


/* =========================================================
   STEP GRID
========================================================= */

.steps {
  position: relative;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}


/* subtle progression line */

.steps::before {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  top: 48px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(0, 119, 182, 0.06),
      rgba(0, 180, 216, 0.3),
      rgba(0, 119, 182, 0.06)
    );

  z-index: 0;
}


/* =========================================================
   STEP CARD
========================================================= */

.step {
  position: relative;
  z-index: 1;

  min-height: 275px;

  display: flex;
  flex-direction: column;

  padding: 28px 28px 24px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(3, 4, 94, 0.075);

  border-radius: 22px;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.035),
    0 16px 40px rgba(3, 4, 94, 0.045);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.step::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--blue),
    var(--cyan)
  );

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;
}


.step:hover {
  transform: translateY(-6px);

  border-color: rgba(0, 119, 182, 0.18);

  box-shadow:
    0 8px 22px rgba(3, 4, 94, 0.06),
    0 24px 55px rgba(3, 4, 94, 0.08);
}


.step:hover::after {
  transform: scaleX(1);
}


/* =========================================================
   STEP HEADER
========================================================= */

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 42px;

  margin-bottom: 22px;
}


.step-n {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--surface-tint);

  color: var(--blue);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.02em;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.step-label {
  color: var(--muted-2);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.step:hover .step-n {
  background: var(--blue);
  color: #fff;

  transform: scale(1.06);
}


/* =========================================================
   DIVIDER
========================================================= */

.step-line {
  width: 100%;
  height: 1px;

  margin-bottom: 25px;

  background: var(--line-soft);
}


/* =========================================================
   CONTENT
========================================================= */

.step h3 {
  margin-bottom: 12px;

  font-size: 22px;

  letter-spacing: -0.025em;
}


.step p {
  margin: 0;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.65;
}


/* =========================================================
   ARROW
========================================================= */

.step-arrow {
  margin-top: auto;

  align-self: flex-end;

  width: 31px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(0, 119, 182, 0.12);

  border-radius: 50%;

  color: var(--blue);

  font-size: 15px;

  opacity: 0.55;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}


.step:hover .step-arrow {
  transform: translate(3px, -3px);

  opacity: 1;

  background: var(--blue);

  color: #fff;
}


/* =========================================================
   FOCUS CARDS
========================================================= */

.step-focus {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f1fbfe 100%
    );

  border-color: rgba(0, 180, 216, 0.12);
}


.step-focus .step-n {
  background: rgba(0, 180, 216, 0.1);

  color: var(--blue);
}


/* =========================================================
   FINAL CARD
========================================================= */

.step-final {
  background: var(--navy);

  border-color: var(--navy);

  box-shadow:
    0 12px 30px rgba(3, 4, 94, 0.14),
    0 28px 60px rgba(3, 4, 94, 0.1);
}


.step-final:hover {
  border-color: var(--navy);
}


.step-final h3 {
  color: #fff;
}


.step-final p {
  color: rgba(255, 255, 255, 0.68);
}


.step-final .step-n {
  background: rgba(255, 255, 255, 0.1);

  color: var(--sky);
}


.step-final .step-label {
  color: var(--sky);
}


.step-final .step-line {
  background: rgba(255, 255, 255, 0.1);
}


.step-final .step-arrow {
  border-color: rgba(255, 255, 255, 0.15);

  color: var(--cyan);
}


.step-final:hover .step-arrow {
  background: var(--cyan);

  color: var(--navy);
}


/* =========================================================
   BOTTOM NOTE
========================================================= */

.assessment-note {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 42px;

  padding: 22px 26px;

  background: var(--surface-tint);

  border: 1px solid rgba(0, 119, 182, 0.08);

  border-radius: 18px;
}


.assessment-note-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--blue);

  color: #fff;

  font-size: 15px;
  font-weight: 700;
}


.assessment-note strong {
  display: block;

  margin-bottom: 2px;

  font-size: 15px;
}


.assessment-note p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .assessment {
    padding: 95px 0;
  }

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

  .steps::before {
    display: none;
  }

  .step {
    min-height: 280px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .assessment {
    padding: 78px 0;
  }

  .assessment-head {
    margin-bottom: 46px;
  }

  .steps {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .step,
  .step-final {
    min-height: auto;

    padding: 25px 23px 22px;
  }

  .step h3 {
    font-size: 21px;
  }

  .step p {
    font-size: 15px;
  }

  .assessment-note {
    align-items: flex-start;

    padding: 20px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .step,
  .step::after,
  .step-n,
  .step-arrow {
    transition: none !important;
  }

}


/* =========================================================
   PILOT SECTION — PREMIUM UI
========================================================= */

.pilot-section {
  position: relative;
  overflow: hidden;
  padding: var(--pad-sec) 0;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(144, 224, 239, 0.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(0, 180, 216, 0.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4fcfe 52%,
      #eaf9fd 100%
    );
}

.pilot-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: 120px;
  border: 1px solid rgba(0, 180, 216, 0.10);
  border-radius: 50%;
  pointer-events: none;
}

.pilot-section .wrap {
  position: relative;
  z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.pilot-head {
  max-width: 820px;
  margin: 0 auto 64px;
}

.pilot-head .eyebrow {
  margin-bottom: 22px;
}

.pilot-head h2 {
  max-width: 760px;
  margin: 0 auto 22px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.pilot-head h2 span {
  color: var(--blue);
}

.pilot-head .lead {
  margin: 0 auto;
  max-width: 650px;
}


/* =========================================================
   USE CASE PANEL
========================================================= */

.pilot-usecases {
  max-width: 1080px;
  margin: 0 auto 42px;
  padding: 30px 32px 34px;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(3, 4, 94, 0.07);
  border-radius: 24px;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.035),
    0 18px 45px rgba(3, 4, 94, 0.055);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pilot-usecase-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.pilot-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.pilot-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;

  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.10);
}

.pilot-usecase-intro p {
  color: var(--muted-2);
  font-size: 14px;
}


/* =========================================================
   USE CASE TAGS
========================================================= */

.pilot-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  max-width: none;
}

.pilot-tag {
  min-height: 58px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 10px 16px;

  background: #ffffff;
  border: 1px solid rgba(3, 4, 94, 0.075);
  border-radius: 14px;

  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  text-align: left;

  box-shadow: 0 2px 8px rgba(3, 4, 94, 0.025);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.pilot-tag i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: var(--surface-tint);
  color: var(--blue);

  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;

  transition:
    background 0.22s ease,
    color 0.22s ease;
}

.pilot-tag:hover {
  transform: translateY(-3px);

  background: #ffffff;
  border-color: rgba(0, 180, 216, 0.28);

  box-shadow:
    0 10px 25px rgba(3, 4, 94, 0.07),
    0 0 0 3px rgba(0, 180, 216, 0.035);
}

.pilot-tag:hover i {
  background: var(--blue);
  color: #ffffff;
}


/* =========================================================
   PILOT JOURNEY
========================================================= */

.pilot-journey {
  max-width: 1080px;
  margin: 0 auto;

  padding: 38px 40px 40px;

  background: var(--navy);
  border-radius: 28px;

  box-shadow:
    0 16px 40px rgba(3, 4, 94, 0.15),
    0 30px 70px rgba(3, 4, 94, 0.08);

  position: relative;
  overflow: hidden;
}

.pilot-journey::before {
  content: "";

  position: absolute;
  width: 360px;
  height: 360px;

  right: -150px;
  top: -190px;

  border-radius: 50%;

  border: 1px solid rgba(144, 224, 239, 0.15);
}

.pilot-journey::after {
  content: "";

  position: absolute;
  width: 180px;
  height: 180px;

  left: -90px;
  bottom: -100px;

  border-radius: 50%;

  background: rgba(0, 180, 216, 0.08);
  filter: blur(2px);
}

.pilot-journey-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;

  padding-bottom: 30px;
  margin-bottom: 6px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pilot-journey-head h3 {
  max-width: 580px;
  margin-top: 10px;

  color: #ffffff;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
}

.pilot-duration {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 9px 14px;

  border: 1px solid rgba(144, 224, 239, 0.18);
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;
  white-space: nowrap;
}

.pilot-duration b {
  color: var(--sky);
  font-size: 14px;
}


/* =========================================================
   FLOW
========================================================= */

.pilot-flow {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;

  align-items: center;

  gap: 0;

  padding-top: 30px;
}

/* These four stages were styled for a dark band — white title, white
   body copy, --sky on the number — but .pilot-section is a light
   gradient (#fff -> #eaf9fd), so the whole strip rendered as invisible
   white-on-white. Repointed at the light-background tokens the rest of
   the section already uses. */
.pilot-stage {
  min-width: 0;
}

.pilot-stage-number {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border: 1px solid rgba(0, 180, 216, 0.30);
  border-radius: 50%;

  background: #ffffff;
  box-shadow: 0 1px 3px rgba(3, 4, 94, 0.05);

  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pilot-stage-content > span {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

.pilot-stage-content strong {
  display: block;

  margin-bottom: 8px;

  color: var(--text);

  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pilot-stage-content p {
  max-width: 190px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.55;
}


/* =========================================================
   CONNECTORS
========================================================= */

.pilot-connector {
  height: 1px;

  position: relative;

  margin: 0 7px;
  background: rgba(0, 180, 216, 0.35);
}

.pilot-connector span {
  position: absolute;

  right: -1px;
  top: 50%;

  width: 7px;
  height: 7px;

  transform: translateY(-50%) rotate(45deg);

  border-top: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
}


/* =========================================================
   FINAL STAGE
========================================================= */

.pilot-stage-final .pilot-stage-number {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--navy);

  box-shadow:
    0 0 0 5px rgba(0, 180, 216, 0.10),
    0 8px 22px rgba(0, 180, 216, 0.18);
}

.pilot-stage-final .pilot-stage-content strong {
  color: var(--blue);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.pilot-bottom {
  max-width: 1080px;
  margin: 26px auto 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 22px 26px;

  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(3, 4, 94, 0.065);
  border-radius: 20px;

  box-shadow: 0 5px 18px rgba(3, 4, 94, 0.04);
}

.pilot-note {
  display: flex;
  align-items: center;
  gap: 15px;
}

.pilot-note-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--surface-tint);
  color: var(--blue);
}

.pilot-note-icon svg {
  width: 19px;
  height: 19px;
}

.pilot-note strong {
  display: block;

  margin-bottom: 3px;

  color: var(--text);

  font-size: 14px;
  font-weight: 650;
}

.pilot-note p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.pilot-cta {
  flex-shrink: 0;
  min-height: 50px;
  padding: 0 23px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .pilot-section {
    padding: 90px 0;
  }

  .pilot-head {
    margin-bottom: 50px;
  }

  .pilot-tags {
    grid-template-columns: 1fr 1fr;
  }

  .pilot-journey {
    padding: 32px 28px;
  }

  .pilot-flow {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .pilot-connector {
    display: none;
  }

  .pilot-stage {
    position: relative;
    padding: 4px 0 4px 16px;
    border-left: 1px solid rgba(144, 224, 239, 0.18);
  }

  .pilot-stage-number {
    margin-bottom: 14px;
  }

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

  .pilot-cta {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .pilot-section {
    padding: 76px 0;
  }

  .pilot-head {
    margin-bottom: 40px;
  }

  .pilot-head h2 {
    font-size: 38px;
  }

  .pilot-head .lead {
    font-size: 16px;
  }

  .pilot-usecases {
    padding: 24px 20px 26px;
    border-radius: 20px;
  }

  .pilot-usecase-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .pilot-tags {
    grid-template-columns: 1fr;
  }

  .pilot-tag {
    min-height: 54px;
  }

  .pilot-journey {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .pilot-journey-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
  }

  .pilot-journey-head h3 {
    font-size: 24px;
  }

  .pilot-duration {
    font-size: 11px;
  }

  .pilot-flow {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .pilot-stage {
    padding-left: 17px;
  }

  .pilot-stage-content p {
    max-width: 100%;
  }

  .pilot-bottom {
    padding: 20px;
    gap: 20px;
  }

  .pilot-note {
    align-items: flex-start;
  }

  .pilot-note p {
    font-size: 13px;
  }

  .pilot-cta {
    width: 100%;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .pilot-head h2 {
    font-size: 34px;
  }

  .pilot-usecases {
    padding: 22px 16px;
  }

  .pilot-journey {
    padding: 25px 18px;
  }

  .pilot-bottom {
    padding: 18px;
  }
}



/* =========================================================
   TECHNICAL ASSESSMENT — PREMIUM FORM UI
========================================================= */

#lead-form {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(144, 224, 239, 0.32) 0%,
      rgba(144, 224, 239, 0) 32%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fdff 52%,
      #eaf9fd 100%
    );
}

#lead-form::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.08);
  filter: blur(20px);
  pointer-events: none;
}

#lead-form .wrap {
  position: relative;
  z-index: 2;
}


/* =========================================================
   MAIN GRID
========================================================= */

#lead-form .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
  gap: clamp(50px, 6vw, 96px);
  align-items: center;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

#lead-form .form-copy {
  max-width: 590px;
}

#lead-form .form-copy .eyebrow {
  margin-bottom: 22px;
}

#lead-form .form-copy h2 {
  max-width: 570px;
  margin-bottom: 22px;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

#lead-form .form-copy > .lead {
  max-width: 550px;
  margin-bottom: 38px;
  font-size: 17px;
  line-height: 1.72;
}


/* =========================================================
   BENEFIT / TRUST ROWS
========================================================= */

#lead-form .fc {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;

  max-width: 550px;

  margin-bottom: 14px;
  padding: 15px 18px;

  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(0, 119, 182, 0.08);
  border-radius: 14px;

  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(3, 4, 94, 0.72);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#lead-form .fc:hover {
  transform: translateX(4px);
  background: #ffffff;
  border-color: rgba(0, 180, 216, 0.2);
  box-shadow: 0 8px 24px rgba(3, 4, 94, 0.06);
}

#lead-form .fc svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;

  margin-top: 1px;

  color: var(--blue);

  padding: 2px;

  border-radius: 50%;
  background: rgba(0, 180, 216, 0.1);
}


/* =========================================================
   CONTACT CARD
========================================================= */

#lead-form .contact {
  position: relative;

  margin-top: 34px;
  padding: 22px 24px;

  border: 1px solid rgba(3, 4, 94, 0.08);
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(234, 249, 253, 0.7)
    );

  box-shadow: 0 8px 28px rgba(3, 4, 94, 0.045);

  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}

#lead-form .contact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;

  width: 3px;

  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    var(--blue),
    var(--cyan)
  );
}

/* Entity mark, sized off its own aspect ratio (the width/height
   attributes on the img), so the two lockups — which are different
   widths — sit on a common cap height rather than a common width. */
#lead-form .contact .contact-logo {
  display: block;
  height: 26px;
  width: auto;
  margin-bottom: 12px;
}

#lead-form .contact strong {
  display: inline-block;
  margin-bottom: 2px;

  color: var(--navy);
  font-size: 15px;
  font-weight: 650;
}

#lead-form .contact a {
  position: relative;
  color: var(--blue);
  font-weight: 550;

  transition: color 0.2s ease;
}

#lead-form .contact a:hover {
  color: var(--navy);
}


/* =========================================================
   FORM CARD
========================================================= */

#lead-form .lead-form {


  padding: clamp(30px, 4vw, 48px);

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(3, 4, 94, 0.08);
  border-radius: 28px;

  box-shadow:
    0 8px 24px rgba(3, 4, 94, 0.05),
    0 28px 70px rgba(3, 4, 94, 0.10);

  isolation: isolate;
}

#lead-form .lead-form::before {
  content: "";

  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;

  width: 4px;

  border-radius: 0 6px 6px 0;

  background: linear-gradient(
    to bottom,
    var(--blue),
    var(--cyan)
  );

  z-index: -1;
}

#lead-form .lead-form::after {
  content: "TECHNICAL ASSESSMENT";

  position: absolute;
  top: 22px;
  right: 28px;

  padding: 7px 12px;

  border-radius: 999px;

  background: var(--surface-tint);

  color: var(--blue);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;

  pointer-events: none;
}


/* =========================================================
   FIELD
========================================================= */

#lead-form .field {
  position: relative;
  margin-bottom: 22px;
}

#lead-form .field label {
  display: block;

  margin-bottom: 8px;

  color: var(--navy);

  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

#lead-form .field input,
#lead-form .field textarea {
  width: 100%;

  display: block;

  padding: 15px 17px;

  background: #f8fcfe;

  border: 1px solid rgba(3, 4, 94, 0.11);
  border-radius: 12px;

  color: var(--navy);

  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;

  outline: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#lead-form .field input {
  min-height: 52px;
}

#lead-form .field textarea {
  min-height: 132px;
  resize: vertical;
}

#lead-form .field input::placeholder,
#lead-form .field textarea::placeholder {
  color: rgba(3, 4, 94, 0.38);
}

#lead-form .field input:hover,
#lead-form .field textarea:hover {
  border-color: rgba(0, 119, 182, 0.22);
  background: #ffffff;
}

#lead-form .field input:focus,
#lead-form .field textarea:focus {
  background: #ffffff;
  border-color: var(--blue);

  box-shadow:
    0 0 0 4px rgba(0, 119, 182, 0.08),
    0 6px 18px rgba(3, 4, 94, 0.04);
}


/* =========================================================
   TWO-COLUMN FIELD ROW
   Works if your HTML uses .f-row
========================================================= */

#lead-form .f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


/* =========================================================
   HONEYPOT
========================================================= */

#lead-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#lead-form .lead-form .btn {
  position: relative;

  width: 100%;
  min-height: 58px;

  justify-content: center;

  margin-top: 5px;
  padding: 16px 24px;

  border: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #0077b6 0%,
      #009dcc 100%
    );

  color: #ffffff;

  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;

  box-shadow:
    0 8px 20px rgba(0, 119, 182, 0.20);

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

#lead-form .lead-form .btn::after {
  content: "→";

  margin-left: 10px;

  font-size: 18px;
  line-height: 1;

  transition: transform 0.25s ease;
}

#lead-form .lead-form .btn:hover {
  background:
    linear-gradient(
      135deg,
      #03045e 0%,
      #0077b6 100%
    );

  transform: translateY(-2px);

  box-shadow:
    0 14px 30px rgba(3, 4, 94, 0.20);
}

#lead-form .lead-form .btn:hover::after {
  transform: translateX(4px);
}

#lead-form .lead-form .btn:active {
  transform: translateY(0);
}


/* =========================================================
   FORM STATUS / MICRO COPY
========================================================= */

#lead-form .f-fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 15px;

  color: rgba(3, 4, 94, 0.52);

  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

#lead-form .f-fine::before {
  content: "✓";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  border-radius: 50%;

  background: rgba(0, 180, 216, 0.12);
  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {
  #lead-form {
    padding: 90px 0;
  }

  #lead-form .form-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  #lead-form .form-copy {
    max-width: 760px;
  }

  #lead-form .form-copy h2 {
    max-width: 700px;
  }

  #lead-form .form-copy > .lead {
    max-width: 680px;
  }

  #lead-form .fc {
    max-width: 680px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
  #lead-form {
    padding: 72px 0;
  }

  #lead-form .form-grid {
    gap: 38px;
  }

  #lead-form .form-copy h2 {
    font-size: 38px;
    line-height: 1.04;
  }

  #lead-form .form-copy > .lead {
    font-size: 16px;
    margin-bottom: 28px;
  }

  #lead-form .fc {
    padding: 14px;
    font-size: 14px;
  }

  #lead-form .contact {
    margin-top: 28px;
    padding: 20px 20px 20px 23px;
  }

  #lead-form .lead-form {
    padding: 28px 20px 24px;
    border-radius: 22px;
  }

  #lead-form .lead-form::after {
    display: none;
  }

  #lead-form .lead-form::before {
    top: 22px;
    bottom: 22px;
  }

  #lead-form .f-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #lead-form .field {
    margin-bottom: 18px;
  }

  #lead-form .field input {
    min-height: 50px;
  }

  #lead-form .field textarea {
    min-height: 120px;
  }

  #lead-form .lead-form .btn {
    min-height: 56px;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  #lead-form .form-copy h2 {
    font-size: 34px;
  }

  #lead-form .lead-form {
    padding: 25px 17px 22px;
  }

  #lead-form .fc {
    gap: 11px;
    font-size: 13.5px;
  }
}


/* =========================================================
   FAQ — PREMIUM ACCORDION
========================================================= */

.faq-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(144, 224, 239, 0.26),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fdff 48%,
      #caf0f8 100%
    );
}


/* subtle background detail */

.faq-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: 18%;
  border-radius: 50%;
  background: rgba(0, 180, 216, 0.08);
  filter: blur(80px);
  pointer-events: none;
}

.faq-section .narrow {
  position: relative;
  z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.faq-head {
  max-width: 820px !important;
  margin-bottom: 52px !important;
}

.faq-head .eyebrow {
  margin-bottom: 20px;
}

.faq-head h2 {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.faq-intro {
  max-width: 680px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item {
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid rgba(3, 4, 94, 0.075);
  border-radius: 18px;

  box-shadow:
    0 2px 8px rgba(3, 4, 94, 0.035),
    0 10px 28px rgba(3, 4, 94, 0.025);

  transition:
    border-color 0.25s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease,
    background 0.25s ease;
}


/* cyan accent */

.faq-item::before {
  content: "";

  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;

  width: 3px;

  border-radius: 0 4px 4px 0;

  background: linear-gradient(
    180deg,
    var(--cyan),
    var(--blue)
  );

  opacity: 0;
  transform: scaleY(0.4);

  transition:
    opacity 0.25s ease,
    transform 0.3s ease;
}


.faq-item:hover {
  border-color: rgba(0, 119, 182, 0.16);

  box-shadow:
    0 8px 24px rgba(3, 4, 94, 0.07),
    0 18px 42px rgba(3, 4, 94, 0.045);

  transform: translateY(-2px);
}


.faq-item:hover::before,
.faq-item[open]::before {
  opacity: 1;
  transform: scaleY(1);
}


/* =========================================================
   SUMMARY
========================================================= */

.faq-item summary {
  position: relative;

  min-height: 82px;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;

  align-items: center;

  column-gap: 20px;

  padding: 20px 26px;

  list-style: none;
  cursor: pointer;

  user-select: none;
}


/* remove default marker */

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
}


/* =========================================================
   NUMBER
========================================================= */

.faq-index {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background: var(--surface-tint);
  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {
  color: var(--text);

  font-size: 17px;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: -0.018em;

  transition: color 0.2s ease;
}


.faq-item:hover .faq-question {
  color: var(--blue);
}


.faq-item[open] .faq-question {
  color: var(--navy);
}


.faq-item[open] .faq-index {
  background: var(--blue);
  color: #ffffff;
  transform: scale(1.04);
}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.faq-ic {
  position: relative;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--surface-tint);

  transition:
    background 0.25s ease,
    transform 0.3s ease;
}


.faq-ic::before,
.faq-ic::after {
  content: "";

  position: absolute;

  width: 14px;
  height: 1.5px;

  border-radius: 2px;

  background: var(--blue);

  transition:
    transform 0.3s ease,
    background 0.25s ease;
}


.faq-ic::after {
  transform: rotate(90deg);
}


.faq-item:hover .faq-ic {
  background: rgba(0, 180, 216, 0.12);
}


.faq-item[open] .faq-ic {
  background: var(--navy);
  transform: rotate(180deg);
}


.faq-item[open] .faq-ic::before,
.faq-item[open] .faq-ic::after {
  background: #ffffff;
}


.faq-item[open] .faq-ic::after {
  transform: rotate(0deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
  padding: 0 88px 27px 94px;

  animation: faqAnswer 0.35s ease both;
}


@keyframes faqAnswer {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.faq-answer p {
  max-width: 680px;

  margin: 0;

  padding-top: 2px;

  color: var(--muted);

  font-size: 15.5px;
  line-height: 1.75;
}


/* =========================================================
   OPEN STATE
========================================================= */

.faq-item[open] {
  background: #ffffff;

  border-color: rgba(0, 119, 182, 0.14);

  box-shadow:
    0 10px 28px rgba(3, 4, 94, 0.065),
    0 24px 55px rgba(3, 4, 94, 0.045);
}


/* =========================================================
   FOCUS
========================================================= */

.faq-item summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
  border-radius: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

  .faq-section {
    padding: 90px 0;
  }

  .faq-head {
    margin-bottom: 38px !important;
  }

  .faq-head h2 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .faq-intro {
    font-size: 16px;
  }

  .faq-item summary {
    min-height: 76px;

    grid-template-columns: 40px minmax(0, 1fr) 38px;

    column-gap: 14px;

    padding: 18px 18px;
  }

  .faq-index {
    width: 34px;
    height: 34px;

    font-size: 10px;
  }

  .faq-question {
    font-size: 15.5px;
  }

  .faq-ic {
    width: 36px;
    height: 36px;
  }

  .faq-answer {
    padding: 0 54px 24px 72px;
  }

  .faq-answer p {
    font-size: 15px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  .faq-section {
    padding: 76px 0;
  }

  .faq {
    gap: 10px;
  }

  .faq-item {
    border-radius: 16px;
  }

  .faq-item summary {
    grid-template-columns: 34px minmax(0, 1fr) 34px;

    column-gap: 11px;

    min-height: 72px;

    padding: 16px 14px;
  }

  .faq-index {
    width: 31px;
    height: 31px;

    border-radius: 9px;

    font-size: 9px;
  }

  .faq-question {
    font-size: 14.5px;
    line-height: 1.4;
  }

  .faq-ic {
    width: 32px;
    height: 32px;
  }

  .faq-ic::before,
  .faq-ic::after {
    width: 12px;
  }

  .faq-answer {
    padding: 0 18px 22px 59px;
  }

  .faq-answer p {
    font-size: 14px;
    line-height: 1.7;
  }

  .faq-item::before {
    top: 14px;
    bottom: 14px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .faq-item,
  .faq-index,
  .faq-ic,
  .faq-ic::before,
  .faq-ic::after {
    transition: none !important;
  }

  .faq-answer {
    animation: none !important;
  }
}

/* =========================================================
   ADDITIONS
   Sections and controls brought over from the content
   version, plus the lead-capture chrome. Everything below
   is built from the tokens already declared in :root — no
   new colours, radii or shadows are introduced.
========================================================= */


/* ---------- quick answer + visibility gap ---------- */

.problem {
  padding: var(--pad-sec) 0;
  background: var(--bg);
}

/* The definition block. Reads as a pulled-out answer rather
   than as body copy, which is what both an impatient buyer
   and an answer engine take from the top of the page. */
.answer-box {
  position: relative;
  max-width: 900px;
  margin-bottom: 72px;
  padding: 36px 40px 36px 44px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.answer-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.answer-box-label {
  display: block;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.answer-box p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text);
}

@media (max-width: 600px) {
  .answer-box {
    padding: 28px 24px 28px 28px;
    margin-bottom: 52px;
  }

  .answer-box p {
    font-size: 16.5px;
  }
}


/* ---------- hero eyebrow ---------- */

/* The hero pill is nowrap with a fixed height, sized for the single
   company name it originally carried. It now names both SMEC entities,
   which is wider than a phone's hero column — and because the hero grid
   track is sized from its content, an unwrappable pill pushed the whole
   column past the viewport and the section's overflow:hidden clipped
   the headline. Below the point where it stops fitting, let it wrap.
   Desktop is untouched: there the pill still sits on one line. */
@media (max-width: 760px) {
  .hero .eyebrow {
    height: auto;
    padding: 9px 17px;
    white-space: normal;
    line-height: 1.45;
  }
}


/* ---------- platform side notes ---------- */

.pf-note {
  margin-bottom: 34px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}


/* ---------- operational need -> digital layer ---------- */

.map-section {
  padding: var(--pad-sec) 0;
  background: var(--bg);
}

.map-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-2);
}

.map-table th,
.map-table td {
  padding: 22px 30px;
  text-align: left;
  font-size: 16px;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-soft);
}

.map-table th {
  background: var(--surface-tint);
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-table td {
  color: var(--muted);
}

.map-table td strong {
  color: var(--text);
  font-weight: 600;
}

.map-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 600px) {
  .map-table th,
  .map-table td {
    padding: 16px 18px;
    font-size: 15px;
  }
}


/* ---------- the SMEC difference / stats ---------- */

.stats-band {
  position: relative;
  overflow: hidden;
  padding: var(--pad-sec) 0;
  color: #fff;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0, 180, 216, 0.18) 0%,
      rgba(0, 180, 216, 0.06) 24%,
      transparent 54%
    ),
    linear-gradient(135deg, #03045e 0%, #03156f 48%, #03045e 100%);
}

.stats-band .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sky);
}

.stats-band h2 {
  max-width: 640px;
  margin-bottom: 64px;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
}

/* Four stats, not the three the shared .stats grid assumes.
   Not plain 1fr: one label is much longer than the rest, and 1fr
   lets it widen its own column.
   Not minmax(0, 1fr) either: that floors the track at zero, and
   "10,000+" at the clamped 76px is wider than a quarter of the
   wrap — the number overflowed its track and ran into the next
   stat. min-content floors each track at its widest unbreakable
   token (the number), while the labels still wrap as before. */
.stats-band .stats {
  grid-template-columns: repeat(4, minmax(min-content, 1fr));
  gap: 40px 40px;
}

@media (max-width: 1000px) {
  .stats-band .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stats-band .stats {
    grid-template-columns: 1fr;
  }
}


/* ---------- contact blocks ---------- */

.contact--second {
  margin-top: 26px;
  padding-top: 26px;
}


/* ---------- footer ---------- */

.foot {
  align-items: flex-start;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.foot-entity {
  display: block;
  line-height: 1.85;
}

.foot-entity strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.foot-entity em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.46);
}


/* ---------- form chrome ---------- */

.field .req {
  color: var(--blue);
  font-weight: 600;
}

.field .opt {
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 400;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%),
    linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
  cursor: pointer;
}

.file-field small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-2);
}

.consent-field {
  margin-top: 4px;
}

/* The #lead-form variants restore this row inside the assessment form,
   where "#lead-form .field label" and "#lead-form .field input" (ID
   selectors) otherwise win: the label became a bold block and the
   checkbox a full-width 52px box sitting above its own text. */
.consent,
#lead-form .field .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 0;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}

.consent input[type="checkbox"],
#lead-form .field .consent input[type="checkbox"] {
  width: 19px;
  height: 19px;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Errors are announced on the field itself as well as in the
   feedback line, so the message and the target agree.

   The #lead-form variants are required, not redundant: the assessment
   form's inputs are styled by "#lead-form .field input" (an ID
   selector), which outranks ".field input.error" and left every errored
   text field and the message box looking untouched. */
.field input.error,
.field select.error,
.field textarea.error,
#lead-form .field input.error,
#lead-form .field textarea.error {
  border-color: #c0392b;
  background: #fff;
}

.consent input.error,
#lead-form .field .consent input.error,
.file-field input.error {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

.form-feedback {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}

.form-feedback:empty {
  margin-top: 0;
}

.form-feedback.error {
  color: #c0392b;
}

.form-feedback.success {
  color: var(--blue);
}


/* =========================================================
   QUICK ENQUIRY POPUP
========================================================= */

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 4, 94, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}

.popup-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* The scroll lock lives on <html>, not <body>. Once <html> carries its
   own overflow value (see ROOT OVERFLOW below), a lock on <body> no
   longer propagates to the viewport, so it would stop working. */
html.popup-open {
  overflow: hidden;
}

.popup-card {
  /* Scrolling inside the card stops at its edges instead of carrying on
     into the page behind it. */
  overscroll-behavior: contain;
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px 38px 34px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.popup-overlay.open .popup-card {
  transform: none;
}

.popup-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border: none;
  border-radius: 50%;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.popup-close:hover {
  background: var(--sky);
  color: var(--navy);
}

.popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 15px;
  background: var(--surface-tint);
  border-radius: var(--r-pill);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.popup-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.16);
}

.popup-title {
  margin-bottom: 10px;
  font-size: 27px;
}

.popup-subtitle {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.popup-form .field {
  margin-bottom: 16px;
}

.popup-submit {
  width: 100%;
  justify-content: center;
  padding: 16px;
  margin-top: 4px;
}

.popup-not-now {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: none;
  border: none;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}

.popup-not-now:hover {
  color: var(--blue);
}

.popup-consent-note {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: center;
}

@media (max-width: 520px) {
  .popup-overlay {
    padding: 14px;
  }

  .popup-card {
    padding: 34px 22px 26px;
  }

  .popup-title {
    font-size: 23px;
  }
}


/* ---------- floating quick-enquiry button ---------- */

.quick-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--blue);
  border: none;
  border-radius: var(--r-pill);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(3, 4, 94, 0.24);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.quick-cta:hover {
  background: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(3, 4, 94, 0.28);
}

.quick-cta svg {
  width: 19px;
  height: 19px;
}

/* On a phone the label costs more than it earns — the icon
   alone keeps the thumb zone clear of the page content. */
@media (max-width: 560px) {
  .quick-cta {
    right: 16px;
    bottom: 16px;
    padding: 15px;
    border-radius: 50%;
  }

  .quick-cta span {
    display: none;
  }
}

/* The popup is already open — hide the button that opens it. */
html.popup-open .quick-cta {
  opacity: 0;
  pointer-events: none;
}


/* ---------- tap targets on touch screens ---------- */

/* The phone and email links sit in running text, so they inherit the
   line box and render about 17px tall. That is fine with a mouse and
   poor with a thumb — the guidance is ~44px, and on this page the
   phone number is the fallback call-to-action, so it is the last
   control that should be fiddly to hit.

   Applied only below the tablet breakpoint: on desktop these stay
   inline so the contact block and footer keep their original rhythm. */
@media (max-width: 760px) {
  .contact a,
  .foot a,
  .ty-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0;
  }

  /* The links are the whole line here, so the taller box would double
     up with the block's own line-height and leave big gaps. */
  .contact,
  .ty-contact {
    line-height: 1.5;
  }
}


/* ---------- hero visual on phones ---------- */

/* The hero composition is a dashboard card floating over a photo. That
   works on a wide screen, where the card covers a corner. On a phone the
   card is 291px wide inside a 358px image - 81% of it - so it stops
   reading as "card over photo" and just smothers it. The photo suffers
   twice over: a 1421x1107 landscape source forced into a 358x450 portrait
   box is cropped to about 62% of its width, slicing the engineer and
   cutting the SMEC watermark in half.

   Below 600px the two are stacked instead: photo first at close to its
   own aspect ratio, dashboard card underneath at full width. Both stay,
   neither is cropped to nonsense, and nothing above 600px changes. */
@media (max-width: 600px) {
  .hero-viz,
  .hero-image-wrap {
    height: auto;
  }

  .hero-image {
    position: relative;
    right: auto;
    width: 100%;
    height: auto;
    /* 4:3 against a 1.28:1 source - a few percent off the sides rather
       than the 38% the portrait box was taking. */
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  /* Decorative wash, absolutely positioned and sized to the old fixed
     box. With the image back in flow it has nothing to sit on. */
  .hero-image-wrap::after {
    display: none;
  }

  /* Out of the overlay and into the flow, at its real size - the inner
     SVG has a viewBox so it scales down on its own, no transform needed. */
  .hero-card {
    position: static;
    width: 100%;
    margin-top: 16px;
    transform: none;
  }
}


/* =========================================================
   WHATSAPP
   Header (top), final call-to-action band and footer (bottom).

   #0e7a5f is the WhatsApp green the other SMEC landing pages
   already use, and it is the accessible one: white text on it is
   5.3:1. WhatsApp's own #25D366 with white text is about 2:1 and
   fails for body-size labels.
========================================================= */

.btn-whatsapp {
  background: #0e7a5f;
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 122, 95, 0.22);
}

.btn-whatsapp:hover {
  background: #0b634d;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(14, 122, 95, 0.28);
}

.wa-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ---------- header ---------- */

/* WhatsApp and the primary CTA travel together at the right of the
   bar. stretch keeps the two pills the same height whatever their
   padding. */
.top-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
}

.top-wa {
  padding: 13px 20px;
  gap: 8px;
}

/* Header space budget, measured: the original bar needs 1025px of
   viewport and the design hides the "Asset Digital Intelligence"
   subtitle below 1050px. The WhatsApp pill adds 150px, taking the need
   to 1175px - so between 1051px and 1174px the CTA was pushed off the
   edge. Icon-only alone saves 92px, not enough. The subtitle (187px)
   has to go first, so it now yields below 1200px instead of 1050px,
   leaving 25px of slack at 1200 and 63px at 1051. */
@media (max-width: 1199px) {
  .brand-sub {
    display: none;
  }
}

/* Icon-only from 1050px down. Between 821px and 900px the nav is still
   showing, and the labelled pill pushed the CTA off the edge of the
   screen. The green glyph carries the meaning on its own; the word
   "WhatsApp" stays in the accessible name via aria-label.

   Sized explicitly rather than with aspect-ratio: in a stretched flex
   row the height comes from the neighbour but the width still comes
   from the content, so aspect-ratio produced a 22x42 sliver, not a
   circle. */
@media (max-width: 1050px) {
  .top-wa {
    align-self: center;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .top-wa .wa-label {
    display: none;
  }

  .top-wa .wa-icon {
    width: 22px;
    height: 22px;
  }
}

/* 821-900px is the tightest band: the nav is still showing and the
   WhatsApp icon costs 58px. Measured spare space was 2px at 822px -
   enough on the font this was tested with, not enough to survive SF Pro
   on a Mac or a system fallback. Tightening the bar's spacing in this
   band only buys roughly 55px back without hiding anything. */
@media (min-width: 821px) and (max-width: 900px) {
  .topbar-inner {
    gap: 20px;
  }

  .top-nav {
    gap: 16px;
    margin-left: 8px;
  }
}

/* Nav is hidden from here down, so the pair takes over pushing right. */
@media (max-width: 820px) {
  .top-actions {
    margin-left: auto;
    gap: 8px;
  }

  .top-wa {
    width: 42px;
    height: 42px;
  }

  .top-wa .wa-icon {
    width: 20px;
    height: 20px;
  }
}

/* The smallest phones. Logo + WhatsApp + the full CTA label need about
   330px and a 320px screen offers 296 inside its gutters, so the logo
   and spacing give way rather than the CTA's wording. */
@media (max-width: 380px) {
  .topbar-inner {
    gap: 10px;
  }

  .brand-logo {
    width: 96px;
  }

  .top-actions {
    gap: 6px;
  }

  .top-wa {
    width: 40px;
    height: 40px;
  }

  .top-cta {
    padding: 10px 11px;
    font-size: 11.5px;
  }
}

/* ---------- final call-to-action band ---------- */

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
}

/* Mirrors .final .btn-light so the pair reads as a pair: same height
   (set by min-height, not padding), same pill, same lift on hover. */
.final .btn-whatsapp {
  min-height: 58px;
  padding: 0 27px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.final .btn-whatsapp:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

/* Same breakpoint as the button beside it: full width, stacked,
   equal height. */
@media (max-width: 560px) {
  .final .btn-whatsapp {
    width: 100%;
    justify-content: center;
    min-height: 56px;
    padding: 0 20px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final .btn-whatsapp {
    transition: none;
  }
}



/* =========================================================
   ROOT OVERFLOW
   Any element wider than the screen on a phone does more damage than
   its own overflow: mobile Chrome widens the layout viewport to fit it
   and zooms out, so the whole page renders narrower than the screen
   with an empty strip down the right. position:fixed elements size to
   the widened viewport, so the popup overlay and card stretch past the
   page - which is what made the popup look broken. Reproduced: with
   content 73px too wide on a 430px phone, the page stays at 430 but the
   overlay grows to 503px and the card to its full 460px.

   Clipping at the root means no single element can do that, whatever
   it turns out to be on a given device or font.

   hidden on <html> (it propagates to the viewport, so <html> itself does
   not become a scroll container); clip on <body> - NOT hidden. hidden on
   body would make body a scroll container, and position:sticky on the
   header would stick to body instead of the viewport and stop working.
   clip clips without creating a scroll container and does not force
   overflow-y to auto.
========================================================= */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}