/* Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: SkyGentic Cobalt · enrichment: H9 CSS/SVG orchestration · nav: N5 · footer: Ft5 */
/* ==========================================================================
   SkyGentic AI / Hallmark Design System
   Colors sourced from DESIGN_SYSTEM.md
   ========================================================================== */

/* 1. Base & Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; padding: 0; background-color: var(--color-background);
  color: var(--color-body); font-family: var(--font-family-body); overflow-x: clip;
}

/* Navigation & Dropdown */
[data-site-header], [data-site-footer] { display: contents; }
.navbar-wrapper {
  position: sticky; top: 0; left: 0; right: 0; z-index: 1000;
  width: 100%; border-bottom: 1px solid transparent; box-shadow: none;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.navbar-container {
  width: min(100%, var(--container-max-width)); min-height: 72px;
  display: flex; align-items: center; justify-content: flex-start;
  margin: 0 auto; padding: 0 var(--space-6);
}
.navbar-wrapper.is-scrolled {
  background: var(--color-navbar-scrolled); border-bottom-color: var(--color-border); box-shadow: var(--shadow-nav);
}
.nav-brand { display: flex; align-items: center; color: var(--color-heading); text-decoration: none; }
.nav-wordmark { display: block; width: 250px; max-width: 100%; height: auto; }
.nav-menu { display: flex; align-items: center; gap: var(--space-6); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-link, .nav-signin {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 42px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
  background: transparent; box-shadow: none;
  color: var(--color-body); font-family: var(--font-family-body);
  font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-link:hover, .nav-link:focus-visible,
.nav-signin:hover, .nav-signin:focus-visible {
  background: transparent; color: var(--color-primary-blue);
  box-shadow: none; transform: none;
}
.nav-link:active, .nav-signin:active { color: var(--color-primary-blue); transform: translateY(0); }
.nav-text-wrapper {
  display: flex; flex-direction: column; height: 20px; overflow: hidden; position: relative;
}
.nav-text-slide {
  display: block; line-height: 20px; white-space: nowrap;
  transition: transform var(--transition-normal);
}
.nav-link:hover .nav-text-slide,
.nav-link:focus-visible .nav-text-slide,
.nav-signin:hover .nav-text-slide,
.nav-signin:focus-visible .nav-text-slide {
  transform: none;
}
.nav-actions { display: flex; align-items: center; gap: var(--space-6); margin-left: var(--space-8); }
.mobile-menu-toggle, .mobile-menu-panel { display: none; }
.mobile-menu-toggle {
  width: 48px; height: 48px; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--color-heading); cursor: pointer;
  transition: transform var(--transition-fast);
}
.mobile-menu-icon { position: relative; width: 24px; height: 24px; }
.mobile-menu-icon span {
  position: absolute; left: 2px; width: 20px; height: 2px;
  border-radius: var(--radius-line); background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mobile-menu-icon-open span:nth-child(1) { top: 5px; }
.mobile-menu-icon-open span:nth-child(2) { top: 11px; }
.mobile-menu-icon-open span:nth-child(3) { top: 17px; }
.mobile-menu-icon-close { display: none; }
.mobile-menu-icon-close span { top: 11px; }
.mobile-menu-icon-close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-icon-close span:nth-child(2) { transform: rotate(-45deg); }
.mobile-menu-toggle:hover { transform: translateY(-1px); }
.mobile-menu-toggle:active { transform: translateY(0); }
.mobile-menu-toggle:disabled, .mobile-menu-toggle[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.mobile-menu-toggle[data-state="loading"] { opacity: .72; cursor: progress; }
.mobile-menu-toggle[data-state="success"] { color: var(--color-secondary-blue); }
.mobile-menu-toggle[data-state="error"] { color: var(--color-amber); }
.mobile-menu-panel {
  position: fixed; top: 72px; left: 0; right: auto;
  width: 60vw;
  height: calc(100dvh - 72px); overflow-y: auto;
  background: var(--color-background); color: var(--color-body);
  border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-nav);
  z-index: 1;
  opacity: 0; transform: translateX(-100%); visibility: hidden; pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
}
.mobile-menu-content {
  width: 100%; max-width: var(--container-max-width); min-height: 100%;
  margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.mobile-menu-list { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu-item { display: flex; flex-direction: column; }
.mobile-menu-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: flex-start;
  gap: var(--space-4); border: 0; background: transparent; color: var(--color-body);
  padding: var(--space-3) 0; font-family: var(--font-family-body); font-size: 1rem;
  font-weight: 500; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--transition-fast);
}
.mobile-menu-row:hover, .mobile-menu-row:focus-visible { color: var(--color-secondary-blue); transform: translateX(2px); }
.mobile-menu-row:active { transform: translateX(0); }
.mobile-menu-row:disabled, .mobile-menu-row[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.mobile-menu-row[data-state="loading"] { opacity: .72; cursor: progress; }
.mobile-menu-row[data-state="success"] { color: var(--color-secondary-blue); }
.mobile-menu-row[data-state="error"] { color: var(--color-amber); }
.mobile-menu-row[aria-expanded="true"] svg { transform: rotate(90deg); }
.mobile-menu-row svg { flex-shrink: 0; transition: transform var(--transition-fast); }
.mobile-submenu {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-5);
}
.mobile-submenu[hidden] { display: none; }
.mobile-submenu-link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-2) 0; color: var(--color-body);
  text-decoration: none; font-family: var(--font-family-body);
  transition: transform var(--transition-fast);
}
.mobile-submenu-link span { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.mobile-submenu-link strong { font-size: 1rem; font-weight: 700; line-height: 1.25; color: inherit; }
.mobile-submenu-link small { font-size: .9375rem; line-height: 1.35; color: var(--color-secondary-text); }
.mobile-submenu-heading {
  display: block; padding: var(--space-3) 0 var(--space-1);
  color: var(--color-secondary-text); font-family: var(--font-family-body);
  font-size: .8125rem; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}
.mobile-submenu-link:hover, .mobile-submenu-link:focus-visible { color: var(--color-secondary-blue); transform: translateX(2px); }
.mobile-submenu-link:active { transform: translateX(0); }
.mobile-submenu-link[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.mobile-submenu-link[data-state="loading"] { opacity: .72; cursor: progress; }
.mobile-submenu-link[data-state="success"] { color: var(--color-secondary-blue); }
.mobile-submenu-link[data-state="error"] { color: var(--color-amber); }
.mobile-menu-demo {
  width: fit-content; align-self: flex-start; margin: 0 0 var(--space-4) 0;
}

/* Dropdown */
.services-menu { position: relative; display: flex; align-items: center; }
.services-menu-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 42px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: transparent; box-shadow: none;
  color: var(--color-body); cursor: pointer; font-family: var(--font-family-body);
  font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.services-menu-trigger svg { transition: transform var(--transition-normal); }
.services-menu:not(.is-selection-closed):hover .services-menu-trigger,
.services-menu:not(.is-selection-closed):focus-within .services-menu-trigger,
.services-menu.is-open .services-menu-trigger {
  background: transparent; color: var(--color-primary-blue);
  box-shadow: none; transform: none;
}
.services-menu:not(.is-selection-closed):hover:not(:focus-within) .services-menu-trigger svg,
.services-menu.is-open .services-menu-trigger svg { transform: rotate(180deg); }
.services-menu:not(.is-selection-closed):hover .services-menu-trigger .nav-text-slide,
.services-menu:not(.is-selection-closed):focus-within .services-menu-trigger .nav-text-slide,
.services-menu.is-open .services-menu-trigger .nav-text-slide {
  transform: none;
}
.services-menu-trigger:active { color: var(--color-primary-blue); transform: translateY(0); }
.services-menu-trigger:focus-visible, .service-dropdown-link:focus-visible {
  outline: 2px solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset);
}
.service-dropdown {
  position: absolute; top: calc(100% + var(--space-4)); left: -12px;
  min-width: 220px; padding: var(--space-2);
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 36px oklch(19% .025 255 / .08), 0 4px 12px oklch(19% .025 255 / .04);
  display: flex; flex-direction: column; gap: var(--space-1);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  pointer-events: none; z-index: 1100;
}
.service-dropdown--solutions { min-width: 260px; gap: var(--space-2); }
.service-dropdown::before {
  content: ''; position: absolute; top: -20px; left: -10px; right: -10px; height: 20px; background: transparent;
}
.services-menu:not(.is-selection-closed):hover .service-dropdown,
.services-menu:not(.is-selection-closed):focus-within .service-dropdown,
.services-menu.is-open .service-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.service-dropdown-group {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.service-dropdown-heading {
  display: block; padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-secondary-text); font-family: var(--font-family-body);
  font-size: .75rem; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}
.service-dropdown-link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3); color: var(--color-body);
  text-decoration: none; font-family: var(--font-family-body);
  font-size: 0.9375rem; font-weight: 700; border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.service-icon-img {
  display: block; width: 48px; height: 48px; padding: var(--space-3);
  object-fit: contain; background: var(--color-blue-50); border-radius: var(--radius-sm);
  flex-shrink: 0; transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.service-dropdown-link:hover, .service-dropdown-link:focus-visible {
  background: var(--color-blue-50); color: var(--color-primary-blue); transform: translateX(2px);
}
.service-dropdown-link:hover .service-icon-img, .service-dropdown-link:focus-visible .service-icon-img {
  background: var(--color-blue-100); transform: translateY(-1px);
}

/* Layout */
.container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--space-6); }
.container-focus { width: 100%; max-width: var(--container-focus-width); margin: 0 auto; padding: 0 var(--space-6); }
.skip-link {
  position: absolute;
  top: -999px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary-blue);
  color: var(--color-card);
  padding: var(--space-3) var(--space-6);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 9999px;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--color-heading);
  outline-offset: 2px;
}

/* Buttons & Bubbles */
.arrow-bubble, .btn-icon-bubble, .bento-action-bubble {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--transition-fast);
}

.bento-action-bubble {
  width: 20px;
  height: 20px;
}
.btn-glass .arrow-bubble, .btn-glass .btn-icon-bubble,
.btn-white .arrow-bubble, .btn-white .btn-icon-bubble {
  background: var(--color-primary-blue); color: var(--color-card);
}
.btn-primary:hover .arrow-bubble, .btn-primary:hover .btn-icon-bubble,
.btn-glass:hover .arrow-bubble, .btn-glass:hover .btn-icon-bubble,
.btn-white:hover .arrow-bubble, .btn-white:hover .btn-icon-bubble,
.action-link-arrow:hover .arrow-bubble, .bento-card-action-link:hover .bento-action-bubble { transform: rotate(45deg); }
.action-link-arrow, .bento-card-action-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-family-body); font-size: 14px; font-weight: 600;
  color: var(--color-heading); text-decoration: none; transition: gap var(--transition-fast);
}

.btn-primary, .btn-secondary, .btn-glass, .btn-white {
  backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: antialiased;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 8px 6px 20px; border-radius: 9999px; font-family: var(--font-family-body);
  font-weight: 500; font-size: 15px; text-decoration: none; border: none; cursor: pointer;
  min-height: 48px; position: relative; overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary {
  background: var(--bg-gradient-primary-cta);
  color: var(--color-card);
  box-shadow: var(--shadow-btn-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--color-cta-hover);
  box-shadow: var(--shadow-btn-primary-hover);
}

.btn-glass {
  background: var(--color-card);
  color: var(--color-primary-blue);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-ambient-card);
}

.btn-glass:hover {
  transform: translateY(-2px);
  background: var(--color-section-alt);
}

.btn-white {
  background: var(--color-card);
  color: var(--color-primary-blue);
  box-shadow: 0 4px 20px oklch(60% .19 255 / .18);
}

.btn-white:hover {
  transform: translateY(-2px);
  background: var(--color-background);
}
.btn-icon-outline {
  width: var(--space-12);
  height: var(--space-12);
  min-height: var(--space-12);
  padding: 0;
  color: var(--color-heading);
  background: transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.btn-icon-outline svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-icon {
  width: var(--space-5);
  height: var(--space-5);
  background: currentColor;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}
.social-icon-linkedin { --social-icon: url("../assets/social/linkedin.svg"); }
.social-icon-github { --social-icon: url("../assets/social/github.svg"); }
.social-icon-instagram { --social-icon: url("../assets/social/instagram.svg"); }
.social-icon-x { --social-icon: url("../assets/social/x.svg"); }
.btn-icon-outline:hover,
.btn-icon-outline:focus-visible {
  color: var(--color-primary-blue);
  background: transparent;
  border-color: var(--color-primary-blue);
  box-shadow: var(--shadow-nav);
  transform: translateY(-2px);
}

.btn-text-wrapper {
  display: flex;
  flex-direction: column;
  height: 20px;
  overflow: hidden;
  position: relative;
}

.btn-text-slide {
  display: block;
  transition: transform var(--transition-normal);
  line-height: 20px;
}

.btn-primary:hover .btn-text-slide,
.btn-glass:hover .btn-text-slide,
.btn-white:hover .btn-text-slide {
  transform: translateY(-20px);
}

/* Common Section Typography & Backgrounds */
.surface-page { background: var(--color-background); color: var(--color-body); }
.text-body-compact { color: var(--color-body); font-size: 1rem; line-height: 1.5; }
.text-body-small { color: var(--color-body); font-size: 0.875rem; }
.nav-section-title { color: var(--color-heading); font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.nav-subtle { font-size: 0.9375rem; }
.nav-subtle:hover,
.nav-subtle:focus-visible { transform: translateX(2px); }
.nav-subtle:active { transform: translateX(0); }
.rule-top { border-top: 1px solid var(--color-border); }
.rule-left-desktop { border-left: 1px solid var(--color-border); }
@media (max-width: 991px) {
  .rule-left-desktop { border-left: 0; }
}
.section-metrics, .section-capabilities, .section-marquee { background: var(--color-card); border-top: 1px solid var(--color-border); }
.headline-homepage, .capabilities-main-title, .sticky-panel-title, .testimonial-title {
  font-family: var(--font-family-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-heading);
}
.resources-page .resources-hero__title, .contact-page .resources-hero__title {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-primary-blue);
  font-family: var(--font-family-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.hero-lead, .capabilities-main-desc, .sticky-panel-desc, .testimonial-details { color: var(--color-body); line-height: 1.55; }

/* Hero */
.section-hero {
  position: relative; min-height: clamp(700px, 84svh, 860px); display: flex; align-items: center;
  padding-top: clamp(40px, 5vh, 64px); padding-bottom: clamp(16px, 2vw, 28px);
  background-color: var(--color-background); background-image: var(--bg-hero-composition), var(--bg-gradient-hero);
  background-repeat: no-repeat; background-size: 100% 100%; background-position: center;
  overflow: hidden; isolation: isolate;
}
.section-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg-hero-scrim);
  pointer-events: none; z-index: 0;
}
.section-hero::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bg-hero-headline-depth);
  pointer-events: none; z-index: 0;
}
.section-hero .container {
  position: relative; z-index: 1; width: 100%;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 0.95fr;
  align-items: center; gap: clamp(48px, 6vw, 96px);
}
.hero-copy { max-width: 635px; }
.hero-eyebrow { font-family: var(--font-family-body); font-size: 15px; color: var(--color-secondary-text); margin-bottom: 16px; }
.headline-homepage { font-size: 3.25rem; max-width: 635px; margin: 0 0 20px; }
.hero-lead { font-size: 18px; max-width: 480px; margin-bottom: 24px; }
.hero-cta-group { display: flex; align-items: center; gap: var(--space-4); }

/* -------------------------------------------------------------
 * Hero Automation Visual (Specification v4.0)
 * ------------------------------------------------------------- */
.hero-agentic-visual {
  position: relative;
  --hero-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hero-dur-short: 220ms;
  --hero-dur-long: 420ms;
  width: min(100%, 600px);
  height: 560px;
  justify-self: end;
  pointer-events: none;
  transform: translateZ(0);
  isolation: isolate;
}

.hero-connectors-svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 600px;
  height: 560px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  transform: translateX(-50%);
  transform-origin: top center;
}

.connector-line {
  stroke: oklch(72% 0.080 250 / 0.18);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
  opacity: 0.14;
  transition: stroke var(--hero-dur-long) var(--hero-ease-out), opacity var(--hero-dur-long) var(--hero-ease-out);
}

.connector-line.is-active {
  stroke: var(--color-primary-blue);
  stroke-opacity: 0.85;
  stroke-dasharray: none;
  opacity: 1;
}

.connector-line--feed,
.connector-line--summary {
  opacity: 0;
}

.connector-pulse {
  opacity: 0;
  fill: var(--color-primary-blue);
  filter: drop-shadow(0 0 6px var(--color-primary-blue));
  transition: opacity var(--hero-dur-short) var(--hero-ease-out);
}

.connector-pulse.is-pulsing {
  opacity: 1;
  animation: pulseFlow 560ms var(--hero-ease-out) both;
}

.pulse-req { offset-path: path("M 255 150 C 297 116, 276 59.5, 234 59.5"); }
.pulse-plan { offset-path: path("M 210 205 C 190 205, 199 196.5, 179 196.5"); }
.pulse-core { offset-path: path("M 249.6 205 Q 300 165.4 350.4 205"); }
.pulse-a1 { offset-path: path("M 390 163.2 C 419 163.2, 411 55, 440 55"); }
.pulse-a2 { offset-path: path("M 390 205 C 419 205, 411 184, 440 184"); }
.pulse-a3 { offset-path: path("M 390 244.6 C 419 244.6, 411 326, 440 326"); }
.pulse-a4 { offset-path: path("M 300 260 C 300 270, 300 278, 300 288"); }
.pulse-a5 { offset-path: path("M 210 244.6 C 171.7 244.6, 182.3 326, 144 326"); }
.pulse-feed { offset-path: path("M 210 244.6 C 176 274, 166 372, 244 408"); fill: var(--color-teal); filter: drop-shadow(0 0 6px var(--color-teal)); }
.pulse-summary { offset-path: path("M 390 244.6 C 444 290, 440 446, 320 474"); fill: var(--color-teal); filter: drop-shadow(0 0 6px var(--color-teal)); }

.connector-pulse.is-pulsing.pulse-plan {
  animation-duration: 520ms;
  animation-iteration-count: infinite;
}

.connector-pulse.is-pulsing.pulse-core,
.connector-pulse.is-pulsing.pulse-summary {
  animation-duration: 720ms;
}

@keyframes pulseFlow {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.agent-scenario {
  position: absolute;
  top: 0;
  left: 50%;
  width: 600px;
  height: 560px;
  z-index: 2;
  transform: translateX(-50%);
  transform-origin: top center;
}

/* 1. Request Card */
.request-card {
  position: absolute;
  top: 16px;
  left: -16px;
  width: 250px;
  z-index: 6;
  border: 1px solid var(--color-border);
  background: oklch(99% 0.006 250 / 0.86);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 48px oklch(19% 0.025 255 / 0.08), inset 0 1px 0 oklch(99% 0.006 250 / 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateX(-32px) scale(0.96);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.hero-agentic-visual[data-stage="request"] .request-card,
.hero-agentic-visual[data-stage="planning"] .request-card,
.hero-agentic-visual[data-stage="orchestration"] .request-card,
.hero-agentic-visual[data-stage="delegating"] .request-card,
.hero-agentic-visual[data-stage="executing"] .request-card,
.hero-agentic-visual[data-stage="reporting"] .request-card,
.hero-agentic-visual[data-stage="summary"] .request-card,
.hero-agentic-visual[data-stage="idle"] .request-card {
  opacity: 1;
  transform: none;
}

.hero-agentic-visual[data-stage="request"] .request-card {
  animation: requestCardEntrance 1040ms var(--hero-ease-out) 360ms both;
}

@keyframes requestCardEntrance {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.request-card__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-1);
}

.request-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-blue);
}

.request-card__text {
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.92rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-heading);
  text-align: center;
  transform: translateY(-1px);
}

/* 2. Planning Card */
.planning-card {
  position: absolute;
  top: 122px;
  left: -16px;
  width: 195px;
  z-index: 5;
  border: 1px solid var(--color-border);
  background: oklch(99% 0.006 250 / 0.84);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 48px oklch(19% 0.025 255 / 0.06), inset 0 1px 0 oklch(99% 0.006 250 / 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateX(-28px) scale(0.96);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.hero-agentic-visual:not([data-stage="request"]) .planning-card {
  opacity: 1;
  transform: none;
}

.planning-card__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-blue);
  margin-bottom: var(--space-2);
}

.planning-card__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.planning-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: 0.74rem;
  color: var(--color-body);
  opacity: 0.38;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.planning-row.is-done {
  opacity: 1;
  color: var(--color-heading);
}

.plan-check {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  position: relative;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.planning-row.is-done .plan-check {
  border-color: var(--color-primary-blue);
  background: var(--color-primary-blue);
}

.planning-row.is-done .plan-check::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 1.5px;
  width: 3.5px;
  height: 6px;
  border: solid var(--color-card);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* 3. Central AI Core Orchestrator Node */
.orchestrator-node {
  position: absolute;
  left: 300px;
  top: 205px;
  transform: translate(-50%, -50%) scale(0.96);
  width: 180px;
  min-height: 110px;
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  background: oklch(99% 0.006 250 / 0.88);
  backdrop-filter: blur(28px);
  border: 1px solid oklch(60% 0.120 190 / 0.35);
  box-shadow: 0 20px 60px oklch(53% 0.200 258 / 0.18), inset 0 1px 0 oklch(99% 0.006 250 / 0.6);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.orchestrator-node::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid oklch(53% 0.200 258 / 0.18);
  border-radius: calc(var(--radius-xl) + 6px);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--hero-dur-long) var(--hero-ease-out), transform var(--hero-dur-long) var(--hero-ease-out);
  pointer-events: none;
}

.hero-agentic-visual[data-stage="orchestration"] .orchestrator-node,
.hero-agentic-visual[data-stage="delegating"] .orchestrator-node,
.hero-agentic-visual[data-stage="executing"] .orchestrator-node,
.hero-agentic-visual[data-stage="reporting"] .orchestrator-node {
  transform: translate(-50%, -50%) scale(1.02);
  border-color: var(--color-primary-blue);
  box-shadow: 0 24px 72px oklch(53% 0.220 258 / 0.28), 0 0 24px oklch(60% 0.150 190 / 0.25);
}

.hero-agentic-visual[data-stage="orchestration"] .orchestrator-node::after,
.hero-agentic-visual[data-stage="delegating"] .orchestrator-node::after,
.hero-agentic-visual[data-stage="executing"] .orchestrator-node::after,
.hero-agentic-visual[data-stage="reporting"] .orchestrator-node::after {
  opacity: 1;
  transform: scale(1.04);
}

.hero-agentic-visual[data-stage="summary"] .orchestrator-node,
.hero-agentic-visual[data-stage="idle"] .orchestrator-node {
  transform: translate(-50%, -50%) scale(1);
  border-color: var(--color-teal);
  box-shadow: 0 20px 60px oklch(68% 0.160 175 / 0.2);
}

.orchestrator-node__glow {
  position: absolute;
  inset: -12px;
  border-radius: calc(var(--radius-xl) + 12px);
  background: radial-gradient(circle at 50% 50%, oklch(68% 0.15 252 / 0.2) 0%, oklch(68% 0.15 252 / 0) 70%);
  pointer-events: none;
  z-index: -1;
  animation: coreGlowPulse 3s var(--hero-ease-in-out) infinite alternate;
}

@keyframes coreGlowPulse {
  0% { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 0.9; transform: scale(1.06); }
}

.orchestrator-node__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}

.orchestrator-node__wordmark {
  height: 22px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.orchestrator-node__state {
  font-family: var(--font-family-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-secondary-text);
  line-height: 1.3;
}

.orchestrator-node__typing {
  display: flex;
  gap: 4px;
  margin-top: var(--space-2);
}

.orchestrator-node__typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary-blue);
  opacity: 0.3;
  animation: typingDot 1.2s var(--hero-ease-in-out) infinite;
  animation-play-state: paused;
}

.orchestrator-node__typing i:nth-child(2) { animation-delay: 160ms; }
.orchestrator-node__typing i:nth-child(3) { animation-delay: 320ms; }

.hero-agentic-visual[data-stage="planning"] .orchestrator-node__typing i,
.hero-agentic-visual[data-stage="orchestration"] .orchestrator-node__typing i,
.hero-agentic-visual[data-stage="delegating"] .orchestrator-node__typing i,
.hero-agentic-visual[data-stage="executing"] .orchestrator-node__typing i,
.hero-agentic-visual[data-stage="reporting"] .orchestrator-node__typing i {
  animation-play-state: running;
}

@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  45% { opacity: 1; transform: translateY(-3px) scale(1.3); }
}

/* 4. Agent Cards Grid */
.agent-card {
  position: absolute;
  width: 160px;
  min-height: 78px;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  z-index: 4;
  border: 1px solid var(--color-border);
  background: oklch(99% 0.006 250 / 0.84);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 36px oklch(19% 0.025 255 / 0.06);
  opacity: 0;
  transform: translateX(32px) scale(0.92);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.agent-card--1 { right: 0; top: 16px; }
.agent-card--2 { right: 0; top: 145px; }
.agent-card--3 { right: 0; top: 287px; }
.agent-card--4 { left: 220px; top: 288px; }
.agent-card--5 { left: -16px; top: 287px; }

.agent-card.is-visible {
  opacity: 1;
  transform: none;
}

.agent-card.is-dispatching {
  opacity: 1;
  transform: scale(1.01);
  border-color: oklch(53% 0.200 258 / 0.46);
  box-shadow: 0 14px 38px oklch(53% 0.200 258 / 0.14);
}

.agent-card.is-active {
  opacity: 1;
  transform: scale(1.035) translateY(-2px);
  border-color: var(--color-primary-blue);
  box-shadow: 0 16px 44px oklch(53% 0.200 258 / 0.22);
}

.agent-card.is-done {
  opacity: 0.9;
  border-color: oklch(68% 0.160 175 / 0.35);
}

.agent-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-1);
}

.agent-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-blue);
}

.agent-card__title {
  font-family: var(--font-family-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-heading);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card__check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.agent-card.is-done .agent-card__check {
  opacity: 1;
  transform: scale(1);
}

.agent-card__status {
  display: block;
  font-family: var(--font-family-body);
  font-size: 0.7rem;
  color: var(--color-secondary-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-2);
}

.agent-card__progress {
  display: block;
  height: 3px;
  border-radius: var(--radius-line);
  background: oklch(90% 0.01 250);
  overflow: hidden;
}

.agent-card__progress span {
  display: block;
  height: 100%;
  background: var(--color-primary-blue);
  transform-origin: left center;
  transition: transform var(--transition-smooth);
}

.agent-card.is-done .agent-card__progress span {
  background: var(--color-teal);
}

/* 5. Live Activity Feed Log Card */
.activity-feed-card {
  position: absolute;
  left: -16px;
  top: 382px;
  width: 260px;
  z-index: 6;
  border: 1px solid var(--color-border);
  background: oklch(99% 0.006 250 / 0.86);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 48px oklch(19% 0.025 255 / 0.06), inset 0 1px 0 oklch(99% 0.006 250 / 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateX(-28px) scale(0.96);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.activity-feed-card.is-visible {
  opacity: 1;
  transform: none;
}

.activity-feed-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.activity-feed-card__title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-blue);
}

.activity-feed-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 8px var(--color-teal);
  opacity: 0.72;
}

.hero-agentic-visual[data-stage="reporting"] .activity-feed-card__dot {
  animation: liveFeedPulse 1.8s var(--hero-ease-in-out) infinite;
}

@keyframes liveFeedPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.activity-feed-card__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 125px;
  overflow: hidden;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: 0.72rem;
  color: var(--color-body);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.feed-item.feed-item--enter {
  opacity: 1;
  transform: none;
}

.feed-item__check {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6. Workflow Summary Card */
.completion-card {
  position: absolute;
  right: 0;
  top: 382px;
  width: 280px;
  z-index: 7;
  border: 1px solid oklch(68% 0.160 175 / 0.4);
  background: oklch(99% 0.006 250 / 0.9);
  backdrop-filter: blur(28px);
  box-shadow: 0 20px 60px oklch(68% 0.160 175 / 0.18), inset 0 1px 0 oklch(99% 0.006 250 / 0.6);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.completion-card.is-visible {
  opacity: 1;
  transform: none;
}

.completion-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.completion-card__badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.completion-card__title {
  font-family: var(--font-family-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-heading);
}

.completion-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.completion-card__item {
  display: flex;
  flex-direction: column;
  background: oklch(96% 0.005 250 / 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.completion-card__val {
  font-family: var(--font-family-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-blue);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hero-agentic-visual[data-stage="summary"] .completion-card__val {
  animation: summaryValueReveal 720ms var(--hero-ease-out) both;
}

.hero-agentic-visual[data-stage="summary"] .completion-card__item:nth-child(2) .completion-card__val { animation-delay: 90ms; }
.hero-agentic-visual[data-stage="summary"] .completion-card__item:nth-child(3) .completion-card__val { animation-delay: 180ms; }
.hero-agentic-visual[data-stage="summary"] .completion-card__item:nth-child(4) .completion-card__val { animation-delay: 270ms; }

@keyframes summaryValueReveal {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.completion-card__lbl {
  font-family: var(--font-family-body);
  font-size: 0.68rem;
  color: var(--color-secondary-text);
  margin-top: 2px;
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .hero-agentic-visual *,
  .hero-agentic-visual *::before,
  .hero-agentic-visual *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Metrics */
.section-metrics { padding: 90px 0; }
.features-composite-grid { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 48px; align-items: center; }
.metrics-heading { font-family: var(--font-family-display); font-size: 2.25rem; font-weight: 500; line-height: 1.2; color: var(--color-heading); margin-bottom: 24px; }
.section-metrics .metrics-mobile-break, .section-metrics .metrics-tablet-break { display: none; }
.stat-block { display: flex; flex-direction: column; }
.stat-digit { font-family: var(--font-family-display); font-size: 3.5rem; font-weight: 500; line-height: 1.0; letter-spacing: -0.02em; color: var(--color-primary-blue); }
.stat-label { font-family: var(--font-family-body); font-size: 15px; font-weight: 400; color: var(--color-body); margin-top: 6px; }
.stat-separator { width: 100%; height: 1px; background: var(--color-border); margin: 24px 0; }
.features-right-wrapper { display: flex; flex-direction: column; }
.features-right-title { font-family: var(--font-family-display); font-size: 1.35rem; font-weight: 500; color: var(--color-heading); margin: 0 0 24px; line-height: 1.25; }
.features-chips-flex { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chip-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 9999px; font-family: var(--font-family-body); font-size: 14.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: default; transition: transform var(--transition-fast), background var(--transition-fast);
}
.chip-pill.glass { background: var(--color-card); color: var(--color-primary-blue); border: 1px solid var(--color-border); backdrop-filter: blur(16px); }
.chip-pill.glass:hover { background: var(--color-background); }
.chip-pill.white { background: var(--bg-gradient-primary-cta); color: var(--color-card); font-weight: 600; box-shadow: var(--shadow-btn-primary); }
.chip-pill.white:hover { background: var(--color-cta-hover); }
.chip-pill.glass:hover, .chip-pill.white:hover { transform: translateY(-2px); }

/* Marquee */
.section-marquee { padding: clamp(16px, 2vw, 24px) 0; overflow: hidden; }
.marquee-container {
  width: min(95vw, 1780px);
  margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 48px);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.marquee-track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: marquee-scroll var(--motion-marquee-duration) linear infinite; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-16); padding-right: var(--space-16); }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-family-display); font-size: 1.25rem; font-weight: 500;
  color: var(--color-body); filter: grayscale(100%); opacity: 0.65; transition: filter var(--transition-fast), opacity var(--transition-fast);
}
.marquee-item:hover { filter: grayscale(0%); opacity: 1; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }

/* Capabilities */
.section-capabilities { padding: 100px 0 120px; position: relative; overflow: hidden; }
.capabilities-header { text-align: left; max-width: 635px; margin-bottom: 40px; }
.capabilities-main-title { font-size: 2.75rem; margin: 0 0 12px; }
.capabilities-main-desc { font-size: 1.125rem; margin: 0; }
.bento-staggered-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  align-items: start;
}

.bento-glow-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 850px;
  height: 650px;
  background: radial-gradient(circle at 50% 50%, oklch(94% .035 250 / .58) 0%, oklch(98% .01 250 / 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.bento-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.bento-column.col-1 {
  margin-top: 140px;
}

.bento-column.col-2 {
  margin-top: 0px;
}

.bento-column.col-3 {
  margin-top: -60px;
}
.bento-column { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.bento-column.col-1 { margin-top: 140px; }
.bento-column.col-3 { margin-top: -60px; }
.bento-feature-card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 20px; padding: 32px 30px; box-shadow: 0 4px 24px oklch(19% .025 255 / .03);
  display: flex; flex-direction: column; transition: transform var(--transition-smooth); position: relative;
}

.bento-feature-card:hover {
  transform: translateY(-5px); border-color: var(--color-primary-blue); box-shadow: 0 16px 40px oklch(60% .19 255 / .12);
}

.bento-card-icon-badge {
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-card);
  border: 1.5px solid var(--color-primary-blue); color: var(--color-primary-blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}

.bento-card-title {
  font-family: var(--font-family-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-heading);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}

.bento-card-desc {
  font-family: var(--font-family-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-body);
  margin: 0 0 24px 0;
  flex-grow: 1;
}

.capabilities-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  position: relative;
  z-index: 2;
}

/* Forge Working Principle Infographic */
.section-forge-principle {
  position: relative;
  overflow: clip;
  background: var(--bg-gradient-forge-principle);
  border-top: 1px solid var(--color-border);
}

.section-forge-principle::before,
.section-forge-principle::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.section-forge-principle::before {
  top: -38%;
  left: -11%;
  width: 62%;
  height: 58%;
  border-radius: 0 0 56% 0;
  background: var(--bg-forge-wave-top);
  transform: skewX(-16deg);
}

.section-forge-principle::after {
  right: -15%;
  bottom: -34%;
  width: 72%;
  height: 58%;
  border-radius: 58% 0 0 0;
  background: var(--bg-forge-wave-bottom);
  transform: skewX(-18deg);
}

.forge-principle-canvas {
  position: relative;
  z-index: 1;
  width: min(100%, 1620px);
  min-height: clamp(640px, 56.25vw, 840px);
  margin: 0 auto;
  padding: clamp(72px, 7vw, 112px) var(--space-8) clamp(84px, 8vw, 124px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.forge-principle-header {
  max-width: 1180px;
  margin: 0 auto clamp(56px, 6vw, 76px);
  text-align: center;
}

.forge-principle-title {
  margin: 0 0 var(--space-5);
  color: var(--color-navy-950);
  font-family: var(--font-family-display);
  font-size: 4.65rem;
  font-weight: 700;
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.forge-principle-title span {
  color: transparent;
  background: var(--bg-gradient-forge-title);
  background-clip: text;
  -webkit-background-clip: text;
}

.forge-principle-subtitle {
  margin: 0;
  color: var(--color-process-text);
  font-family: var(--font-family-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}

.forge-process-row {
  --forge-chevron: clamp(56px, 5vw, 86px);
  display: flex;
  align-items: stretch;
  width: min(100%, 1370px);
  margin: 0 auto;
  filter: drop-shadow(0 34px 38px var(--color-process-shadow));
}

.forge-chevron-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 320px;
  isolation: isolate;
  transition: transform var(--transition-smooth), filter var(--transition-smooth);
}

.forge-chevron-card + .forge-chevron-card {
  margin-left: calc(-1 * var(--space-8));
}

.forge-chevron-card::before,
.forge-chevron-card::after,
.forge-chevron-surface {
  clip-path: polygon(0 0, calc(100% - var(--forge-chevron)) 0, 100% 50%, calc(100% - var(--forge-chevron)) 100%, 0 100%, calc(var(--forge-chevron) * .58) 50%);
}

.forge-chevron-card::before,
.forge-chevron-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.forge-chevron-card::before {
  inset: var(--space-3) 0 calc(-1 * var(--space-3)) var(--space-4);
  z-index: 0;
  background: var(--bg-gradient-forge-depth);
  opacity: .86;
  filter: blur(.2px);
}

.forge-chevron-card::after {
  inset: 0;
  z-index: 1;
  background: var(--bg-gradient-forge-outline);
  box-shadow: var(--shadow-forge-chevron-strong);
}

.forge-chevron-surface {
  position: absolute;
  inset: 3px;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-12) calc(var(--forge-chevron) + var(--space-8)) var(--space-10) calc(var(--forge-chevron) + var(--space-5));
  background: var(--bg-gradient-forge-card);
  box-shadow: var(--shadow-forge-chevron-inset);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.forge-chevron-card:nth-child(2) .forge-chevron-surface {
  background: var(--bg-gradient-forge-card-alt);
}

.forge-process-icon {
  width: 92px;
  height: 92px;
  margin: 0 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-blue-900);
  background: var(--bg-gradient-forge-icon);
  box-shadow: var(--shadow-forge-icon);
}

.forge-process-icon svg {
  width: 60px;
  height: 60px;
  display: block;
}

.forge-chevron-surface h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-navy-950);
  font-family: var(--font-family-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.forge-chevron-surface p {
  width: min(100%, 320px);
  margin: 0;
  color: var(--color-process-text);
  font-family: var(--font-family-body);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
}

.forge-chevron-card:hover {
  transform: translateY(calc(-1 * var(--space-1)));
  filter: drop-shadow(0 26px 36px var(--color-process-shadow));
}

/* 11. Section 6: Sticky Scrollable Showcase with Real UI Screens (1:1 AiChat Match) */
.skygenai-works {
  display: block;
  font-family: var(--font-family-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.12;
  color: var(--color-heading);
  margin: 0 0 var(--space-6) 0;
  text-align: left;
}

.section-sticky-showcase {
  --lifecycle-sticky-top: 100px;
  --lifecycle-pin-top: var(--lifecycle-sticky-top);
  --lifecycle-stack-gap: 60px;
  --lifecycle-stack-double-gap: 120px;
  background: var(--color-section-alt);
  padding: 100px 0 160px 0;
  position: relative;
  overflow: visible;
}

.sticky-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, .35fr) minmax(0, .65fr);
  gap: 0;
  align-items: start;
  position: relative;
}

.lifecycle-nav-column {
  grid-column: 1;
  position: sticky;
  top: var(--lifecycle-sticky-top);
  align-self: start;
  height: fit-content;
  z-index: 4;
}

.lifecycle-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding-right: var(--space-10);
  padding-top: 0;
}

.lifecycle-nav-button {
  display: flex;
  align-items: center;
  min-height: 72px;
  width: 100%;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-secondary-text);
  cursor: pointer;
  font-family: var(--font-family-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  padding: 0 var(--space-6);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}

.lifecycle-nav-button:hover {
  background: var(--color-blue-50);
  color: var(--color-heading);
}

.lifecycle-nav-button:active {
  background: var(--color-blue-100);
}

.lifecycle-nav-button.is-active,
.lifecycle-nav-button.is-active:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-100);
  border-left-color: var(--color-secondary-blue);
  color: var(--color-blue-900);
  font-weight: 600;
}

.sticky-cards-column {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--lifecycle-stack-gap);
  position: relative;
  padding-left: var(--space-2);
}

.sticky-card-stage {
  display: contents;
}

.sticky-card-item {
  scroll-margin-top: var(--lifecycle-sticky-top);
  transition: transform var(--transition-smooth);
}

@media (min-width: 992px) {
  .lifecycle-nav-column {
    top: var(--lifecycle-pin-top);
    display: flex;
    align-items: center;
    min-height: var(--lifecycle-stage-height, 568px);
  }

  .sticky-cards-column {
    display: block;
    min-height: var(--lifecycle-scroll-height, 1600px);
  }

  .sticky-card-stage {
    display: block;
    position: sticky;
    top: var(--lifecycle-pin-top);
    height: var(--lifecycle-stage-height, 568px);
    isolation: isolate;
  }

  .sticky-card-item {
    position: absolute !important;
    inset: 0 0 auto 0;
    top: 0 !important;
    width: 100%;
    transition: none !important;
    transform: translate3d(0, calc(var(--lifecycle-stack-y, 0px) + var(--lifecycle-exit-y, 0px)), 0) rotate(var(--lifecycle-card-rotate, 0deg));
    transform-origin: center center;
    backface-visibility: hidden;
    isolation: isolate;
    will-change: transform;
  }

  .sticky-card-item:not(.is-active) {
    transition: none !important;
  }

  .sticky-card-item[data-lifecycle-panel="0"] {
    --lifecycle-stack-y: 80px;
    z-index: 3 !important;
  }

  .sticky-card-item[data-lifecycle-panel="1"] {
    --lifecycle-stack-y: calc(-100% - var(--lifecycle-stack-gap) + 40px);
    z-index: 2 !important;
  }

  .sticky-card-item[data-lifecycle-panel="2"] {
    --lifecycle-stack-y: calc(-200% - var(--lifecycle-stack-double-gap));
    z-index: 1 !important;
  }

  .sticky-card-item.is-active {
    transition: none !important;
    z-index: 6 !important;
  }
}

.sticky-card-surface {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: 16px 16px 24px 16px;
  box-shadow: 0 12px 40px oklch(19% .025 255 / .04);
}

.sticky-card-mockup {
  border-radius: 20px;
  padding: 22px;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-heading);
}

.mockup-knowledge {
  background: var(--bg-gradient-knowledge);
}

.mockup-marketing {
  background: var(--bg-gradient-ai-showcase);
}

.mockup-omnichannel {
  background: linear-gradient(145deg, var(--color-blue-100) 0%, var(--color-teal-soft) 100%);
}

.sticky-wave-mesh {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 360px;
  height: 220px;
  background: radial-gradient(ellipse at center, oklch(94% .035 190 / .48) 0%, oklch(99% .006 250 / 0) 80%);
  pointer-events: none;
  filter: blur(25px);
}
.mockup-topbar { display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 1; margin-bottom: 16px; }
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots .dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dots .dot.red { background: var(--color-blue-900); }
.mockup-dots .dot.yellow { background: var(--color-amber); }
.mockup-dots .dot.green { background: var(--color-teal); }
.mockup-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
  background: oklch(99% .006 250 / .68);
  backdrop-filter: blur(10px);
  padding: 4px 12px;
  border-radius: 9999px;
}

.mockup-status {
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
}

.section-sticky-showcase .mockup-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
}

.section-sticky-showcase .mockup-tab-pill {
  white-space: nowrap;
}

.section-sticky-showcase .mockup-status {
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .section-sticky-showcase .mockup-topbar {
    column-gap: var(--space-3);
  }
}

.mockup-split-layout {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.chatgpt-window {
  background: oklch(99% .006 250 / .72);
  backdrop-filter: blur(20px);
  border: 1px solid oklch(99% .006 250 / .74);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chatgpt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid oklch(19% .025 255 / .1);
  margin-bottom: 12px;
}

.avatar-chip {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-blue);
  color: var(--color-card);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-bot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
}

.chat-bot-model {
  font-size: 11px;
  color: var(--color-secondary-text);
}

.chatgpt-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.bubble-chat {
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 12px;
  padding: 10px 14px;
}

.bubble-chat.user {
  background: oklch(19% .025 255 / .08);
  color: var(--color-heading);
  align-self: flex-end;
}

.bubble-chat.bot {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
  color: var(--color-heading);
  align-self: flex-start;
}

.citation-badge {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--color-blue-900);
  font-weight: 600;
}

.chatgpt-input-bar {
  background: oklch(99% .006 250 / .78);
  border: 1px solid oklch(19% .025 255 / .1);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--color-secondary-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.send-arrow {
  width: 20px;
  height: 20px;
  background: var(--color-primary-blue);
  color: var(--color-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

.docs-sidebar {
  background: oklch(99% .006 250 / .68);
  border: 1px solid oklch(99% .006 250 / .74);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
  padding-bottom: 6px;
  border-bottom: 1px solid oklch(19% .025 255 / .08);
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: oklch(99% .006 250 / .54);
}

.doc-item.active {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
}

.doc-icon {
  font-size: 16px;
}

.doc-info {
  display: flex;
  flex-direction: column;
}

.doc-title {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-heading);
}

.doc-meta {
  font-size: 10px;
  color: var(--color-secondary-text);
}

.mockup-onboarding-reference {
  height: 400px;
  min-height: 400px;
}

.onboarding-planner-layout {
  align-items: stretch;
  height: 356px;
  min-height: 0;
}

.onboarding-chat-window {
  height: 100%;
  min-height: 0;
}

.onboarding-chat-body {
  flex: 1;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  min-height: 0;
}

.onboarding-chat-window .chatgpt-header {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.planning-card-label {
  color: var(--color-blue-900);
  font-size: 10px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.onboarding-request-bubble {
  max-width: 92%;
  align-self: flex-end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 10px var(--space-3);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.planning-request-text {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(-5px);
}

.planning-request-text::after {
  content: "";
  display: none;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  background: var(--color-primary-blue);
  transform: translateY(2px);
}

@media (prefers-reduced-motion: no-preference) {
  .planning-request-text {
    clip-path: inset(0 100% 0 0);
  }

  .sticky-card-item.is-active .planning-request-text {
    animation: planning-type 2.3s steps(44, end) .35s forwards;
  }

  .sticky-card-item.is-active .planning-request-text::after {
    display: inline-block;
    animation: planning-caret .72s step-end .35s 4 forwards;
  }
}

.planning-analyzing-line {
  opacity: 0;
  transform: translateY(8px);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-secondary-text);
  font-size: 10.5px;
  font-weight: 600;
}

.planning-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-blue);
  box-shadow: 0 0 0 0 oklch(53% .2 258 / .24);
}

.onboarding-analysis-card {
  opacity: 0;
  transform: translateY(12px);
  width: 82%;
  border-radius: var(--radius-lg);
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
  padding: var(--space-2) var(--space-3);
}

.analysis-row {
  opacity: 0;
  transform: translateY(8px);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--color-blue-100);
  padding: 6px 0;
}

.intent-row {
  animation-delay: 3.85s;
}

.department-row {
  animation-delay: 4.35s;
}

.analysis-row span {
  color: var(--color-secondary-text);
  font-size: 10px;
  font-weight: 600;
}

.analysis-row strong {
  color: var(--color-heading);
  font-size: 11.5px;
  text-align: right;
}

.understanding-system-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.system-discovery-item {
  opacity: 0;
  transform: translateY(8px);
  border-radius: var(--radius-sm);
  background: oklch(99% .006 250 / .68);
  border: 1px solid var(--color-blue-100);
  color: var(--color-blue-900);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 6px;
  white-space: nowrap;
}

.system-workday {
  animation-delay: 5.1s;
}

.system-microsoft {
  animation-delay: 5.55s;
}

.system-slack {
  animation-delay: 6s;
}

.system-okta {
  animation-delay: 6.45s;
}

.onboarding-workflow-sidebar {
  height: 100%;
  min-height: 0;
  gap: 6px;
}

.onboarding-workflow-sidebar .sidebar-header {
  font-family: var(--font-family-display);
  font-size: 13px;
  color: var(--color-heading);
  padding-bottom: var(--space-2);
  margin-bottom: 0;
}

.onboarding-workflow-sidebar .blueprint-metric {
  opacity: 0;
  transform: translateY(12px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  min-height: 42px;
  padding: 5px var(--space-2);
}

.onboarding-workflow-sidebar .metric-tasks {
  background: var(--color-blue-50);
  border-color: var(--color-blue-100);
}

.onboarding-workflow-sidebar .doc-icon {
  color: var(--color-heading);
  display: block;
  flex: 0 0 16px;
  min-width: 20px;
  width: 16px;
  height: 16px;
}

.onboarding-workflow-sidebar .doc-title {
  font-size: 11.5px;
  font-weight: 500;
}

.onboarding-workflow-sidebar .doc-meta {
  font-size: 9.5px;
}

.ready-deploy-card {
  opacity: 0;
  transform: translateY(14px);
  margin-top: auto;
  border-radius: var(--radius-md);
  background: var(--color-blue-50);
  border: 1px solid var(--color-primary-blue);
  padding: 7px var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ready-deploy-card span {
  color: var(--color-secondary-text);
  font-size: 9.5px;
}

.ready-deploy-card strong {
  color: var(--color-heading);
  font-size: 11px;
}

.metric-tasks {
  animation-delay: 7.2s;
}

.metric-integrations {
  animation-delay: 7.5s;
}

.metric-agents {
  animation-delay: 7.8s;
}

.metric-approval {
  animation-delay: 8.1s;
}

@media (prefers-reduced-motion: no-preference) {
  .sticky-card-item.is-active .planning-analyzing-line {
    animation: planning-reveal .55s var(--ease-out) 2.8s forwards;
  }

  .sticky-card-item.is-active .planning-pulse-dot {
    animation: planning-pulse 1.25s var(--ease-out) 2.8s infinite;
  }

  .sticky-card-item.is-active .onboarding-analysis-card {
    animation: planning-reveal .6s var(--ease-out) 3.2s forwards;
  }

  .sticky-card-item.is-active .analysis-row {
    animation: planning-reveal .5s var(--ease-out) forwards;
  }

  .sticky-card-item.is-active .system-discovery-item {
    animation: planning-reveal .48s var(--ease-out) forwards;
  }

  .sticky-card-item.is-active .onboarding-workflow-sidebar .blueprint-metric {
    animation: blueprint-metric-in .52s var(--ease-out) forwards;
  }

  .sticky-card-item.is-active .ready-deploy-card {
    animation:
      planning-reveal .6s var(--ease-out) 8.5s forwards,
      ready-deploy-glow 1.8s var(--ease-out) 8.9s infinite alternate;
  }

  .sticky-card-item.is-active .intent-row {
    animation-delay: 3.85s;
  }

  .sticky-card-item.is-active .department-row {
    animation-delay: 4.35s;
  }

  .sticky-card-item.is-active .system-workday {
    animation-delay: 5.1s;
  }

  .sticky-card-item.is-active .system-microsoft {
    animation-delay: 5.55s;
  }

  .sticky-card-item.is-active .system-slack {
    animation-delay: 6s;
  }

  .sticky-card-item.is-active .system-okta {
    animation-delay: 6.45s;
  }

  .sticky-card-item.is-active .metric-tasks {
    animation-delay: 7.2s;
  }

  .sticky-card-item.is-active .metric-integrations {
    animation-delay: 7.5s;
  }

  .sticky-card-item.is-active .metric-agents {
    animation-delay: 7.8s;
  }

  .sticky-card-item.is-active .metric-approval {
    animation-delay: 8.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-request-text {
    clip-path: inset(0 0 0 0);
  }

  .planning-analyzing-line,
  .onboarding-analysis-card,
  .analysis-row,
  .system-discovery-item,
  .onboarding-workflow-sidebar .blueprint-metric,
  .ready-deploy-card {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes planning-type {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes planning-caret {
  50% {
    opacity: 0;
  }
}

@keyframes planning-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes planning-pulse {
  70% {
    box-shadow: 0 0 0 8px oklch(53% .2 258 / 0);
  }

  100% {
    box-shadow: 0 0 0 0 oklch(53% .2 258 / 0);
  }
}

@keyframes blueprint-metric-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ready-deploy-glow {
  to {
    box-shadow: 0 0 18px oklch(60% .12 190 / .36), inset 0 1px 0 oklch(99% .006 250 / .18);
    border-color: oklch(60% .12 190 / .58);
  }
}

.workflow-steps-mockup {
  height: 400px;
  min-height: 400px;
  justify-content: flex-start;
}

.workflow-steps-mockup .mockup-topbar {
  margin-bottom: 12px;
}

.workflow-step-list {
  --workflow-cycle: 8.4s;
  --workflow-flow-duration: 4.8s;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.workflow-step-list::before,
.workflow-step-list::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.workflow-step-list::before {
  z-index: 0;
  background: var(--color-blue-100);
  opacity: .58;
}

.workflow-step-list::after {
  z-index: 0;
  background: var(--color-primary-blue);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
}

.workflow-step-item {
  --workflow-delay: 0s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-radius: 12px;
  background: oklch(99% .006 250 / .56);
  border: 1px solid oklch(99% .006 250 / .7);
  padding: 7px 14px;
  overflow: hidden;
  z-index: 1;
}

.workflow-step-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-blue-50), oklch(99% .006 250 / .72));
  opacity: 0;
  transform: scale(.985);
  transform-origin: center;
  pointer-events: none;
}

.workflow-step-item:last-child::before {
  background: var(--color-card);
}

.workflow-step-item:nth-child(2) {
  --workflow-delay: .9s;
}

.workflow-step-item:nth-child(3) {
  --workflow-delay: 1.8s;
}

.workflow-step-item:nth-child(4) {
  --workflow-delay: 2.7s;
}

.workflow-step-item:nth-child(5) {
  --workflow-delay: 3.6s;
}

.workflow-step-item:nth-child(6) {
  --workflow-delay: 4.5s;
}

.workflow-step-marker {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-card);
  background: var(--color-blue-100);
  box-shadow: 0 0 0 0 var(--color-blue-50);
  color: var(--color-card);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  z-index: 2;
}

.workflow-step-marker::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 4px;
  width: 6px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0;
  transform: rotate(45deg) scale(.55);
  transform-origin: center;
}

.workflow-step-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.workflow-step-copy strong {
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.workflow-step-copy span {
  color: var(--color-secondary-text);
  font-size: 11px;
  line-height: 1.25;
}

@media (prefers-reduced-motion: no-preference) {
  .workflow-step-marker {
    transform: scale(.92);
  }

  .sticky-card-item.is-active .workflow-step-list::after {
    animation: workflow-line-flow var(--workflow-flow-duration) var(--ease-linear) forwards;
  }

  .sticky-card-item.is-active .workflow-step-item::before {
    animation: workflow-flow-card var(--workflow-flow-duration) var(--ease-out) var(--workflow-delay) forwards;
  }

  .sticky-card-item.is-active .workflow-step-marker {
    animation: workflow-marker-fill .42s var(--ease-out) var(--workflow-delay) forwards;
  }

  .sticky-card-item.is-active .workflow-step-marker::before {
    animation: workflow-check-pop .42s var(--ease-out) calc(var(--workflow-delay) + .12s) forwards;
  }

  .sticky-card-item.is-active .workflow-step-item:last-child {
    animation: workflow-deploy-flow-glow .72s var(--ease-out) var(--workflow-delay) forwards;
  }

  .sticky-card-item.is-active .workflow-step-item:last-child::before {
    animation-name: workflow-deploy-flow-card;
  }
}

@keyframes workflow-line-flow {
  0%,
  8% {
    opacity: 0;
    transform: scaleY(0);
  }

  13% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes workflow-flow-card {
  0%,
  8% {
    opacity: 0;
    transform: scale(.985);
  }

  18%,
  100% {
    opacity: .98;
    transform: scale(1);
  }
}

@keyframes workflow-deploy-flow-card {
  0%,
  8% {
    opacity: 0;
    transform: scale(.985);
  }

  18%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes workflow-marker-fill {
  to {
    background: var(--color-primary-blue);
    box-shadow: 0 0 0 6px var(--color-blue-50);
    transform: scale(1);
  }
}

@keyframes workflow-check-pop {
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes workflow-flow-dot {
  0%,
  8% {
    opacity: 0;
    transform: rotate(45deg) scale(.55);
  }

  18%,
  100% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes workflow-deploy-flow-glow {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: 0 12px 34px oklch(62% .19 250 / .24), inset 0 0 0 1px var(--color-primary-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-card-item.is-active .workflow-step-list::after {
    opacity: 1;
    transform: scaleY(1);
  }

  .sticky-card-item.is-active .workflow-step-marker {
    background: var(--color-primary-blue);
    box-shadow: 0 0 0 6px var(--color-blue-50);
  }

  .sticky-card-item.is-active .workflow-step-marker::before {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

#lifecycle-stage-2 .workflow-step-list::after {
  opacity: 1;
  transform: scaleY(1);
  animation: none;
}

#lifecycle-stage-2 .workflow-step-item,
#lifecycle-stage-2 .workflow-step-item::before {
  animation: none;
}

#lifecycle-stage-2 .workflow-step-item::before {
  opacity: 0;
  transform: none;
}

#lifecycle-stage-2 .workflow-step-marker {
  background: var(--color-primary-blue);
  box-shadow: 0 0 0 6px var(--color-blue-50);
  transform: scale(1);
  transition: none;
  animation: none;
}

#lifecycle-stage-2 .workflow-step-marker::before {
  opacity: 1;
  transform: rotate(45deg) scale(1);
  animation: none;
}

.governance-dashboard-mockup {
  height: 400px;
  min-height: 400px;
  padding: var(--space-4);
  justify-content: space-between;
}

.governance-topbar {
  margin-bottom: 10px;
}

.governance-dashboard {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  grid-template-rows: 68px minmax(0, 1fr);
  gap: 10px;
  height: auto;
  min-height: 0;
}

.governance-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.governance-stat-card,
.governance-panel,
.governance-activity-item,
.governance-check-item {
  background: oklch(99% .006 250 / .58);
  border: 1px solid var(--color-blue-100);
}

.governance-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: 10px var(--space-3);
}

.governance-status-dot,
.governance-activity-dot {
  border-radius: 50%;
  border: 3px solid var(--color-teal-soft);
}

.governance-status-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
}

.governance-stat-card strong {
  color: var(--color-heading);
  font-family: var(--font-family-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.governance-stat-card span:last-child {
  color: var(--color-secondary-text);
  font-size: 11.5px;
  line-height: 1.25;
  margin-top: var(--space-1);
}

.governance-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.governance-panel {
  border-radius: var(--radius-lg);
  padding: 10px;
  min-height: 0;
}

.governance-panel h4 {
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.governance-activity-list,
.governance-check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.governance-activity-item {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-md);
  padding: 5px var(--space-2);
}

.governance-activity-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
}

.governance-activity-item div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.governance-activity-item strong,
.governance-check-item strong {
  color: var(--color-heading);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.governance-activity-item span:not(.governance-activity-dot) {
  color: var(--color-secondary-text);
  font-size: 10px;
  line-height: 1.2;
}

.governance-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border-radius: var(--radius-md);
  padding: 6px var(--space-2);
}

.governance-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-teal-soft);
  color: var(--color-heading);
}

.sticky-card-caption {
  padding-top: 18px;
  padding-left: 8px;
}

.sticky-caption-title {
  font-family: var(--font-family-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0;
}

/* Testimonials */
.section-testimonial-ribbon {
  --testimonial-ribbon-height: clamp(540px, calc(28vw + 155px), 900px);
  background-color: var(--color-section-alt); padding: 0; overflow: hidden; border-top: 1px solid var(--color-border);
}
.testimonial-main-wrapper { display: flex; align-items: stretch; width: 100%; height: var(--testimonial-ribbon-height); min-height: var(--testimonial-ribbon-height); }
.testimonial-left-wrapper {
  width: 29%; padding: 80px 40px 80px 60px; display: flex; flex-direction: column; justify-content: space-between;
}
.testimonial-title { font-size: 2.75rem; margin: 0 0 16px; }
.testimonial-details { font-size: 1rem; margin: 0 0 32px; max-width: 380px; }
.testimonial-cta-wrap { margin-top: auto; flex-shrink: 0; height: 48px; display: flex; align-items: center; }
.testimonial-right-wrapper { width: 71%; display: flex; align-items: stretch; height: 100%; }
.testimonial-panel {
  flex-basis: 0; flex-shrink: 1; min-width: 0; min-height: 100%; border-left: 1px solid var(--color-border); cursor: pointer; position: relative; overflow: hidden;
  transition: flex-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}
.testimonial-panel.collapsed { flex-grow: 1; background: var(--color-card); }
.testimonial-panel.collapsed:hover { background: var(--color-background); }
.testimonial-panel.active { flex-grow: 4.4; background: var(--bg-gradient-testimonials); box-shadow: inset 0 0 60px oklch(99% .006 250 / .18); }
.panel-collapsed-view { height: 100%; padding: 34px 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.collapsed-top { color: var(--color-body); transition: color var(--transition-fast), transform var(--transition-fast); }
.testimonial-panel.collapsed:hover .collapsed-top { color: var(--color-primary-blue); transform: translateX(4px); }
.collapsed-card-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translate(-50%, -42%);
}
.collapsed-card-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 22px;
  color: var(--color-primary-blue);
  stroke-width: 2;
  flex-shrink: 0;
}
.collapsed-middle { margin: auto 0 40px; }
.collapsed-role { font-size: 13px; line-height: 1.45; color: var(--color-body); display: block; }
.collapsed-bottom { margin-top: auto; }
.collapsed-name { font-family: var(--font-family-display); font-size: 1.35rem; font-weight: 500; color: var(--color-heading); margin: 0; line-height: 1.2; }
.testimonial-panel.collapsed .collapsed-bottom {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  margin-top: 0;
  transform: translateY(-50%);
}
.testimonial-panel.collapsed .collapsed-name {
  font-size: 1.12rem;
  line-height: 1.18;
  text-align: center;
}
.testimonial-panel.collapsed .collapsed-card-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.panel-expanded-view { box-sizing: border-box; width: 100%; min-width: 0; min-height: 100%; padding: 40px clamp(20px, 2vw, 32px); display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 1; }
.expanded-header { min-height: 2.4rem; margin-bottom: 10px; }
.expanded-name { font-family: var(--font-family-display); font-size: 1.75rem; font-weight: 500; color: var(--color-heading); margin: 0 0 6px; }
.expanded-role { font-size: 14px; color: var(--color-secondary-text); }
.expanded-quote { min-height: 5.25rem; font-size: 1.05rem; line-height: 1.65; color: var(--color-body); margin: 0; letter-spacing: -0.01em; }
.expanded-image-wrapper {
  width: 100%;
  margin-top: var(--space-4);
}
.expanded-card-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
.workflow-visual {
  display: block;
  margin: 0;
  opacity: 0;
  transform: translateY(var(--space-2));
  animation: workflow-visual-enter .36s var(--ease-out) forwards;
}
.expanded-footer { margin-top: auto; }
.expanded-logo-badge { font-family: var(--font-family-display); font-size: 1.25rem; font-weight: 700; color: var(--color-blue-900); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }

@keyframes workflow-visual-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-visual {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 991px) {
  .collapsed-card-icon {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 800px) {
  .collapsed-card-icon {
    width: 40px;
    height: 40px;
  }
}

/* Integrations */
.section-integrations {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: var(--space-24) 0;
  overflow: clip;
}
.integrations-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: var(--space-20);
  align-items: start;
}
.integrations-copy {
  min-width: 0;
}
.integrations-heading {
  max-width: 820px;
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-family-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.integrations-description {
  max-width: 720px;
  margin: var(--space-10) 0 0;
  color: var(--color-body);
  font-family: var(--font-family-body);
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: 0;
}
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  max-width: calc(600px + var(--space-5) + var(--space-8));
  padding-right: calc(var(--space-5) + var(--space-8));
  justify-self: end;
  margin-top: 0;
}
.integration-card {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px oklch(19% .025 255 / .025);
}
.integration-card--slack {
  position: relative;
  overflow: visible;
}
.slack-loading-image {
  position: absolute;
  left: 30%;
  right: auto;
  bottom: calc(-1 * var(--space-8));
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--space-1) * .75);
  color: var(--color-secondary-text);
  font-family: var(--font-family-body);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 8px 20px var(--color-blue-100));
  transform: none;
  z-index: 1;
}
.slack-loading-image__copy {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.slack-loading-image__dot {
  --slack-dot-offset: calc(var(--space-1) * .75);
  width: calc(var(--space-1) * .75);
  height: calc(var(--space-1) * .75);
  border-radius: 50%;
  background: var(--color-primary-blue);
  opacity: .38;
  transform: translate3d(0, var(--slack-dot-offset), 0);
  animation: slack-loader-dot 1.05s var(--ease-out) infinite;
}
.slack-loading-image__dot--2 {
  animation-delay: .16s;
}
.slack-loading-image__dot--3 {
  animation-delay: .32s;
}
.integration-card-image {
  display: block;
  width: min(100%, 136px);
  max-height: 42px;
  object-fit: contain;
  object-position: center;
}
@keyframes slack-loader-dot {
  0%, 80%, 100% {
    opacity: .38;
    transform: translate3d(0, var(--slack-dot-offset), 0);
  }
  40% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Pre-Footer CTA */
.section-prefooter-cta {
  background: var(--color-background);
  padding: var(--space-20) 0 var(--space-24);
  position: relative;
  overflow: clip;
}
.section-prefooter-cta::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(72vw, 620px);
  height: min(46vw, 360px);
  transform: translate(-50%, -50%);
  background: var(--bg-prefooter-cta-glow);
  filter: blur(54px);
  opacity: .58;
  pointer-events: none;
  z-index: 0;
}
.prefooter-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.prefooter-cta-title {
  max-width: 635px;
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-family-display);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.prefooter-cta-copy {
  max-width: 620px;
  margin: var(--space-5) 0 0;
  color: var(--color-body);
  font-family: var(--font-family-body);
  font-size: 1.125rem;
  line-height: 1.55;
}
.prefooter-cta-button {
  margin-top: var(--space-6);
  white-space: nowrap;
}
@media (min-width: 992px) and (max-height: 800px) {
  .section-prefooter-cta {
    padding-block: var(--space-8);
  }
}


/* Footer */
.footer-wrapper {
  position: relative;
  padding: calc(var(--space-12) + var(--space-2)) 0 var(--space-8);
  overflow: clip;
  background: var(--color-blue-50);
}
.footer-upper {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  gap: var(--space-16);
  align-items: start;
  padding-bottom: var(--space-10);
}
.footer-brand-section {
  max-width: 320px;
}
.footer-brand {
  width: fit-content;
}
.footer-wordmark {
  width: 250px;
}
.footer-brand-section .text-body-compact {
  max-width: min(100%, 490px);
  margin: var(--space-6) 0 0;
  line-height: 1.6;
  white-space: nowrap;
}
.footer-description {
  max-width: min(100%, 490px);
  margin: var(--space-6) 0 0;
  color: var(--color-body);
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: 1.6;
}
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  margin-top: var(--space-5);
  color: var(--color-body);
  font-family: var(--font-family-body);
  font-size: .9375rem;
  font-weight: 600;
}
.footer-status-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background: var(--color-footer-status);
  box-shadow: 0 0 0 var(--space-2) var(--color-teal-soft);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: calc(var(--space-6) + var(--space-1));
}
.footer-social .btn-icon-outline {
  flex: 0 0 auto;
  width: var(--space-10);
  height: var(--space-10);
  min-height: var(--space-10);
  background: transparent;
  border-color: var(--color-border);
  box-shadow: none;
  backdrop-filter: none;
}
.footer-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  padding-left: var(--space-12);
  border-left-color: var(--color-footer-divider);
}
.footer-nav-column .nav-section-title {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  font-weight: 600;
}
.footer-col-title {
  margin: 0 0 calc(var(--space-4) + var(--space-1));
  color: var(--color-heading);
  font-family: var(--font-family-display);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.footer-link-list .nav-link,
.footer-legal .nav-link,
.footer-link-list .footer-link,
.footer-legal .footer-link {
  min-height: var(--space-12);
  margin-left: calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  justify-content: flex-start;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: var(--radius-pill);
  color: var(--color-body);
  font-family: var(--font-family-body);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-primary-blue);
  transform: translateX(2px);
}
.footer-link:active {
  transform: translateX(0);
}
.footer-link[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.footer-bottom-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top-color: var(--color-footer-divider);
}
.footer-copyright {
  min-width: 0;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}
.footer-legal .nav-link {
  min-height: var(--space-12);
}
.footer-back-to-top {
  color: var(--color-heading);
  justify-self: end;
}

/* Shared compact footer spacing across the homepage and internal pages. */
.footer-wrapper.footer-compact {
  padding: calc(var(--space-12) + var(--space-2)) 0 var(--space-8);
}
.footer-compact .footer-upper {
  padding-bottom: var(--space-10);
}
.footer-compact .footer-nav-column .nav-section-title {
  margin-bottom: calc(var(--space-4) + var(--space-1));
}
.footer-compact .footer-link-list {
  gap: var(--space-2);
}
.footer-compact .footer-bottom-bar {
  padding-top: calc(var(--space-6) + var(--space-3));
}
@media (min-width: 992px) {
  .footer-brand-section {
    max-width: 548px;
    padding-right: var(--space-2);
  }
  .footer-brand-section .text-body-compact {
    max-width: 490px;
  }
  .footer-navigation {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: var(--space-12);
    padding-right: 0;
  }
  .footer-navigation--solutions {
    grid-template-columns: repeat(3, max-content);
  }
  .footer-nav-column:first-child {
    transform: translateX(calc(-1 * var(--space-8)));
  }
  .footer-bottom-bar {
    grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr) auto;
    column-gap: var(--space-6);
  }
  .footer-legal {
    justify-self: center;
    justify-content: center;
    transform: translateX(calc(var(--space-16) + var(--space-2)));
  }
  .footer-compact .footer-link-list .nav-link,
  .footer-compact .footer-legal .nav-link {
    min-height: var(--space-8);
    padding-block: var(--space-1);
  }
  .footer-compact .footer-legal .nav-link {
    min-height: var(--space-12);
  }
}
@media (min-width: 641px) {
  .footer-bottom-bar {
    min-height: calc(var(--space-12) + var(--space-6));
  }
}
@media (pointer: coarse) {
  .footer-compact .footer-link-list .nav-link,
  .footer-compact .footer-legal .nav-link {
    min-height: var(--space-12);
  }
  .footer-social .btn-icon-outline {
    width: var(--space-12);
    height: var(--space-12);
    min-height: var(--space-12);
  }
}
@media (max-width: 991px) {
  .footer-upper {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .footer-brand-section {
    max-width: 520px;
  }
  .footer-navigation {
    padding-left: 0;
    gap: var(--space-8);
  }
}
@media (max-width: 640px) {
  .footer-wrapper.footer-compact {
    padding-top: var(--space-12);
  }
  .footer-wordmark {
    width: 220px;
  }
  .footer-brand-section .text-body-compact {
    font-size: clamp(0.67rem, 3.35vw, 1rem);
  }
  .footer-social .btn-icon-outline {
    width: var(--space-12);
    height: var(--space-12);
    min-height: var(--space-12);
  }
  .footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-8);
  }
  .footer-bottom-bar {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-4);
  }
  .footer-legal {
    justify-content: flex-start;
    gap: var(--space-4);
  }
  .footer-back-to-top {
    justify-self: start;
  }
}
@media (max-width: 768px) {
  .footer-bottom-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0;
    row-gap: var(--space-4);
  }
  .footer-legal {
    order: 1;
    flex: 0 1 auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-4);
    transform: none;
  }
  .footer-bottom-bar .footer-legal .nav-link {
    margin-left: 0;
    padding-inline: 0;
  }
  .footer-back-to-top {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    justify-self: auto;
  }
  .footer-copyright {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
  }
}
@media (max-width: 360px) {
  .footer-legal {
    margin-left: calc(-1 * var(--space-3));
  }
  .footer-back-to-top {
    margin-right: calc(-1 * var(--space-3));
  }
}

/* Offscreen Containment */
.section-capabilities, .section-forge-principle, .section-sticky-showcase, .footer-wrapper {
  content-visibility: auto; contain-intrinsic-size: 1px 600px;
}

@media (max-width: 1180px) {
  .forge-principle-canvas {
    padding-inline: var(--space-6);
  }
  .forge-principle-title {
    font-size: 3.85rem;
  }
  .forge-principle-subtitle {
    font-size: 1.25rem;
  }
  .forge-process-row {
    --forge-chevron: 58px;
  }
  .forge-chevron-card {
    min-height: 304px;
  }
  .forge-chevron-surface {
    padding: var(--space-10) calc(var(--forge-chevron) + var(--space-5)) var(--space-8) calc(var(--forge-chevron) + var(--space-3));
  }
  .forge-process-icon {
    width: 78px;
    height: 78px;
  }
  .forge-process-icon svg {
    width: 50px;
    height: 50px;
  }
  .forge-chevron-surface h3 {
    font-size: 1.45rem;
  }
  .forge-chevron-surface p {
    font-size: 1rem;
    line-height: 1.42;
  }
}

@media (max-width: 991px) {
  .forge-principle-canvas {
    min-height: auto;
    padding-block: var(--space-20);
  }
  .forge-principle-header {
    margin-bottom: var(--space-12);
  }
  .forge-principle-title {
    font-size: 3.25rem;
    line-height: 1.05;
  }
  .forge-process-row {
    --forge-chevron: 48px;
  }
  .forge-chevron-card {
    min-height: 324px;
  }
  .forge-chevron-card + .forge-chevron-card {
    margin-left: calc(-1 * var(--space-5));
  }
  .forge-chevron-surface {
    padding-inline: calc(var(--forge-chevron) + var(--space-3));
  }
  .forge-chevron-surface p {
    width: min(100%, 250px);
  }
}

@media (max-width: 760px) {
  .forge-principle-canvas {
    padding: var(--space-16) var(--space-4) var(--space-20);
  }
  .forge-principle-title {
    font-size: 2.65rem;
  }
  .forge-principle-subtitle {
    font-size: 1.1rem;
  }
  .forge-process-row {
    --forge-chevron: 56px;
    width: min(100%, 460px);
    flex-direction: column;
    gap: var(--space-5);
    filter: none;
  }
  .forge-chevron-card,
  .forge-chevron-card + .forge-chevron-card {
    min-height: 288px;
    margin-left: 0;
  }
  .forge-chevron-surface {
    padding: var(--space-10) calc(var(--forge-chevron) + var(--space-5)) var(--space-8) calc(var(--forge-chevron) + var(--space-4));
  }
  .forge-chevron-surface p {
    width: min(100%, 280px);
    text-align: center;
  }
}

@media (max-width: 420px) {
  .forge-principle-canvas {
    padding-inline: var(--space-3);
  }
  .forge-principle-title {
    font-size: 2.2rem;
  }
  .forge-process-row {
    --forge-chevron: 42px;
  }
  .forge-chevron-card {
    min-height: 300px;
  }
  .forge-chevron-surface {
    padding: var(--space-8) calc(var(--forge-chevron) + var(--space-3)) var(--space-8) calc(var(--forge-chevron) + var(--space-2));
  }
}

/* 16. Media Queries */
@media (min-width: 992px) and (max-width: 1180px) {
  .navbar-container {
    min-height: 70px;
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  .nav-wordmark {
    width: 200px;
  }

  .nav-menu {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: var(--space-3);
    min-width: 0;
  }

  .nav-link,
  .nav-signin,
  .services-menu-trigger {
    min-height: 48px;
    padding: 0 var(--space-2);
    font-size: .9375rem;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .nav-link[href="get-in-touch.html"] > span,
  .nav-link[href="get-in-touch.html"] .nav-text-slide {
    white-space: nowrap;
  }

  .nav-text-wrapper {
    height: auto;
    overflow: visible;
  }

  .nav-text-slide {
    line-height: 1.35;
    white-space: nowrap;
  }

  .nav-text-slide[aria-hidden="true"] {
    display: none;
  }

  .nav-actions {
    flex: 0 0 auto;
    gap: var(--space-3);
    margin-left: var(--space-4);
  }

  .nav-actions .btn-primary {
    padding-left: var(--space-3);
    font-size: .875rem;
  }

  .hero-grid {
    gap: var(--space-6);
  }

  .integrations-layout {
    gap: var(--space-12);
  }

  .integrations-heading {
    font-size: 3.45rem;
  }

  .integration-card {
    min-height: 56px;
    padding: var(--space-1) var(--space-2);
  }

  .integrations-grid {
    max-width: 560px;
    margin-top: 0;
  }

  .hero-agentic-visual {
    width: 492px;
    height: 459px;
    justify-self: center;
  }

  .hero-connectors-svg,
  .agent-scenario {
    transform: translateX(-50%) scale(0.82);
  }

  #lifecycle-stage-1 .onboarding-request-bubble {
    max-width: 100%;
  }
}

/* Media Queries */
@media (max-width: 991px) {
  body.mobile-menu-open { overflow-y: hidden; }
  .hero-grid, .features-composite-grid, .sticky-showcase-grid {
    grid-template-columns: 1fr; gap: var(--space-10);
  }
  .section-hero {
    min-height: auto; padding-top: clamp(32px, 5vh, 48px); padding-bottom: clamp(16px, 2vw, 24px);
    align-items: flex-start;
  }
  .section-hero::before { background: var(--bg-hero-scrim-mobile); }
  .section-hero::after { background: var(--bg-hero-headline-depth-mobile); }
  .section-metrics .metrics-tablet-break { display: block; }
  .headline-homepage { font-size: 2.5rem; }
  .section-sticky-showcase {
    --lifecycle-sticky-top: var(--space-4);
    padding: var(--space-16) 0;
    overflow-x: clip;
    overflow-y: visible;
  }
  .lifecycle-nav-column {
    grid-column: auto;
    position: relative;
    top: auto;
    width: min(100%, 820px);
    max-height: none;
    margin: 0 auto;
    text-align: center;
  }
  .lifecycle-nav {
    align-items: center;
    overflow: visible;
    padding-right: 0;
  }
  .lifecycle-nav-button {
    display: none;
  }
  .skygenai-works {
    display: block;
    margin: 0;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .sticky-cards-column {
    grid-column: auto;
    display: grid;
    grid-auto-rows: 1fr;
    align-items: stretch;
    width: min(100%, 820px);
    margin: 0 auto;
    gap: var(--space-6);
    padding-left: 0;
  }
  .sticky-card-item {
    display: flex;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    transform: none;
    scroll-margin-top: 0;
  }
  .sticky-card-surface,
  .sticky-card-mockup,
  .mockup-onboarding-reference,
  .workflow-steps-mockup,
  .governance-dashboard-mockup {
    width: 100%;
    max-width: 100%;
  }
  .sticky-card-surface {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-3);
  }
  .sticky-card-mockup,
  .mockup-onboarding-reference,
  .workflow-steps-mockup,
  .governance-dashboard-mockup {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .sticky-wave-mesh {
    display: none;
  }
  .section-sticky-showcase .sticky-card-surface,
  .section-sticky-showcase .sticky-card-surface *,
  .section-sticky-showcase .sticky-card-surface *::before,
  .section-sticky-showcase .sticky-card-surface *::after {
    animation: none !important;
    transition: none !important;
  }
  .planning-request-text {
    clip-path: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .planning-request-text::after {
    display: none !important;
  }
  .planning-analyzing-line,
  .onboarding-analysis-card,
  .analysis-row,
  .system-discovery-item,
  .onboarding-workflow-sidebar .blueprint-metric,
  .ready-deploy-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .workflow-step-list::after {
    opacity: 1;
    transform: scaleY(1);
  }
  .workflow-step-marker {
    background: var(--color-primary-blue);
    box-shadow: 0 0 0 6px var(--color-blue-50);
    transform: none;
  }
  .workflow-step-marker::before {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  .workflow-step-item::before {
    opacity: 0;
    transform: none;
  }
  .section-prefooter-cta {
    padding: var(--space-16) 0 var(--space-20);
  }
  .prefooter-cta-title {
    font-size: 2.5rem;
  }
  .section-integrations {
    padding: var(--space-20) 0;
  }
  .integrations-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
  }
  .integrations-heading {
    max-width: 760px;
    font-size: 3rem;
  }
  .integrations-description {
    max-width: 700px;
    margin-top: var(--space-8);
    font-size: 1.125rem;
  }
  .integrations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    justify-self: stretch;
    margin-top: 0;
  }
  .slack-loading-image {
    gap: var(--space-1);
  }
  .hero-agentic-visual {
    justify-self: center;
    width: min(100%, 600px);
  }
  .bento-staggered-grid { grid-template-columns: 1fr; }
  .bento-column.col-1, .bento-column.col-3 { margin-top: 0; }
  .mockup-split-layout { grid-template-columns: 1fr; }
  .navbar-wrapper.is-mobile-menu-open {
    position: fixed; z-index: 1200; background: var(--color-navbar-scrolled); border-bottom-color: var(--color-border); box-shadow: none;
  }
  .navbar-container { position: relative; z-index: 1201; min-height: 68px; justify-content: space-between; padding: 0 var(--space-4); }
  .navbar-wrapper.is-mobile-menu-open .navbar-container {
    width: 100%; max-width: none; margin: 0; background: var(--color-navbar-scrolled);
  }
  .mobile-menu-toggle { display: inline-flex; position: relative; z-index: 2; color: var(--color-heading); }
  .navbar-wrapper.is-mobile-menu-open .mobile-menu-icon-open { display: none; }
  .navbar-wrapper.is-mobile-menu-open .mobile-menu-icon-close { display: block; }
  .navbar-container > .nav-brand {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: min(44vw, 180px); justify-content: center;
  }
  .nav-menu { display: none; }
  .service-dropdown,
  .services-menu:not(.is-selection-closed):hover .service-dropdown,
  .services-menu:not(.is-selection-closed):focus-within .service-dropdown,
  .services-menu.is-open .service-dropdown {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav-actions { margin-left: auto; gap: var(--space-3); }
  .nav-actions .btn-primary { display: none; }
  .nav-signin {
    min-height: 40px; padding: 0 var(--space-3);
    border-radius: var(--radius-sm); color: var(--color-body); font-weight: 500; white-space: nowrap;
  }
  .nav-signin:hover, .nav-signin:focus-visible { color: var(--color-primary-blue); }
  .mobile-menu-panel { display: block; top: 68px; z-index: 1190; }
  .navbar-wrapper.is-mobile-menu-open .mobile-menu-panel {
    opacity: 1; transform: translateX(0); visibility: visible; pointer-events: auto;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  .sticky-cards-column {
    grid-auto-rows: minmax(520px, 520px);
    width: min(100%, 720px);
    gap: var(--space-4);
  }
  .sticky-card-surface {
    height: 100%;
    padding: var(--space-2);
  }
  .sticky-card-mockup {
    padding: var(--space-3);
  }
  .sticky-card-item {
    animation: tablet-lifecycle-card-in .54s var(--ease-out) both !important;
  }
  .sticky-card-item:nth-child(2) {
    animation-delay: .08s !important;
  }
  .sticky-card-item:nth-child(3) {
    animation-delay: .16s !important;
  }
  .onboarding-planner-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(200px, .9fr);
    height: 100%;
    min-height: 0;
    align-items: stretch;
    gap: var(--space-3);
  }
  .onboarding-chat-window {
    min-height: 0;
    justify-content: flex-start;
  }
  .onboarding-chat-body {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .workflow-steps-mockup {
    justify-content: flex-start;
  }
  .workflow-step-list {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .workflow-step-item {
    min-height: 48px;
  }
  .governance-dashboard {
    gap: var(--space-4);
  }
  #lifecycle-stage-1 .chatgpt-window,
  #lifecycle-stage-1 .chatgpt-window *,
  #lifecycle-stage-1 .onboarding-workflow-sidebar,
  #lifecycle-stage-1 .onboarding-workflow-sidebar * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }
  #lifecycle-stage-1 .planning-request-text::after {
    display: none !important;
  }
  #lifecycle-stage-1 .onboarding-analysis-card {
    width: 88%;
  }
  #lifecycle-stage-1 .understanding-system-chips {
    flex-wrap: wrap;
  }
}

@keyframes tablet-lifecycle-card-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .section-sticky-showcase {
    padding: var(--space-12) 0;
  }
  .section-sticky-showcase .container {
    padding-inline: var(--space-2);
  }
  .sticky-showcase-grid {
    gap: var(--space-4);
  }
  .sticky-cards-column {
    grid-auto-rows: minmax(510px, 510px);
    width: 90%;
    gap: var(--space-3);
  }
  .skygenai-works {
    font-size: 1.45rem;
    line-height: 1.12;
  }
  .sticky-card-surface {
    height: 100%;
    border-radius: var(--radius-lg);
    padding: var(--space-1);
  }
  .sticky-card-mockup {
    border-radius: var(--radius-md);
    padding: var(--space-1);
  }
  .mockup-topbar {
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .section-sticky-showcase .mockup-topbar {
    grid-template-columns: 1fr 1fr;
  }
  .section-sticky-showcase .mockup-dots {
    display: none;
  }
  .section-sticky-showcase .mockup-tab-pill {
    grid-column: 1;
  }
  .section-sticky-showcase .mockup-status {
    grid-column: 2;
  }
  .mockup-tab-pill,
  .mockup-status {
    font-size: 9.5px;
    line-height: 1.2;
  }
  .sticky-card-caption {
    padding-top: var(--space-2);
    padding-left: var(--space-1);
  }
  .sticky-caption-title {
    font-size: .95rem;
    line-height: 1.18;
  }
  .onboarding-planner-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    align-items: start;
    gap: var(--space-2);
  }
  .onboarding-chat-window,
  .onboarding-workflow-sidebar {
    height: auto;
  }
  .onboarding-chat-body {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: calc(var(--space-1) * .75);
  }
  .chatgpt-window {
    justify-content: flex-start;
  }
  .chatgpt-input-bar {
    margin-top: 0;
  }
  .onboarding-request-bubble {
    max-width: 100%;
    align-self: stretch;
    border-radius: var(--radius-md);
    padding: var(--space-1) calc(var(--space-2) * .75);
  }
  .onboarding-analysis-card {
    width: 100%;
    border-radius: var(--radius-md);
    padding: var(--space-1) calc(var(--space-2) * .75);
  }
  .analysis-row {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    padding: calc(var(--space-1) * .5) 0;
  }
  .analysis-row span,
  .analysis-row strong {
    min-width: 0;
  }
  .analysis-row strong {
    overflow-wrap: anywhere;
  }
  .understanding-system-chips {
    flex-wrap: wrap;
    gap: calc(var(--space-1) * .5);
    padding-top: calc(var(--space-1) * .5);
  }
  .mockup-onboarding-reference {
    padding: var(--space-1);
  }
  .workflow-steps-mockup {
    justify-content: space-between;
  }
  .workflow-step-list {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: calc(var(--space-2) * .75);
  }
  .workflow-step-list::before,
  .workflow-step-list::after {
    left: calc(var(--space-2) * 2);
    width: 2px;
  }
  .workflow-step-item {
    min-height: 35px;
    gap: var(--space-2);
    padding: calc(var(--space-1) * .75) var(--space-2);
  }
  .workflow-step-copy strong {
    font-size: 11.5px;
    line-height: 1.05;
  }
  .workflow-step-copy span {
    font-size: 10.25px;
    line-height: 1.1;
  }
  .workflow-step-marker {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
  .workflow-step-marker::before {
    left: 4px;
    top: 2px;
    width: 5px;
    height: 8px;
  }
  .governance-dashboard-mockup {
    height: auto;
  }
  .governance-dashboard {
    grid-template-rows: auto;
    gap: var(--space-2);
  }
  .governance-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .governance-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--space-2) * .75);
  }
  .governance-status-dot {
    display: none;
  }
  .governance-stat-card {
    min-width: 0;
    border-radius: var(--radius-md);
    padding: calc(var(--space-2) * .75);
  }
  .governance-stat-card strong {
    display: block;
    min-width: 0;
    font-size: .875rem;
    white-space: nowrap;
  }
  .governance-check-item {
    min-height: 30px;
    padding: calc(var(--space-1) * .75) var(--space-2);
  }
  .bubble-chat,
  .chatgpt-input-bar,
  .planning-analyzing-line,
  .planning-card-label,
  .analysis-row span,
  .doc-meta,
  .onboarding-workflow-sidebar .doc-meta,
  .doc-item,
  .governance-stat-card span:last-child,
  .governance-activity-item span:not(.governance-activity-dot) {
    font-size: 8.75px;
  }
  .chat-bot-name,
  .doc-title,
  .onboarding-workflow-sidebar .doc-title,
  .analysis-row strong,
  .governance-panel h4,
  .governance-activity-item strong,
  .governance-check-item strong {
    font-size: 9.75px;
  }
  .chatgpt-header {
    gap: var(--space-2);
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .avatar-chip {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  .chatgpt-window,
  .docs-sidebar,
  .governance-panel {
    border-radius: var(--radius-md);
    padding: var(--space-1);
  }
  .chatgpt-input-bar {
    border-radius: var(--radius-sm);
    padding: var(--space-1) calc(var(--space-2) * .75);
  }
  .send-arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
  .onboarding-workflow-sidebar {
    gap: calc(var(--space-1) * .75);
  }
  .onboarding-workflow-sidebar .sidebar-header {
    padding-bottom: var(--space-1);
    font-size: 11px;
  }
  .onboarding-workflow-sidebar .blueprint-metric,
  .doc-item {
    min-height: 26px;
    padding: calc(var(--space-1) * .5) calc(var(--space-2) * .75);
  }
  .doc-icon,
  .onboarding-workflow-sidebar .doc-icon {
    flex-basis: 12px;
    min-width: 12px;
    width: 12px;
    height: 12px;
  }
  .system-discovery-item {
    padding: 3px 4px;
    font-size: 8.25px;
  }
  .planning-card-label {
    margin-bottom: 0;
  }
  .ready-deploy-card {
    margin-top: 0;
    padding: var(--space-1) calc(var(--space-2) * .75);
  }
  .ready-deploy-card span {
    font-size: 8.25px;
  }
  .ready-deploy-card strong {
    font-size: 9.25px;
    line-height: 1.1;
  }
  .navbar-container { height: 70px; padding: 0 var(--space-4); }
  .mobile-menu-panel { top: 64px; height: calc(100dvh - 64px); }
  .mobile-menu-content { padding: var(--space-5) var(--space-6) var(--space-8); }
  .nav-brand span { display: none; }
  .nav-actions { gap: var(--space-3); }
  .hero-lead { font-size: 1rem; }
  .section-prefooter-cta {
    padding: var(--space-12) 0 var(--space-16);
  }
  .section-prefooter-cta::before {
    width: 92vw;
    height: 320px;
  }
  .prefooter-cta-title {
    font-size: clamp(2rem, 10vw, 2.5rem);
  }
  .prefooter-cta-copy {
    max-width: none;
    font-size: 1rem;
  }
  .prefooter-cta-button {
    margin-top: var(--space-5);
  }
  .section-integrations {
    padding: var(--space-16) 0;
  }
  .integrations-layout {
    gap: var(--space-10);
  }
  .integrations-heading {
    font-size: 2.25rem;
    line-height: 1.05;
  }
  .integrations-description {
    margin-top: var(--space-6);
    font-size: 1rem;
  }
  .integrations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .integration-card {
    min-height: 64px;
    padding: var(--space-1) var(--space-2);
  }
  .slack-loading-image {
    gap: calc(var(--space-1) * .75);
  }
  .hero-agentic-visual {
    height: 437px;
  }
  .hero-connectors-svg,
  .agent-scenario {
    transform: translateX(-50%) scale(0.78);
  }
  .navbar-container { min-height: 64px; gap: var(--space-3); }
  .nav-actions { gap: var(--space-3); }
  .nav-wordmark { width: 150px; }
  .mobile-menu-row { min-height: 54px; font-size: 1rem; }
  .section-metrics .metrics-heading { font-size: 1.95rem; }
  .section-metrics .metrics-tablet-break { display: none; }
}

@media (max-width: 480px) {
  .hero-agentic-visual {
    height: 358px;
  }
  .hero-connectors-svg,
  .agent-scenario {
    transform: translateX(-50%) scale(0.64);
  }
}

@media (max-width: 420px) {
  .hero-agentic-visual {
    height: 325px;
  }
  .hero-connectors-svg,
  .agent-scenario {
    transform: translateX(-50%) scale(0.58);
  }
}

@media (max-width: 360px) {
  .sticky-cards-column {
    width: min(100%, 300px);
  }
  .hero-agentic-visual {
    height: 280px;
  }
  .hero-connectors-svg,
  .agent-scenario {
    transform: translateX(-50%) scale(0.5);
  }
}

/* 17. Accessibility Focus Rings & Reduced Motion */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  .slack-loading-image,
  .slack-loading-image__dot {
    animation: none;
  }
}