/* Full-bleed surfaces, with the approved content grid centred on wide displays. */
@media (min-width: 1441px) {
  .yx-site {
    --wide-gutter: calc((100vw - 1440px) / 2);
  }
  .site-header {
    max-width: 1440px;
    margin-inline: auto;
  }
  body:not(.page-home) .site-header::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--wide-gutter));
    background: #fff;
    z-index: -1;
    pointer-events: none;
  }
  .hero-copy,
  .hero-caption {
    left: calc(92px + var(--wide-gutter));
  }
  .platforms {
    padding-left: calc(92px + var(--wide-gutter));
    padding-right: calc(64px + var(--wide-gutter));
  }
  .chapter {
    padding-left: calc(64px + var(--wide-gutter));
    padding-right: calc(64px + var(--wide-gutter));
  }
  .inner-chapter,
  body:not(.page-privacy) .page-intro,
  body:not(.page-home) .contact-section {
    padding-left: calc(80px + var(--wide-gutter));
    padding-right: calc(80px + var(--wide-gutter));
  }
  .page-home .contact-section {
    padding-inline: var(--wide-gutter);
  }
  .site-footer {
    padding-inline: calc(64px + var(--wide-gutter));
  }
  .hero-art > img {
    object-position: center 58%;
  }
}
/* The form has no decorative vertical divider; its field borders provide grouping. */
.lead-form input:not([type="checkbox"]),
.lead-form textarea {
  border-radius: 10px;
  border-color: #ccd9e9;
  box-shadow: 0 2px 8px #102b5003;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.lead-form input:not([type="checkbox"]):hover,
.lead-form textarea:hover {
  border-color: #9fbbea;
}
.lead-form input:not([type="checkbox"]):focus,
.lead-form textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px #1764ed15;
  background: #fff;
}
.lead-form [aria-invalid="true"] {
  border-color: var(--red);
}
.filing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  line-height: 1.6;
}
.filing a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Decorative motion is separate from the content and never captures pointer input. */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-copy,
.hero-caption {
  z-index: 1;
}
.hero-orbit {
  position: absolute;
  left: 70%;
  top: 46%;
  width: 580px;
  height: 580px;
  margin: -290px;
  border: 1px solid #1764ed2b;
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(-24deg);
}
.hero-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52bde4;
  box-shadow: 0 0 22px #1764ed80;
}
.orbit-two {
  width: 720px;
  height: 720px;
  margin: -360px;
  opacity: 0.45;
  transform: rotateX(68deg) rotateZ(38deg);
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 44%, #77c9ff20, transparent 48%);
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1764ed, #52c4e5);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  z-index: 100;
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero h1 span {
    animation: hero-arrive 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .motion-enabled .hero h1 span:nth-child(2) {
    animation-delay: 0.12s;
  }
  .motion-enabled .hero-copy > p {
    animation: hero-arrive 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .motion-enabled .hero-button {
    animation: hero-arrive 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .motion-enabled .hero-orbit {
    animation: orbit-turn 22s linear infinite;
  }
  .motion-enabled .orbit-two {
    animation: orbit-turn-two 30s linear infinite reverse;
  }
  .motion-enabled .hero-glow {
    animation: hero-light 8s ease-in-out infinite alternate;
  }
  .motion-enabled .hero-art > img {
    transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0)
      scale(1.025);
    transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .motion-enabled .motion-enter {
    animation: content-arrive 0.8s var(--enter-delay, 0ms)
      cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .motion-enabled .process-steps.motion-enter .step-number {
    animation: step-light 0.85s ease both;
  }
  .motion-enabled .process-steps.motion-enter li:nth-child(2) .step-number {
    animation-delay: 0.18s;
  }
  .motion-enabled .process-steps.motion-enter li:nth-child(3) .step-number {
    animation-delay: 0.36s;
  }
  .motion-enabled .process-steps.motion-enter li:nth-child(4) .step-number {
    animation-delay: 0.54s;
  }
  .motion-enabled .step-number {
    display: inline-block;
  }
  .motion-enabled .case-card.motion-enter .bars i {
    transform-origin: bottom;
    animation: bar-build 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .motion-enabled .education-demo {
    position: relative;
  }
  .motion-enabled .education-demo.motion-enter::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      110deg,
      transparent 25%,
      #7cd5ff26 50%,
      transparent 75%
    );
    animation: demo-scan 1.8s ease-out both;
  }
  .motion-enabled .ai-float {
    animation: assistant-arrive 0.7s 0.6s ease both;
  }
  .motion-paused .hero-orbit,
  .motion-paused .hero-glow,
  .hero:not(.hero-in-view) .hero-orbit,
  .hero:not(.hero-in-view) .hero-glow {
    animation-play-state: paused;
  }
  .service-row,
  .platform,
  .case-card,
  .feature-link {
    transition:
      background 0.25s,
      box-shadow 0.25s,
      transform 0.35s;
  }
  .button:not(.hero-button) {
    transition:
      background 0.2s,
      transform 0.25s,
      box-shadow 0.25s;
  }
  .button:hover {
    box-shadow: 0 8px 22px #1764ed22;
  }
  .desktop-nav a {
    position: relative;
  }
  .desktop-nav a::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s;
  }
  .desktop-nav a:hover::after,
  .desktop-nav a:focus-visible::after {
    transform: scaleX(1);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-row:hover,
  .service-row:focus-visible {
    background: radial-gradient(
      ellipse at var(--spot-x, 50%) var(--spot-y, 50%),
      #dbeaffaa,
      transparent 70%
    );
    transform: translateX(6px);
  }
  .platform:hover {
    background: #eaf2ff88;
    transform: translateY(-4px);
  }
  .case-card:hover,
  .feature-link:hover {
    transform: translateY(-6px);
  }
  .case-card .case-card-art {
    transition:
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s;
  }
  .case-card:hover .case-card-art {
    transform: perspective(900px) rotateY(-3deg) rotateX(2deg);
    box-shadow: 14px 18px 36px #102b5012;
  }
}
@keyframes hero-arrive {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes content-arrive {
  from {
    opacity: 0.15;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes orbit-turn {
  from {
    transform: rotateX(62deg) rotateZ(-24deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(336deg);
  }
}
@keyframes orbit-turn-two {
  from {
    transform: rotateX(68deg) rotateZ(38deg);
  }
  to {
    transform: rotateX(68deg) rotateZ(398deg);
  }
}
@keyframes hero-light {
  from {
    opacity: 0.25;
    transform: translateX(-2%);
  }
  to {
    opacity: 1;
    transform: translateX(2%);
  }
}
@keyframes step-light {
  0% {
    color: var(--ink);
    transform: translateY(8px);
  }
  50% {
    color: var(--brand);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes assistant-arrive {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 768px) {
  .hero-orbit {
    display: none;
  }
  .hero-glow {
    background: radial-gradient(ellipse at 70% 80%, #77c9ff1a, transparent 55%);
  }
  .motion-enabled .hero-art > img {
    transform: none;
  }
  .filing {
    justify-content: center;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere,
  .scroll-progress {
    display: none;
  }
  .hero-art > img {
    transform: none;
  }
}

@keyframes bar-build {
  from {
    transform: scaleY(0.1);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes demo-scan {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}