/* =========================================================
   ASMUTEK — Stylesheet
   Section index
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Container
   05. Accessibility primitives
   06. Components — Button, Eyebrow, Brand
   07. Site header — Utility bar
   08. Site header — Primary nav
   09. Mega menu
   10. Mobile menu
   ========================================================= */

/* 01. Design tokens
   ----------------------------------------------------- */
:root {
  /* Ink scale */
  --ink-900: #0a0e1a;
  --ink-800: #161b2b;
  --ink-700: #262b3a;
  --ink-500: #5a6075;
  --ink-400: #828899;
  --ink-300: #a0a6b8;
  --ink-200: #c7cbd6;
  --ink-100: #e6e8ee;
  --ink-50: #f1f2f5;

  /* Surfaces */
  --surface: #ffffff;
  --surface-alt: #f6f5f1; /* warm cream */
  --surface-dark: #0a0e1a;

  /* Brand — mulberry purple */
  --brand: #611f69;
  --brand-700: #4a1854;
  --brand-50: #f5e9f6;
  --accent-glow: linear-gradient(135deg, #c247cc 0%, #611f69 100%);

  /* Operational */
  --signal-ok: #1fb36b;

  /* Typography */
  --font-sans:
    "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading:
    "Poppins", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --heading-navy: #0a0e1a;

  /* Radii */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 160ms;
  --dur-small: 240ms;
  --dur-medium: 600ms;
  --dur-large: 900ms;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 32px;

  /* Header heights */
  --utility-h: 36px;
  --nav-h: 72px;

  /* Z-index */
  --z-header: 100;
  --z-mega: 90;
  --z-mobile-menu: 120;
  --z-skip: 200;
}

@media (max-width: 1024px) {
  :root {
    --container-pad: 24px;
    --nav-h: 64px;
  }
}
@media (max-width: 640px) {
  :root {
    --container-pad: 20px;
    --utility-h: 0px;
  }
}

/* 02. Reset & base
   ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: #1f2937;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-xl,
.display-l,
.display-m,
.heading-l,
.heading-m,
[class*="__title"],
[class*="__subtitle"] {
  font-family: var(--font-heading);
}

/* 03. Typography
   ----------------------------------------------------- */
.display-xl {
  font-size: clamp(60px, 7.2vw, 100px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--heading-navy);
}
.display-l {
  font-size: clamp(50px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--heading-navy);
}
.display-m {
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--heading-navy);
}
.heading-l {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--heading-navy);
}
.heading-m {
  font-size: clamp(20px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  color: #475569;
  letter-spacing: -0.005em;
}
.body-l {
  font-size: 18px;
  line-height: 1.6;
}
.body {
  font-size: 16px;
  line-height: 1.6;
}
.caption {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-500);
}

/* 04. Container
   ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-small) var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 06. Components — Button, Eyebrow, Brand
   ----------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    box-shadow var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:active {
  transform: translateY(0) scale(0.99);
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(97, 31, 105, 0.2),
    0 4px 12px -4px rgba(97, 31, 105, 0.28);
}
.btn--primary:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(97, 31, 105, 0.24),
    0 10px 24px -8px rgba(97, 31, 105, 0.4);
}

.btn--secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-200);
}
.btn--secondary:hover {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(10, 14, 26, 0.28);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: transparent;
  padding-inline: 12px;
}
.btn--ghost:hover {
  color: var(--brand);
}

.btn--lg {
  padding: 16px 28px;
  font-size: 16px;
  min-height: 52px;
}
.btn--block {
  width: 100%;
}

/* Eyebrow — brand-tinted, signature mark of every section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
}
.eyebrow__line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--brand) 0%,
    rgba(97, 31, 105, 0.15) 100%
  );
  border-radius: 0;
}

/* Brand accent — the trailing dot on section headlines */
.brand-dot {
  color: var(--brand);
}

/* In-headline brand-emphasized phrase — brand color, upright */
.title-accent {
  color: var(--brand);
  font-style: normal;
  font-weight: inherit;
  font-feature-settings: "ss01", "cv11";
}

/* Brand mark + wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand__mark {
  display: block;
}
.brand__name {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.brand__name-primary {
  color: var(--ink-900);
  font-weight: 600;
}
.brand__name-secondary {
  color: var(--ink-500);
  font-weight: 500;
}

/* 07. Site header — Utility bar
   ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  transition:
    box-shadow var(--dur-small) var(--ease),
    backdrop-filter var(--dur-small) var(--ease);
}
/* Homepage only: header is transparent over the dark video hero. */
body.page-home .site-header {
  background: transparent;
}

.utility-bar {
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--utility-h);
  gap: 24px;
}
.utility-bar__segments,
.utility-bar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.utility-bar__link {
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: 0;
  transition: color var(--dur-micro) var(--ease);
  white-space: nowrap;
}
.utility-bar__link:hover {
  color: var(--ink-900);
}

.utility-bar__divider {
  width: 1px;
  height: 12px;
  background: var(--ink-100);
}

.utility-bar__link--meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.utility-bar__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-ok);
  box-shadow: 0 0 0 3px rgba(31, 179, 107, 0.16);
}

@media (max-width: 640px) {
  .utility-bar {
    display: none;
  }
}

/* 08. Site header — Primary nav
   ----------------------------------------------------- */
.primary-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--ink-100);
  transition:
    background-color var(--dur-small) var(--ease),
    border-color var(--dur-small) var(--ease),
    backdrop-filter var(--dur-small) var(--ease);
}
/* Homepage only: nav bar is transparent over the dark video hero. */
body.page-home .primary-nav {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.is-scrolled .primary-nav {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--ink-100);
}

/* Transparent-header colour mode — HOMEPAGE ONLY.
   Default state (over the dark video hero) shows white logo + white nav.
   When .is-scrolled engages the frosted backdrop, colours flip to dark. */
body.page-home .site-header .asmutek-logo {
  filter: brightness(0) invert(1);
  transition: filter var(--dur-small) var(--ease);
}
body.page-home .site-header .primary-nav__link,
body.page-home .site-header .primary-nav__trigger,
body.page-home .site-header .primary-nav__signin {
  color: #ffffff;
}
body.page-home .site-header .primary-nav__link:hover,
body.page-home .site-header .primary-nav__trigger:hover,
body.page-home .site-header .primary-nav__signin:hover {
  color: #ffffff;
  opacity: 0.85;
}
body.page-home .site-header .primary-nav__link::after {
  background: #ffffff;
}
body.page-home .site-header .primary-nav__chevron {
  color: rgba(255, 255, 255, 0.8);
}
body.page-home .site-header .primary-nav__item--has-mega.is-open .primary-nav__chevron,
body.page-home .site-header .primary-nav__item--has-mega.is-open .primary-nav__trigger {
  color: #ffffff;
}
body.page-home .site-header .primary-nav__toggle-bar {
  background: #ffffff;
}

/* Restore dark colours when the homepage header gains its frosted backdrop on scroll. */
body.page-home .site-header.is-scrolled .asmutek-logo {
  filter: none;
}
body.page-home .site-header.is-scrolled .primary-nav__link,
body.page-home .site-header.is-scrolled .primary-nav__trigger,
body.page-home .site-header.is-scrolled .primary-nav__signin {
  color: var(--ink-700);
}
body.page-home .site-header.is-scrolled .primary-nav__link:hover,
body.page-home .site-header.is-scrolled .primary-nav__trigger:hover,
body.page-home .site-header.is-scrolled .primary-nav__signin:hover {
  color: var(--ink-900);
  opacity: 1;
}
body.page-home .site-header.is-scrolled .primary-nav__link::after {
  background: var(--ink-900);
}
body.page-home .site-header.is-scrolled .primary-nav__chevron {
  color: var(--ink-500);
}
body.page-home .site-header.is-scrolled .primary-nav__item--has-mega.is-open .primary-nav__chevron,
body.page-home .site-header.is-scrolled .primary-nav__item--has-mega.is-open .primary-nav__trigger {
  color: var(--ink-900);
}
body.page-home .site-header.is-scrolled .primary-nav__toggle-bar {
  background: var(--ink-900);
}

.primary-nav__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: var(--nav-h);
}

.primary-nav__menu {
  flex: 1 1 auto;
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.primary-nav__link,
.primary-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  transition: color var(--dur-micro) var(--ease);
}
.primary-nav__link:hover,
.primary-nav__trigger:hover {
  color: var(--ink-900);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1.5px;
  background: var(--ink-900);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-small) var(--ease);
}
.primary-nav__link:hover::after {
  transform: scaleX(1);
}

.primary-nav__trigger {
  cursor: pointer;
}
.primary-nav__chevron {
  transition: transform var(--dur-small) var(--ease);
  color: var(--ink-500);
}
.primary-nav__item--has-mega.is-open .primary-nav__chevron {
  transform: rotate(180deg);
  color: var(--ink-900);
}
.primary-nav__item--has-mega.is-open .primary-nav__trigger {
  color: var(--ink-900);
}

.primary-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.primary-nav__signin {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-700);
  padding: 10px 12px;
  transition: color var(--dur-micro) var(--ease);
}
.primary-nav__signin:hover {
  color: var(--ink-900);
}

/* Mobile toggle (hidden by default) */
.primary-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}
.primary-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink-900);
  transition:
    transform var(--dur-small) var(--ease),
    opacity var(--dur-small) var(--ease);
}
.primary-nav__toggle[aria-expanded="true"]
  .primary-nav__toggle-bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.primary-nav__toggle[aria-expanded="true"]
  .primary-nav__toggle-bar:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .primary-nav__menu,
  .primary-nav__actions {
    display: none;
  }
  .primary-nav__toggle {
    display: inline-flex;
  }
}

/* 09. Mega menu
   ----------------------------------------------------- */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  box-shadow: 0 24px 48px -24px rgba(10, 14, 26, 0.12);
  z-index: var(--z-mega);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.mega-menu[hidden] {
  display: none;
}

.primary-nav__item--has-mega.is-open .mega-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu__inner {
  padding-block: 40px 48px;
}

.mega-menu__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ink-100);
}
.mega-menu__title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  max-width: 720px;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}

.mega-menu__item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 24px 24px 22px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
  transition: background-color var(--dur-small) var(--ease);
  position: relative;
}
.mega-menu__item:hover {
  background: var(--surface-alt);
}

.mega-menu__item-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.mega-menu__item-desc {
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.5;
  max-width: 32ch;
}
.mega-menu__item-meta {
  align-self: end;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 8px;
}

.mega-menu__item--all {
  background: var(--brand);
  color: #fff;
}
.mega-menu__item--all .mega-menu__item-name {
  color: #fff;
}
.mega-menu__item--all .mega-menu__item-desc {
  color: rgba(255, 255, 255, 0.7);
}
.mega-menu__item--all:hover {
  background: var(--brand-700);
}
.mega-menu__item-arrow {
  align-self: end;
  margin-top: 8px;
  color: #fff;
  transform: translateX(0);
  transition: transform var(--dur-small) var(--ease);
}
.mega-menu__item--all:hover .mega-menu__item-arrow {
  transform: translateX(4px);
}

/* Coming-soon variant — visually muted, not clickable */
.mega-menu__item--soon {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--surface);
  position: relative;
}
.mega-menu__item--soon:hover {
  background: var(--surface);
}
.mega-menu__item--soon .mega-menu__item-name {
  color: var(--ink-500);
}
.mega-menu__item--soon .mega-menu__item-desc {
  color: var(--ink-400);
}
.mega-menu__item--soon .mega-menu__item-meta {
  display: inline-flex;
  align-self: end;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (max-width: 1100px) {
  .mega-menu__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Multi-column mega menus (Services, Industries) — link lists + CTA card */
.mega-menu__cols {
  display: grid;
  gap: 36px;
}
.mega-menu__cols--3 {
  grid-template-columns: repeat(3, 1fr) 260px;
}
.mega-menu__cols--4 {
  grid-template-columns: repeat(4, 1fr) 260px;
}

@media (max-width: 1180px) {
  .mega-menu__cols--4 {
    grid-template-columns: repeat(4, 1fr) 220px;
    gap: 24px;
  }
  .mega-menu__cols--3 {
    grid-template-columns: repeat(3, 1fr) 220px;
    gap: 24px;
  }
}

.mega-menu__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mega-menu__col-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100);
}
.mega-menu__col-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mega-menu__col-list a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-700);
  line-height: 1.35;
  transition: color var(--dur-micro) var(--ease);
}
.mega-menu__col-list a:hover {
  color: var(--brand);
}

/* CTA card (last column) */
.mega-menu__cta {
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
}
.mega-menu__cta-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-900);
}
.mega-menu__cta-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
  flex: 1;
}
.mega-menu__cta-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 16px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 500;
}

/* 10. Mobile menu
   ----------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--surface);
  z-index: var(--z-mobile-menu);
  padding-top: var(--nav-h);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.mobile-menu[hidden] {
  display: none;
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 32px 48px;
  min-height: 100%;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ink-100);
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100);
}
.mobile-menu__link::after {
  content: "→";
  color: var(--ink-300);
  font-weight: 400;
  transition:
    transform var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
}
.mobile-menu__link:hover::after {
  transform: translateX(4px);
  color: var(--ink-900);
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
}
.mobile-menu__signin {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-500);
  padding: 12px 0;
  text-align: center;
}
/* 11. Hero — Cinematic dark section (with image bg + perspective grid)
   ----------------------------------------------------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: 45px 94px;
  /* background: #0E0517; */
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .hero {
    min-height: auto;
    padding-block: 72px 112px;
  }
}
@media (max-width: 640px) {
  .hero {
    padding-block: 56px 96px;
  }
}

/* Background layer stack
   z-index map:
     1 .hero__bg-image  (your photo/video)
     2 .hero__bg-grid   (perspective grid)
     3 .hero__bg-glow--a, --b
     4 .hero__bg-vignette
     5 .hero__bg-noise
     6 .hero__inner (content)
     7 .hero__scroll
*/
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Cinematic video background — full bleed, plays at near-full visibility on the right.
   The left-side darkening for text is handled by .hero__bg-vignette below. */
.hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  opacity: 0;
  filter: saturate(108%) contrast(104%) brightness(0.92);
  background: #0e0517;
  animation: heroVideoIn 1400ms var(--ease) 200ms forwards;
}
@keyframes heroVideoIn {
  to {
    opacity: 0.92;
  }
}

/* Industry stage — framed image card on the right
   Aligned with container right edge via viewport math.
   On tablet/mobile, reverts to full-bleed background. */
.hero__stage {
  position: absolute;
  top: 96px;
  right: max(32px, calc((100vw - 1280px) / 2 + 32px));
  bottom: 96px;
  width: clamp(380px, 40vw, 540px);
  z-index: 2;

  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0e0517;
  box-shadow:
    0 50px 100px -28px rgba(97, 31, 105, 0.55),
    0 28px 56px -16px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: auto;
}

/* Bottom gradient veil for caption legibility */
.hero__stage::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46%;
  background: linear-gradient(
    to top,
    rgba(14, 5, 23, 0.92) 0%,
    rgba(14, 5, 23, 0.4) 60%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

.hero__stage-mask {
  position: absolute;
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero__stage-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  filter: saturate(108%) contrast(105%) brightness(0.92);
  transition:
    opacity 1200ms var(--ease),
    transform 7500ms linear;
  will-change: opacity, transform;
}
.hero__stage-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Caption — bottom-left INSIDE the card, on the gradient veil */
.hero__stage-caption {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  z-index: 7;
  color: #fff;
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  white-space: nowrap;
}
.hero__stage-index {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero__stage-divider {
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
}
.hero__stage-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Progress bar — inside card, bottom edge */
.hero__stage-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 7;
  pointer-events: none;
}
.hero__stage-progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #f26ae2 0%, #c247cc 50%, #611f69 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Tablet — card becomes full-bleed background with vertical fade */
@media (max-width: 1024px) {
  .hero__stage {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }
  .hero__stage::after {
    background: linear-gradient(
      to bottom,
      rgba(14, 5, 23, 0.92) 0%,
      rgba(14, 5, 23, 0.45) 55%,
      transparent 100%
    );
    height: 60%;
    top: 0;
    bottom: auto;
  }
  .hero__stage-slide.is-active {
    opacity: 0.45;
  }
  .hero__stage-caption,
  .hero__stage-progress {
    display: none;
  }
}
@media (max-width: 640px) {
  .hero__stage-slide.is-active {
    opacity: 0.28;
  }
}

/* Perspective grid floor */
.hero__bg-grid {
  position: absolute;
  left: 50%;
  bottom: -42%;
  width: 240%;
  height: 100%;
  transform: translateX(-50%) perspective(900px) rotateX(72deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.085) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 70% at 30% 10%,
    #000,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 55% 70% at 30% 10%,
    #000,
    transparent 75%
  );
  z-index: 2;
  opacity: 0.18;
}

/* Purple glow blobs */
.hero__bg-glow {
  position: absolute;
  z-index: 3;
  width: 880px;
  height: 880px;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
  pointer-events: none;
}
.hero__bg-glow--a {
  top: -380px;
  right: -260px;
  background: radial-gradient(
    circle,
    rgba(176, 60, 192, 0.18) 0%,
    transparent 62%
  );
  animation: heroGlowA 22s var(--ease) infinite alternate;
}
.hero__bg-glow--b {
  bottom: -380px;
  left: -260px;
  background: radial-gradient(
    circle,
    rgba(220, 90, 200, 0.14) 0%,
    transparent 62%
  );
  animation: heroGlowB 28s var(--ease) infinite alternate;
}
@keyframes heroGlowA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-90px, 70px, 0) scale(1.08);
  }
}
@keyframes heroGlowB {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(130px, -90px, 0) scale(1.12);
  }
}

/* Left-side darkening only — the right side shows the video clearly */
.hero__bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    to right,
    rgba(14, 5, 23, 0.92) 0%,
    rgba(14, 5, 23, 0.78) 18%,
    rgba(14, 5, 23, 0.35) 45%,
    transparent 65%
  );
}

/* Cinematic film grain */
.hero__bg-noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Foreground */
.hero__inner {
  position: relative;
  z-index: 6;
  width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .hero__copy {
    gap: 24px;
  }
}

/* Scene stack — all scenes share one grid cell; only .is-active is visible */
.hero__scenes {
  display: grid;
  grid-template-columns: 1fr;
}
.hero__scene {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease),
    visibility 0s linear 600ms;
  pointer-events: none;
}
.hero__scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease),
    visibility 0s linear 0s;
  pointer-events: auto;
}
@media (max-width: 640px) {
  .hero__scene {
    gap: 22px;
  }
}

/* Scene pagination */
.hero__scene-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.hero__scene-dot {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 1px;
  transition:
    width var(--dur-small) var(--ease),
    background-color var(--dur-small) var(--ease);
}
.hero__scene-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.hero__scene-dot.is-active {
  width: 48px;
  background: #fff;
}
.hero__scene-label {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Announcement chip — dark variant */
.hero__chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    border-color var(--dur-small) var(--ease),
    background-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
}
.hero__chip:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.hero__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d170e0;
  box-shadow: 0 0 0 4px rgba(209, 112, 224, 0.28);
  animation: heroChipPulse 2.4s var(--ease) infinite;
}
@keyframes heroChipPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(209, 112, 224, 0.28);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(209, 112, 224, 0.06);
  }
}
.hero__chip-text {
  white-space: nowrap;
}
.hero__chip-arrow {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  transition:
    transform var(--dur-small) var(--ease),
    color var(--dur-micro) var(--ease);
}
.hero__chip:hover .hero__chip-arrow {
  transform: translateX(3px);
  color: #fff;
}
@media (max-width: 640px) {
  .hero__chip-text {
    white-space: normal;
    max-width: 220px;
    line-height: 1.35;
  }
}

/* Title */
/* Small eyebrow above the big headline. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.hero__title {
  color: #fff;
  font-weight: 700;
  margin: 0;
  font-size: clamp(32px, 3.4vw, 50px);
  letter-spacing: -0.02em;
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-feature-settings: "ss01", "cv11";
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-block: 0.04em;
}
.hero__line > span {
  display: block;
  transform: translateY(112%);
  transition: transform var(--dur-large) var(--ease);
}
.hero__scene.is-active .hero__line > span {
  transform: translateY(0);
}
.hero__scene.is-active .hero__line:nth-child(1) > span {
  transition-delay: 220ms;
}
.hero__scene.is-active .hero__line:nth-child(2) > span {
  transition-delay: 300ms;
}
.hero__scene.is-active .hero__line:nth-child(3) > span {
  transition-delay: 380ms;
}

/* Rotator. Inherits the hero title colour (white) on dark. */
.hero__rotator {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  vertical-align: baseline;
  position: relative;
}
.hero__rotator-word {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transform: translateY(80%);
  transition:
    opacity 480ms var(--ease),
    transform 580ms var(--ease);
  white-space: nowrap;
  color: #fff;
}
.hero__rotator-word.is-current {
  opacity: 1;
  transform: translateY(0);
}
.hero__rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-80%);
}

/* Sequenced fade + lift for hero children */
[data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-medium) var(--ease),
    transform var(--dur-medium) var(--ease);
}
.hero__scene.is-active [data-anim] {
  opacity: 1;
  transform: translateY(0);
}
.hero__scene.is-active .hero__chip {
  transition-delay: 120ms;
}
.hero__scene.is-active .hero__lede {
  transition-delay: 540ms;
}
.hero__scene.is-active .hero__actions {
  transition-delay: 640ms;
}

/* Lede */
.hero__lede {
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 14px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-top: 20px;
}

/* Actions */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* Override .btn for dark hero context */
.hero .btn--primary {
  background: #fff;
  color: var(--ink-900);
  border-color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 12px 32px -10px rgba(0, 0, 0, 0.45);
}
.hero .btn--primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(97, 31, 105, 0.3),
    0 14px 32px -8px rgba(97, 31, 105, 0.55);
}

.hero .btn--ghost,
.hero .hero__cta-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero .btn--ghost:hover,
.hero .hero__cta-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.hero__cta-ghost svg {
  transition: transform var(--dur-small) var(--ease);
}
.hero__cta-ghost:hover svg {
  transform: translateX(3px);
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 6;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--dur-small) var(--ease);
}
.hero__scroll:hover {
  color: #fff;
}
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 10px;
  background: #fff;
  border-radius: 999px;
  animation: heroScrollDrift 2.2s var(--ease) infinite;
}
@keyframes heroScrollDrift {
  0% {
    transform: translateY(-12px);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateY(44px);
    opacity: 0;
  }
}
@media (max-width: 1024px) {
  .hero__scroll {
    display: none;
  }
}

/* 13. Trust & sectors section
   ----------------------------------------------------- */
.trust {
  background: var(--surface-alt);
  padding-block: 96px;
  position: relative;
}
@media (max-width: 1024px) {
  .trust {
    padding-block: 72px;
  }
}
@media (max-width: 640px) {
  .trust {
    padding-block: 56px;
  }
}

.trust__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (max-width: 640px) {
  .trust__inner {
    gap: 36px;
  }
}

.trust__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
}

.trust__title {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}
@media (max-width: 640px) {
  .trust__title br {
    display: none;
  }
}

.trust__divider {
  height: 1px;
  background: var(--ink-100);
  border: 0;
  margin: 0;
}

/* Stats row */
.trust__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 720px) {
  .trust__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
  }
}

.trust__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.trust__stat-num {
  display: inline-flex;
  align-items: flex-start;
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "cv11", "tnum";
}
.trust__stat-num sup {
  font-size: 0.38em;
  font-weight: 600;
  vertical-align: top;
  margin-left: 6px;
  color: var(--brand);
  line-height: 1;
  position: relative;
  top: 0.18em;
  letter-spacing: 0;
}

.trust__stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.trust__stat {
  gap: 18px;
}

/* Trust partner marquee — leading-tech logos */
.trust-partners {
  margin-block: 8px 16px;
}
@media (max-width: 640px) {
  .trust-partners {
    margin-block: 0 8px;
  }
}

.trust-partners__label {
  margin: 0 0 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.trust-partners__marquee {
  overflow: hidden;
  position: relative;
  margin-inline: calc(-1 * var(--container-pad));
}

.trust-partners__track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: trust-marquee 40s linear infinite;
}
@keyframes trust-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 12px));
  }
}
.trust-partners:hover .trust-partners__track {
  animation-play-state: paused;
}

/* Fixed container. Keeps square + wordmark logos visually balanced. */
.trust-partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 12px;
  background: transparent;
  transition:
    background-color var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.trust-partner:hover {
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--ink-100),
    0 8px 24px -12px rgba(10, 14, 26, 0.12);
}

.trust-partner__logo {
  max-height: 56px;
  max-width: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transition: transform var(--dur-small) var(--ease);
}
.trust-partner:hover .trust-partner__logo {
  transform: translateY(-2px);
}

/* =====================================================================
   Trust bar. New partner-card marquee used on the home page.
   ===================================================================== */
.trust-bar {
  width: 100%;
  margin-block: 16px 4px;
}
.trust-bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.trust-bar-text {
  margin: 0;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-inline: calc(-1 * var(--container-pad));
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: trust-bar-marquee 50s linear infinite;
  padding-inline: 12px;
}
@keyframes trust-bar-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 14px)); }
}
.trust-bar:hover .marquee-track {
  animation-play-state: paused;
}

.partner-card {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  height: 92px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  transition:
    border-color var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.partner-card:hover {
  border-color: var(--ink-200);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.08),
    0 12px 28px -14px rgba(10, 14, 26, 0.18);
  transform: translateY(-2px);
}
.partner-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96px;
  max-height: 32px;
  object-fit: contain;
}
.partner-card span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-700);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .trust-bar-text {
    font-size: 13px;
  }
  .marquee-track {
    gap: 18px;
    animation-duration: 35s;
  }
  .partner-card {
    min-width: 112px;
    height: 80px;
    padding: 10px 14px;
  }
  .partner-logo-img {
    max-width: 78px;
    max-height: 26px;
  }
  .partner-card span {
    font-size: 10.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .trust-partners__track {
    gap: 32px;
    animation-duration: 45s;
  }
  .trust-partner {
    width: 124px;
    height: 64px;
  }
  .trust-partner__logo {
    max-height: 44px;
    max-width: 108px;
  }
}
@media (max-width: 640px) {
  @keyframes trust-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - 10px));
    }
  }
}

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

/* Sectors strip */
.trust__sectors {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trust__sectors-label {
  font-size: 14.5px;
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.trust__sectors-label strong {
  color: var(--brand);
  font-weight: 600;
}

.trust__sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 14. Sector pill component (reusable)
   ----------------------------------------------------- */
.sector-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--surface);
  border: 1.5px solid var(--ink-100);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  letter-spacing: -0.005em;
  transition:
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-small) var(--ease);
}
.sector-pill:hover {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-1px);
}

/* 15. Generic scroll-reveal
   ----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-medium) var(--ease),
    transform var(--dur-medium) var(--ease);
}
[data-reveal].is-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger for adjacent siblings in lists */
.trust__stats .trust__stat:nth-child(2) {
  transition-delay: 80ms;
}
.trust__stats .trust__stat:nth-child(3) {
  transition-delay: 160ms;
}
.trust__stats .trust__stat:nth-child(4) {
  transition-delay: 240ms;
}

/* 16. Products section — tabbed catalog
   ----------------------------------------------------- */
.products {
  background: var(--surface);
  padding-block: 58px;
}
@media (max-width: 1024px) {
  .products {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .products {
    padding-block: 64px;
  }
}

.products__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (max-width: 640px) {
  .products__inner {
    gap: 40px;
  }
}

.products__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.products__head-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}
.products__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}
.products__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 560px;
}
.products__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
  white-space: nowrap;
}
.products__head-link:hover {
  border-color: var(--ink-900);
}
.products__head-link svg {
  transition: transform var(--dur-small) var(--ease);
}
.products__head-link:hover svg {
  transform: translateX(3px);
}

/* 17. Products — tab strip
   ----------------------------------------------------- */
.products__tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--ink-100);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
}
.products__tabs::-webkit-scrollbar {
  display: none;
}

.products__tab {
  position: relative;
  padding: 18px 28px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-400);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-small) var(--ease);
}
.products__tab:first-child {
  padding-left: 0;
}
.products__tab:last-child {
  padding-right: 0;
}
.products__tab:hover {
  color: var(--ink-700);
}
.products__tab.is-active {
  color: var(--ink-900);
  font-weight: 600;
}

.products__tab::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #f26ae2 0%, #611f69 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-medium) var(--ease);
}
.products__tab:first-child::after {
  left: 0;
}
.products__tab:last-child::after {
  right: 0;
}
.products__tab.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  .products__tab {
    padding: 14px 18px;
    font-size: 15px;
  }
  .products__tab::after {
    left: 18px;
    right: 18px;
  }
  .products__tab:first-child::after {
    left: 0;
  }
  .products__tab:last-child::after {
    right: 0;
  }
}

/* 17a. Products — panel system
   ----------------------------------------------------- */
.products__panels {
  position: relative;
}
.products__panel {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
}
.products__panel[hidden] {
  display: none;
}

/* Text side */
.products__panel-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.products__panel-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 7px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.products__panel-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  max-width: 16ch;
}
.products__panel-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 48ch;
}
.products__panel-features {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.products__panel-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink-900);
  line-height: 1.4;
}
.products__panel-feature::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.products__panel-cta {
  align-self: flex-start;
  margin-top: 12px;
}

/* 17b. Products — visual side: gradient backdrop + floating cards
   ----------------------------------------------------- */
.products__panel-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 26, 0.04),
    0 24px 60px -28px rgba(97, 31, 105, 0.18);
}

/* Per-product gradient ambient */
.products__panel-visual--school {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 220, 230, 0.55),
      transparent 55%
    ),
    linear-gradient(135deg, #faf4ed 0%, #f5e9f6 100%);
}
.products__panel-visual--university {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(196, 180, 240, 0.45),
      transparent 55%
    ),
    linear-gradient(135deg, #f2effa 0%, #e5dcf7 100%);
}
.products__panel-visual--health {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 180, 200, 0.55),
      transparent 55%
    ),
    linear-gradient(135deg, #ffefe0 0%, #ffd8e5 100%);
}
.products__panel-visual--workforce {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(180, 220, 200, 0.45),
      transparent 55%
    ),
    linear-gradient(135deg, #eff7f1 0%, #dceddf 100%);
}
.products__panel-visual--project {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(220, 180, 250, 0.55),
      transparent 55%
    ),
    linear-gradient(135deg, #eee4f7 0%, #d8c2ee 100%);
}

/* Floating cards */
.floating-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(10, 14, 26, 0.04),
    0 12px 32px -10px rgba(10, 14, 26, 0.16),
    0 28px 64px -24px rgba(10, 14, 26, 0.22);
  transition: transform var(--dur-medium) var(--ease);
}
.floating-card svg {
  display: block;
  width: 100%;
  height: auto;
}

.floating-card--back {
  width: 64%;
  left: 8%;
  top: 12%;
  z-index: 1;
}
.floating-card--front {
  width: 40%;
  right: 8%;
  bottom: 10%;
  z-index: 2;
}

/* Subtle float-in when panel becomes active */
.products__panel .floating-card--back {
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 700ms var(--ease) 100ms,
    opacity 500ms var(--ease) 100ms;
}
.products__panel .floating-card--front {
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform 700ms var(--ease) 220ms,
    opacity 500ms var(--ease) 220ms;
}
.products__panel.is-active .floating-card--back,
.products__panel.is-active .floating-card--front {
  transform: translateY(0);
  opacity: 1;
}

/* Tab content fade on switch */
.products__panel-text {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 400ms var(--ease) 80ms,
    transform 500ms var(--ease) 80ms;
}
.products__panel.is-active .products__panel-text {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .products__panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .products__panel-visual {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 640px) {
  .products__inner {
    gap: 32px;
  }
  .products__panel {
    gap: 28px;
  }
  .products__panel-visual {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
  .floating-card--back {
    width: 70%;
    top: 8%;
    left: 6%;
  }
  .floating-card--front {
    width: 50%;
    right: 6%;
    bottom: 6%;
  }
  .products__panel-title {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-card,
  .products__panel-text,
  .products__panel .floating-card--back,
  .products__panel .floating-card--front {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 18. Platform pillars section (dark)
   ----------------------------------------------------- */
.platform {
  background: var(--surface-alt);
  color: var(--ink-900);
  padding-block: 128px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .platform {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .platform {
    padding-block: 64px;
  }
}

.platform__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (max-width: 1024px) {
  .platform__inner {
    gap: 56px;
  }
}

.platform__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
}

.platform__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.platform__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 580px;
}

/* Brand-coded accents on light surface */
.platform .eyebrow,
.platform .title-accent,
.platform .brand-dot {
  color: var(--brand);
}
.platform .eyebrow__line {
  background: var(--brand);
}

/* 19. Pillar — reusable card for the platform grid (LIGHT) */
.platform__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}

.pillar {
  padding: 32px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  transition: background-color var(--dur-small) var(--ease);
}
.pillar:hover {
  background: var(--brand-50);
}

.pillar__num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pillar__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.pillar__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
}

.pillar__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  flex: 1;
}

.pillar__stat {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-100);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

@media (max-width: 1024px) {
  .platform__pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .platform__pillars {
    grid-template-columns: 1fr;
  }
  .pillar {
    padding: 24px;
    gap: 12px;
  }
}

/* Stagger reveal of pillars left → right */
.platform__pillars .pillar:nth-child(2) {
  transition-delay: 80ms;
}
.platform__pillars .pillar:nth-child(3) {
  transition-delay: 160ms;
}
.platform__pillars .pillar:nth-child(4) {
  transition-delay: 240ms;
}

/* 20. Manifesto section (editorial bridge, light cream)
   ----------------------------------------------------- */
.manifesto {
  background: var(--surface-alt);
  padding-block: 160px;
}
@media (max-width: 1024px) {
  .manifesto {
    padding-block: 112px;
  }
}
@media (max-width: 640px) {
  .manifesto {
    padding-block: 80px;
  }
}

.manifesto__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1100px;
}
@media (max-width: 640px) {
  .manifesto__inner {
    gap: 36px;
  }
}

.manifesto__statement {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
}
.manifesto__line {
  display: block;
}

.manifesto__attrs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-100);
}
.manifesto__attr {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.manifesto__attr-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.manifesto__attr-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
}

.manifesto__attrs .manifesto__attr:nth-child(2) {
  transition-delay: 80ms;
}
.manifesto__attrs .manifesto__attr:nth-child(3) {
  transition-delay: 160ms;
}

@media (max-width: 720px) {
  .manifesto__attrs {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 24px;
  }
}

/* 21. Industries section
   ----------------------------------------------------- */
.industries {
  background: var(--surface);
  padding-block: 128px;
}
@media (max-width: 1024px) {
  .industries {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .industries {
    padding-block: 64px;
  }
}

.industries__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (max-width: 640px) {
  .industries__inner {
    gap: 40px;
  }
}

.industries__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}

.industries__head-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}

.industries__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.industries__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 560px;
}

.industries__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
  white-space: nowrap;
}
.industries__head-link:hover {
  border-color: var(--ink-900);
}
.industries__head-link svg {
  transition: transform var(--dur-small) var(--ease);
}
.industries__head-link:hover svg {
  transform: translateX(3px);
}

/* Hairline 3×2 grid */
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}

/* 22. Industry card (hairline grid cell)
   ----------------------------------------------------- */
.industry-card {
  padding: 36px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink-900);
  transition: background var(--dur-small) var(--ease);
  position: relative;
  isolation: isolate;
}
.industry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(246, 245, 241, 0) 0%,
    rgba(97, 31, 105, 0.04) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.industry-card:hover::before {
  opacity: 1;
}

.industry-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.industry-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  transition: color var(--dur-micro) var(--ease);
}
.industry-card:hover .industry-card__name {
  color: var(--brand);
}

.industry-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}

.industry-card__arrow {
  align-self: flex-end;
  display: inline-flex;
  color: var(--ink-300);
  margin-top: 12px;
  transition:
    color var(--dur-micro) var(--ease),
    transform var(--dur-small) var(--ease);
}
.industry-card:hover .industry-card__arrow {
  color: var(--brand);
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .industries__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .industry-card {
    padding: 28px;
  }
}
@media (max-width: 640px) {
  .industries__grid {
    grid-template-columns: 1fr;
  }
  .industry-card {
    padding: 24px;
  }
}

/* Stagger reveal of industry cards (3×3 grid) */
.industries__grid .industry-card:nth-child(2) {
  transition-delay: 50ms;
}
.industries__grid .industry-card:nth-child(3) {
  transition-delay: 100ms;
}
.industries__grid .industry-card:nth-child(4) {
  transition-delay: 150ms;
}
.industries__grid .industry-card:nth-child(5) {
  transition-delay: 200ms;
}
.industries__grid .industry-card:nth-child(6) {
  transition-delay: 250ms;
}
.industries__grid .industry-card:nth-child(7) {
  transition-delay: 300ms;
}
.industries__grid .industry-card:nth-child(8) {
  transition-delay: 350ms;
}
.industries__grid .industry-card:nth-child(9) {
  transition-delay: 400ms;
}

/* 23. Services section (cream)
   ----------------------------------------------------- */
.services {
  background: var(--surface-alt);
  padding-block: 128px;
}
@media (max-width: 1024px) {
  .services {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .services {
    padding-block: 64px;
  }
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (max-width: 640px) {
  .services__inner {
    gap: 48px;
  }
}

.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}

.services__head-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}

.services__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.services__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 560px;
}

.services__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
  white-space: nowrap;
}
.services__head-link:hover {
  border-color: var(--ink-900);
}
.services__head-link svg {
  transition: transform var(--dur-small) var(--ease);
}
.services__head-link:hover svg {
  transform: translateX(3px);
}

/* Editorial 4-column directory — all services as text rows */
.services__directory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-100);
}
@media (max-width: 1024px) {
  .services__directory {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}
@media (max-width: 640px) {
  .services__directory {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.services__col {
  display: flex;
  flex-direction: column;
}

.services__col-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-900);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}
.services__col-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.services__col-list {
  display: flex;
  flex-direction: column;
}
.services__col-list li {
  border-bottom: 1px solid var(--ink-100);
}
.services__col-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  transition:
    color var(--dur-micro) var(--ease),
    padding-left var(--dur-small) var(--ease);
}
.services__col-list a:hover {
  color: var(--brand);
  padding-left: 6px;
}
.services__col-list a svg {
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.services__col-list a:hover svg {
  opacity: 1;
  transform: translateX(0);
}

/* 25. Section atmospheric decorations — soft gradient mesh blobs
   ----------------------------------------------------- */
.section-deco {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section-deco > .container {
  position: relative;
  z-index: 1;
}

/* Each blob is a blurred radial gradient using ::before / ::after */
.section-deco::before,
.section-deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
  will-change: filter;
}

/* — Trust: mulberry TR + pink BL */
.section-deco--trust::before {
  width: 680px;
  height: 680px;
  top: -320px;
  right: -200px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.22), transparent 65%);
}
.section-deco--trust::after {
  width: 540px;
  height: 540px;
  bottom: -280px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.14),
    transparent 65%
  );
}

/* — Products: mulberry BR + pink TL */
.section-deco--products::before {
  width: 720px;
  height: 720px;
  bottom: -340px;
  right: -220px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.2), transparent 65%);
}
.section-deco--products::after {
  width: 460px;
  height: 460px;
  top: -220px;
  left: -140px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.12),
    transparent 65%
  );
}

/* — Manifesto: two purples flanking */
.section-deco--manifesto::before {
  width: 720px;
  height: 720px;
  top: 50%;
  left: -320px;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.18),
    transparent 65%
  );
}
.section-deco--manifesto::after {
  width: 600px;
  height: 600px;
  top: 50%;
  right: -240px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(97, 31, 105, 0.16), transparent 65%);
}

/* — Industries: mulberry TR + pink BL */
.section-deco--industries::before {
  width: 700px;
  height: 700px;
  top: -300px;
  right: -200px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.2), transparent 65%);
}
.section-deco--industries::after {
  width: 520px;
  height: 520px;
  bottom: -240px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.13),
    transparent 65%
  );
}

/* — Services: purple TL + mulberry BR */
.section-deco--services::before {
  width: 680px;
  height: 680px;
  top: -280px;
  left: -200px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.18),
    transparent 65%
  );
}
.section-deco--services::after {
  width: 580px;
  height: 580px;
  bottom: -260px;
  right: -200px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.18), transparent 65%);
}

/* — Process: pink TR + mulberry BL */
.section-deco--process::before {
  width: 620px;
  height: 620px;
  top: -260px;
  right: -180px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.13),
    transparent 65%
  );
}
.section-deco--process::after {
  width: 540px;
  height: 540px;
  bottom: -240px;
  left: -160px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.18), transparent 65%);
}

/* — Resources: pink TL + mulberry BR */
.section-deco--resources::before {
  width: 560px;
  height: 560px;
  top: -220px;
  left: -180px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.13),
    transparent 65%
  );
}
.section-deco--resources::after {
  width: 600px;
  height: 600px;
  bottom: -260px;
  right: -180px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.16), transparent 65%);
}

/* — Compliance: mulberry TR + pink BR (right-heavy) */
.section-deco--compliance::before {
  width: 620px;
  height: 620px;
  top: -280px;
  right: -180px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.18), transparent 65%);
}
.section-deco--compliance::after {
  width: 460px;
  height: 460px;
  bottom: -220px;
  right: 30%;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.12),
    transparent 65%
  );
}

@media (max-width: 720px) {
  .section-deco::before,
  .section-deco::after {
    filter: blur(60px);
  }
  .section-deco--trust::before,
  .section-deco--products::before,
  .section-deco--industries::before,
  .section-deco--services::before {
    width: 480px;
    height: 480px;
  }
  .section-deco--trust::after,
  .section-deco--products::after,
  .section-deco--industries::after,
  .section-deco--services::after {
    width: 360px;
    height: 360px;
  }
  .section-deco--manifesto::before,
  .section-deco--manifesto::after {
    width: 460px;
    height: 460px;
  }
}

/* 26. Compliance section
   ----------------------------------------------------- */
.compliance {
  background: var(--surface);
  padding-block: 112px;
}
@media (max-width: 1024px) {
  .compliance {
    padding-block: 80px;
  }
}
@media (max-width: 640px) {
  .compliance {
    padding-block: 56px;
  }
}

.compliance__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (max-width: 640px) {
  .compliance__inner {
    gap: 36px;
  }
}

.compliance__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}

.compliance__head-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
}

.compliance__title {
  margin: 0;
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.compliance__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 580px;
}

.compliance__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
  white-space: nowrap;
}
.compliance__head-link:hover {
  border-color: var(--ink-900);
}
.compliance__head-link svg {
  transition: transform var(--dur-small) var(--ease);
}
.compliance__head-link:hover svg {
  transform: translateX(3px);
}

.compliance__divider {
  height: 1px;
  background: var(--ink-100);
  border: 0;
  margin: 0;
}

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

/* 27. Cert badge
   ----------------------------------------------------- */
.cert-badge {
  display: inline-flex;
  padding: 12px 22px;
  background: var(--surface);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-small) var(--ease),
    background-color var(--dur-micro) var(--ease);
  cursor: default;
}
.cert-badge:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
  background: var(--brand-50);
}

.cert-badge__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  transition: color var(--dur-micro) var(--ease);
}
.cert-badge:hover .cert-badge__name {
  color: var(--brand);
}

/* Stagger reveal of cert badges */
.compliance__certs .cert-badge:nth-child(2) {
  transition-delay: 50ms;
}
.compliance__certs .cert-badge:nth-child(3) {
  transition-delay: 100ms;
}
.compliance__certs .cert-badge:nth-child(4) {
  transition-delay: 150ms;
}
.compliance__certs .cert-badge:nth-child(5) {
  transition-delay: 200ms;
}
.compliance__certs .cert-badge:nth-child(6) {
  transition-delay: 250ms;
}

/* 28. CTA band — light cinematic closer (split copy + elevated process card)
   ----------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--surface-alt);
  color: var(--ink-900);
  padding-block: 144px;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .cta-band {
    padding-block: 104px;
  }
}
@media (max-width: 640px) {
  .cta-band {
    padding-block: 80px;
  }
}

/* Ambient atmosphere — subtle mulberry + pink blobs */
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-band__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.cta-band__glow--a {
  width: 820px;
  height: 820px;
  top: -340px;
  right: -220px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.22),
    transparent 62%
  );
  animation: ctaGlowA 26s var(--ease) infinite alternate;
}
.cta-band__glow--b {
  width: 680px;
  height: 680px;
  bottom: -280px;
  left: -180px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.16),
    transparent 62%
  );
  animation: ctaGlowB 32s var(--ease) infinite alternate;
}
@keyframes ctaGlowA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-80px, 50px, 0) scale(1.08);
  }
}
@keyframes ctaGlowB {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(100px, -70px, 0) scale(1.1);
  }
}

/* Inner — split copy + card */
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 88px;
  align-items: center;
}
@media (max-width: 1024px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
/* LEFT — copy */
.cta-band__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cta-band__eyebrow {
  align-self: flex-start;
}
.cta-band__title {
  margin: 0;
  font-size: clamp(46px, 5.8vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--heading-navy);
  letter-spacing: -0.03em;
  font-feature-settings: "ss01", "cv11";
  max-width: 18ch;
}
.cta-band__title-accent {
  background: linear-gradient(
    135deg,
    #f26ae2 0%,
    #c247cc 35%,
    #8b2ea0 70%,
    #611f69 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cta-band__lede {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 54ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

/* Ghost button on light surface */
.cta-band__cta-ghost {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  color: var(--ink-900);
  gap: 8px;
}
.cta-band__cta-ghost:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
}
.cta-band__cta-ghost svg {
  transition: transform var(--dur-small) var(--ease);
}
.cta-band__cta-ghost:hover svg {
  transform: translateX(3px);
}

/* Trust strip */
.cta-band__trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--ink-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}
.cta-band__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-500);
}
.cta-band__trust-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-ok);
  box-shadow: 0 0 0 3px rgba(31, 179, 107, 0.18);
}

/* RIGHT — elevated process card */
.cta-band__card {
  position: relative;
  padding: 36px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 80px -28px rgba(97, 31, 105, 0.22),
    0 12px 28px -12px rgba(10, 14, 26, 0.08);
  isolation: isolate;
}
.cta-band__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 90% 0%, rgba(194, 71, 204, 0.1), transparent 55%),
    radial-gradient(
      circle at 0% 100%,
      rgba(242, 106, 226, 0.06),
      transparent 55%
    );
  pointer-events: none;
  z-index: -1;
}

.cta-band__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink-100);
}
.cta-band__card-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.cta-band__card-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
}

/* Vertical timeline */
.cta-band__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cta-band__step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--ink-100);
  align-items: start;
}
.cta-band__step:first-child {
  border-top: 0;
  padding-top: 4px;
}
.cta-band__step:last-child {
  padding-bottom: 4px;
}

/* Vertical connector line between numbered nodes */
.cta-band__step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: -8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(97, 31, 105, 0.35),
    rgba(97, 31, 105, 0.06)
  );
  z-index: 0;
}
.cta-band__step:last-child::before {
  display: none;
}

.cta-band__step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.22);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.cta-band__step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cta-band__step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.cta-band__step-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
}
.cta-band__step-meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding-top: 11px;
  white-space: nowrap;
}

/* Card foot — KPI strip with gradient stat */
.cta-band__card-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-100);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cta-band__card-foot-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.cta-band__card-foot-stat {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.024em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #c247cc 0%, #611f69 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Responsive tightening */
@media (max-width: 1024px) {
  .cta-band__card {
    padding: 32px;
  }
  .cta-band__step {
    grid-template-columns: 36px 1fr;
  }
  .cta-band__step-meta {
    grid-column: 2;
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .cta-band__title {
    max-width: none;
  }
  .cta-band__card {
    padding: 28px 22px;
    border-radius: 16px;
  }
  .cta-band__card-head {
    margin-bottom: 22px;
    padding-bottom: 16px;
  }
  .cta-band__card-foot-stat {
    font-size: 18px;
  }
  .cta-band__trust {
    gap: 8px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band__glow--a,
  .cta-band__glow--b {
    animation: none !important;
  }
}

/* 29. Site footer
   ----------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ink-50);
  color: var(--ink-700);
  padding-top: 45px;
  padding-bottom: 40px;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--ink-100);
}
@media (max-width: 1024px) {
  .site-footer {
    padding-top: 72px;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding-top: 56px;
  }
}

/* Subtle atmospheric glow */
.site-footer::before {
  content: "";
  position: absolute;
  bottom: -260px;
  right: -100px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 71, 204, 0.1), transparent 65%);
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 640px) {
  .site-footer__inner {
    gap: 40px;
  }
}

/* Top region — brand + columns side by side */
.site-footer__top {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1100px) {
  .site-footer__top {
    grid-template-columns: 300px 1fr;
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Brand block */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer .brand__name-primary {
  color: var(--ink-900);
}
.site-footer .brand__name-secondary {
  color: var(--ink-500);
}

.site-footer__tagline {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 360px;
}
.site-footer .asmutek-logo {
  width: 220px;
}

/* Social icons */
.site-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--ink-100);
  color: var(--ink-700);
  transition:
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-small) var(--ease);
}
.site-footer__social a:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  transform: translateY(-1px);
}

/* 5-column link grid */
.site-footer__columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr 1fr;
  gap: 32px;
}
@media (max-width: 1100px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 28px;
  }
}
@media (max-width: 720px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
}
.site-footer__col-title {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.site-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col-list a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  transition: color var(--dur-micro) var(--ease);
  white-space: nowrap;
}
.site-footer__col-list a:hover {
  color: var(--brand);
}

/* Divider */
.site-footer__divider {
  height: 1px;
  background: var(--ink-100);
  border: 0;
  margin: 0;
}

/* Bottom legal bar */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
}
.site-footer__copyright {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-500);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12.5px;
}
.site-footer__legal a {
  color: var(--ink-500);
  transition: color var(--dur-micro) var(--ease);
}
.site-footer__legal a:hover {
  color: var(--ink-900);
}

.site-footer__region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-500);
}
.site-footer__region-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-ok);
  box-shadow: 0 0 0 3px rgba(31, 179, 107, 0.18);
}

/* Newsletter signup at top of footer */
.newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--ink-100);
}
@media (max-width: 900px) {
  .newsletter {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
}

.newsletter__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newsletter__title {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
.newsletter .brand-dot {
  color: var(--brand);
}
.newsletter__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-500);
  max-width: 420px;
}

.newsletter__form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  justify-self: end;
}
@media (max-width: 900px) {
  .newsletter__form {
    justify-self: stretch;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .newsletter__form {
    flex-direction: column;
  }
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: var(--surface);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.newsletter__input::placeholder {
  color: var(--ink-500);
}
.newsletter__input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
}

.newsletter__btn {
  padding: 13px 22px;
  background: var(--ink-900);
  color: #fff;
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.newsletter__btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Offices row in footer */
.site-footer__offices {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.offices__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .offices__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .offices__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.office {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.office:hover {
  border-color: var(--brand);
  background: var(--surface);
}
.office__city {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
.office__address {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
}

/* 30. Process section (light)
   ----------------------------------------------------- */
.process {
  background: var(--surface);
  padding-block: 128px;
}
@media (max-width: 1024px) {
  .process {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .process {
    padding-block: 64px;
  }
}

.process__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (max-width: 640px) {
  .process__inner {
    gap: 48px;
  }
}

.process__head-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}

.process__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}

.process__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 580px;
}

/* 5-cell hairline grid */
.process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}
@media (max-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .process__steps {
    grid-template-columns: 1fr;
  }
}

.process-step {
  padding: 28px 24px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--dur-small) var(--ease);
  position: relative;
  isolation: isolate;
}
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(246, 245, 241, 0) 0%,
    rgba(97, 31, 105, 0.04) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-small) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.process-step:hover::before {
  opacity: 1;
}

.process-step__num {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.process-step__phase {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.process-step__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--ink-900);
}
.process-step__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}
.process-step__time {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-700);
  text-transform: uppercase;
}

.process__steps .process-step:nth-child(2) {
  transition-delay: 60ms;
}
.process__steps .process-step:nth-child(3) {
  transition-delay: 120ms;
}
.process__steps .process-step:nth-child(4) {
  transition-delay: 180ms;
}
.process__steps .process-step:nth-child(5) {
  transition-delay: 240ms;
}

/* 31. Technology section (dark)
   ----------------------------------------------------- */
.technology {
  position: relative;
  background: var(--surface-alt);
  color: var(--ink-900);
  padding-block: 128px;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .technology {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .technology {
    padding-block: 64px;
  }
}

.technology .eyebrow,
.technology .title-accent,
.technology .brand-dot {
  color: var(--brand);
}
.technology .eyebrow__line {
  background: var(--brand);
}

/* Subtle ambient atmosphere — softer for light bg */
.technology::before,
.technology::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}
.technology::before {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -160px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.18),
    transparent 65%
  );
}
.technology::after {
  width: 480px;
  height: 480px;
  bottom: -200px;
  left: -120px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.12),
    transparent 65%
  );
}

.technology__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (max-width: 640px) {
  .technology__inner {
    gap: 48px;
  }
}

.technology__head-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}

.technology__title {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink-900);
}
.technology__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 580px;
}

/* Marquee — two horizontal scrolling rows of tech cards */
.tech-marquee {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-inline: calc(-1 * var(--container-pad));
}

.tech-marquee__row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.tech-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee-left 60s linear infinite;
}
.tech-marquee__row--right .tech-marquee__track {
  animation: marquee-right 75s linear infinite;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 7px));
  }
}
@keyframes marquee-right {
  from {
    transform: translateX(calc(-50% - 7px));
  }
  to {
    transform: translateX(0);
  }
}

/* Pause on hover for accessibility */
.tech-marquee:hover .tech-marquee__track {
  animation-play-state: paused;
}

/* Tech card */
.tech-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    transform var(--dur-small) var(--ease);
}
.tech-card:hover {
  border-color: var(--brand);
  background: var(--surface);
  transform: translateY(-1px);
}

.tech-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tech-card__mark--ink {
  color: #0a0e1a;
}

/* Abstract SVG fallback — sits underneath the logo image */
.tech-card__icon {
  width: 16px;
  height: 16px;
  color: inherit;
  display: block;
}

.asmutek-logo {
  width: 170px;
}

/* Brand logo from CDN — overlays the fallback when loaded */
.tech-card__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border-radius: inherit;
  z-index: 1;
}

.tech-card__name {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}

@media (max-width: 640px) {
  .tech-marquee {
    gap: 14px;
  }
  .tech-marquee__track {
    animation-duration: 50s;
    gap: 10px;
  }
  .tech-marquee__row--right .tech-marquee__track {
    animation-duration: 62s;
  }
  .tech-card {
    padding: 8px 18px 8px 8px;
    gap: 10px;
  }
  .tech-card__mark {
    width: 24px;
    height: 24px;
    font-size: 11.5px;
    border-radius: 6px;
  }
  .tech-card__name {
    font-size: 13.5px;
  }
}

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

/* 32. Resources section (cream, before CTA)
   ----------------------------------------------------- */
.resources {
  background: var(--surface-alt);
  padding-block: 112px;
}
@media (max-width: 1024px) {
  .resources {
    padding-block: 80px;
  }
}
@media (max-width: 640px) {
  .resources {
    padding-block: 64px;
  }
}

.resources__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (max-width: 640px) {
  .resources__inner {
    gap: 36px;
  }
}

.resources__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.resources__head-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.resources__title {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--ink-900);
}
.resources__head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-200);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
  white-space: nowrap;
}
.resources__head-link:hover {
  border-color: var(--ink-900);
}
.resources__head-link svg {
  transition: transform var(--dur-small) var(--ease);
}
.resources__head-link:hover svg {
  transform: translateX(3px);
}

.resources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .resources__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .resources__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.resource-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink-900);
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.resource-card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 18px 36px -18px rgba(97, 31, 105, 0.2),
    0 8px 16px -8px rgba(10, 14, 26, 0.1);
}

.resource-card__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--surface-alt);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
.resource-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink-900);
}
.resource-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}
.resource-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  align-self: flex-start;
  transition:
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.resource-card:hover .resource-card__cta {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.resource-card__cta svg {
  transition: transform var(--dur-small) var(--ease);
}
.resource-card:hover .resource-card__cta svg {
  transform: translateX(3px);
}

.resources__grid .resource-card:nth-child(2) {
  transition-delay: 80ms;
}
.resources__grid .resource-card:nth-child(3) {
  transition-delay: 160ms;
}

/* =====================================================
   PRODUCT PAGES — Sub-nav, hero, capability grid,
   modules, outcomes, integrations, FAQ
   ===================================================== */

:root {
  --header-h: calc(var(--utility-h) + var(--nav-h));
  --subnav-h: 48px;
}
@media (max-width: 640px) {
  :root {
    --header-h: var(--nav-h);
  }
}

/* 33. Product sub-nav (sticky secondary nav, compressed + tonally differentiated) */
.product-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--ink-100);
  height: var(--subnav-h);
}
.product-subnav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}
.product-subnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 18px;
  border-right: 1px solid var(--ink-100);
  flex-shrink: 0;
}
.product-subnav__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.product-subnav__brand-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  white-space: nowrap;
}

.product-subnav__nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 100%;
}
.product-subnav__nav::-webkit-scrollbar {
  display: none;
}

.product-subnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-500);
  white-space: nowrap;
  transition: color var(--dur-small) var(--ease);
}
.product-subnav__link:hover {
  color: var(--ink-900);
}
.product-subnav__link.is-active {
  color: var(--ink-900);
  font-weight: 600;
}
.product-subnav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #f26ae2 0%, #611f69 100%);
  border-radius: 2px;
}

/* Sub-nav CTA — secondary/outlined, refined for compressed bar */
.product-subnav__cta {
  margin-left: auto;
  padding: 6px 14px;
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 6px;
  border: 1px solid var(--ink-900);
  background: transparent;
  color: var(--ink-900);
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.product-subnav__cta:hover {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

@media (max-width: 720px) {
  .product-subnav__brand {
    padding-right: 14px;
  }
  .product-subnav__link {
    padding: 0 11px;
    font-size: 12.5px;
  }
  .product-subnav__cta {
    display: none;
  }
}

/* 34. Product hero (light, split) */
.product-hero {
  position: relative;
  padding-block: 80px 96px;
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .product-hero {
    padding-block: 64px 72px;
  }
}
@media (max-width: 640px) {
  .product-hero {
    padding-block: 48px 56px;
  }
}

.product-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.product-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}
.product-hero__glow--a {
  width: 720px;
  height: 720px;
  top: -260px;
  right: -200px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.22),
    transparent 62%
  );
}
.product-hero__glow--b {
  width: 540px;
  height: 540px;
  bottom: -240px;
  left: -140px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.14),
    transparent 62%
  );
}

.product-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1024px) {
  .product-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.product-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.product-hero__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 7px 16px;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.product-hero__title {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--heading-navy);
  letter-spacing: -0.034em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  max-width: 18ch;
}
.product-hero__title .product-hero__title-accent {
  background: linear-gradient(135deg, #f26ae2 0%, #611f69 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.product-hero__lede {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 14px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 52ch;
}
.product-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.product-hero__meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-100);
}
.product-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-hero__meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.product-hero__meta-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

/* Visual side — floating cards on gradient */
.product-hero__visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 220, 230, 0.55),
      transparent 55%
    ),
    linear-gradient(135deg, #faf4ed 0%, #f5e9f6 100%);
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 26, 0.04),
    0 24px 60px -28px rgba(97, 31, 105, 0.18);
}
/* 35. Generic product section wrapper (scroll anchors) */
.product-section {
  padding-block: 112px;
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 12px);
}
@media (max-width: 1024px) {
  .product-section {
    padding-block: 80px;
  }
}
@media (max-width: 640px) {
  .product-section {
    padding-block: 56px;
  }
}

.product-section--alt {
  background: var(--surface-alt);
}
.product-section--dark {
  background: var(--ink-900);
  color: #fff;
}

.product-section__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin-bottom: 56px;
}
@media (max-width: 640px) {
  .product-section__head {
    margin-bottom: 36px;
  }
}

.product-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.product-section--dark .product-section__eyebrow {
  color: #f26ae2;
}

.product-section__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, currentColor 0%, transparent 100%);
}
.product-section__title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
}
.product-section--dark .product-section__title {
  color: #fff;
}
.product-section__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 56ch;
}
.product-section--dark .product-section__lede {
  color: rgba(255, 255, 255, 0.7);
}

/* 36. Capability grid (3 cols × 2 rows) */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .capability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}

.capability {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  isolation: isolate;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.capability:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 20px 40px -20px rgba(97, 31, 105, 0.18);
}
.capability__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand);
}
.capability__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.capability__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}
.capability__meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}

/* 37. Modules — hairline grid (4 cols) */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}
@media (max-width: 1024px) {
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }
}

.module {
  padding: 28px 24px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  transition: background-color var(--dur-small) var(--ease);
}
.module:hover {
  background: var(--surface-alt);
}
.module__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.module__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}
.module__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
}

/* 38. Outcomes — dark numbers row */
.outcomes-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 720px) {
  .outcomes-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.outcome {
  padding: 36px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.outcome__num {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.outcome__num sup {
  font-size: 0.42em;
  margin-left: 4px;
  color: #c247cc;
  font-weight: 600;
  position: relative;
  top: 0.15em;
}
.outcome__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.6);
}

/* 39. Integrations preview — logo grid */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .integrations-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) {
  .integrations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.integration {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 16px;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.integration:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.integration img {
  max-height: 32px;
  max-width: 100px;
  opacity: 0.85;
  transition: opacity var(--dur-small) var(--ease);
}
.integration:hover img {
  opacity: 1;
}

/* 39a. Board chips (CBSE / ICSE / Private / Boarding) */
.board-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.board-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
}
.board-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 39b. Product stats — 4-cell hairline strip (light variant of outcomes) */
.product-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
  margin-bottom: 56px;
}
@media (max-width: 720px) {
  .product-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-stat {
  padding: 28px 24px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
}
.product-stat__num {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.036em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "cv11", "tnum";
}
.product-stat__num sup {
  font-size: 0.4em;
  font-weight: 600;
  margin-left: 4px;
  color: var(--brand);
  position: relative;
  top: 0.18em;
  letter-spacing: 0;
}
.product-stat__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-500);
}

/* 39c. Schools grid — placeholder marks; swap each .school-mark child with <img> when real logos arrive */
.schools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .schools-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 640px) {
  .schools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.school-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.school-mark:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.08),
    0 14px 28px -16px rgba(97, 31, 105, 0.18);
}
.school-mark__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  line-height: 1.35;
}
.school-mark img {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

/* 39d-alt. Day-in-the-life timeline (4 narrative panels) */
.dayinlife {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 720px) {
  .dayinlife {
    grid-template-columns: 1fr;
  }
}

.dayinlife__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.dayinlife__card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.08),
    0 20px 40px -20px rgba(97, 31, 105, 0.18);
}
.dayinlife__time {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand);
}
.dayinlife__time::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(97, 31, 105, 0.12);
}
.dayinlife__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.dayinlife__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 0;
}
.dayinlife__visual {
  margin-top: 6px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  position: relative;
}
.dayinlife__visual svg {
  width: 100%;
  height: auto;
  display: block;
}
.dayinlife__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dayinlife__role {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand-50);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
}

/* 39d-spot. Hardware spotlight — alternating split rows with specs + uses */
.hardware-spot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-block: 72px;
}
.hardware-spot:not(:last-child) {
  border-bottom: 1px solid var(--ink-100);
}
.hardware-spot--alt .hardware-spot__text {
  order: 2;
}
@media (max-width: 1024px) {
  .hardware-spot {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 48px;
  }
  .hardware-spot--alt .hardware-spot__text {
    order: 0;
  }
}

.hardware-spot__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hardware-spot__num {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 12px;
  background: var(--brand-50);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.hardware-spot__name {
  margin: 0;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
}
.hardware-spot__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 48ch;
}

.hardware-spot__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-100);
  margin-top: 8px;
}
.hardware-spot__spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hardware-spot__spec-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.hardware-spot__spec-value {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
.hardware-spot__uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hardware-spot__use {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
}

.hardware-spot__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 220, 230, 0.5),
      transparent 55%
    ),
    linear-gradient(135deg, #faf4ed 0%, #f5e9f6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(10, 14, 26, 0.04),
    0 24px 60px -28px rgba(97, 31, 105, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  isolation: isolate;
}
.hardware-spot__visual svg {
  width: 100%;
  height: 100%;
  max-width: 480px;
  padding: 40px;
}
.hardware-spot__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.hardware-spot__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(10, 14, 26, 0.32) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 39d-camp. Real campuses photo gallery */
.campus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
}
@media (max-width: 1024px) {
  .campus-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .campus-grid {
    grid-template-columns: 1fr;
  }
}

.campus-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-100);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  transition:
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.campus-photo--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}
@media (max-width: 1024px) {
  .campus-photo--wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 640px) {
  .campus-photo--wide {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
}

.campus-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-large) var(--ease);
}
.campus-photo:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 24px 48px -24px rgba(97, 31, 105, 0.22);
}
.campus-photo:hover img {
  transform: scale(1.04);
}

.campus-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(10, 14, 26, 0.2) 70%,
    rgba(10, 14, 26, 0.72) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.campus-photo figcaption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  z-index: 2;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.campus-photo figcaption::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f26ae2;
  box-shadow: 0 0 0 3px rgba(242, 106, 226, 0.22);
  flex-shrink: 0;
}

/* 39d-arch. Architecture diagram (dark section) */
.architecture {
  background: var(--ink-900);
  color: #fff;
  padding-block: 128px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .architecture {
    padding-block: 88px;
  }
}
@media (max-width: 640px) {
  .architecture {
    padding-block: 64px;
  }
}

.architecture::before,
.architecture::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}
.architecture::before {
  width: 700px;
  height: 700px;
  top: -260px;
  right: -180px;
  background: radial-gradient(circle, rgba(97, 31, 105, 0.35), transparent 62%);
}
.architecture::after {
  width: 500px;
  height: 500px;
  bottom: -200px;
  left: -120px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.22),
    transparent 62%
  );
}
.architecture__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.architecture .product-section__title {
  color: #fff;
}
.architecture .product-section__lede {
  color: rgba(255, 255, 255, 0.7);
}
.architecture .product-section__eyebrow {
  color: #f26ae2;
}

.architecture__diagram {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 36px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.architecture__diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 39d. Hardware grid — 4 cards (face / gate / fingerprint / RFID) */
.hardware-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .hardware-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .hardware-grid {
    grid-template-columns: 1fr;
  }
}

.hardware-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  isolation: isolate;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.hardware-card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 20px 40px -20px rgba(97, 31, 105, 0.18);
}
.hardware-card__num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-200);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-small) var(--ease);
}
.hardware-card:hover .hardware-card__num {
  color: var(--brand);
}
.hardware-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand);
}
.hardware-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.hardware-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}
.hardware-card__meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 14px;
  border-top: 1px solid var(--ink-100);
}

/* 40. FAQ accordion */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-100);
}
.faq__item {
  border-bottom: 1px solid var(--ink-100);
}
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.faq__q {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.faq__chevron {
  flex-shrink: 0;
  color: var(--ink-500);
  transition: transform var(--dur-small) var(--ease);
}
.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
  color: var(--ink-900);
}

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-medium) var(--ease);
}
.faq__a-inner {
  padding: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 70ch;
}
.faq__item.is-open .faq__a {
  max-height: 500px;
}

/* =====================================================
   SERVICE PAGES — Hero, stack chips, engagement timeline, why grid
   ===================================================== */

/* 41. Service hero (single column, no visual side) */
.service-hero {
  position: relative;
  padding-block: 96px 80px;
  background:
    radial-gradient(
      ellipse 80% 60% at 90% 0%,
      rgba(245, 233, 246, 0.55) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 0% 100%,
      rgba(255, 235, 240, 0.45) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #fcfaf7 0%, #ffffff 100%);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .service-hero {
    padding-block: 72px 56px;
  }
}
@media (max-width: 640px) {
  .service-hero {
    padding-block: 56px 44px;
  }
}

/* Subtle dot grid overlay for texture */
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(97, 31, 105, 0.06) 1px,
    transparent 0
  );
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 70% at 50% 40%,
    #000,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 70% 70% at 50% 40%,
    #000,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

.service-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.service-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}
.service-hero__glow--a {
  width: 820px;
  height: 820px;
  top: -300px;
  right: -200px;
  background: radial-gradient(
    circle,
    rgba(194, 71, 204, 0.32),
    transparent 60%
  );
  animation: serviceHeroGlowA 24s var(--ease) infinite alternate;
}
.service-hero__glow--b {
  width: 680px;
  height: 680px;
  bottom: -280px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.24),
    transparent 60%
  );
  animation: serviceHeroGlowB 30s var(--ease) infinite alternate;
}
.service-hero__glow--c {
  width: 540px;
  height: 540px;
  top: 30%;
  left: 35%;
  background: radial-gradient(
    circle,
    rgba(255, 200, 220, 0.22),
    transparent 65%
  );
}
@keyframes serviceHeroGlowA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-60px, 40px, 0) scale(1.06);
  }
}
@keyframes serviceHeroGlowB {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(80px, -50px, 0) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero__glow--a,
  .service-hero__glow--b {
    animation: none !important;
  }
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.service-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.service-hero__breadcrumb {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  background: linear-gradient(
    135deg,
    rgba(245, 233, 246, 0.85) 0%,
    rgba(255, 255, 255, 0.7) 100%
  );
  border: 1px solid rgba(97, 31, 105, 0.12);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(97, 31, 105, 0.06),
    0 6px 16px -8px rgba(97, 31, 105, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.service-hero__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color var(--dur-small) var(--ease);
}
.service-hero__breadcrumb a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: linear-gradient(135deg, #f26ae2 0%, #611f69 100%);
}
.service-hero__breadcrumb a:hover {
  color: var(--brand-700);
}
.service-hero__breadcrumb > span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  color: var(--ink-300);
  font-size: 0;
}
.service-hero__breadcrumb > span[aria-hidden]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1 L7 5 L3 9' stroke='%23A0A6B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.service-hero__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 7px 16px;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.service-hero__title {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--heading-navy);
  letter-spacing: -0.034em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  max-width: 20ch;
}
.service-hero__title .service-hero__title-accent {
  background: linear-gradient(135deg, #f26ae2 0%, #611f69 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.service-hero__lede {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 60ch;
}
.service-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* 42. Stack chips */
.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stack-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.stack-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

/* 43. Engagement timeline (4-step vertical) */
.engagement-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-100);
}
.engagement-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-100);
}
@media (max-width: 640px) {
  .engagement-step {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }
  .engagement-step__meta {
    grid-column: 2;
    padding-top: 0 !important;
  }
}

.engagement-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.22);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.engagement-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.engagement-step__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.engagement-step__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 62ch;
}
.engagement-step__meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding-top: 16px;
  white-space: nowrap;
}

/* 44. Why grid (4 cards) */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

.why-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 180px;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.why-card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
}
.why-card__num {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--brand-50);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.why-card__text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--ink-900);
}

/* =====================================================
   INDUSTRY PAGES — Hero (split with stats card), sectors,
   outcomes, products, services
   ===================================================== */

/* 45. Industry hero — split layout (copy + stats card on right) — LIGHT variant */
.industry-hero {
  position: relative;
  padding-block: 96px 80px;
  background:
    radial-gradient(
      ellipse 80% 60% at 90% 0%,
      rgba(245, 233, 246, 0.55) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 0% 100%,
      rgba(255, 235, 240, 0.45) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #fcfaf7 0%, #ffffff 100%);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 1024px) {
  .industry-hero {
    padding-block: 72px 56px;
  }
}
@media (max-width: 640px) {
  .industry-hero {
    padding-block: 56px 44px;
  }
}

.industry-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.industry-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}
.industry-hero__glow--a {
  width: 820px;
  height: 820px;
  top: -300px;
  right: -200px;
  background: radial-gradient(circle, rgba(194, 71, 204, 0.2), transparent 62%);
}
.industry-hero__glow--b {
  width: 680px;
  height: 680px;
  bottom: -280px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(242, 106, 226, 0.15),
    transparent 62%
  );
}
.industry-hero__grid {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -42%;
  width: 240%;
  height: 100%;
  transform: translateX(-50%) perspective(900px) rotateX(72deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 70% at 30% 10%,
    #000,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 55% 70% at 30% 10%,
    #000,
    transparent 75%
  );
  opacity: 0.5;
}

.industry-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1024px) {
  .industry-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.industry-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Breadcrumb — light pill matching service breadcrumb */
.industry-hero__breadcrumb {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  background: linear-gradient(
    135deg,
    rgba(245, 233, 246, 0.85) 0%,
    rgba(255, 255, 255, 0.7) 100%
  );
  border: 1px solid rgba(97, 31, 105, 0.12);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(97, 31, 105, 0.06),
    0 6px 16px -8px rgba(97, 31, 105, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.industry-hero__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color var(--dur-small) var(--ease);
}
.industry-hero__breadcrumb a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1.5px;
  background: linear-gradient(135deg, #f26ae2 0%, #611f69 100%);
}
.industry-hero__breadcrumb a:hover {
  color: var(--brand-700);
}
.industry-hero__breadcrumb > span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  color: var(--ink-300);
  font-size: 0;
}
.industry-hero__breadcrumb > span[aria-hidden]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1 L7 5 L3 9' stroke='%23A0A6B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Tag pill — light bg */
.industry-hero__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 7px 16px;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Title — dark ink on light */
.industry-hero__title {
  margin: 0;
  font-size: clamp(42px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--heading-navy);
  letter-spacing: -0.034em;
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  max-width: 18ch;
}
.industry-hero__title .industry-hero__title-accent {
  background: linear-gradient(
    135deg,
    #f26ae2 0%,
    #c247cc 35%,
    #8b2ea0 70%,
    #611f69 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Lede — dark on light */
.industry-hero__lede {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 56ch;
}

.industry-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* Buttons — use default light btn styles, no overrides needed */

/* Stats card — elevated white card on cream hero */
.industry-hero__stats-card {
  position: relative;
  padding: 32px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 80px -28px rgba(97, 31, 105, 0.22),
    0 12px 28px -12px rgba(10, 14, 26, 0.08);
  isolation: isolate;
}
.industry-hero__stats-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 90% 0%, rgba(194, 71, 204, 0.1), transparent 55%),
    radial-gradient(
      circle at 0% 100%,
      rgba(242, 106, 226, 0.06),
      transparent 55%
    );
  pointer-events: none;
  z-index: -1;
}
.industry-hero__stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-100);
}
.industry-hero__stats-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.industry-hero__stats-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: var(--brand-50);
  border: 1px solid rgba(97, 31, 105, 0.16);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
  text-transform: none;
}
.industry-hero__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.industry-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.industry-hero__stat-num {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.032em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.industry-hero__stat-num sup {
  font-size: 0.42em;
  margin-left: 3px;
  color: var(--brand);
  font-weight: 600;
  position: relative;
  top: 0.18em;
}
.industry-hero__stat-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-500);
}

/* 46. Sub-sectors strip (pills) */
.industry-sectors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.industry-sector {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-700);
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.industry-sector:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}

/* 47. Industry outcomes (4-card hairline) */
.industry-outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}
@media (max-width: 720px) {
  .industry-outcomes {
    grid-template-columns: 1fr;
  }
}

.industry-outcome {
  padding: 36px 32px;
  border-right: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  transition: background-color var(--dur-small) var(--ease);
  position: relative;
}
.industry-outcome:hover {
  background: var(--surface-alt);
}
.industry-outcome__num {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.industry-outcome__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink-900);
}
.industry-outcome__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 56ch;
}

/* 48. Related products grid */
.industry-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.industry-product-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink-900);
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
  position: relative;
  overflow: hidden;
}
.industry-product-card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 18px 36px -18px rgba(97, 31, 105, 0.2);
}
.industry-product-card__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.industry-product-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.industry-product-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  flex: 1;
}
.industry-product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1.5px solid transparent;
  margin-top: 4px;
  align-self: flex-start;
  transition:
    border-color var(--dur-small) var(--ease),
    color var(--dur-small) var(--ease);
}
.industry-product-card:hover .industry-product-card__link {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* 49. Industry services list (clickable rows) */
.industry-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink-100);
}
@media (max-width: 720px) {
  .industry-services {
    grid-template-columns: 1fr;
  }
}

.industry-services li {
  border-bottom: 1px solid var(--ink-100);
}
.industry-services li:nth-child(even) {
  border-left: 1px solid var(--ink-100);
}
@media (max-width: 720px) {
  .industry-services li:nth-child(even) {
    border-left: 0;
  }
}

.industry-service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  transition:
    background-color var(--dur-small) var(--ease),
    padding-left var(--dur-small) var(--ease);
}
.industry-service-link:hover {
  background: var(--surface-alt);
  padding-left: 30px;
}
.industry-service-link svg {
  color: var(--brand);
  transition: transform var(--dur-small) var(--ease);
}
.industry-service-link:hover svg {
  transform: translateX(4px);
}

/* =====================================================
   COMPANY + CONTACT PAGE COMPONENTS
   ===================================================== */

/* 50. Company prose (long-form story block) */
.company-prose {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.company-prose p {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--ink-700);
  letter-spacing: -0.005em;
}

/* 51. Leaders grid */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .leaders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .leaders-grid {
    grid-template-columns: 1fr;
  }
}

.leader-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.leader-card:hover {
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(97, 31, 105, 0.1),
    0 20px 40px -20px rgba(97, 31, 105, 0.18);
}
.leader-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(245, 233, 246, 0.6),
      transparent 55%
    ),
    linear-gradient(135deg, #f8f4ff 0%, #f1e6f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leader-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.leader-card__photo-placeholder {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(97, 31, 105, 0.35);
}
.leader-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leader-card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.leader-card__role {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.leader-card__bio {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* 52. Offices grid (3 cols) */
.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .offices-grid {
    grid-template-columns: 1fr;
  }
}

.office-card {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color var(--dur-small) var(--ease),
    transform var(--dur-small) var(--ease);
}
.office-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.office-card__city {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
}
.office-card__country {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.office-card__address {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
  margin-top: 6px;
}
.office-card__email {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
  transition: color var(--dur-small) var(--ease);
}
.office-card__email:hover {
  color: var(--brand);
}

/* 53. Contact grid — form left, side channels right */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Contact form */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 12px 32px -16px rgba(97, 31, 105, 0.1);
}
@media (max-width: 640px) {
  .contact-form {
    padding: 28px 24px;
  }
}

.contact-form__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.contact-form__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--ink-900);
}
.contact-form__lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.contact-form__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.contact-form__input,
.contact-form__textarea {
  font: inherit;
  font-size: 14.5px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  width: 100%;
  transition:
    border-color var(--dur-small) var(--ease),
    background-color var(--dur-small) var(--ease);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--ink-400);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(97, 31, 105, 0.08);
}
.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-100);
  align-items: flex-start;
}
.contact-form__legal {
  margin: 0;
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.5;
}
.contact-form__legal a {
  color: var(--brand);
}
.contact-form__legal a:hover {
  color: var(--brand-700);
}

/* Contact side channels */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-side__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-side__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}

.contact-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.contact-channel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-100);
}
.contact-channel:last-child {
  border-bottom: 0;
}
.contact-channel__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.contact-channel__value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand);
  transition: color var(--dur-small) var(--ease);
}
.contact-channel__value:hover {
  color: var(--brand-700);
}
.contact-channel__meta {
  font-size: 12.5px;
  color: var(--ink-500);
}

.contact-side__phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
}
.contact-side__phones .contact-channel__label {
  margin-bottom: 6px;
}
.contact-side__phone {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  transition: color var(--dur-small) var(--ease);
}
.contact-side__phone:hover {
  color: var(--brand);
}

/* =====================================================
   HOMEPAGE LEAD FORM (inside cta-band card)
   ===================================================== */

.cta-band__card--form {
  padding: 32px;
}
@media (max-width: 640px) {
  .cta-band__card--form {
    padding: 26px 22px;
  }
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lead-form__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .lead-form__row {
    grid-template-columns: 1fr;
  }
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lead-form__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.lead-form__input,
.lead-form__textarea {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  width: 100%;
  transition:
    border-color var(--dur-small) var(--ease),
    background-color var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.lead-form__input::placeholder,
.lead-form__textarea::placeholder {
  color: var(--ink-400);
}
.lead-form__input:focus,
.lead-form__textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(97, 31, 105, 0.08);
}
.lead-form__textarea {
  resize: vertical;
  min-height: 72px;
}

select.lead-form__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6075' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 36px;
}

.lead-form__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-100);
}
.lead-form__legal {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: center;
}

.lead-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 24px 8px 12px;
}
.lead-form__success-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-900);
}
.lead-form__success-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 36ch;
}

/* Reduced motion
   ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__line > span {
    transform: translateY(0) !important;
  }
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__rotator-word {
    opacity: 0;
    transform: none !important;
  }
  .hero__rotator-word.is-current {
    opacity: 1;
  }
  .hero__bg-media,
  .hero__bg-glow--a,
  .hero__bg-glow--b,
  .hero__chip-dot,
  .hero__scroll-line::after {
    animation: none !important;
  }
  .hero__bg-media {
    opacity: 0.92 !important;
  }
  .hero__stage-slide {
    transition: none !important;
  }
  .hero__stage-progress-bar {
    transform: scaleX(0) !important;
    transition: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   HOME PAGE. Centre every section heading and tighten the lede sizing.
   Scoped to body.page-home so other pages keep their left-aligned heads.
   ===================================================================== */
.page-home .product-section__head,
.page-home .products__head,
.page-home .platform__head,
.page-home .industries__head,
.page-home .services__head,
.page-home .process__head,
.page-home .technology__head,
.page-home .resources__head,
.page-home .trust__head {
  text-align: center;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  max-width: 1100px;
  width: 100%;
}

.page-home .products__head-text,
.page-home .industries__head-text,
.page-home .services__head-text,
.page-home .process__head-text,
.page-home .technology__head-text,
.page-home .resources__head-text {
  text-align: center;
  margin-inline: auto;
  max-width: 1000px;
  width: 100%;
}

.page-home .product-section__head .eyebrow,
.page-home .products__head .eyebrow,
.page-home .platform__head .eyebrow,
.page-home .industries__head .eyebrow,
.page-home .services__head .eyebrow,
.page-home .process__head .eyebrow,
.page-home .technology__head .eyebrow,
.page-home .resources__head .eyebrow {
  justify-content: center;
}

.page-home .product-section__lede,
.page-home .products__lede,
.page-home .platform__lede,
.page-home .industries__lede,
.page-home .services__lede,
.page-home .process__lede,
.page-home .technology__lede,
.page-home .resources__lede {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 720px;
  margin: 14px auto 0;
}

/* ----- Unified eyebrow on home page. Small pill chip, brand colour. ----- */
.page-home .eyebrow,
.page-home .product-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 auto;
  align-self: center;
}
/* Hide the legacy line bar on home-page eyebrows. */
.page-home .eyebrow .eyebrow__line,
.page-home .product-section__eyebrow::before {
  display: none;
}

/* ----- Unified title on home page. ----- */
.page-home .products__title,
.page-home .platform__title,
.page-home .industries__title,
.page-home .services__title,
.page-home .process__title,
.page-home .technology__title,
.page-home .resources__title,
.page-home .trust__title,
.page-home .product-section__title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  margin: 14px 0 0;
}

/* Drop the purple gradient on inline title accents site-home; keep them inked. */
.page-home .products__title .title-accent,
.page-home .platform__title .title-accent,
.page-home .industries__title .title-accent,
.page-home .services__title .title-accent,
.page-home .process__title .title-accent,
.page-home .technology__title .title-accent,
.page-home .product-section__title .title-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: inherit;
  color: inherit;
}

/* CTA band accent. Solid brand purple, not a gradient. */
.page-home .cta-band__title-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--brand);
  color: var(--brand);
}

/* Brand dot (trailing full stop) becomes a quiet accent dot, not a coloured period. */
.page-home .products__title .brand-dot,
.page-home .platform__title .brand-dot,
.page-home .industries__title .brand-dot,
.page-home .services__title .brand-dot,
.page-home .process__title .brand-dot,
.page-home .technology__title .brand-dot,
.page-home .product-section__title .brand-dot {
  color: var(--brand);
}

/* Tighter rhythm on every centred head row. */
.page-home .products__head,
.page-home .platform__head,
.page-home .industries__head,
.page-home .services__head,
.page-home .process__head,
.page-home .technology__head,
.page-home .resources__head,
.page-home .trust__head,
.page-home .product-section__head {
  gap: 0;
  padding-bottom: 8px;
}

/* The "View all X" inline link moves below the centred heading block. */
.page-home .products__head-link,
.page-home .industries__head-link,
.page-home .services__head-link,
.page-home .process__head-link,
.page-home .technology__head-link,
.page-home .resources__head-link {
  align-self: center;
  margin-top: 14px;
}

/* Manifesto block. Centre its statement and chip row. */
.page-home .manifesto__inner {
  text-align: center;
}
.page-home .manifesto__attrs {
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Compact vertical rhythm. Every home page section drops to 50px top/
   bottom, scaling down on smaller viewports.
   --------------------------------------------------------------------- */
.page-home .trust,
.page-home .products,
.page-home .platform,
.page-home .manifesto,
.page-home .industries,
.page-home .services,
.page-home .process,
.page-home .technology,
.page-home .resources,
.page-home .product-section,
.page-home .cta-band {
  padding-block: 50px;
}
@media (max-width: 1024px) {
  .page-home .trust,
  .page-home .products,
  .page-home .platform,
  .page-home .manifesto,
  .page-home .industries,
  .page-home .services,
  .page-home .process,
  .page-home .technology,
  .page-home .resources,
  .page-home .product-section,
  .page-home .cta-band {
    padding-block: 40px;
  }
}
@media (max-width: 640px) {
  .page-home .trust,
  .page-home .products,
  .page-home .platform,
  .page-home .manifesto,
  .page-home .industries,
  .page-home .services,
  .page-home .process,
  .page-home .technology,
  .page-home .resources,
  .page-home .product-section,
  .page-home .cta-band {
    padding-block: 32px;
  }
}



/* =====================================================================
   FAQ accordion. Used on product, service and industry pages.
   Native <details>/<summary>. No JS dependency.
   ===================================================================== */
.faq-section {
  background: var(--surface);
}
.faq-list {
  max-width: 880px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color var(--dur-small) var(--ease),
    box-shadow var(--dur-small) var(--ease);
}
.faq-item[open] {
  border-color: var(--ink-200);
  box-shadow: 0 8px 24px -16px rgba(10, 14, 26, 0.18);
}
.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  -webkit-tap-highlight-color: transparent;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-question:hover {
  color: var(--brand);
}
.faq-icon {
  flex-shrink: 0;
  color: var(--ink-500);
  transition: transform var(--dur-small) var(--ease), color var(--dur-small) var(--ease);
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  color: var(--brand);
}
.faq-answer {
  padding: 0 24px 22px;
}
.faq-answer p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-700);
}
@media (max-width: 640px) {
  .faq-question {
    padding: 16px 18px;
    font-size: 15px;
  }
  .faq-answer { padding: 0 18px 18px; }
  .faq-answer p { font-size: 14px; }
}

/* =============================================================
   Transparent-header overlay — HOMEPAGE ONLY.
   Pulls #main up under the sticky transparent header so the
   homepage's dark video hero shows through. Other pages keep the
   header opaque on top of the page, so no offset is needed.
   ============================================================= */
body.page-home #main {
  margin-top: calc(var(--nav-h) * -1);
}
body.page-home .hero { padding-top: calc(45px + var(--nav-h)); }

@media (max-width: 1024px) {
  body.page-home .hero { padding-top: calc(72px + var(--nav-h)); }
}
@media (max-width: 640px) {
  body.page-home .hero { padding-top: calc(56px + var(--nav-h)); }
}

/* =============================================================
   Registerkaro-style universal Poppins enforcement.
   Forces Poppins on every element so body, links, buttons,
   captions, form fields and footer all render in Poppins —
   the same trick registerkaro.in uses with its `.app-container *`
   selector. Headings keep their Gilroy override below.
   ============================================================= */
body * {
  font-family: var(--font-sans) !important;
}

/* Force navy-blue Poppins-700 on every heading and section title
   so they match registerkaro's clean look. White-on-dark hero
   titles are excluded — they override the color back to white. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .display-xl,
body .display-l,
body .display-m,
body .heading-l,
body .heading-m,
body [class*="__title"]:not(.hero__title),
body [class*="__subtitle"] {
  font-family: var(--font-heading) !important;
  color: var(--heading-navy);
}