:root {
  --bg-900: #eef4ff;
  --bg-800: #e3edff;
  --bg-700: #d2e3ff;
  --ink-100: #08254a;
  --ink-300: #1f4f86;
  --ink-500: #5d7fae;
  --brand: #0b63c9;
  --brand-strong: #083f86;
  --accent: #4aa3ff;
  --line: rgba(25, 77, 145, 0.2);
  --line-strong: rgba(25, 77, 145, 0.35);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --max: 1180px;
  --shadow-soft: 0 14px 28px rgba(13, 47, 95, 0.12);
  --shadow-hard: 0 22px 44px rgba(13, 47, 95, 0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100%;
  font-family: 'Manrope', sans-serif;
  color: var(--ink-100);
  background:
    radial-gradient(circle at 8% 0%, rgba(11, 99, 201, 0.08), transparent 28%),
    radial-gradient(circle at 95% 2%, rgba(74, 163, 255, 0.1), transparent 30%),
    linear-gradient(180deg, #ffffff, var(--bg-900));
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(19, 70, 136, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 70, 136, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 90%);
  opacity: 0.28;
  z-index: -3;
}

.bg-glow {
  position: fixed;
  border-radius: 999px;
  filter: blur(55px);
  pointer-events: none;
  z-index: -2;
  opacity: 0.5;
  animation: drift 14s ease-in-out infinite alternate;
}

.glow-a {
  width: 420px;
  height: 420px;
  background: rgba(90, 176, 255, 0.28);
  top: -140px;
  left: -120px;
}

.glow-b {
  width: 360px;
  height: 360px;
  background: rgba(25, 118, 210, 0.2);
  right: -120px;
  top: 120px;
  animation-delay: 2.5s;
}

@keyframes drift {
  from { transform: translateY(0) translateX(0) scale(1); }
  to { transform: translateY(22px) translateX(16px) scale(1.08); }
}

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

.container {
  width: min(calc(100% - 2rem), var(--max));
  margin-inline: auto;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: 0 0 20px rgba(25, 118, 210, 0.35);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(8, 37, 74, 0.08);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.topbar.scrolled {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
}

.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.brand:hover {
  transform: translateY(-1px);
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(11, 99, 201, 0.22));
}

.brand-logo-img {
  display: block;
  width: auto;
  height: 62px;
  max-width: min(100%, 430px);
}

@media (max-width: 980px) {
  .brand-logo-img {
    height: 50px;
  }
}

/* Desktop dropdown stability: keep Services submenu open while moving cursor */
@media (min-width: 981px) {
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }

  .nav-submenu {
    top: calc(100% + 0.35rem);
  }

  .nav-dropdown:focus-within .nav-submenu,
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown.open .nav-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* Platform Expertise: clearer ecosystem infographic */
.px-ecosystem-graphic {
  margin-top: 1.2rem;
  border: 1px solid rgba(129, 184, 239, 0.3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 15%, rgba(91, 177, 255, 0.2), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(46, 119, 214, 0.22), transparent 44%),
    linear-gradient(165deg, rgba(10, 28, 56, 0.96), rgba(14, 40, 78, 0.94));
  box-shadow: 0 20px 40px rgba(6, 19, 38, 0.3);
  padding: 1rem;
}

.px-eco-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.px-eco-layer {
  border: 1px solid rgba(136, 194, 251, 0.32);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.85rem;
}

.px-eco-kicker {
  margin: 0;
  color: #8fd3ff;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.px-eco-layer h3 {
  margin: 0.35rem 0 0;
  color: #f2f9ff;
  font-size: 1.03rem;
}

.px-eco-layer p {
  margin: 0.45rem 0 0;
  color: #d1e6fb;
  font-size: 0.88rem;
  line-height: 1.5;
}

.px-eco-platforms {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.px-eco-platforms span {
  border: 1px solid rgba(143, 204, 255, 0.42);
  border-radius: 999px;
  padding: 0.28rem 0.58rem;
  color: #edf7ff;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(82, 161, 236, 0.22);
}

.px-eco-flow {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.px-eco-flow span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(141, 198, 250, 0.34);
  background: linear-gradient(135deg, rgba(91, 171, 245, 0.24), rgba(42, 114, 197, 0.2));
  color: #eff8ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.px-eco-outcomes {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.px-eco-outcomes article {
  border: 1px solid rgba(132, 191, 246, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
}

.px-eco-outcomes strong {
  color: #f2f9ff;
  font-size: 0.9rem;
}

.px-eco-outcomes p {
  margin: 0.35rem 0 0;
  color: #ccdef0;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .px-ecosystem-graphic {
    padding: 0.8rem;
  }

  .px-eco-layers,
  .px-eco-outcomes {
    grid-template-columns: 1fr;
  }

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

.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  color: var(--ink-100);
  background: transparent;
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.05rem;
}

.nav-links a {
  color: var(--ink-300);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.2rem 0;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: transform 0.2s ease;
}

.nav-links a.active,
.nav-links a:hover { color: var(--ink-100); }

.nav-links a.active::after,
.nav-links a:hover::after { transform: scaleX(1); }

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-parent {
  white-space: nowrap;
}

.nav-sub-toggle {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-300);
  font-size: 0.72rem;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-sub-toggle:hover {
  color: var(--ink-100);
  border-color: var(--line);
}

.nav-dropdown.open .nav-sub-toggle {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 280px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 30px rgba(8, 37, 74, 0.14);
  padding: 0.4rem;
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 140;
}

.nav-submenu a {
  display: block;
  padding: 0.48rem 0.58rem;
  border-radius: 8px;
  color: var(--ink-300);
  font-size: 0.86rem;
  font-weight: 600;
}

.nav-submenu a::after {
  display: none;
}

.nav-submenu a:hover {
  color: var(--ink-100);
  background: rgba(74, 163, 255, 0.12);
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown.open .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.8rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), #2c8bec);
  box-shadow: 0 16px 34px rgba(11, 99, 201, 0.34);
}

.btn-secondary {
  color: var(--brand-strong);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.hero { padding: 5.4rem 0 3.5rem; }

.hero-grid {
  display: grid;
  gap: 1.2rem;
  align-items: stretch;
  grid-template-columns: 1.25fr 0.95fr;
  position: relative;
}

.hero-copy h1 {
  margin: 0;
  line-height: 1.06;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.8vw, 3.7rem);
  letter-spacing: -0.02em;
}

.hero-copy p {
  margin: 1rem 0 0;
  max-width: 760px;
  color: var(--ink-300);
  font-size: 1.08rem;
}

.pill-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  color: var(--ink-300);
  font-size: 0.8rem;
  background: rgba(168, 198, 229, 0.07);
}

.actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.hero-aside {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 1.15rem;
  background:
    radial-gradient(circle at 80% 0%, rgba(90, 176, 255, 0.2), transparent 45%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(234, 243, 255, 0.98));
  box-shadow: var(--shadow-hard);
  position: relative;
  overflow: hidden;
}

.hero-aside::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(74, 163, 255, 0.5);
  pointer-events: none;
}

.metric-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.metric {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.metric .value {
  font-size: 1.45rem;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  color: var(--brand);
}

.metric .label {
  margin-top: 0.3rem;
  color: var(--ink-500);
  font-size: 0.8rem;
}

.hero-note {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--ink-300);
  font-size: 0.9rem;
}

.section { padding: 2.4rem 0; }

.section:nth-of-type(even) .container {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(11, 99, 201, 0.08);
  border-radius: 20px;
  padding: 1.2rem;
}

.section-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-family: 'Space Grotesk', sans-serif;
}

.lead {
  margin: 0;
  max-width: 820px;
  color: var(--ink-300);
}

.trust-ticker {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(233, 241, 255, 0.9);
}

.track {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  white-space: nowrap;
  padding: 0.7rem 1rem;
  color: var(--ink-300);
  animation: ticker 18s linear infinite;
  font-weight: 600;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-40%); }
}

.grid {
  display: grid;
  margin-top: 1.2rem;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card,
.panel,
.cta,
.timeline-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 255, 0.98));
  box-shadow: var(--shadow-soft);
  will-change: transform, opacity, filter;
}

.card {
  padding: 1.15rem;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 44px rgba(8, 37, 74, 0.18);
}

.card h3,
.panel h3,
.cta h3,
.timeline-item h3 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.08rem;
}

.card p,
.panel p,
.timeline-item p {
  margin: 0.6rem 0 0;
  color: var(--ink-300);
}

.kicker {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.card-link {
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(11, 99, 201, 0.28);
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card-link:hover,
.card-link:focus-visible {
  background: linear-gradient(135deg, var(--brand), #2c8bec);
  color: #ffffff;
  border-color: var(--brand);
  transform: translateY(-1px);
}

.card-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(11, 99, 201, 0.2);
}

.icon-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(74, 163, 255, 0.18), rgba(11, 99, 201, 0.08));
}

.icon-row svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-strong);
  stroke-width: 1.9;
  fill: none;
}

.split {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.panel,
.cta { padding: 1.1rem; }

.list {
  margin: 0.6rem 0 0;
  padding-left: 1rem;
  color: var(--ink-300);
}

.list li { margin-bottom: 0.45rem; }

.timeline {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.9rem;
}

.slider-wrap {
  margin-top: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(232, 242, 255, 0.95));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}

.slider-controls {
  display: flex;
  gap: 0.45rem;
}

.slider-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-strong);
  cursor: pointer;
  font-weight: 700;
}

.slider-track {
  position: relative;
  min-height: 210px;
}

.slide {
  position: absolute;
  inset: 0;
  padding: 1.15rem;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.slide h3 {
  margin: 0.1rem 0 0.5rem;
  font-family: 'Space Grotesk', sans-serif;
}

.slide p {
  margin: 0;
  color: var(--ink-300);
}

.slide-meta {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--ink-500);
}

.slide-dots {
  display: flex;
  gap: 0.4rem;
  padding: 0 1rem 1rem;
}

.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #b3caeb;
  cursor: pointer;
}

.slide-dot.active {
  width: 20px;
  background: var(--brand);
}

.media-card {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.media-card img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  max-height: 360px;
  object-fit: cover;
  display: block;
}

.media-card figcaption {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  background: rgba(8, 37, 74, 0.78);
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.35;
}

.timeline-item {
  padding: 1.15rem;
  position: relative;
}

.timeline-item::before {
  content: attr(data-step);
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(255, 255, 255, 0.15);
  font-size: 1.45rem;
  font-weight: 700;
}

.cta {
  background:
    radial-gradient(circle at 95% 10%, rgba(90, 176, 255, 0.25), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(222, 236, 255, 0.98));
}

.form {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr 1fr;
}

.form .full { grid-column: 1 / -1; }

label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-300);
  font-size: 0.85rem;
}

input,
select,
textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-strong);
  padding: 0.74rem;
  font: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(25, 118, 210, 0.75);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.14);
}

textarea { resize: vertical; min-height: 130px; }

.footer {
  margin-top: 0;
  border-top: 1px solid rgba(116, 176, 238, 0.28);
  background: linear-gradient(180deg, #082245, #061a35);
  color: #d8eaff;
  padding: 2rem 0 1.1rem;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  align-items: start;
}

.footer-brand p {
  margin: 0.55rem 0 0;
  color: #bfd8f3;
  max-width: 420px;
  line-height: 1.55;
}

.footer-logo {
  font-family: 'Space Grotesk', sans-serif;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-col h4 {
  margin: 0 0 0.5rem;
  color: #e9f4ff;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  color: #c6def8;
  margin: 0.24rem 0;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible,
.footer-logo:hover,
.footer-logo:focus-visible {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-bottom {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(126, 183, 241, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  justify-content: space-between;
  color: #b5d2ee;
}

.footer-credit {
  margin: 0;
  font-size: 0.81rem;
  letter-spacing: 0.02em;
  color: #9cc0e5;
}

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

@media (max-width: 760px) {
  .footer {
    padding: 1.5rem 0 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

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


.reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.97);
  filter: blur(2px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal.from-left { transform: translateX(-34px) scale(0.97); }
.reveal.from-right { transform: translateX(34px) scale(0.97); }
.reveal.from-left.in-view,
.reveal.from-right.in-view { transform: translateX(0) scale(1); }

/* Immersive home experience */
.ix-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 20% 15%, #122f5f, #080f1f 55%, #040811 100%);
  overflow: hidden;
}

#hero-network,
#ix-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ix-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 20, 0.25), rgba(4, 8, 18, 0.82));
}

.ix-hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-align: left;
  transform-style: preserve-3d;
  max-width: 1160px;
}

.ix-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.2rem;
  align-items: center;
}

.ix-hero-content h1 {
  margin: 0;
  font-size: clamp(2rem, 4.7vw, 3.4rem);
  line-height: 1.08;
  color: #f4f9ff;
  letter-spacing: -0.02em;
}

.ix-hero-sub {
  margin: 1.2rem auto 0;
  max-width: 760px;
  color: rgba(240, 247, 255, 0.92);
  font-size: 1.06rem;
  line-height: 1.75;
}

.ix-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(135, 191, 255, 0.45);
  color: #b9e0ff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ix-btn-glow {
  box-shadow: 0 12px 26px rgba(20, 126, 221, 0.35);
}

.ix-btn-glass {
  color: #dbeaff;
  border-color: rgba(120, 190, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.ix-scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  color: #c7dfff;
  font-size: 0.88rem;
  margin-left: 0.1rem;
}

.ix-scroll-indicator span {
  animation: bounceY 1.2s ease-in-out infinite;
}

.ix-hero-panel {
  border: 1px solid rgba(145, 186, 230, 0.35);
  border-radius: 16px;
  padding: 1.15rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(8px);
}

.ix-hero-panel h3 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  color: #eff7ff;
}

.ix-hero-panel .list {
  margin-top: 0.7rem;
  color: #c9ddf4;
}

.ix-hero-panel .list li {
  margin-bottom: 0.55rem;
}

.ix-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.ix-hero-stats div {
  border: 1px solid rgba(143, 188, 235, 0.35);
  border-radius: 12px;
  padding: 0.6rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
}

.ix-hero-stats strong {
  display: block;
  color: #9ed7ff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
}

.ix-hero-stats span {
  color: #dceeff;
  font-size: 0.8rem;
}

@keyframes bounceY {
  50% { transform: translateY(4px); }
}

.ix-trust {
  background: linear-gradient(160deg, #081427, #101d34);
  padding: 4rem 0;
  color: #deebff;
  position: relative;
  border-top: 1px solid rgba(136, 174, 219, 0.2);
  border-bottom: 1px solid rgba(136, 174, 219, 0.2);
}

.ix-trust::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(133, 168, 215, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(133, 168, 215, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.ix-trust .container {
  position: relative;
  z-index: 2;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ix-trust .section-title {
  color: #f4f9ff;
  text-shadow: 0 0 14px rgba(100, 179, 255, 0.28);
}

.ix-trust-head {
  max-width: 860px;
  margin: 0 auto;
}

.ix-trust-sub {
  margin: 0.45rem auto 0;
  color: #bfd3ea;
  max-width: 760px;
}

.ix-trust-grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  align-items: stretch;
}

.ix-logo-cloud {
  margin-top: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.ix-logo-card {
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 185, 223, 0.32);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  text-align: left;
}

.ix-logo-card small {
  display: block;
  margin-top: 0.45rem;
  color: #9eb8d5;
  font-size: 0.8rem;
  line-height: 1.5;
}

.ix-logo {
  min-width: 100%;
  height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(147, 182, 222, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8c6db;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  filter: grayscale(100%);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.ix-logo:hover {
  filter: grayscale(0%);
  color: #dbf2ff;
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(87, 166, 255, 0.35);
}

.ix-counter-line {
  margin-top: 0;
  color: #d7e9ff;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ix-counter-icon {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #b7e2ff, #5db6ff 60%, #2b89df 100%);
  box-shadow: 0 0 10px rgba(104, 184, 255, 0.7);
}

.ix-counter-line [data-counter] {
  color: #86cdff;
  font-size: 2rem;
  font-family: 'Space Grotesk', sans-serif;
}

.ix-trust-proof {
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(147, 186, 228, 0.35);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  text-align: left;
}

.ix-proof-points {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.6rem;
}

.ix-proof-points article {
  border: 1px solid rgba(148, 188, 232, 0.26);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
}

.ix-proof-points strong {
  color: #e6f4ff;
  font-size: 0.9rem;
}

.ix-proof-points p {
  margin: 0.25rem 0 0;
  color: #b8d1ea;
  font-size: 0.82rem;
  line-height: 1.45;
}

.ix-trust-foot {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ix-trust-foot span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #d9ebff;
  border: 1px solid rgba(142, 183, 225, 0.34);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.ix-challenge {
  background: #ffffff;
  padding: 4rem 0;
}

.ix-challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.ix-challenge .section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}

.ix-challenge .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.ix-mini-stats {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
}

.ix-mini-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f6faff;
  font-weight: 600;
}

.ix-mini-card strong {
  color: var(--brand);
}

.ix-mini-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(74, 163, 255, 0.14);
  border: 1px solid rgba(25, 118, 210, 0.2);
}

.ix-mini-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ix-chart-wrap {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #f8fbff, #edf5ff);
  padding: 0.7rem;
  min-height: 320px;
  position: relative;
}

.ix-chart-head {
  margin-bottom: 0.45rem;
}

.ix-chart-title {
  margin: 0;
  color: #093f7f;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.ix-chart-note {
  margin: 0.18rem 0 0;
  color: #40689a;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ix-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}

.ix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  color: #184f8b;
  font-size: 0.78rem;
  font-weight: 700;
}

.ix-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.ix-dot-security { background: #0b63c9; }
.ix-dot-speed { background: #4aa3ff; }

#ix-speed-security-chart {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.ix-chart-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(8, 37, 74, 0.95);
  color: #ffffff;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  transform: translate(-50%, -130%);
  display: none;
}

.ix-chart-insights {
  margin-top: 0.52rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.ix-chart-insights article {
  border: 1px solid rgba(16, 91, 174, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.46rem 0.54rem;
}

.ix-chart-insights strong {
  color: #0b4b90;
  font-size: 0.78rem;
}

.ix-chart-insights p {
  margin: 0.2rem 0 0;
  color: #2b5f97;
  font-size: 0.74rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .ix-chart-insights {
    grid-template-columns: 1fr;
  }

  .ix-chart-note {
    font-size: 0.76rem;
  }
}

.ix-services {
  padding: 4rem 0;
  background: linear-gradient(180deg, #09162a, #101f39);
  color: #e5f0ff;
  border-top: 1px solid rgba(130, 175, 225, 0.2);
  border-bottom: 1px solid rgba(130, 175, 225, 0.2);
}

.ix-services .container {
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ix-services .lead {
  margin: 0.45rem auto 0;
  color: #b8cde5;
  max-width: 860px;
}

.ix-services-grid {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ix-service-card {
  text-align: left;
  border: 1px solid rgba(146, 188, 236, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 1.15rem;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.ix-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 187, 255, 0.6);
  box-shadow: 0 0 24px rgba(89, 167, 255, 0.25);
}

.ix-service-card .icon-row {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 0.8rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ix-service-card .icon-row svg {
  width: 24px;
  height: 24px;
  stroke: #dff2ff;
}

.ix-service-card:hover .icon-row {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 16px rgba(40, 134, 230, 0.28);
}

.ix-services-grid .ix-service-card:nth-child(1) .icon-row {
  background: linear-gradient(145deg, rgba(74, 163, 255, 0.34), rgba(11, 99, 201, 0.2));
}

.ix-services-grid .ix-service-card:nth-child(2) .icon-row {
  background: linear-gradient(145deg, rgba(110, 189, 255, 0.34), rgba(26, 115, 214, 0.2));
}

.ix-services-grid .ix-service-card:nth-child(3) .icon-row {
  background: linear-gradient(145deg, rgba(68, 152, 241, 0.34), rgba(9, 83, 175, 0.2));
}

.ix-services-grid .ix-service-card:nth-child(4) .icon-row {
  background: linear-gradient(145deg, rgba(126, 202, 255, 0.34), rgba(37, 133, 232, 0.2));
}

.ix-services-grid .ix-service-card:nth-child(5) .icon-row {
  background: linear-gradient(145deg, rgba(84, 170, 255, 0.34), rgba(15, 104, 204, 0.2));
}

.ix-services-grid .ix-service-card:nth-child(6) .icon-row {
  background: linear-gradient(145deg, rgba(99, 179, 255, 0.34), rgba(19, 109, 210, 0.2));
}

.ix-service-card h4 {
  margin: 0.3rem 0 0;
  font-family: 'Space Grotesk', sans-serif;
  color: #f2f8ff;
  font-size: 1.12rem;
}

.ix-service-card p {
  margin: 0.5rem 0 0;
  color: #c5d9ed;
  min-height: 48px;
}

.ix-service-card .card-link {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(136, 192, 255, 0.38);
  color: #eaf4ff;
}

.ix-differentiator {
  padding: 4.2rem 0;
  background: linear-gradient(140deg, #060f20, #111f35);
  color: #eaf4ff;
  position: relative;
  overflow: hidden;
}

.ix-differentiator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(87, 140, 198, 0.08) 0, rgba(87, 140, 198, 0.08) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}

.ix-diff-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.2rem;
}

.ix-diff-grid h2 {
  margin: 0;
  color: #8bd7ff;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
}

.ix-diff-grid p {
  color: #c7daf0;
  max-width: 560px;
}

.ix-ai-badge {
  margin-top: 1rem;
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 193, 255, 0.5);
  color: #95dbff;
}

.ix-model-wrap {
  border: 1px solid rgba(140, 187, 238, 0.34);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  min-height: 280px;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.ix-model {
  width: min(100%, 360px);
  height: 240px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s linear;
}

.ix-model svg {
  width: 100%;
  height: 100%;
}

.ix-model svg path {
  stroke: #78c4ff;
  stroke-width: 2;
  fill: none;
  opacity: 0.7;
}

.ix-node {
  position: absolute;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(122, 188, 255, 0.7);
  color: #dff2ff;
  background: rgba(17, 91, 162, 0.45);
  font-size: 0.8rem;
}

.ix-n1 { left: 12%; top: 20%; }
.ix-n2 { left: 43%; top: 45%; }
.ix-n3 { right: 12%; top: 20%; }

.ix-portal {
  position: relative;
  background: radial-gradient(circle at center, #142545, #040912 65%);
  padding: 5rem 0 4.8rem;
  overflow: hidden;
}

.ix-portal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #f3f8ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ix-portal-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  background: linear-gradient(90deg, #80d0ff, #56b2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ix-portal-content p {
  margin: 0.7rem auto 0;
  max-width: 720px;
  color: #d6e5f9;
  font-size: 1.06rem;
}

.ix-btn-portal {
  margin-top: 1.1rem;
  position: relative;
  overflow: hidden;
}

.ix-btn-portal::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.45s ease, opacity 0.45s ease;
  opacity: 0;
}

.ix-btn-portal:hover::after {
  transform: translate(-50%, -50%) scale(7);
  opacity: 0;
}

.ix-specs {
  background: linear-gradient(90deg, #081223, #111f35, #081223);
  border-top: 1px solid rgba(137, 171, 212, 0.28);
  border-bottom: 1px solid rgba(137, 171, 212, 0.28);
  overflow: hidden;
}

.ix-specs-track {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  color: #d7e8ff;
  padding: 0 1rem;
  animation: specsMove 23s linear infinite;
  font-weight: 600;
  font-size: 0.92rem;
}

.ix-specs-track:hover {
  animation-play-state: paused;
}

@keyframes specsMove {
  from { transform: translateX(0); }
  to { transform: translateX(-45%); }
}

/* Home-specific reveal clarity */
.ix-animate {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(1.5px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.ix-animate.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Services page blueprint layout */
.services-page-hero {
  background: linear-gradient(140deg, #072550, #0b3a76);
  color: #ffffff;
  text-align: center;
  padding: 5.4rem 0 3.8rem;
}

.services-page-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}

.services-page-sub {
  margin: 0.9rem auto 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
}

.services-page-intro {
  background: #ffffff;
}

.services-page-intro .container,
.services-page-footer-cta .container {
  text-align: center;
}

.services-page-intro .lead,
.services-page-footer-cta .lead {
  margin: 0.5rem auto 0;
  max-width: 900px;
}

.services-page-grid {
  background: #f7fbff;
}

.services-offering-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-page-method {
  background: #edf4ff;
}

.services-page-method .container {
  text-align: center;
}

.services-method-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-page-method .panel {
  text-align: left;
}

.services-page-method .actions,
.services-page-footer-cta .actions {
  justify-content: center;
}

.services-page-footer-cta {
  background: #ffffff;
}

.services-page-hero .container,
.services-page-intro .container,
.services-page-grid .container,
.services-page-method .container,
.services-page-footer-cta .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Immersive services page */
.sq-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 30% 20%, #153a71, #0b1d39 58%, #071327);
  overflow: hidden;
}

#sq-hero-canvas, #sq-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sq-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.25), rgba(5, 10, 22, 0.82));
}

.sq-hero-content {
  position: relative;
  z-index: 2;
  color: #ebf5ff;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.sq-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #95cdff;
}

.sq-hero-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.06;
  background: linear-gradient(90deg, #79d3ff, #57b3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sq-sub {
  margin: 1rem auto 0;
  max-width: 760px;
  color: #d6e7fb;
  line-height: 1.7;
}

.sq-scanline {
  width: min(680px, 96%);
  height: 2px;
  margin: 1.1rem auto 0;
  background: linear-gradient(90deg, transparent, #6cc2ff, transparent);
  animation: sqSweep 2.2s linear infinite;
}

@keyframes sqSweep {
  from { transform: translateX(-18%); opacity: 0.5; }
  to { transform: translateX(18%); opacity: 1; }
}

.sq-scroll {
  display: inline-block;
  margin-top: 1rem;
  color: #b8dcff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.sq-overview {
  background: linear-gradient(170deg, #0a1a33, #102648);
  color: #e7f3ff;
  position: relative;
}

.sq-overview .container,
.sq-services .container,
.sq-matrix .container,
.sq-method .container,
.sq-ecosystem .container,
.sq-cases .container,
.sq-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.sq-overview .section-title,
.sq-services .section-title,
.sq-matrix .section-title,
.sq-method .section-title,
.sq-ecosystem .section-title,
.sq-cases .section-title {
  color: #f1f8ff;
  text-align: center;
}

.sq-overview .lead,
.sq-services .lead,
.sq-matrix .lead,
.sq-ecosystem .lead,
.sq-cases .lead {
  color: #c8def6;
  margin: 0.45rem auto 0;
  max-width: 980px;
  text-align: center;
}

.sq-metrics {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sq-metric {
  border: 1px solid rgba(135, 183, 233, 0.34);
  border-radius: 14px;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.sq-metric strong {
  display: block;
  color: #8cd1ff;
  font-size: 1.5rem;
  font-family: 'Space Grotesk', sans-serif;
}

.sq-metric span {
  color: #d7e8fb;
  font-size: 0.85rem;
}

.sq-services {
  background: linear-gradient(180deg, #0d223f, #132d53);
}

.sq-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sq-card {
  border: 1px solid rgba(140, 189, 240, 0.3);
  border-radius: 16px;
  padding: 1.15rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.sq-card-image {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(145, 197, 248, 0.36);
  background: rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin-bottom: 0.75rem;
}

.sq-card h3 {
  margin: 0;
  color: #f2f8ff;
}

.sq-card p {
  color: #c7dcf1;
}

.sq-tags {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sq-tags span {
  border: 1px solid rgba(131, 189, 248, 0.44);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  color: #bfe2ff;
  font-size: 0.74rem;
}

.sq-matrix {
  background: linear-gradient(160deg, #071427, #0d2140);
}

.sq-matrix-wrap {
  margin-top: 1rem;
  border: 1px solid rgba(139, 186, 234, 0.3);
  border-radius: 16px;
  min-height: 340px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
}

#sq-matrix-canvas {
  width: 100%;
  min-height: 340px;
}

.sq-matrix-tip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(6, 18, 36, 0.92);
  color: #ffffff;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
}

.sq-method {
  background: linear-gradient(180deg, #0f2748, #122f58);
}

.sq-method-grid {
  margin-top: 1.1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.sq-method .panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sq-method .panel .sq-tags {
  margin-top: auto;
}


.sq-method .panel {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(141, 189, 240, 0.33);
}

.sq-method .panel h3 {
  color: #eff7ff;
}

.sq-method .panel p {
  color: #c8def2;
}

.sq-ecosystem {
  background: linear-gradient(160deg, #08162d, #102542);
}

.sq-eco-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

.sq-eco-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(131, 187, 246, 0.36);
  border-radius: 16px;
  padding: 1.15rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07));
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(4, 18, 36, 0.2);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.sq-eco-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 203, 255, 0.65);
  box-shadow: 0 18px 36px rgba(9, 36, 69, 0.28);
}

.sq-eco-card h3 {
  margin: 0;
  color: #eff8ff;
}

.sq-eco-card p {
  margin: 0.55rem 0 0;
  color: #c8ddf3;
  line-height: 1.6;
}

.sq-eco-level {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  border: 1px solid rgba(136, 194, 255, 0.55);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  color: #bfe3ff;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sq-eco-badges {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.sq-eco-badges span {
  border: 1px solid rgba(133, 190, 249, 0.42);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  color: #d8ebff;
  background: rgba(255, 255, 255, 0.08);
}

.sq-cases {
  background: linear-gradient(180deg, #0a1f3b, #14345f);
}

.sq-case-controls {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.45rem;
  justify-content: center;
}

.sq-case-controls button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(139, 185, 233, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #dceeff;
}

.sq-case-strip {
  margin-top: 0.9rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.4rem;
}

.sq-case {
  scroll-snap-align: start;
  border: 1px solid rgba(139, 185, 233, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.15rem;
}

.sq-case h3 {
  margin: 0;
  color: #f1f9ff;
}

.sq-case p {
  color: #c8ddf3;
}

.sq-portal {
  position: relative;
  background: radial-gradient(circle at center, #10264a, #060f1e 65%);
  overflow: hidden;
  padding: 4.6rem 0;
}

.sq-portal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ebf6ff;
}

.sq-portal-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  background: linear-gradient(90deg, #7cd0ff, #4eaeff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sq-portal-content p {
  margin: 0.8rem auto 0;
  max-width: 760px;
  color: #d7e8fb;
}

.sq-portal .actions {
  justify-content: center;
}

.sq-specs {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.sq-specs-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  animation: sqTicker 24s linear infinite;
}

.sq-specs-track:hover {
  animation-play-state: paused;
}

@keyframes sqTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}


/* Platform Expertise immersive page */
.px-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 25% 20%, #15386f, #0a1d3c 58%, #061327);
  overflow: hidden;
}

#px-hero-canvas,
#px-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.px-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 11, 24, 0.2), rgba(4, 9, 20, 0.84));
}

.px-hero-content {
  position: relative;
  z-index: 2;
  color: #ecf6ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 1160px;
  margin-inline: auto;
}

.px-hero-shell {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 1.2rem;
  align-items: center;
}

.px-hero-main {
  max-width: 720px;
}

.px-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #97ceff;
}

.px-hero-content h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  line-height: 1.05;
  background: linear-gradient(90deg, #83d3ff, #4aa3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.px-hero-actions {
  margin-top: 0.9rem;
  justify-content: flex-start;
}


.px-proof-line {
  margin: 0.85rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}


.px-proof-line span {
  border: 1px solid rgba(140, 196, 255, 0.45);
  border-radius: 999px;
  padding: 0.24rem 0.55rem;
  font-size: 0.75rem;
  color: #d8ebff;
  background: rgba(255, 255, 255, 0.1);
}
.px-orbit {
  --orbit-radius: clamp(90px, 18vw, 138px);
  margin: 1.3rem auto 0;
  width: min(540px, 90vw);
  aspect-ratio: 1;
  position: relative;
  animation: pxSpin 20s linear infinite;
}

.px-orbit span {
  box-shadow: 0 10px 22px rgba(7, 28, 55, 0.35);
  backdrop-filter: blur(8px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  text-align: center;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(130, 191, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: #e3f4ff;
  font-size: 0.78rem;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--a)));
}

.px-orbit span:nth-child(1) { --a: 0deg; }
.px-orbit span:nth-child(2) { --a: 72deg; }
.px-orbit span:nth-child(3) { --a: 144deg; }
.px-orbit span:nth-child(4) { --a: 216deg; }
.px-orbit span:nth-child(5) { --a: 288deg; }
.px-core {
  animation: pxCoreCounter 20s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-radius: 999px;
  border: 1px solid rgba(143, 201, 255, 0.6);
  background: radial-gradient(circle at 30% 30%, #b8e4ff, #4ea9ff 62%, #246ec6);
  color: #05244a;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: 0 0 26px rgba(93, 176, 255, 0.55);
}

@keyframes pxSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pxCoreCounter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.px-hero-panel {
  border: 1px solid rgba(140, 195, 252, 0.35);
  border-radius: 18px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(5, 19, 40, 0.24);
}

.px-hero-panel h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #eff8ff;
}

.px-mini-grid {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.55rem;
}

.px-platform-mini {
  border: 1px solid rgba(137, 193, 250, 0.3);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
}

.px-platform-mini strong {
  display: block;
  color: #e9f6ff;
  font-size: 0.92rem;
}

.px-platform-mini span {
  display: block;
  margin-top: 0.18rem;
  color: #c1d9f2;
  font-size: 0.8rem;
}

.px-panel-note {
  margin: 0.75rem 0 0;
  color: #cfe3f8;
  font-size: 0.9rem;
  line-height: 1.55;
}

.px-panel-note strong {
  color: #8fd3ff;
  font-family: 'Space Grotesk', sans-serif;
}
.px-scroll {
  margin-top: 0.8rem;
  display: inline-block;
  color: #c4e2ff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.px-overview {
  background: linear-gradient(165deg, #07162d, #112b52);
}

.px-overview .container,
.px-platforms .container,
.px-integration .container,
.px-credentials .container,
.px-cases .container,
.px-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.px-overview .section-title,
.px-integration .section-title,
.px-credentials .section-title,
.px-cases .section-title {
  color: #f1f8ff;
  text-align: center;
}

.px-overview .lead,
.px-integration .lead,
.px-credentials .lead,
.px-cases .lead {
  color: #c7ddf5;
  text-align: center;
  margin: 0.45rem auto 0;
  max-width: 980px;
}

.px-map-wrap {
  margin-top: 1.2rem;
  min-height: 360px;
  border: 1px solid rgba(129, 184, 239, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
}

#px-network-canvas {
  width: 100%;
  min-height: 360px;
}

.px-map-tip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(6, 20, 40, 0.95);
  color: #ffffff;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
}

.px-cert-bar,
.px-metrics {
  overflow: hidden;
  background: linear-gradient(90deg, #091427, #102543, #091427);
  border-top: 1px solid rgba(128, 176, 228, 0.3);
  border-bottom: 1px solid rgba(128, 176, 228, 0.3);
}

.px-cert-track,
.px-metrics-track {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 1.9rem;
  white-space: nowrap;
  color: #d7e9ff;
  animation: pxTicker 23s linear infinite;
  padding: 0 1rem;
  font-weight: 600;
}


.px-cert-track span,
.px-metrics-track span {
  border-right: 1px solid rgba(141, 190, 242, 0.35);
  padding-right: 1.2rem;
}
@keyframes pxTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-44%); }
}

.px-platforms {
  background: linear-gradient(180deg, #081b36, #13345f);
}

.px-platform-card {
  position: relative;
  overflow: hidden;
  margin-top: 1.1rem;
  border: 1px solid rgba(138, 191, 246, 0.32);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  padding: 1.15rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.15fr 0.85fr;
  color: #e8f4ff;
}


.px-platform-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #85d4ff, #3b96f0);
  opacity: 0.9;
}
.px-copy h2 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  margin: 0;
  color: #f2f9ff;
}

.px-copy p {
  color: #c6ddf6;
}

.px-progress {
  margin-top: 0.65rem;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.px-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #56b2ff, #0a72df);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.px-tags {
  margin: 0.7rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.px-tags span {
  border: 1px solid rgba(131, 189, 248, 0.44);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  color: #bfe2ff;
  font-size: 0.74rem;
}

.px-cap-list {
  margin: 0.8rem 0 0;
  padding-left: 1rem;
  color: #cbe2f8;
}

.px-cap-list li {
  margin-bottom: 0.35rem;
}

.px-visual {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(137, 189, 245, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.9rem;
  align-self: stretch;
}

.px-visual h3 {
  margin: 0;
  color: #eef7ff;
}

.px-visual p {
  margin: 0.6rem 0 0;
  color: #c6ddf6;
}

.px-visual strong {
  letter-spacing: 0.01em;
  color: #8ed2ff;
  font-size: 1.2rem;
  font-family: 'Space Grotesk', sans-serif;
}

.px-sailpoint { border-color: rgba(112, 175, 240, 0.45); }
.px-saviynt { border-color: rgba(115, 186, 255, 0.45); }
.px-cyberark { border-color: rgba(109, 171, 236, 0.45); }
.px-beyondtrust { border-color: rgba(114, 190, 255, 0.45); }
.px-ping { border-color: rgba(122, 198, 255, 0.45); }

.px-integration {
  background: linear-gradient(160deg, #07162d, #102746);
}

.px-integration-grid {
  margin-top: 1.1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.px-credentials {
  background: linear-gradient(180deg, #091a34, #12325a);
}

.px-badge-wall {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.px-badge-wall span {
  border: 1px solid rgba(136, 192, 255, 0.42);
  border-radius: 12px;
  padding: 0.6rem;
  text-align: center;
  color: #e4f3ff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
}

.px-verify {
  margin-top: 0.8rem;
  text-align: center;
  color: #c9dff6;
}

.px-cases {
  background: linear-gradient(180deg, #0b203d, #153763);
}

.px-case-grid {
  margin-top: 1.1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.px-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #10284e, #061122 66%);
  padding: 4.8rem 0;
}

.px-portal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #edf7ff;
}

.px-portal-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  background: linear-gradient(90deg, #82d5ff, #4eaefc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.px-portal-content p {
  margin: 0.8rem auto 0;
  max-width: 760px;
  color: #d6e8fb;
}

.px-portal .actions {
  justify-content: center;
}

/* About page immersive experience */
.ab-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 25% 20%, #153766, #0a1f3f 58%, #061427);
  overflow: hidden;
}

#ab-hero-canvas,
#ab-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ab-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 12, 24, 0.24), rgba(4, 9, 20, 0.85));
}

.ab-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #edf7ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ab-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ed3ff;
}

.ab-hero-content h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  line-height: 1.05;
  background: linear-gradient(90deg, #dbb86a, #68bfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ab-sub {
  margin: 1rem auto 0;
  max-width: 820px;
  color: #d7e8fb;
  line-height: 1.7;
}

.ab-year-track {
  margin: 1rem auto 0;
  width: min(620px, 95%);
  text-align: left;
}

.ab-year-track p {
  margin: 0 0 0.35rem;
  color: #e6f3ff;
  font-weight: 700;
}

.ab-year-track [data-ab-year] {
  color: #f3cf8a;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
}

.ab-year-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.ab-year-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #dbb86a, #4ca8ff);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ab-scroll {
  margin-top: 1rem;
  display: inline-block;
  color: #c8e4ff;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.ab-story,
.ab-leadership,
.ab-values,
.ab-metrics,
.ab-global,
.ab-alliance,
.ab-culture,
.ab-community {
  color: #e7f3ff;
}

.ab-story { background: linear-gradient(170deg, #081930, #102748); }

#ab-story {
  position: relative;
  overflow: hidden;
}

#ab-story-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.42;
  pointer-events: none;
}

#ab-story .container {
  position: relative;
  z-index: 2;
}

.ab-milestone-board {
  margin-top: 1rem;
  border: 1px solid rgba(141, 187, 233, 0.35);
  border-radius: 18px;
  padding: 1rem 1rem 0.9rem;
  background:
    radial-gradient(circle at 50% 25%, rgba(190, 217, 244, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 249, 255, 0.94));
  color: #234a7a;
}

#ab-story .ab-story-head .lead {
  color: #ffffff;
}

.ab-milestone-years {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #2b6299;
  font-size: 0.98rem;
}

.ab-milestone-bar {
  height: 12px;
  border-radius: 999px;
  margin: 0.5rem 0 1rem;
  background: linear-gradient(90deg, #23c8e8 0%, #1a93e6 38%, #4a73da 66%, #b14ed2 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 12px rgba(36, 101, 166, 0.18);
}

.ab-milestone-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.ab-milestone-item {
  text-align: center;
  padding: 0.25rem 0.25rem 0.35rem;
}

.ab-milestone-year {
  display: none;
  margin: 0 0 0.35rem;
  color: #2b6299;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ab-milestone-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin: 0 auto 0.45rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(44, 111, 180, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.ab-milestone-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #2c69a8;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-milestone-item h3 {
  margin: 0;
  color: #1f4f84;
  font-size: 0.82rem;
}

.ab-milestone-item p {
  margin: 0.3rem 0 0;
  color: #4f739a;
  font-size: 0.73rem;
  line-height: 1.35;
}
.ab-leadership { background: linear-gradient(180deg, #0a1f3b, #143258); }
.ab-values { background: linear-gradient(170deg, #0a1f3a, #11335b); }
.ab-metrics { background: linear-gradient(180deg, #081a31, #12335a); }
.ab-global { background: linear-gradient(160deg, #08162d, #102846); }
.ab-alliance { background: linear-gradient(180deg, #081a32, #102a4d); }
.ab-culture { background: linear-gradient(160deg, #0a1f3a, #133862); }
.ab-community { background: linear-gradient(180deg, #eef4ff, #ffffff); color: var(--ink-100); }

.ab-story .container,
.ab-leadership .container,
.ab-values .container,
.ab-metrics .container,
.ab-global .container,
.ab-alliance .container,
.ab-culture .container,
.ab-community .container,
.ab-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ab-story .section-title,
.ab-leadership .section-title,
.ab-values .section-title,
.ab-metrics .section-title,
.ab-global .section-title,
.ab-alliance .section-title,
.ab-culture .section-title,
.ab-community .section-title {
  text-align: center;
}

.ab-story .lead,
.ab-leadership .lead,
.ab-values .lead,
.ab-metrics .lead,
.ab-global .lead,
.ab-alliance .lead,
.ab-culture .lead,
.ab-community .lead {
  margin: 0.45rem auto 0;
  max-width: 920px;
  text-align: center;
}

.ab-story-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.ab-story-controls {
  display: flex;
  gap: 0.45rem;
}

.ab-story-controls button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(132, 191, 251, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: #dff0ff;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ab-story-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(159, 210, 255, 0.8);
}

.ab-timeline-wrap {
  margin-top: 1rem;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.ab-timeline-wrap::before,
.ab-timeline-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 3;
  pointer-events: none;
}

.ab-timeline-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8, 25, 48, 0.9), transparent);
}

.ab-timeline-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(8, 25, 48, 0.9), transparent);
}

.ab-timeline-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  height: 2px;
  border-radius: 999px;
  background: rgba(130, 186, 244, 0.2);
  z-index: 1;
}

.ab-timeline-rail span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dbb86a, #5eb6ff);
  transition: width 0.25s ease;
}

.ab-timeline {
  margin-top: 1.1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 188, 248, 0.75) rgba(255, 255, 255, 0.12);
}

.ab-timeline::-webkit-scrollbar {
  height: 8px;
}

.ab-timeline::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.ab-timeline::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #5db7ff, #8fd0ff);
  border-radius: 999px;
  border: 1px solid rgba(8, 25, 48, 0.5);
}

.ab-timeline::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #4faeff, #7bc8ff);
}

.ab-node {
  scroll-snap-align: start;
  border: 1px solid rgba(132, 188, 246, 0.35);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  padding: 1rem;
  position: relative;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.ab-node.active,
.ab-node:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 210, 250, 0.85);
  box-shadow: 0 20px 36px rgba(6, 22, 44, 0.3);
}

.ab-node::after {
  content: '';
  position: absolute;
  top: 22px;
  right: -1rem;
  width: 1rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(111, 177, 244, 0.7), transparent);
}

.ab-node:last-child::after { display: none; }

.ab-node-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(145, 200, 255, 0.55);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
}

.ab-node-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #8fd0ff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-year {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: #d0e9ff;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid rgba(145, 200, 255, 0.46);
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  font-family: 'Space Grotesk', sans-serif;
}

.ab-node h3 { margin: 0; }
.ab-node p { margin: 0.5rem 0 0; color: #c5dcf3; }

.ab-node-tags {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ab-node-tags span {
  border: 1px solid rgba(130, 191, 251, 0.46);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  color: #d6ebff;
}

.ab-leaders-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-leadership-stats {
  margin-top: 0.85rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ab-leadership-stats span {
  border: 1px solid rgba(133, 194, 255, 0.45);
  border-radius: 999px;
  padding: 0.25rem 0.58rem;
  color: #d5ebff;
  font-size: 0.79rem;
}

.ab-leadership-stats strong {
  color: #90d3ff;
  font-family: 'Space Grotesk', sans-serif;
}

.ab-leader-card {
  border: 1px solid rgba(132, 188, 246, 0.35);
  border-radius: 18px;
  padding: 0.75rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07));
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  position: relative;
  overflow: hidden;
}

.ab-leader-card:hover {
  transform: translateY(-6px);
  border-color: rgba(160, 212, 255, 0.8);
  box-shadow: 0 20px 36px rgba(5, 20, 42, 0.28);
}

.ab-leader-card img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 16 / 12;
  object-fit: cover;
  border: 1px solid rgba(136, 194, 255, 0.35);
  display: block;
}

.ab-leader-card h3 { margin: 0.7rem 0 0; color: #f0f8ff; }
.ab-leader-card p { color: #c5dbf1; }
.ab-role { margin: 0.25rem 0 0; font-weight: 700; color: #9fd4ff; }

.ab-cred {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ab-cred span {
  border: 1px solid rgba(133, 194, 255, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  font-size: 0.73rem;
  color: #d5ecff;
}

.ab-view-profile {
  margin-top: 0.8rem;
  width: 100%;
  border: 1px solid rgba(133, 194, 255, 0.45);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #eaf5ff;
  padding: 0.46rem 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ab-view-profile:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(163, 216, 255, 0.8);
}

.ab-profile-modal[hidden] { display: none; }

.ab-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(4, 14, 28, 0.78);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.ab-profile-dialog {
  width: min(620px, 100%);
  border: 1px solid rgba(135, 191, 250, 0.4);
  border-radius: 16px;
  background: linear-gradient(150deg, #0d2342, #12315c);
  padding: 1rem;
  color: #eaf5ff;
  position: relative;
}

.ab-profile-dialog img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(137, 196, 255, 0.36);
}

.ab-profile-dialog h3 {
  margin: 0.8rem 0 0;
  color: #f4f9ff;
}

.ab-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(136, 194, 255, 0.45);
  background: rgba(255, 255, 255, 0.09);
  color: #eaf6ff;
  cursor: pointer;
}

.ab-values-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-value-card {
  border: 1px solid rgba(132, 188, 246, 0.32);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
}

.ab-value-card h3 { margin: 0; color: #f0f8ff; }
.ab-value-card p { margin: 0.5rem 0 0; color: #c7dcf2; }

.ab-metrics-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ab-metric {
  border: 1px solid rgba(135, 189, 247, 0.36);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.9rem;
  text-align: center;
}

.ab-metric h3 {
  margin: 0;
  color: #8ed2ff;
  font-size: 1.7rem;
  font-family: 'Space Grotesk', sans-serif;
}

.ab-metric p { margin: 0.45rem 0 0; color: #d1e5f8; }

.ab-secondary-stats {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ab-secondary-stats span {
  border: 1px solid rgba(132, 189, 248, 0.42);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  color: #d6ebff;
  font-size: 0.78rem;
}

.ab-global-grid {
  margin-top: 1.1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.05fr 0.95fr;
}

.ab-globe-wrap {
  border: 1px solid rgba(134, 189, 246, 0.35);
  border-radius: 16px;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.07);
}

#ab-globe-canvas {
  width: 100%;
  min-height: 320px;
}

.ab-office-list {
  display: grid;
  gap: 0.75rem;
}

.ab-office-list article {
  border: 1px solid rgba(134, 189, 246, 0.35);
  border-radius: 14px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
}

.ab-office-list h3 { margin: 0; color: #eff8ff; }
.ab-office-list p { margin: 0.25rem 0 0; color: #c4daef; }

.ab-alliance-grid {
  margin-top: 1.2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-alliance-card {
  border: 1px solid rgba(132, 190, 248, 0.36);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07));
  box-shadow: 0 16px 30px rgba(6, 22, 44, 0.2);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ab-alliance-card:hover {
  transform: translateY(-4px);
  border-color: rgba(160, 212, 255, 0.75);
  box-shadow: 0 22px 36px rgba(6, 22, 44, 0.28);
}

.ab-alliance-card h3 {
  margin: 0;
  color: #f2f8ff;
}

.ab-alliance-card p {
  margin: 0.5rem 0 0;
  color: #c8dcf1;
}

.ab-tier {
  margin-top: 0.75rem;
  display: inline-flex;
  border: 1px solid rgba(133, 194, 255, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: #d9ecff;
}

.ab-tier.tier-a {
  border-color: rgba(236, 192, 106, 0.7);
  color: #f5d9a0;
  background: rgba(236, 192, 106, 0.12);
}

.ab-tier.tier-b {
  border-color: rgba(148, 206, 255, 0.7);
  color: #d9eeff;
}

.ab-tier.tier-c {
  border-color: rgba(137, 191, 252, 0.48);
  color: #cbe6ff;
}

.ab-alliance-map {
  margin-top: 1rem;
  border: 1px solid rgba(132, 190, 248, 0.3);
  border-radius: 16px;
  padding: 0.95rem;
  background: rgba(255, 255, 255, 0.08);
}

.ab-alliance-map h3 {
  margin: 0;
  color: #edf7ff;
}

.ab-alliance-map p {
  margin: 0.45rem 0 0;
  color: #c9ddf2;
}

.ab-culture-grid,
.ab-community-grid {
  margin-top: 1.15rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ab-openings {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.ab-openings span {
  border: 1px solid rgba(133, 190, 248, 0.45);
  border-radius: 999px;
  padding: 0.28rem 0.58rem;
  color: #d4e9ff;
  font-size: 0.78rem;
}

.ab-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #11294f, #061122 66%);
  padding: 4.8rem 0;
}

.ab-portal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef7ff;
}

.ab-portal-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.3rem);
  background: linear-gradient(90deg, #d8b86e, #5db8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ab-portal-content p {
  margin: 0.7rem auto 0;
  max-width: 780px;
  color: #d4e7fb;
}

.ab-portal .actions {
  justify-content: center;
}

.ab-principles-marquee {
  margin-top: 0.95rem;
  white-space: nowrap;
  color: #d4e9ff;
  opacity: 0.9;
  animation: abMarquee 16s linear infinite;
}

@keyframes abMarquee {
  from { transform: translateX(5%); }
  to { transform: translateX(-5%); }
}

.ab-legacy {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.ab-legacy-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: abTicker 24s linear infinite;
}

.ab-legacy-track:hover { animation-play-state: paused; }

@keyframes abTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

/* Contact page quantum experience */
.cq-hero {
  min-height: 80vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 30% 18%, #2d1e5e, #121c46 58%, #08122a);
  overflow: hidden;
}

#cq-hero-canvas,
#cq-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cq-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 34, 0.2), rgba(8, 14, 30, 0.82));
}

.cq-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef6ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.cq-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #99d2ff;
}

.cq-hero-content h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  background: linear-gradient(90deg, #7fd5ff, #8d9dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cq-sub {
  margin: 0.95rem auto 0;
  max-width: 820px;
  color: #d8e9fd;
}

.cq-security-badges {
  margin: 0.85rem auto 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cq-security-badges span {
  border: 1px solid rgba(140, 200, 255, 0.44);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: #d8edff;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.1);
}

.cq-scroll {
  margin-top: 0.9rem;
  display: inline-block;
  color: #cde6ff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.cq-hub {
  background: linear-gradient(170deg, #081930, #102848);
}

.cq-hub .container,
.cq-globe .container,
.cq-faq .container,
.cq-sla .container,
.cq-alt .container,
.cq-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.cq-hub-grid {
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: 1rem;
}

.cq-left,
.cq-right {
  display: grid;
  gap: 1rem;
}

.cq-panel,
.cq-form-card {
  border: 1px solid rgba(134, 188, 245, 0.35);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  padding: 1rem;
  color: #e7f3ff;
}

.cq-panel h3,
.cq-form-head h2 {
  margin: 0;
  color: #f2f9ff;
}

.cq-form-head p {
  margin: 0.45rem 0 0;
  color: #c8dcf1;
}

.cq-contact-card {
  margin-top: 0.75rem;
  border: 1px solid rgba(133, 191, 251, 0.35);
  border-radius: 12px;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
}

.cq-contact-card.cq-emergency {
  border-color: rgba(255, 159, 166, 0.5);
  background: rgba(255, 103, 113, 0.08);
}

.cq-label { margin: 0; font-size: 0.8rem; color: #abd5fb; }
.cq-value { margin: 0.24rem 0 0; font-weight: 700; color: #eff8ff; }
.cq-contact-card small { display: block; margin-top: 0.35rem; color: #c3d9ef; }

.cq-copy {
  margin-top: 0.45rem;
  border: 1px solid rgba(133, 194, 255, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #e9f4ff;
  padding: 0.3rem 0.55rem;
  font-weight: 700;
  cursor: pointer;
}

.cq-node-grid {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.6rem;
}

.cq-node-card {
  border: 1px solid rgba(132, 190, 248, 0.32);
  border-radius: 12px;
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.07);
}

.cq-node-card h4 { margin: 0; color: #ecf7ff; }
.cq-node-card p { margin: 0.3rem 0 0; color: #c6dbf0; }
.cq-live { font-weight: 700; }

.cq-online {
  display: inline-flex;
  align-items: center;
  color: #99efb8;
}

.cq-online::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #62dd93;
  margin-right: 0.35rem;
  box-shadow: 0 0 10px rgba(98, 221, 147, 0.7);
}

.cq-active-region {
  margin-top: 0.65rem;
  color: #d8ebff;
}

.cq-badge-wall {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cq-badge-wall span {
  border: 1px solid rgba(136, 193, 253, 0.43);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.74rem;
  color: #d7ebff;
}

.cq-commit {
  margin-top: 0.7rem;
  color: #d6eaff;
}

.cq-commit strong {
  color: #92d4ff;
  font-family: 'Space Grotesk', sans-serif;
}

.cq-form {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.72rem;
}

.cq-row {
  display: grid;
  gap: 0.6rem;
}

.cq-row.two {
  grid-template-columns: 1fr 1fr;
}

.cq-row label {
  margin: 0;
  color: #c8def4;
  font-size: 0.86rem;
}

.cq-form input,
.cq-form select,
.cq-form textarea {
  margin-top: 0.35rem;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(132, 189, 247, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #eff7ff;
  padding: 0.68rem;
  font: inherit;
}

.cq-form textarea {
  min-height: 120px;
  resize: vertical;
}

.cq-char {
  margin: 0;
  font-size: 0.77rem;
  color: #b9d3ec;
  text-align: right;
}

.cq-upload {
  border: 1px dashed rgba(133, 193, 254, 0.55);
  border-radius: 10px;
  padding: 0.6rem;
}

.cq-upload input[type='file'] {
  border: 0;
  background: transparent;
  padding: 0;
}

.cq-row.checks {
  color: #d0e4f8;
}

.cq-row.checks label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cq-verify {
  border: 1px solid rgba(133, 193, 254, 0.45);
  border-radius: 10px;
  padding: 0.55rem;
}

.cq-verify input[type='range'] {
  margin: 0;
}

.cq-submit {
  width: 100%;
}

.cq-legal {
  margin: 0;
  color: #bdd6ee;
  font-size: 0.76rem;
}

.cq-globe {
  background: linear-gradient(170deg, #07172e, #102746);
  color: #e7f4ff;
}

.cq-globe .section-title,
.cq-sla .section-title {
  text-align: center;
}

.cq-globe .lead,
.cq-sla .lead {
  margin: 0.45rem auto 0;
  max-width: 920px;
  text-align: center;
  color: #c8ddf1;
}

.cq-globe-wrap {
  margin-top: 1.1rem;
  border: 1px solid rgba(132, 191, 249, 0.35);
  border-radius: 16px;
  min-height: 360px;
  background: rgba(255, 255, 255, 0.06);
}

#cq-globe-canvas {
  width: 100%;
  min-height: 360px;
}

.cq-live-status {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.cq-live-status span {
  border: 1px solid rgba(132, 191, 249, 0.42);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: #d4e9ff;
  font-size: 0.76rem;
}

.cq-faq {
  background: linear-gradient(180deg, #f0f6ff, #ffffff);
}

.cq-faq .section-title {
  color: var(--ink-100);
  text-align: center;
}

.cq-faq .lead {
  margin: 0.45rem auto 0;
  max-width: 900px;
  text-align: center;
  color: var(--ink-300);
}

.cq-faq-search {
  margin-top: 0.9rem;
}

.cq-faq-search input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 0.7rem;
}

.cq-faq-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cq-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem;
}

.cq-faq-item button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--ink-100);
  cursor: pointer;
}

.cq-faq-item p {
  margin: 0.45rem 0 0;
  color: var(--ink-300);
  display: none;
}

.cq-faq-item.open p {
  display: block;
}

.cq-faq-cta {
  margin: 0.8rem 0 0;
  text-align: center;
  color: var(--ink-300);
}

.cq-sla {
  background: linear-gradient(170deg, #091a34, #12345e);
  color: #e8f4ff;
}

.cq-sla-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cq-sla-grid .card {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(133, 191, 250, 0.35);
}

.cq-sla-live {
  margin-top: 0.85rem;
  text-align: center;
  color: #d2e7fb;
}

.cq-alt {
  background: linear-gradient(180deg, #eef4ff, #ffffff);
}

.cq-alt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cq-press {
  margin-top: 0.8rem;
}

.cq-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #10284e, #061122 66%);
  padding: 4.8rem 0;
}

.cq-portal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #edf7ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.cq-portal-content h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.3rem);
  background: linear-gradient(90deg, #88d8ff, #9aa6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cq-portal-content p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d8e8fb;
}

.cq-portal .actions {
  justify-content: center;
}

.cq-channel-status {
  margin-top: 0.8rem;
  color: #c8e1fb;
}

.cq-status {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.cq-status-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: cqTicker 24s linear infinite;
}

.cq-status-track:hover {
  animation-play-state: paused;
}

@keyframes cqTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

.cq-toast[hidden] { display: none; }

.cq-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 260;
  border: 1px solid rgba(133, 193, 254, 0.45);
  border-radius: 10px;
  background: rgba(8, 24, 48, 0.92);
  color: #eaf5ff;
  padding: 0.5rem 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  .cq-hub-grid { grid-template-columns: 1fr; }
  .cq-faq-grid { grid-template-columns: 1fr; }
  .cq-sla-grid { grid-template-columns: 1fr; }
  .cq-alt-grid { grid-template-columns: 1fr; }
  .ab-leaders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-values-grid, .ab-metrics-grid, .ab-culture-grid, .ab-community-grid { grid-template-columns: 1fr; }
  .ab-global-grid { grid-template-columns: 1fr; }
  .ab-alliance-grid { grid-template-columns: 1fr; }
  .px-hero-shell { grid-template-columns: 1fr; }
  .px-hero-main { max-width: 100%; }
  .px-hero-actions { justify-content: flex-start; }
  .px-platform-card,
  .px-reverse { grid-template-columns: 1fr; }
  .px-integration-grid { grid-template-columns: 1fr; }
  .px-badge-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-case-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-block; }
  .nav-links {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
  }
  .nav-links.show { display: flex; }
  .nav-dropdown {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .nav-parent {
    flex: 1 1 auto;
  }
  .nav-sub-toggle {
    width: 28px;
    height: 28px;
    border-color: var(--line);
  }
  .nav-submenu {
    position: static;
    min-width: 0;
    width: 100%;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(0);
    transition: max-height 0.22s ease, opacity 0.22s ease;
    border-radius: 10px;
  }
  .nav-dropdown.open .nav-submenu {
    opacity: 1;
    max-height: 420px;
    pointer-events: auto;
  }
  .ix-hero-grid { grid-template-columns: 1fr; }
  .ix-hero-panel { margin-top: 0.8rem; }
  .ix-challenge-grid { grid-template-columns: 1fr; }
  .ix-services-grid { grid-template-columns: 1fr; }
  .ix-diff-grid { grid-template-columns: 1fr; }
  .ix-logo-cloud { grid-template-columns: 1fr; }
  .ix-trust-grid { grid-template-columns: 1fr; }
  .services-offering-grid { grid-template-columns: 1fr; }
  .ab-milestone-years,
  .ab-milestone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cq-row.two { grid-template-columns: 1fr; }
  .cq-security-badges { justify-content: flex-start; }
  .ab-leaders-grid { grid-template-columns: 1fr; }
  .ab-timeline-wrap::before,
  .ab-timeline-wrap::after { width: 18px; }
  .ab-story-head { flex-direction: column; align-items: flex-start; }
  .ab-story-controls { margin-top: 0.2rem; }
  .ab-year-track { width: 100%; }
  .ab-milestone-board { padding: 0.8rem 0.75rem; }
  .ab-milestone-years,
  .ab-milestone-bar { display: none; }
  .ab-milestone-years,
  .ab-milestone-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .ab-milestone-year { display: inline-block; }
  .ab-milestone-item {
    text-align: left;
    border: 1px solid rgba(130, 184, 236, 0.32);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    padding: 0.7rem;
  }
  .ab-milestone-icon { margin: 0 0 0.4rem; }
  .ab-milestone-item h3 { font-size: 0.84rem; }
  .ab-milestone-item p { font-size: 0.71rem; }
  .ab-principles-marquee { font-size: 0.84rem; }
  .px-hero-actions { width: 100%; justify-content: stretch; }
  .px-hero-actions .btn { width: 100%; }
  .px-proof-line { justify-content: flex-start; }
  .px-badge-wall { grid-template-columns: 1fr; }
  .px-hero-content { max-width: 100%; }
  .px-sub { max-width: 100%; }
  .hero { padding-top: 4.3rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}


/* PAM page professional experience */
.pb-hero .container,
.pb-risk .container,
.pb-framework .container,
.pb-vendors .container,
.pb-integrations .container,
.pb-managed .container,
.pb-use-cases .container,
.pb-cases .container,
.pb-certs .container,
.pb-faq .container,
.pb-cta .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.pb-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 25% 20%, #1b4d8b, #0c2a52 45%, #07152c 100%);
}

#pb-hero-canvas,
#pb-cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pb-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 19, 40, 0.25), rgba(6, 17, 34, 0.8));
}

.pb-hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.pb-hero-copy,
.pb-hero-panel {
  color: #edf7ff;
}

.pb-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(136, 196, 255, 0.5);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.76rem;
  color: #9fd5ff;
}

.pb-hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.04;
  color: #f5fbff;
}

.pb-sub {
  margin: 1rem 0 0;
  max-width: 720px;
  color: #d3e7fb;
  font-size: 1.04rem;
}

.pb-platform-row {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pb-platform-row span {
  border: 1px solid rgba(145, 204, 255, 0.45);
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  color: #d9edff;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.1);
}

.pb-scroll {
  margin-top: 0.9rem;
  color: #bddbfa;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: pbBlink 1.7s ease-in-out infinite;
}

@keyframes pbBlink {
  50% { opacity: 0.45; }
}

.pb-hero-panel {
  border: 1px solid rgba(133, 192, 250, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(9px);
  box-shadow: 0 18px 36px rgba(3, 16, 35, 0.35);
}

.pb-hero-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f2f9ff;
}

.pb-hero-metrics {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.65rem;
}

.pb-hero-metrics article {
  border: 1px solid rgba(132, 191, 249, 0.35);
  border-radius: 12px;
  padding: 0.66rem;
  background: rgba(255, 255, 255, 0.1);
}

.pb-hero-metrics strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  color: #8fd2ff;
  font-family: 'Space Grotesk', sans-serif;
}

.pb-hero-metrics span {
  color: #d7eafc;
  font-size: 0.8rem;
}

.pb-risk {
  background: linear-gradient(180deg, #0a1f3d, #112b50);
  color: #e7f4ff;
}

.pb-risk .section-title,
.pb-risk .lead {
  color: #eaf5ff;
}

.pb-risk-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.pb-risk-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 330px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

#pb-risk-canvas {
  width: 100%;
  min-height: 330px;
}

.pb-risk-dashboard,
.pb-vendor-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(99, 184, 255, 0.16), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(116, 216, 255, 0.14), transparent 43%),
    linear-gradient(165deg, rgba(8, 28, 53, 0.95), rgba(11, 38, 72, 0.94));
}

.pb-risk-dashboard h4,
.pb-vendor-graphic h4 {
  margin: 0;
  color: #f1f8ff;
  font-size: 1rem;
}

.pb-risk-note {
  margin: 0.34rem 0 0;
  color: #cfe3f6;
  font-size: 0.81rem;
}

.pb-risk-top {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.55rem;
}

.pb-risk-gauge {
  border: 1px solid rgba(150, 214, 255, 0.3);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.pb-risk-gauge span {
  color: #9fdcff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.pb-risk-gauge small {
  margin-top: 0.2rem;
  color: #d6e9fb;
  font-size: 0.69rem;
}

.pb-risk-kpi {
  border: 1px solid rgba(150, 214, 255, 0.3);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
}

.pb-risk-kpi strong {
  color: #f3f9ff;
  font-size: 0.82rem;
}

.pb-risk-kpi p {
  margin: 0.3rem 0 0;
  color: #d2e7f8;
  font-size: 0.75rem;
  line-height: 1.45;
}

.pb-risk-kpi p span {
  color: #9ed8ff;
  font-weight: 800;
}

.pb-risk-bars,
.pb-vendor-meters {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.48rem;
}

.pb-risk-bars article,
.pb-vendor-meters article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
}

.pb-risk-bars span,
.pb-vendor-meters span {
  color: #ecf7ff;
  font-size: 0.77rem;
}

.pb-risk-bars strong,
.pb-vendor-meters strong {
  color: #9fdcff;
  font-size: 0.77rem;
}

.pb-risk-bars div,
.pb-vendor-meters div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.pb-risk-bars i,
.pb-vendor-meters i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, #68c0ff, #84e0ff);
  animation: pbBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.pb-risk-bars article:nth-child(1) i { --i: 1; }
.pb-risk-bars article:nth-child(2) i { --i: 2; }
.pb-risk-bars article:nth-child(3) i { --i: 3; }
.pb-risk-bars article:nth-child(4) i { --i: 4; }
.pb-vendor-meters article:nth-child(1) i { --i: 1; }
.pb-vendor-meters article:nth-child(2) i { --i: 2; }
.pb-vendor-meters article:nth-child(3) i { --i: 3; }

@keyframes pbBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@media (prefers-reduced-motion: reduce) {
  .pb-risk-bars i,
  .pb-vendor-meters i {
    animation: none !important;
    width: var(--w);
  }
}

.pb-risk-copy {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.pb-risk-copy .card {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(133, 193, 253, 0.36);
}

.pb-risk-copy .card h3,
.pb-risk-copy .card p {
  color: #edf8ff;
}

.pb-framework {
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
}

.pb-step-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.pb-step {
  padding: 1rem;
}

.pb-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(74, 163, 255, 0.2), rgba(11, 99, 201, 0.08));
  display: inline-grid;
  place-items: center;
}

.pb-step-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-strong);
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-step h3 {
  margin: 0.72rem 0 0;
}

.pb-step p {
  margin: 0.45rem 0 0;
}

.pb-step small {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-500);
}

.pb-vendors {
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
}

.pb-vendor-card {
  margin-top: 1rem;
  border: 1px solid rgba(31, 89, 162, 0.2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(8, 37, 74, 0.1);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 0;
  overflow: hidden;
}

.pb-vendor-copy {
  padding: 1rem;
}

.pb-vendor-copy h3 {
  margin: 0;
  font-size: 1.35rem;
}

.pb-vendor-visual {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
}

.pb-cyberark {
  background: radial-gradient(circle at 20% 20%, rgba(116, 175, 255, 0.35), rgba(8, 46, 96, 0.95));
}

.pb-beyondtrust {
  background: radial-gradient(circle at 80% 20%, rgba(123, 200, 255, 0.35), rgba(7, 42, 88, 0.95));
}

.pb-visual-core {
  width: 170px;
  height: 170px;
  border-radius: 999px;
  border: 1px solid rgba(150, 214, 255, 0.55);
  display: grid;
  place-items: center;
  text-align: center;
  color: #e8f5ff;
  font-weight: 700;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 20px rgba(145, 205, 255, 0.08), 0 0 0 40px rgba(145, 205, 255, 0.05);
  animation: pbOrbit 4.2s ease-in-out infinite;
}

@keyframes pbOrbit {
  50% { transform: translateY(-6px) scale(1.02); }
}

.pb-vendor-reverse {
  grid-template-columns: 0.98fr 1.02fr;
}

.pb-vendor-reverse .pb-vendor-copy {
  order: 2;
}

.pb-vendor-reverse .pb-vendor-visual {
  order: 1;
}

.pb-badges {
  margin-top: 0.72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pb-badges span {
  border: 1px solid rgba(11, 99, 201, 0.28);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-300);
}

.pb-integrations,
.pb-use-cases,
.pb-certs,
.pb-faq {
  background: linear-gradient(180deg, #f6faff, #ffffff);
}

.pb-managed {
  background: linear-gradient(180deg, #0b2344, #102f58);
  color: #e9f5ff;
}

.pb-managed .section-title,
.pb-managed .lead {
  color: #ebf6ff;
}

.pb-managed-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 1rem;
}

.pb-managed-list {
  display: grid;
  gap: 0.75rem;
}

.pb-managed-list .panel {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(132, 190, 247, 0.36);
}

.pb-managed-list .panel h3,
.pb-managed-list .panel p {
  color: #edf7ff;
}

.pb-soc {
  border: 1px solid rgba(134, 191, 250, 0.35);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
}

.pb-soc h3 {
  margin: 0;
  color: #f2f9ff;
}

.pb-soc ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.pb-soc li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 1px solid rgba(133, 193, 254, 0.34);
  border-radius: 10px;
  padding: 0.56rem;
  background: rgba(255, 255, 255, 0.07);
}

.pb-soc li span {
  color: #d0e4f8;
  font-size: 0.84rem;
}

.pb-soc li strong {
  color: #9ed8ff;
  font-family: 'Space Grotesk', sans-serif;
}

.pb-cases .slider-wrap {
  margin-top: 1rem;
}

.pb-cert-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pb-faq-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr 1fr;
}

.pb-faq-grid details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.68rem 0.74rem;
}

.pb-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-100);
}

.pb-faq-grid p {
  margin: 0.55rem 0 0;
  color: var(--ink-300);
}

.pb-cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #11305e, #061326 66%);
}

.pb-cta-shell {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #edf7ff;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.pb-cta-shell h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  color: #f2f9ff;
}

.pb-cta-shell p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d2e7fb;
}

.pb-cta-shell .actions {
  justify-content: center;
}

.pb-metrics {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.pb-metrics-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: pbTicker 24s linear infinite;
}

.pb-metrics-track:hover {
  animation-play-state: paused;
}

@keyframes pbTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

@media (max-width: 980px) {
  .pb-hero-shell,
  .pb-risk-grid,
  .pb-managed-grid,
  .pb-vendor-card,
  .pb-vendor-reverse {
    grid-template-columns: 1fr;
  }

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

  .pb-cert-grid,
  .pb-faq-grid {
    grid-template-columns: 1fr;
  }

  .pb-vendor-reverse .pb-vendor-copy,
  .pb-vendor-reverse .pb-vendor-visual {
    order: initial;
  }

  .pb-risk-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .pb-step-grid {
    grid-template-columns: 1fr;
  }

  .pb-hero {
    min-height: auto;
    padding-top: 5.2rem;
  }

  .pb-hero-shell {
    gap: 0.8rem;
  }

  .pb-hero h1 {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }
}



/* Shared style system for Services child pages */
.cs-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 18%, #1b4f8f, #0b2a55 52%, #061326 100%);
}

#cs-hero-canvas,
#cs-cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 23, 46, 0.24), rgba(6, 18, 35, 0.82));
}

.cs-hero .container,
.cs-section .container,
.cs-cta .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.cs-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: center;
}

.cs-copy {
  color: #eef7ff;
}

.cs-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(132, 194, 255, 0.5);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  color: #9fd5ff;
}

.cs-copy h1 {
  margin: 0;
  color: #f5fbff;
  font-size: clamp(2.05rem, 4.9vw, 3.8rem);
  line-height: 1.05;
}

.cs-sub {
  margin: 1rem 0 0;
  color: #d5e9fb;
  max-width: 720px;
  font-size: 1.03rem;
}

.cs-panel {
  border: 1px solid rgba(132, 191, 249, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(9px);
  box-shadow: 0 18px 36px rgba(5, 18, 38, 0.34);
  color: #e9f6ff;
}

.cs-panel h2 {
  margin: 0;
  color: #f2f9ff;
  font-size: 1.05rem;
}

.cs-metrics {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.65rem;
}

.cs-metrics article {
  border: 1px solid rgba(133, 193, 254, 0.34);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
}

.cs-metrics strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  color: #93d3ff;
}

.cs-metrics span {
  color: #d2e7fa;
  font-size: 0.8rem;
}

.cs-section {
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
}

.cs-section:nth-of-type(odd) {
  background: linear-gradient(180deg, #eef5ff, #f9fcff);
}

.cs-light {
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
}

.cs-visual-block {
  margin-top: 1rem;
  border: 1px solid rgba(25, 90, 165, 0.22);
  border-radius: 16px;
  background: linear-gradient(160deg, #0a2345, #12345f);
  min-height: 280px;
  overflow: hidden;
}

#cs-map-canvas {
  width: 100%;
  min-height: 280px;
}

.cs-cta {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #102f5b, #061225 66%);
}

.cs-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef7ff;
}

.cs-cta-inner h2 {
  margin: 0;
  color: #f3f9ff;
  font-size: clamp(1.7rem, 4.1vw, 2.95rem);
}

.cs-cta-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d4e7fb;
}

.cs-cta-inner .actions {
  justify-content: center;
}

@media (max-width: 980px) {
  .cs-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cs-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .cs-copy h1 {
    font-size: clamp(1.95rem, 8vw, 2.7rem);
  }
}

/* Consulting advisory advanced page */
.ca-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 15%, #1a4b89, #0b2a55 48%, #07162d 100%);
}

#ca-hero-canvas,
#ca-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ca-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 44, 0.25), rgba(7, 17, 33, 0.83));
}

.ca-hero .container,
.ca-dark .container,
.ca-light .container,
.ca-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ca-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: center;
}

.ca-copy {
  color: #edf7ff;
}

.ca-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(237, 198, 118, 0.45);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  color: #f2cf8f;
}

.ca-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.95rem);
  line-height: 1.03;
  background: linear-gradient(90deg, #d9ecff, #efc97f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ca-sub {
  margin: 1rem 0 0;
  max-width: 720px;
  color: #d5e8fb;
  font-size: 1.04rem;
}

.ca-trust {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ca-trust span {
  border: 1px solid rgba(130, 194, 255, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.54rem;
  font-size: 0.77rem;
  color: #d8edff;
  background: rgba(255, 255, 255, 0.09);
}

.ca-scroll {
  margin-top: 0.95rem;
  color: #d4e8fd;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  animation: caBlink 1.8s ease-in-out infinite;
}

@keyframes caBlink {
  50% { opacity: 0.42; }
}

.ca-panel {
  border: 1px solid rgba(133, 190, 249, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(9px);
  color: #e9f6ff;
  box-shadow: 0 18px 34px rgba(4, 16, 34, 0.34);
}

.ca-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f3f9ff;
}

.ca-metrics {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.63rem;
}

.ca-metrics article {
  border: 1px solid rgba(132, 193, 255, 0.34);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
}

.ca-metrics strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.36rem;
  line-height: 1;
  color: #95d4ff;
}

.ca-metrics span {
  color: #d4e8fb;
  font-size: 0.8rem;
}

.ca-dark {
  background: linear-gradient(180deg, #091f3d, #102c52);
  color: #e7f4ff;
}

.ca-dark .section-title,
.ca-dark .lead,
.ca-dark h3,
.ca-dark h4,
.ca-dark p,
.ca-dark small {
  color: #eaf6ff;
}

.ca-light {
  background: linear-gradient(180deg, #f6faff, #ffffff);
}

.ca-split {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ca-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 320px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

#ca-failure-canvas,
#ca-merge-canvas {
  width: 100%;
  min-height: 320px;
}

.ca-risk-dashboard,
.ca-ma-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 16%, rgba(95, 176, 255, 0.16), transparent 42%),
    radial-gradient(circle at 86% 84%, rgba(242, 197, 111, 0.14), transparent 40%),
    linear-gradient(165deg, rgba(8, 26, 50, 0.94), rgba(12, 36, 69, 0.94));
}

.ca-risk-dashboard h4,
.ca-ma-graphic h4 {
  margin: 0;
  color: #f1f8ff;
  font-size: 1rem;
}

.ca-risk-note {
  margin: 0.35rem 0 0;
  color: #c7dcf2;
  font-size: 0.82rem;
}

.ca-risk-top {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0.5rem;
}

.ca-risk-gauge-card,
.ca-risk-kpi {
  border: 1px solid rgba(138, 201, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.58rem;
}

.ca-risk-gauge-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem;
}

.ca-risk-gauge-card strong,
.ca-risk-kpi strong {
  color: #f3faff;
  font-size: 0.84rem;
}

.ca-risk-gauge-card p,
.ca-risk-kpi p {
  margin: 0.28rem 0 0;
  color: #c9def2;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ca-risk-kpi p span {
  color: #9ad5ff;
  font-weight: 800;
}

.ca-risk-gauge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(7, 24, 48, 0.96) 62%, transparent 63%),
    conic-gradient(from -90deg, #5fb2ff 0deg, #f2c56f 154deg, rgba(255, 255, 255, 0.14) 154deg 360deg);
  box-shadow: 0 0 0 1px rgba(149, 208, 255, 0.25), 0 0 18px rgba(94, 178, 255, 0.22);
  animation: caGaugePulse 2.6s ease-in-out infinite;
}

.ca-risk-gauge span {
  color: #ecf8ff;
  font-size: 0.78rem;
  font-weight: 800;
}

.ca-risk-bars {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.48rem;
}

.ca-risk-bars article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 0.5rem;
  align-items: center;
}

.ca-risk-bars span {
  color: #e7f3ff;
  font-size: 0.8rem;
  font-weight: 600;
}

.ca-risk-bars strong {
  color: #9dd6ff;
  font-size: 0.78rem;
}

.ca-risk-bars div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.ca-risk-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5fb2ff, #f2c56f);
  width: 0;
  animation: caBarGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.ca-risk-bars article:nth-child(1) i { --i: 1; }
.ca-risk-bars article:nth-child(2) i { --i: 2; }
.ca-risk-bars article:nth-child(3) i { --i: 3; }
.ca-risk-bars article:nth-child(4) i { --i: 4; }
.ca-risk-bars article:nth-child(5) i { --i: 5; }

.ca-risk-summary {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ca-risk-summary article {
  border: 1px solid rgba(138, 199, 255, 0.3);
  border-radius: 10px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.06);
}

.ca-risk-summary strong {
  color: #f4fbff;
  font-size: 0.82rem;
}

.ca-risk-summary p {
  margin: 0.28rem 0 0;
  color: #cadff2;
  font-size: 0.75rem;
  line-height: 1.45;
}

.ca-ma-flow {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

.ca-ma-node,
.ca-ma-bridge {
  border: 1px solid rgba(140, 202, 255, 0.32);
  border-radius: 12px;
  padding: 0.65rem 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 0.32rem;
  align-content: center;
}

.ca-ma-node {
  position: relative;
}

.ca-ma-node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(145, 206, 255, 0.24);
  opacity: 0;
  animation: caNodePulse 2.4s ease-in-out infinite;
}

.ca-ma-bridge {
  position: relative;
  overflow: hidden;
}

.ca-ma-bridge::before {
  content: '';
  position: absolute;
  left: -25%;
  top: 50%;
  width: 26%;
  height: 2px;
  background: linear-gradient(90deg, rgba(95, 178, 255, 0), rgba(95, 178, 255, 0.95), rgba(242, 197, 111, 0));
  transform: translateY(-50%);
  animation: caFlowScan 2.2s linear infinite;
}

.ca-ma-node strong,
.ca-ma-bridge span:first-child {
  color: #f2f9ff;
  font-size: 0.86rem;
}

.ca-ma-node span,
.ca-ma-bridge span {
  color: #c8def3;
  font-size: 0.75rem;
}

.ca-ma-checks {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.36rem;
}

.ca-ma-checks span {
  border: 1px solid rgba(145, 206, 255, 0.26);
  border-radius: 999px;
  padding: 0.28rem 0.52rem;
  color: #e8f5ff;
  font-size: 0.76rem;
  background: rgba(92, 170, 245, 0.2);
}

@keyframes caBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@keyframes caNodePulse {
  0% { opacity: 0; transform: scale(0.98); }
  45% { opacity: 0.65; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes caFlowScan {
  from { left: -28%; }
  to { left: 104%; }
}

@keyframes caGaugePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ca-risk-gauge,
  .ca-ma-node::after,
  .ca-ma-bridge::before,
  .ca-risk-bars i {
    animation: none !important;
  }

  .ca-risk-bars i {
    width: var(--w);
  }
}

.ca-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.ca-stat-grid {
  display: grid;
  gap: 0.6rem;
}

.ca-framework {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ca-framework .card small {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-500);
}

.ca-advisor-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ca-advisor-grid .card img {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 0.75rem;
}

.ca-faq-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.ca-faq-grid details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem 0.78rem;
}

.ca-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-100);
}

.ca-faq-grid p {
  margin: 0.5rem 0 0;
  color: var(--ink-300);
}

.ca-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #102e59, #061224 65%);
}

.ca-portal-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef7ff;
}

.ca-portal-inner h2 {
  margin: 0;
  font-size: clamp(1.85rem, 4.5vw, 3.15rem);
  background: linear-gradient(90deg, #d7ecff, #f0cb82);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ca-portal-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d7eafb;
}

.ca-portal-inner .actions {
  justify-content: center;
}

.ca-promise {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: #cfe6fb;
}

.ca-metrics {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.ca-metrics-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: caTicker 24s linear infinite;
}

.ca-metrics-track:hover { animation-play-state: paused; }

@keyframes caTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

@media (max-width: 980px) {
  .ca-hero-grid,
  .ca-split {
    grid-template-columns: 1fr;
  }

  .ca-framework,
  .ca-advisor-grid,
  .ca-faq-grid {
    grid-template-columns: 1fr;
  }

  .ca-risk-top,
  .ca-risk-summary,
  .ca-ma-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ca-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .ca-copy h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
}

.ca-hero .btn-secondary,
.ca-dark .btn-secondary,
.ca-portal .btn-secondary {
  color: #e9f5ff;
  border-color: rgba(140, 201, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.ca-hero .btn-secondary:hover,
.ca-dark .btn-secondary:hover,
.ca-portal .btn-secondary:hover,
.ca-hero .btn-secondary:focus-visible,
.ca-dark .btn-secondary:focus-visible,
.ca-portal .btn-secondary:focus-visible {
  color: #ffffff;
  border-color: #7ac7ff;
  background: rgba(122, 199, 255, 0.2);
}

.ca-dark .btn-primary,
.ca-portal .btn-primary {
  box-shadow: 0 16px 34px rgba(74, 163, 255, 0.35);
}

.ca-panel .ca-metrics {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.63rem;
  overflow: visible;
  background: transparent;
  border: 0;
}

/* Consulting dark-section readability fixes */
.ca-dark .card,
.ca-dark .panel,
.ca-dark .timeline-item,
.ca-dark .slider-wrap,
.ca-dark .slide {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(132, 193, 255, 0.35);
}

.ca-dark .card h3,
.ca-dark .card h4,
.ca-dark .card p,
.ca-dark .card small,
.ca-dark .panel h3,
.ca-dark .panel p,
.ca-dark .timeline-item h3,
.ca-dark .timeline-item p,
.ca-dark .slide h3,
.ca-dark .slide p,
.ca-dark .slide-meta,
.ca-dark .list,
.ca-dark .list li,
.ca-dark .slider-head strong {
  color: #ecf7ff;
}

.ca-dark .slider-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #eaf6ff;
  border-color: rgba(132, 193, 255, 0.45);
}

.ca-dark .slide-dot {
  background: rgba(173, 219, 255, 0.45);
}

.ca-dark .slide-dot.active {
  background: #79c6ff;
}

/* IAM advanced command center page */
.ia-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 18% 16%, #273e88, #1f306f 36%, #172459 52%, #0b1b3d 75%, #08142d 100%);
}

#ia-hero-canvas,
#ia-portal-canvas,
#ia-crisis-canvas,
#ia-fabric-canvas,
#ia-sailpoint-canvas,
#ia-saviynt-canvas {
  width: 100%;
  height: 100%;
}

#ia-hero-canvas,
#ia-portal-canvas {
  position: absolute;
  inset: 0;
}

.ia-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 18, 45, 0.18), rgba(8, 16, 35, 0.82));
}

.ia-hero .container,
.ia-dark .container,
.ia-light .container,
.ia-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ia-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: center;
}

.ia-copy { color: #eef7ff; }

.ia-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(138, 193, 255, 0.52);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a4dcff;
  font-weight: 700;
}

.ia-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.04;
  background: linear-gradient(90deg, #b7dcff, #8ec5ff, #96a9ff, #bb9dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ia-sub {
  margin: 1rem 0 0;
  max-width: 740px;
  color: #d5e7fb;
  font-size: 1.04rem;
}

.ia-platforms,
.ia-trust {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ia-platforms span,
.ia-trust span {
  border: 1px solid rgba(136, 196, 255, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.77rem;
  color: #d8ebff;
  background: rgba(255, 255, 255, 0.09);
}

.ia-panel {
  border: 1px solid rgba(133, 192, 255, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(4, 16, 34, 0.34);
  color: #e9f6ff;
}

.ia-panel h2 {
  margin: 0;
  color: #f3f9ff;
  font-size: 1.05rem;
}

.ia-metric-cards {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.62rem;
}

.ia-metric-cards article {
  border: 1px solid rgba(132, 193, 255, 0.34);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
}

.ia-metric-cards strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.36rem;
  line-height: 1;
  color: #95d4ff;
}

.ia-metric-cards span {
  color: #d5e8fb;
  font-size: 0.8rem;
}

.ia-dark {
  background: linear-gradient(180deg, #091d3a, #102c52);
  color: #eaf6ff;
}

.ia-light {
  background: linear-gradient(180deg, #f6faff, #ffffff);
}

.ia-split {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ia-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ia-risk-dashboard,
.ia-fabric-graphic,
.ia-vendor-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(106, 189, 255, 0.17), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(170, 145, 255, 0.16), transparent 43%),
    linear-gradient(165deg, rgba(8, 27, 52, 0.95), rgba(11, 36, 70, 0.95));
}

.ia-risk-dashboard h4,
.ia-fabric-graphic h4,
.ia-vendor-graphic h4 {
  margin: 0;
  color: #f0f8ff;
  font-size: 1rem;
}

.ia-risk-note {
  margin: 0.35rem 0 0;
  color: #cde1f6;
  font-size: 0.81rem;
}

.ia-risk-top {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.55rem;
}

.ia-risk-gauge {
  border: 1px solid rgba(146, 209, 255, 0.3);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  text-align: center;
}

.ia-risk-gauge span {
  color: #9fd8ff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.ia-risk-gauge small {
  margin-top: 0.2rem;
  color: #d6e8fb;
  font-size: 0.69rem;
}

.ia-risk-kpi {
  border: 1px solid rgba(146, 209, 255, 0.3);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.07);
}

.ia-risk-kpi strong {
  color: #f1f9ff;
  font-size: 0.82rem;
}

.ia-risk-kpi p {
  margin: 0.3rem 0 0;
  color: #d1e4f7;
  font-size: 0.75rem;
  line-height: 1.45;
}

.ia-risk-kpi p span {
  color: #a3d9ff;
  font-weight: 800;
}

.ia-risk-bars {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.45rem;
}

.ia-risk-bars article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
}

.ia-risk-bars span {
  color: #e9f4ff;
  font-size: 0.77rem;
}

.ia-risk-bars strong {
  color: #9fd8ff;
  font-size: 0.76rem;
}

.ia-risk-bars div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.ia-risk-bars i,
.ia-vendor-meters i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, #67bcff, #ad95ff);
  animation: iaBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.ia-risk-bars article:nth-child(1) i { --i: 1; }
.ia-risk-bars article:nth-child(2) i { --i: 2; }
.ia-risk-bars article:nth-child(3) i { --i: 3; }
.ia-risk-bars article:nth-child(4) i { --i: 4; }

.ia-fabric-row {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.ia-fabric-row article {
  border: 1px solid rgba(145, 207, 255, 0.3);
  border-radius: 12px;
  padding: 0.55rem 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  position: relative;
}

.ia-fabric-row article::after {
  content: '';
  position: absolute;
  right: -0.34rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(159, 220, 255, 0.75);
  border-top: 2px solid rgba(159, 220, 255, 0.75);
  transform: translateY(-50%) rotate(45deg);
}

.ia-fabric-row article:last-child::after {
  display: none;
}

.ia-fabric-row strong {
  color: #eef8ff;
  font-size: 0.8rem;
}

.ia-fabric-row span {
  display: block;
  margin-top: 0.28rem;
  color: #cfe2f5;
  font-size: 0.73rem;
  line-height: 1.4;
}

.ia-fabric-outcomes {
  margin-top: 0.68rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ia-fabric-outcomes span {
  border: 1px solid rgba(148, 211, 255, 0.32);
  border-radius: 999px;
  padding: 0.24rem 0.52rem;
  color: #eaf6ff;
  font-size: 0.74rem;
  background: rgba(106, 178, 250, 0.2);
}

.ia-vendor-meters {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.52rem;
}

.ia-vendor-meters article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
  border: 1px solid rgba(150, 212, 255, 0.28);
  border-radius: 10px;
  padding: 0.52rem;
  background: rgba(255, 255, 255, 0.08);
}

.ia-vendor-meters span {
  color: #edf7ff;
  font-size: 0.78rem;
}

.ia-vendor-meters strong {
  color: #a5dbff;
  font-size: 0.78rem;
}

.ia-vendor-meters div {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.ia-vendor-meters article:nth-child(1) i { --i: 1; }
.ia-vendor-meters article:nth-child(2) i { --i: 2; }
.ia-vendor-meters article:nth-child(3) i { --i: 3; }

@keyframes iaBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@media (prefers-reduced-motion: reduce) {
  .ia-risk-bars i,
  .ia-vendor-meters i {
    animation: none !important;
    width: var(--w);
  }
}

.ia-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.ia-content .grid {
  margin-top: 0;
}

.ia-visual-block {
  margin-top: 1rem;
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 280px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.ia-step-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ia-step-grid .card small {
  display: block;
  margin-top: 0.52rem;
  color: rgba(224, 242, 255, 0.9);
}

.ia-vendor-card {
  margin-top: 1rem;
  border: 1px solid rgba(31, 89, 162, 0.18);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(8, 37, 74, 0.1);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  overflow: hidden;
}

.ia-vendor-copy { padding: 1rem; }
.ia-vendor-copy h3 { margin: 0; }

.ia-vendor-visual {
  min-height: 310px;
  position: relative;
}

.ia-sailpoint {
  background: radial-gradient(circle at 20% 20%, rgba(115, 178, 255, 0.32), rgba(9, 51, 105, 0.95));
}

.ia-saviynt {
  background: radial-gradient(circle at 80% 20%, rgba(169, 145, 255, 0.32), rgba(35, 43, 112, 0.95));
}

.ia-vendor-reverse {
  grid-template-columns: 0.98fr 1.02fr;
}

.ia-vendor-reverse .ia-vendor-copy { order: 2; }
.ia-vendor-reverse .ia-vendor-visual { order: 1; }

.ia-badges {
  margin-top: 0.72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ia-badges span {
  border: 1px solid rgba(11, 99, 201, 0.28);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: var(--ink-300);
}

.ia-cert {
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--brand-strong);
}

.ia-dashboard {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.11);
}

.ia-dashboard h3 {
  margin: 0;
  color: #f2f9ff;
}

.ia-dashboard ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ia-dashboard li {
  border: 1px solid rgba(132, 193, 255, 0.33);
  border-radius: 10px;
  padding: 0.52rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.ia-dashboard li span { color: #d0e4f8; font-size: 0.84rem; }
.ia-dashboard li strong { color: #9ed8ff; font-family: 'Space Grotesk', sans-serif; }

.ia-faq-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.ia-faq-grid details {
  border: 1px solid rgba(132, 193, 255, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.7rem 0.78rem;
}

.ia-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: #eef7ff;
}

.ia-faq-grid p {
  margin: 0.5rem 0 0;
  color: #e1f0ff;
}

.ia-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #112f5b, #2e2e7e 50%, #0d1d3f 80%);
}

.ia-portal-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef7ff;
}

.ia-portal-inner h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  background: linear-gradient(90deg, #d8ecff, #93c8ff, #ab9bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ia-portal-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d6e9fb;
}

.ia-portal-inner .actions { justify-content: center; }

.ia-metrics-bar {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.ia-metrics-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: iaTicker 24s linear infinite;
}

.ia-metrics-track:hover { animation-play-state: paused; }

@keyframes iaTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

/* visibility guarantees on dark sections */
.ia-dark .section-title,
.ia-dark .lead,
.ia-dark h3,
.ia-dark h4,
.ia-dark p,
.ia-dark small,
.ia-dark .list,
.ia-dark .list li,
.ia-dark .slide-meta,
.ia-dark .slider-head strong {
  color: #edf7ff;
}

.ia-dark .card,
.ia-dark .panel,
.ia-dark .timeline-item,
.ia-dark .slide,
.ia-dark .slider-wrap {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(132, 193, 255, 0.35);
}

.ia-hero .btn-secondary,
.ia-dark .btn-secondary,
.ia-portal .btn-secondary {
  color: #ebf6ff;
  border-color: rgba(140, 201, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.ia-hero .btn-secondary:hover,
.ia-dark .btn-secondary:hover,
.ia-portal .btn-secondary:hover,
.ia-hero .btn-secondary:focus-visible,
.ia-dark .btn-secondary:focus-visible,
.ia-portal .btn-secondary:focus-visible {
  color: #ffffff;
  border-color: #7ac7ff;
  background: rgba(122, 199, 255, 0.22);
}

.ia-dark .slide-dot { background: rgba(173, 219, 255, 0.45); }
.ia-dark .slide-dot.active { background: #79c6ff; }

@media (max-width: 980px) {
  .ia-hero-grid,
  .ia-split,
  .ia-vendor-card,
  .ia-vendor-reverse {
    grid-template-columns: 1fr;
  }

  .ia-step-grid,
  .ia-faq-grid {
    grid-template-columns: 1fr;
  }

  .ia-vendor-reverse .ia-vendor-copy,
  .ia-vendor-reverse .ia-vendor-visual { order: initial; }

  .ia-risk-top,
  .ia-fabric-row {
    grid-template-columns: 1fr;
  }

  .ia-fabric-row article::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .ia-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .ia-copy h1 {
    font-size: clamp(2rem, 8vw, 2.85rem);
  }
}

/* SSO advanced command center page */
.so-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 18%, #5f1732, #9b2549 34%, #d94967 52%, #f4f7ff 100%);
}

#so-hero-canvas,
#so-portal-canvas,
#so-crisis-canvas,
#so-workforce-canvas,
#so-ciam-canvas,
#so-b2b-canvas,
#so-api-canvas {
  width: 100%;
  height: 100%;
}

#so-hero-canvas,
#so-portal-canvas {
  position: absolute;
  inset: 0;
}

.so-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(49, 10, 28, 0.2), rgba(15, 20, 40, 0.82));
}

.so-hero .container,
.so-dark .container,
.so-light .container,
.so-usecase-a .container,
.so-usecase-b .container,
.so-usecase-c .container,
.so-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.so-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: center;
}

.so-copy { color: #eff7ff; }

.so-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(255, 181, 197, 0.55);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffd5e2;
  font-weight: 700;
}

.so-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.85rem);
  line-height: 1.04;
  background: linear-gradient(90deg, #ffccd9, #ffdce5, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.so-sub {
  margin: 1rem 0 0;
  max-width: 740px;
  color: #f1d9e2;
  font-size: 1.03rem;
}

.so-platform,
.so-trust {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.so-platform span,
.so-trust span {
  border: 1px solid rgba(255, 201, 215, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.77rem;
  color: #ffe7ee;
  background: rgba(255, 255, 255, 0.1);
}

.so-panel {
  border: 1px solid rgba(255, 197, 213, 0.4);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(34, 8, 25, 0.35);
  color: #ffeef3;
}

.so-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff7fa;
}

.so-metric-cards {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.62rem;
}

.so-metric-cards article {
  border: 1px solid rgba(255, 201, 216, 0.38);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.09);
}

.so-metric-cards strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.36rem;
  line-height: 1;
  color: #ffd4e2;
}

.so-metric-cards span {
  color: #ffe7ef;
  font-size: 0.8rem;
}

.so-dark,
.so-usecase-a,
.so-usecase-b,
.so-usecase-c {
  background: linear-gradient(180deg, #0a1f3d, #132f57);
  color: #ecf7ff;
}

.so-usecase-b { background: linear-gradient(180deg, #2a235a, #1d2e62); }
.so-usecase-c { background: linear-gradient(180deg, #123c41, #173f5d); }

.so-light {
  background: linear-gradient(180deg, #fff7fa, #ffffff);
}

.so-split {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.so-reverse .so-content { order: 2; }
.so-reverse .so-visual { order: 1; }

.so-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.so-risk-dashboard,
.so-flow-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 165, 192, 0.18), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(150, 206, 255, 0.16), transparent 43%),
    linear-gradient(165deg, rgba(26, 28, 72, 0.95), rgba(23, 45, 91, 0.95));
}

.so-risk-dashboard h4,
.so-flow-graphic h4 {
  margin: 0;
  color: #f4f9ff;
  font-size: 1rem;
}

.so-risk-note {
  margin: 0.34rem 0 0;
  color: #d8e8f9;
  font-size: 0.81rem;
}

.so-risk-top {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.55rem;
}

.so-risk-gauge {
  border: 1px solid rgba(170, 212, 255, 0.32);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.so-risk-gauge span {
  color: #a9deff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.so-risk-gauge small {
  margin-top: 0.2rem;
  color: #dcecff;
  font-size: 0.69rem;
}

.so-risk-kpi {
  border: 1px solid rgba(170, 212, 255, 0.32);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
}

.so-risk-kpi strong {
  color: #f6fbff;
  font-size: 0.82rem;
}

.so-risk-kpi p {
  margin: 0.3rem 0 0;
  color: #d7e7fa;
  font-size: 0.75rem;
  line-height: 1.45;
}

.so-risk-kpi p span {
  color: #a8ddff;
  font-weight: 800;
}

.so-risk-bars,
.so-flow-bars {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.48rem;
}

.so-risk-bars article,
.so-flow-bars article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
}

.so-risk-bars span,
.so-flow-bars span {
  color: #edf7ff;
  font-size: 0.77rem;
}

.so-risk-bars strong,
.so-flow-bars strong {
  color: #a9deff;
  font-size: 0.77rem;
}

.so-risk-bars div,
.so-flow-bars div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.so-risk-bars i,
.so-flow-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, #8fd3ff, #ff98bb);
  animation: soBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.so-risk-bars article:nth-child(1) i { --i: 1; }
.so-risk-bars article:nth-child(2) i { --i: 2; }
.so-risk-bars article:nth-child(3) i { --i: 3; }
.so-risk-bars article:nth-child(4) i { --i: 4; }
.so-flow-bars article:nth-child(1) i { --i: 1; }
.so-flow-bars article:nth-child(2) i { --i: 2; }
.so-flow-bars article:nth-child(3) i { --i: 3; }

.so-flow-steps {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.so-flow-steps article {
  border: 1px solid rgba(166, 210, 255, 0.34);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.so-flow-steps article::after {
  content: '';
  position: absolute;
  right: -0.34rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(174, 220, 255, 0.8);
  border-top: 2px solid rgba(174, 220, 255, 0.8);
  transform: translateY(-50%) rotate(45deg);
}

.so-flow-steps article:last-child::after {
  display: none;
}

.so-flow-steps strong {
  color: #f5faff;
  font-size: 0.8rem;
}

.so-flow-steps span {
  display: block;
  margin-top: 0.28rem;
  color: #d8e8f9;
  font-size: 0.73rem;
  line-height: 1.4;
}

@keyframes soBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@media (prefers-reduced-motion: reduce) {
  .so-risk-bars i,
  .so-flow-bars i {
    animation: none !important;
    width: var(--w);
  }
}

.so-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.so-result {
  margin: 0;
  font-weight: 700;
  color: #d9ecff;
}

.so-step-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.so-step-grid .card small {
  display: block;
  margin-top: 0.5rem;
  color: #dcf0ff;
}

.so-cert {
  margin: 0.85rem 0 0;
  font-weight: 700;
  color: var(--ink-100);
}

.so-dashboard {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
}

.so-dashboard h3 {
  margin: 0;
  color: #f2f9ff;
}

.so-dashboard ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.so-dashboard li {
  border: 1px solid rgba(132, 193, 255, 0.33);
  border-radius: 10px;
  padding: 0.52rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
}

.so-dashboard li span { color: #d0e4f8; font-size: 0.84rem; }
.so-dashboard li strong { color: #a6ddff; font-family: 'Space Grotesk', sans-serif; }

.so-faq-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.so-faq-grid details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem 0.78rem;
}

.so-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-100);
}

.so-faq-grid p {
  margin: 0.5rem 0 0;
  color: var(--ink-300);
}

.so-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #7b1e3a, #cf4566 42%, #152247 78%);
}

.so-portal-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff0f5;
}

.so-portal-inner h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  background: linear-gradient(90deg, #ffd5e2, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.so-portal-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #ffe2eb;
}

.so-portal-inner .actions { justify-content: center; }

.so-metrics-bar {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.so-metrics-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: soTicker 24s linear infinite;
}

.so-metrics-track:hover { animation-play-state: paused; }

@keyframes soTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

/* dark readability and action visibility */
.so-dark .section-title,
.so-dark .lead,
.so-dark h3,
.so-dark h4,
.so-dark p,
.so-dark small,
.so-dark .list,
.so-dark .list li,
.so-dark .slide-meta,
.so-dark .slider-head strong,
.so-usecase-a h3,
.so-usecase-a p,
.so-usecase-a li,
.so-usecase-b h3,
.so-usecase-b p,
.so-usecase-b li,
.so-usecase-c h3,
.so-usecase-c p,
.so-usecase-c li {
  color: #edf7ff;
}

.so-dark .card,
.so-dark .panel,
.so-dark .timeline-item,
.so-dark .slide,
.so-dark .slider-wrap,
.so-usecase-a .card,
.so-usecase-b .card,
.so-usecase-c .card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(132, 193, 255, 0.35);
}

.so-hero .btn-secondary,
.so-dark .btn-secondary,
.so-usecase-a .btn-secondary,
.so-usecase-b .btn-secondary,
.so-usecase-c .btn-secondary,
.so-portal .btn-secondary {
  color: #fef1f6;
  border-color: rgba(255, 196, 214, 0.58);
  background: rgba(255, 255, 255, 0.12);
}

.so-hero .btn-secondary:hover,
.so-dark .btn-secondary:hover,
.so-usecase-a .btn-secondary:hover,
.so-usecase-b .btn-secondary:hover,
.so-usecase-c .btn-secondary:hover,
.so-portal .btn-secondary:hover,
.so-hero .btn-secondary:focus-visible,
.so-dark .btn-secondary:focus-visible,
.so-usecase-a .btn-secondary:focus-visible,
.so-usecase-b .btn-secondary:focus-visible,
.so-usecase-c .btn-secondary:focus-visible,
.so-portal .btn-secondary:focus-visible {
  color: #ffffff;
  border-color: #ffd5e5;
  background: rgba(255, 160, 191, 0.24);
}

.so-dark .slide-dot { background: rgba(173, 219, 255, 0.45); }
.so-dark .slide-dot.active { background: #79c6ff; }

@media (max-width: 980px) {
  .so-hero-grid,
  .so-split,
  .so-reverse {
    grid-template-columns: 1fr;
  }

  .so-step-grid,
  .so-faq-grid {
    grid-template-columns: 1fr;
  }

  .so-reverse .so-content,
  .so-reverse .so-visual { order: initial; }

  .so-risk-top,
  .so-flow-steps {
    grid-template-columns: 1fr;
  }

  .so-flow-steps article::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .so-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .so-copy h1 {
    font-size: clamp(2rem, 8vw, 2.85rem);
  }
}

/* Governance advanced command center page */
.gv-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 18% 16%, #173d79, #1b5c7f 40%, #1f7a79 62%, #0e233f 100%);
}

#gv-hero-canvas,
#gv-portal-canvas,
#gv-crisis-canvas,
#gv-engine-canvas,
#gv-sod-canvas,
#gv-cert-canvas,
#gv-rbac-canvas,
#gv-audit-canvas {
  width: 100%;
  height: 100%;
}

#gv-hero-canvas,
#gv-portal-canvas {
  position: absolute;
  inset: 0;
}

.gv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 46, 0.2), rgba(8, 18, 35, 0.84));
}

.gv-hero .container,
.gv-dark .container,
.gv-light .container,
.gv-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.gv-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: center;
}

.gv-copy { color: #edf7ff; }

.gv-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(148, 210, 255, 0.52);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b3e4ff;
  font-weight: 700;
}

.gv-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.04;
  background: linear-gradient(90deg, #d9ecff, #9fd9ff, #93edcb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gv-sub {
  margin: 1rem 0 0;
  max-width: 740px;
  color: #d6eafb;
  font-size: 1.03rem;
}

.gv-trust {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gv-trust span {
  border: 1px solid rgba(142, 206, 255, 0.46);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.77rem;
  color: #ddf0ff;
  background: rgba(255, 255, 255, 0.09);
}

.gv-panel {
  border: 1px solid rgba(136, 199, 250, 0.37);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(4, 16, 34, 0.34);
  color: #e9f6ff;
}

.gv-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f2f9ff;
}

.gv-metric-cards {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.62rem;
}

.gv-metric-cards article {
  border: 1px solid rgba(132, 193, 255, 0.34);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
}

.gv-metric-cards strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.36rem;
  line-height: 1;
  color: #9adfff;
}

.gv-metric-cards span { color: #d5e8fb; font-size: 0.8rem; }

.gv-dark {
  background: linear-gradient(180deg, #091f3d, #112e53);
  color: #ebf6ff;
}

.gv-light {
  background: linear-gradient(180deg, #f6faff, #ffffff);
}

.gv-split {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.gv-reverse .gv-content { order: 2; }
.gv-reverse .gv-visual { order: 1; }

.gv-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.gv-risk-dashboard,
.gv-flow-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(140, 210, 255, 0.16), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(150, 226, 197, 0.14), transparent 43%),
    linear-gradient(165deg, rgba(8, 27, 51, 0.95), rgba(12, 38, 71, 0.95));
}

.gv-risk-dashboard h4,
.gv-flow-graphic h4 {
  margin: 0;
  color: #f2f9ff;
  font-size: 1rem;
}

.gv-risk-note {
  margin: 0.34rem 0 0;
  color: #d4e8f8;
  font-size: 0.81rem;
}

.gv-risk-top {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.55rem;
}

.gv-risk-gauge {
  border: 1px solid rgba(166, 215, 255, 0.32);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.gv-risk-gauge span {
  color: #a6ddff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.gv-risk-gauge small {
  margin-top: 0.2rem;
  color: #d9edff;
  font-size: 0.69rem;
}

.gv-risk-kpi {
  border: 1px solid rgba(166, 215, 255, 0.32);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
}

.gv-risk-kpi strong {
  color: #f4fbff;
  font-size: 0.82rem;
}

.gv-risk-kpi p {
  margin: 0.3rem 0 0;
  color: #d8e9f9;
  font-size: 0.75rem;
  line-height: 1.45;
}

.gv-risk-kpi p span {
  color: #a7ddff;
  font-weight: 800;
}

.gv-risk-bars,
.gv-flow-bars {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.48rem;
}

.gv-risk-bars article,
.gv-flow-bars article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
}

.gv-risk-bars span,
.gv-flow-bars span {
  color: #edf8ff;
  font-size: 0.77rem;
}

.gv-risk-bars strong,
.gv-flow-bars strong {
  color: #a7ddff;
  font-size: 0.77rem;
}

.gv-risk-bars div,
.gv-flow-bars div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.gv-risk-bars i,
.gv-flow-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, #8bd5ff, #96e2c5);
  animation: gvBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.gv-risk-bars article:nth-child(1) i { --i: 1; }
.gv-risk-bars article:nth-child(2) i { --i: 2; }
.gv-risk-bars article:nth-child(3) i { --i: 3; }
.gv-risk-bars article:nth-child(4) i { --i: 4; }
.gv-flow-bars article:nth-child(1) i { --i: 1; }
.gv-flow-bars article:nth-child(2) i { --i: 2; }
.gv-flow-bars article:nth-child(3) i { --i: 3; }

.gv-flow-steps {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.gv-flow-steps article {
  border: 1px solid rgba(166, 216, 255, 0.34);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.gv-flow-steps article::after {
  content: '';
  position: absolute;
  right: -0.34rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(174, 223, 255, 0.8);
  border-top: 2px solid rgba(174, 223, 255, 0.8);
  transform: translateY(-50%) rotate(45deg);
}

.gv-flow-steps article:last-child::after {
  display: none;
}

.gv-flow-steps strong {
  color: #f5fbff;
  font-size: 0.8rem;
}

.gv-flow-steps span {
  display: block;
  margin-top: 0.28rem;
  color: #d9ebf9;
  font-size: 0.73rem;
  line-height: 1.4;
}

@keyframes gvBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@media (prefers-reduced-motion: reduce) {
  .gv-risk-bars i,
  .gv-flow-bars i {
    animation: none !important;
    width: var(--w);
  }
}

.gv-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.gv-content .grid { margin-top: 0; }

.gv-visual-block {
  margin-top: 1rem;
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 280px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.gv-step-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gv-step-grid .card small {
  display: block;
  margin-top: 0.52rem;
  color: #dbf0ff;
}

.gv-faq-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.gv-faq-grid details {
  border: 1px solid rgba(132, 193, 255, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.7rem 0.78rem;
}

.gv-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: #edf7ff;
}

.gv-faq-grid p {
  margin: 0.5rem 0 0;
  color: #e2f0ff;
}

.gv-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #123868, #177070 48%, #0f2444 82%);
}

.gv-portal-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef8ff;
}

.gv-portal-inner h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  background: linear-gradient(90deg, #d9edff, #9fdcff, #8de8c5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gv-portal-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d8ebfb;
}

.gv-portal-inner .actions { justify-content: center; }

.gv-promise {
  margin-top: 0.7rem;
  color: #cbe9f6;
  font-size: 0.82rem;
}

.gv-metrics-bar {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.gv-metrics-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: gvTicker 24s linear infinite;
}

.gv-metrics-track:hover { animation-play-state: paused; }

@keyframes gvTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

/* readability and action visibility safeguards */
.gv-dark .section-title,
.gv-dark .lead,
.gv-dark h3,
.gv-dark h4,
.gv-dark p,
.gv-dark small,
.gv-dark .list,
.gv-dark .list li,
.gv-dark .slide-meta,
.gv-dark .slider-head strong {
  color: #edf7ff;
}

.gv-dark .card,
.gv-dark .panel,
.gv-dark .timeline-item,
.gv-dark .slide,
.gv-dark .slider-wrap {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(132, 193, 255, 0.35);
}

.gv-hero .btn-secondary,
.gv-dark .btn-secondary,
.gv-portal .btn-secondary {
  color: #ebf6ff;
  border-color: rgba(140, 201, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.gv-hero .btn-secondary:hover,
.gv-dark .btn-secondary:hover,
.gv-portal .btn-secondary:hover,
.gv-hero .btn-secondary:focus-visible,
.gv-dark .btn-secondary:focus-visible,
.gv-portal .btn-secondary:focus-visible {
  color: #ffffff;
  border-color: #7ac7ff;
  background: rgba(122, 199, 255, 0.22);
}

.gv-dark .slide-dot { background: rgba(173, 219, 255, 0.45); }
.gv-dark .slide-dot.active { background: #79c6ff; }

@media (max-width: 980px) {
  .gv-hero-grid,
  .gv-split,
  .gv-reverse {
    grid-template-columns: 1fr;
  }

  .gv-step-grid,
  .gv-faq-grid {
    grid-template-columns: 1fr;
  }

  .gv-reverse .gv-content,
  .gv-reverse .gv-visual { order: initial; }

  .gv-risk-top,
  .gv-flow-steps {
    grid-template-columns: 1fr;
  }

  .gv-flow-steps article::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .gv-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .gv-copy h1 {
    font-size: clamp(2rem, 8vw, 2.85rem);
  }
}

/* Managed services advanced command center page */
.ms-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 18% 16%, #163b76, #2e5d8e 42%, #8ca3bf 70%, #0f2343 100%);
}

#ms-hero-canvas,
#ms-portal-canvas,
#ms-burden-canvas,
#ms-globe-canvas,
#ms-comanaged-canvas {
  width: 100%;
  height: 100%;
}

#ms-hero-canvas,
#ms-portal-canvas {
  position: absolute;
  inset: 0;
}

.ms-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 46, 0.18), rgba(8, 18, 35, 0.84));
}

.ms-hero .container,
.ms-dark .container,
.ms-light .container,
.ms-portal .container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ms-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1rem;
  align-items: center;
}

.ms-copy { color: #edf7ff; }

.ms-eyebrow {
  margin: 0 0 0.8rem;
  display: inline-flex;
  border: 1px solid rgba(160, 209, 255, 0.52);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #c8e7ff;
  font-weight: 700;
}

.ms-copy h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.04;
  background: linear-gradient(90deg, #d9ecff, #adcfff, #e7edf5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ms-sub {
  margin: 1rem 0 0;
  max-width: 740px;
  color: #d7ebfb;
  font-size: 1.03rem;
}

.ms-trust {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ms-trust span {
  border: 1px solid rgba(149, 206, 255, 0.45);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.77rem;
  color: #deefff;
  background: rgba(255, 255, 255, 0.09);
}

.ms-live {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(153, 233, 194, 0.5);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  color: #d9f8e9;
  background: rgba(99, 214, 154, 0.12);
  font-size: 0.78rem;
}

.ms-live span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #64df97;
  box-shadow: 0 0 10px rgba(100, 223, 151, 0.75);
}

.ms-panel {
  border: 1px solid rgba(136, 199, 250, 0.37);
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px rgba(4, 16, 34, 0.34);
  color: #e9f6ff;
}

.ms-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f2f9ff;
}

.ms-metric-cards {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.62rem;
}

.ms-metric-cards article {
  border: 1px solid rgba(132, 193, 255, 0.34);
  border-radius: 12px;
  padding: 0.62rem;
  background: rgba(255, 255, 255, 0.08);
}

.ms-metric-cards strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.36rem;
  line-height: 1;
  color: #a6dfff;
}

.ms-metric-cards span { color: #d5e8fb; font-size: 0.8rem; }

.ms-dark {
  background: linear-gradient(180deg, #091f3d, #112f56);
  color: #ebf6ff;
}

.ms-light {
  background: linear-gradient(180deg, #f6faff, #ffffff);
}

.ms-split {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ms-visual {
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 320px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ms-risk-dashboard,
.ms-flow-graphic {
  height: 100%;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(152, 217, 255, 0.16), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(147, 225, 202, 0.15), transparent 43%),
    linear-gradient(165deg, rgba(9, 29, 54, 0.95), rgba(12, 39, 73, 0.95));
}

.ms-risk-dashboard h4,
.ms-flow-graphic h4 {
  margin: 0;
  color: #f2f9ff;
  font-size: 1rem;
}

.ms-risk-note {
  margin: 0.34rem 0 0;
  color: #d7e9f8;
  font-size: 0.81rem;
}

.ms-risk-top {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.55rem;
}

.ms-risk-gauge {
  border: 1px solid rgba(168, 218, 255, 0.32);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.ms-risk-gauge span {
  color: #a9deff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
}

.ms-risk-gauge small {
  margin-top: 0.2rem;
  color: #deefff;
  font-size: 0.69rem;
}

.ms-risk-kpi {
  border: 1px solid rgba(168, 218, 255, 0.32);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
}

.ms-risk-kpi strong {
  color: #f4fbff;
  font-size: 0.82rem;
}

.ms-risk-kpi p {
  margin: 0.3rem 0 0;
  color: #d9eafa;
  font-size: 0.75rem;
  line-height: 1.45;
}

.ms-risk-kpi p span {
  color: #a8dfff;
  font-weight: 800;
}

.ms-risk-bars,
.ms-flow-bars {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.48rem;
}

.ms-risk-bars article,
.ms-flow-bars article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.24rem 0.5rem;
}

.ms-risk-bars span,
.ms-flow-bars span {
  color: #edf8ff;
  font-size: 0.77rem;
}

.ms-risk-bars strong,
.ms-flow-bars strong {
  color: #a7defe;
  font-size: 0.77rem;
}

.ms-risk-bars div,
.ms-flow-bars div {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.ms-risk-bars i,
.ms-flow-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, #8dd6ff, #93e2cb);
  animation: msBarGrow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.ms-risk-bars article:nth-child(1) i { --i: 1; }
.ms-risk-bars article:nth-child(2) i { --i: 2; }
.ms-risk-bars article:nth-child(3) i { --i: 3; }
.ms-risk-bars article:nth-child(4) i { --i: 4; }
.ms-flow-bars article:nth-child(1) i { --i: 1; }
.ms-flow-bars article:nth-child(2) i { --i: 2; }
.ms-flow-bars article:nth-child(3) i { --i: 3; }

.ms-flow-steps {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.ms-flow-steps article {
  border: 1px solid rgba(167, 219, 255, 0.34);
  border-radius: 12px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.ms-flow-steps article::after {
  content: '';
  position: absolute;
  right: -0.34rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(173, 223, 255, 0.8);
  border-top: 2px solid rgba(173, 223, 255, 0.8);
  transform: translateY(-50%) rotate(45deg);
}

.ms-flow-steps article:last-child::after {
  display: none;
}

.ms-flow-steps strong {
  color: #f5fbff;
  font-size: 0.8rem;
}

.ms-flow-steps span {
  display: block;
  margin-top: 0.28rem;
  color: #d9ebf9;
  font-size: 0.73rem;
  line-height: 1.4;
}

@keyframes msBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-risk-bars i,
  .ms-flow-bars i {
    animation: none !important;
    width: var(--w);
  }
}

.ms-content {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.ms-content .grid { margin-top: 0; }

.ms-ops-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-ops-grid .card small {
  display: block;
  margin-top: 0.52rem;
  color: #dcf0ff;
}

.ms-visual-block {
  margin-top: 1rem;
  border: 1px solid rgba(132, 190, 248, 0.35);
  border-radius: 16px;
  min-height: 280px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.ms-dashboard {
  margin-top: 1rem;
  border: 1px solid rgba(132, 193, 255, 0.35);
  border-radius: 16px;
  padding: 0.95rem;
  background: rgba(255, 255, 255, 0.08);
}

.ms-dash-head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  color: #edf7ff;
  font-weight: 700;
}

.ms-dash-metrics {
  margin-top: 0.7rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ms-dash-metrics article {
  border: 1px solid rgba(132, 193, 255, 0.33);
  border-radius: 10px;
  padding: 0.52rem;
  background: rgba(255, 255, 255, 0.06);
}

.ms-dash-metrics h4 {
  margin: 0;
  font-size: 0.82rem;
  color: #d3e8fb;
}

.ms-dash-metrics p {
  margin: 0.35rem 0 0;
  color: #9fdbff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.16rem;
}

.ms-feed {
  margin-top: 0.75rem;
  border: 1px solid rgba(132, 193, 255, 0.33);
  border-radius: 12px;
  padding: 0.6rem;
  max-height: 170px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.05);
}

.ms-feed p {
  margin: 0 0 0.35rem;
  color: #d6eafd;
  font-size: 0.84rem;
}

.ms-sla-note {
  margin: 0.8rem 0 0;
  color: var(--ink-300);
  font-weight: 700;
}

.ms-faq-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.ms-faq-grid details {
  border: 1px solid rgba(132, 193, 255, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.7rem 0.78rem;
}

.ms-faq-grid summary {
  cursor: pointer;
  font-weight: 700;
  color: #edf7ff;
}

.ms-faq-grid p {
  margin: 0.5rem 0 0;
  color: #e2f0ff;
}

.ms-portal {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #133b6e, #5e7899 45%, #102744 85%);
}

.ms-portal-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #eef8ff;
}

.ms-portal-inner h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  background: linear-gradient(90deg, #d8edff, #b7d8ff, #e7edf5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ms-portal-inner p {
  margin: 0.75rem auto 0;
  max-width: 760px;
  color: #d8ebfb;
}

.ms-portal-inner .actions { justify-content: center; }

.ms-promise {
  margin-top: 0.7rem;
  color: #cce4f6;
  font-size: 0.82rem;
}

.ms-status-bar {
  overflow: hidden;
  background: linear-gradient(90deg, #071224, #0f223f, #071224);
  border-top: 1px solid rgba(132, 178, 228, 0.3);
  border-bottom: 1px solid rgba(132, 178, 228, 0.3);
}

.ms-status-track {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  white-space: nowrap;
  color: #d5e8ff;
  padding: 0 1rem;
  animation: msTicker 24s linear infinite;
}

.ms-status-track:hover { animation-play-state: paused; }

@keyframes msTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-42%); }
}

/* readability and action visibility safeguards */
.ms-dark .section-title,
.ms-dark .lead,
.ms-dark h3,
.ms-dark h4,
.ms-dark p,
.ms-dark small,
.ms-dark .list,
.ms-dark .list li,
.ms-dark .slide-meta,
.ms-dark .slider-head strong {
  color: #edf7ff;
}

.ms-dark .card,
.ms-dark .panel,
.ms-dark .timeline-item,
.ms-dark .slide,
.ms-dark .slider-wrap {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(132, 193, 255, 0.35);
}

.ms-hero .btn-secondary,
.ms-dark .btn-secondary,
.ms-portal .btn-secondary {
  color: #ebf6ff;
  border-color: rgba(140, 201, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.ms-hero .btn-secondary:hover,
.ms-dark .btn-secondary:hover,
.ms-portal .btn-secondary:hover,
.ms-hero .btn-secondary:focus-visible,
.ms-dark .btn-secondary:focus-visible,
.ms-portal .btn-secondary:focus-visible {
  color: #ffffff;
  border-color: #7ac7ff;
  background: rgba(122, 199, 255, 0.22);
}

.ms-dark .slide-dot { background: rgba(173, 219, 255, 0.45); }
.ms-dark .slide-dot.active { background: #79c6ff; }

@media (max-width: 980px) {
  .ms-hero-grid,
  .ms-split,
  .ms-ops-grid,
  .ms-faq-grid,
  .ms-dash-metrics {
    grid-template-columns: 1fr;
  }

  .ms-risk-top,
  .ms-flow-steps {
    grid-template-columns: 1fr;
  }

  .ms-flow-steps article::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .ms-hero {
    min-height: auto;
    padding-top: 5.1rem;
  }

  .ms-copy h1 {
    font-size: clamp(2rem, 8vw, 2.85rem);
  }
}

/* Navigation system: enterprise clean */
.topbar {
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(16, 63, 124, 0.12);
  backdrop-filter: blur(14px) saturate(125%);
}

.topbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(16, 63, 124, 0.18);
  box-shadow: 0 10px 28px rgba(10, 38, 74, 0.1);
}

.topbar.menu-open {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: rgba(16, 63, 124, 0.22);
  box-shadow: 0 10px 30px rgba(10, 38, 74, 0.13);
}

.nav {
  min-height: 78px;
  gap: 0.85rem;
}

.brand {
  position: relative;
  z-index: 130;
}

.brand-logo-img {
  height: 52px;
}

.menu-toggle {
  display: none;
  min-width: 92px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(15, 66, 128, 0.22);
  background: #ffffff;
  color: #12467f;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.menu-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 66, 128, 0.4);
  background: #f4f9ff;
}

.nav-sub-toggle {
  display: none;
  min-height: 36px;
  min-width: 36px;
}

.menu-toggle:focus-visible,
.nav-sub-toggle:focus-visible,
.nav-submenu a:focus-visible,
.nav-links > a:focus-visible {
  outline: 2px solid rgba(11, 99, 201, 0.5);
  outline-offset: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.nav-links > a,
.nav-parent {
  color: #2a588c;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.48rem 0.62rem;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-links a::after,
.nav-parent::after {
  content: '';
  position: absolute;
  left: 0.62rem;
  right: 0.62rem;
  bottom: 0.12rem;
  height: 2px;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #0b63c9, #4aa3ff);
  transition: transform 0.2s ease;
}

.nav-links > a:not(.nav-cta):hover,
.nav-links > a:not(.nav-cta).active,
.nav-parent:hover,
.nav-dropdown.open .nav-parent {
  color: #0b447f;
  background: rgba(74, 163, 255, 0.1);
}

.nav-links > a:not(.nav-cta):hover::after,
.nav-links > a:not(.nav-cta).active::after,
.nav-parent:hover::after,
.nav-dropdown.open .nav-parent::after {
  transform: scaleX(1);
}

.nav-sub-toggle {
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  color: #2a5e96;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.nav-sub-toggle:hover {
  background: rgba(74, 163, 255, 0.12);
  border-color: rgba(16, 74, 145, 0.2);
}

.nav-submenu {
  top: calc(100% + 0.5rem);
  min-width: 292px;
  border: 1px solid rgba(16, 74, 145, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 18px 34px rgba(8, 32, 63, 0.16);
  padding: 0.42rem;
  transform-origin: top left;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.22s ease;
}

.nav-submenu a {
  padding: 0.54rem 0.62rem;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #285486;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible,
.nav-submenu a.active {
  color: #0b447f;
  background: rgba(74, 163, 255, 0.14);
  border-color: rgba(25, 118, 210, 0.2);
  transform: translateX(2px);
}

.nav-links .nav-cta {
  margin-left: 0.35rem;
  color: #ffffff;
  padding: 0.58rem 1.02rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 800;
  border: 1px solid rgba(11, 82, 165, 0.24);
  background: linear-gradient(135deg, #0b63c9, #2d88e6);
  box-shadow: 0 10px 20px rgba(11, 99, 201, 0.26);
}

.nav-links .nav-cta:hover,
.nav-links .nav-cta:focus-visible,
.nav-links .nav-cta.active {
  color: #ffffff;
  background: linear-gradient(135deg, #0a58b2, #2477d3);
  border-color: rgba(10, 72, 149, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(11, 99, 201, 0.32);
}

.nav-links .nav-cta::after {
  display: none;
}

@media (max-width: 980px) {
  body.nav-open {
    overflow: hidden;
  }

  .nav {
    min-height: 72px;
  }

  .brand-logo-img {
    height: 44px;
  }

  .menu-toggle {
    display: inline-flex;
    min-width: 90px;
    min-height: 38px;
  }

  .nav-links {
    display: flex;
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    margin: 0;
    border-left: 1px solid rgba(16, 74, 145, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: -18px 0 36px rgba(8, 32, 63, 0.18);
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0.9rem 1.2rem;
    gap: 0.26rem;
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transform-origin: right center;
    transition: opacity 0.22s ease, transform 0.24s ease, visibility 0.22s ease;
  }

  .nav-links.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .nav-links > a,
  .nav-parent {
    width: 100%;
    padding: 0.72rem 0.6rem;
    border-radius: 10px;
    font-size: 0.94rem;
  }

  .nav-links > a::after,
  .nav-parent::after {
    display: none;
  }

  .nav-dropdown {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-top: 1px solid rgba(16, 74, 145, 0.11);
    border-bottom: 1px solid rgba(16, 74, 145, 0.11);
    padding: 0.16rem 0;
  }

  .nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(16, 74, 145, 0.18);
    background: #f6faff;
  }

  .nav-submenu {
    grid-column: 1 / -1;
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 0.24rem;
    border-radius: 10px;
    border-color: rgba(16, 74, 145, 0.14);
    background: #fbfdff;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: none;
    transition: max-height 0.24s ease, opacity 0.2s ease;
    box-shadow: none;
  }

  .nav-dropdown.open .nav-submenu {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links .nav-cta {
    width: 100%;
    justify-content: center;
    margin: 0.5rem 0 0.1rem;
    min-height: 44px;
    font-size: 0.9rem;
  }
}

/* Navigation final: simple + smooth */
.topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(16, 73, 142, 0.12);
  backdrop-filter: blur(10px);
  overflow: visible;
}

.topbar.scrolled,
.topbar.menu-open {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 22px rgba(10, 38, 74, 0.08);
}

.nav {
  min-height: 74px;
  position: relative;
}

.brand-logo-img {
  height: 48px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-links > a,
.nav-parent {
  color: #244f81;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.45rem 0.62rem;
  border-radius: 8px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-links > a::after,
.nav-parent::after {
  display: none;
}

.nav-links > a:not(.nav-cta):hover,
.nav-links > a:not(.nav-cta).active,
.nav-parent:hover,
.nav-dropdown.open .nav-parent {
  color: #0d3f78;
  background: rgba(74, 163, 255, 0.12);
}

.nav-submenu {
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.2s ease;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 40px;
  min-width: 44px;
  min-height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(16, 73, 142, 0.2);
  background: #ffffff;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #1f4f86;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
  .brand-logo-img {
    height: 42px;
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0.75rem;
    right: 0.75rem;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 170;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.18rem;
    padding: 0.65rem;
    border: 1px solid rgba(16, 73, 142, 0.14);
    border-left: 1px solid rgba(16, 73, 142, 0.14);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(8, 32, 63, 0.12);
    max-height: calc(100dvh - 98px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .nav-links.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links > a,
  .nav-parent {
    width: 100%;
    padding: 0.66rem 0.55rem;
  }

  .nav-dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    border-top: 1px solid rgba(16, 73, 142, 0.1);
    border-bottom: 1px solid rgba(16, 73, 142, 0.1);
    padding: 0.12rem 0;
  }

  .nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(16, 73, 142, 0.18);
    background: #f5f9ff;
  }

  .nav-sub-toggle::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid #1f4f86;
    border-bottom: 2px solid #1f4f86;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .nav-dropdown.open .nav-sub-toggle::before {
    transform: rotate(-135deg);
  }

  .nav-submenu {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    margin-top: 0.2rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: none;
    transition: max-height 0.22s ease, opacity 0.2s ease;
  }

  .nav-dropdown.open .nav-submenu {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links .nav-cta {
    width: 100%;
    margin: 0.45rem 0 0.1rem;
  }
}

/* Mobile alignment safeguards: applies site-wide */
@media (max-width: 980px) {
  .container {
    width: min(calc(100% - 1.4rem), var(--max));
  }

  main,
  section,
  article,
  .container,
  .grid,
  [class*='grid'],
  [class*='wrap'],
  [class*='panel'] {
    min-width: 0;
  }

  [class*='grid'] > *,
  [class*='wrap'] > *,
  [class*='panel'] > * {
    min-width: 0;
  }

  canvas,
  svg,
  iframe,
  video {
    max-width: 100%;
    display: block;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 1rem), var(--max));
  }

  .section-title {
    overflow-wrap: anywhere;
  }

  p,
  a,
  span,
  li,
  h1,
  h2,
  h3,
  h4 {
    word-wrap: break-word;
  }
}

/* Services page mobile alignment */
@media (max-width: 980px) {
  .sq-hero {
    min-height: 78vh;
    padding: 5.2rem 0 2.2rem;
  }

  .sq-sub {
    max-width: 100%;
    line-height: 1.6;
  }

  .sq-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .sq-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .sq-card,
  .sq-eco-card,
  .sq-case,
  .sq-method .panel {
    padding: 0.95rem;
  }

  .sq-matrix-wrap {
    min-height: 280px;
  }

  #sq-matrix-canvas {
    min-height: 280px;
  }

  .sq-method-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .sq-eco-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .sq-case-strip {
    grid-auto-columns: 88%;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
  }

  .sq-case-controls {
    margin-top: 0.7rem;
  }

  .sq-specs-track {
    gap: 1rem;
    font-size: 0.84rem;
    min-height: 40px;
  }
}

@media (max-width: 760px) {
  .sq-hero {
    min-height: 70vh;
    padding: 4.8rem 0 1.8rem;
  }

  .sq-hero-content h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem);
  }

  .sq-sub {
    font-size: 0.95rem;
  }

  .sq-metrics {
    grid-template-columns: 1fr;
  }

  .sq-metric strong {
    font-size: 1.3rem;
  }

  .sq-case-strip {
    grid-auto-columns: 94%;
  }

  .sq-portal .actions .btn {
    width: 100%;
  }
}

/* Professional visual system upgrades */
img {
  max-width: 100%;
  height: auto;
}

.card,
.panel,
.timeline-item,
.sq-card,
.sq-eco-card,
.sq-case,
.slide {
  position: relative;
  overflow: hidden;
}

.card::after,
.panel::after,
.timeline-item::after,
.sq-card::after,
.sq-eco-card::after,
.sq-case::after,
.slide::after {
  content: attr(data-short);
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(12, 62, 116, 0.72);
  background: rgba(74, 163, 255, 0.1);
  border: 1px solid rgba(25, 118, 210, 0.22);
}

.auto-icon-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 2.2rem;
}

.auto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(17, 86, 162, 0.22);
  background: linear-gradient(145deg, rgba(74, 163, 255, 0.2), rgba(15, 95, 187, 0.08));
  flex-shrink: 0;
}

.auto-icon svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

body[data-page='services']:not([data-template]) .sq-card::after,
body[data-page='services']:not([data-template]) .sq-eco-card::after,
body[data-page='services']:not([data-template]) .sq-case::after {
  display: none;
}

body[data-page='services']:not([data-template]) .sq-curated-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(74, 163, 255, 0.22), rgba(15, 95, 187, 0.12));
  border-color: rgba(17, 86, 162, 0.3);
}

.ab-leader-card img {
  border: 1px solid rgba(17, 69, 136, 0.16);
  box-shadow: 0 10px 20px rgba(8, 32, 63, 0.12);
}

.slider-track .slide {
  border-left: 3px solid rgba(74, 163, 255, 0.42);
}

@media (max-width: 980px) {
  .card::after,
  .panel::after,
  .timeline-item::after,
  .sq-card::after,
  .sq-eco-card::after,
  .sq-case::after,
  .slide::after {
    top: 0.55rem;
    right: 0.55rem;
    width: 26px;
    height: 26px;
    font-size: 0.62rem;
  }

  .auto-icon-title {
    padding-right: 1.9rem;
  }
}

/* Theme and readability pass: dark blue, light blue, white */
:root {
  --theme-dark: #082d63;
  --theme-mid: #0b63c9;
  --theme-light: #4aa3ff;
  --theme-white: #ffffff;
  --text-on-dark: #eaf4ff;
  --text-on-dark-soft: #c7dbf3;
  --text-on-light: #0a2f5e;
}

::selection {
  color: #ffffff;
  background: rgba(11, 99, 201, 0.75);
}

body {
  color: var(--text-on-light);
}

section[class^='sq-'],
section[class^='cq-'],
section[class^='px-'],
section[class^='pb-'],
section[class^='ca-'],
section[class^='ia-'],
section[class^='so-'],
section[class^='gv-'],
section[class^='ms-'],
section.ix-services,
section.ix-differentiator,
section.ix-portal {
  color: var(--text-on-dark);
}

section[class^='sq-'] p,
section[class^='cq-'] p,
section[class^='px-'] p,
section[class^='pb-'] p,
section[class^='ca-'] p,
section[class^='ia-'] p,
section[class^='so-'] p,
section[class^='gv-'] p,
section[class^='ms-'] p,
section.ix-services p,
section.ix-differentiator p,
section.ix-portal p,
section[class^='sq-'] small,
section[class^='cq-'] small,
section[class^='px-'] small,
section[class^='pb-'] small,
section[class^='ca-'] small,
section[class^='ia-'] small,
section[class^='so-'] small,
section[class^='gv-'] small,
section[class^='ms-'] small,
section.ix-services small,
section.ix-differentiator small,
section.ix-portal small {
  color: var(--text-on-dark-soft);
}

section[class^='sq-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='cq-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='px-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='pb-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='ca-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='ia-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='so-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='gv-'] a:not(.btn):not(.card-link):not(.nav-cta),
section[class^='ms-'] a:not(.btn):not(.card-link):not(.nav-cta),
section.ix-services a:not(.btn):not(.card-link):not(.nav-cta),
section.ix-differentiator a:not(.btn):not(.card-link):not(.nav-cta),
section.ix-portal a:not(.btn):not(.card-link):not(.nav-cta) {
  color: #dff0ff;
}

section[class^='sq-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='cq-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='px-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='pb-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='ca-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='ia-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='so-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='gv-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section[class^='ms-'] a:not(.btn):not(.card-link):not(.nav-cta):hover,
section.ix-services a:not(.btn):not(.card-link):not(.nav-cta):hover,
section.ix-differentiator a:not(.btn):not(.card-link):not(.nav-cta):hover,
section.ix-portal a:not(.btn):not(.card-link):not(.nav-cta):hover {
  color: #ffffff;
}

section[class^='sq-'] .section-title,
section[class^='cq-'] .section-title,
section[class^='px-'] .section-title,
section[class^='pb-'] .section-title,
section[class^='ca-'] .section-title,
section[class^='ia-'] .section-title,
section[class^='so-'] .section-title,
section[class^='gv-'] .section-title,
section[class^='ms-'] .section-title,
section.ix-services .section-title,
section.ix-differentiator .section-title,
section.ix-portal .section-title {
  color: var(--theme-white);
}

input,
select,
textarea {
  color: #0a2f5e;
}

/* Desktop dropdown stability: keep Services submenu open while moving cursor */
@media (min-width: 981px) {
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }

  .nav-submenu {
    top: calc(100% + 0.35rem);
  }

  .nav-dropdown:focus-within .nav-submenu,
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown.open .nav-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}