.ai-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #03111e;
  color: #fff;
  padding: 110px 56px 114px;
  scroll-margin-top: 76px;
  letter-spacing: 0;
}

.ai-section::before,
.ai-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px;
  height: 560px;
  border: 1px solid #157aa555;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #02668c70, #05496430 55%, transparent 72%);
  pointer-events: none;
}
.ai-section::before { right: -470px; top: -390px; transform: rotate(26deg); }
.ai-section::after { left: -365px; bottom: -380px; transform: rotate(25deg); }
.ai-inner {
  max-width: 1536px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1fr);
  gap: 7%;
  align-items: center;
}
.ai-visual { position: relative; width: 100%; aspect-ratio: 1.04; min-width: 0; }
.ai-sculpture { position: absolute; inset: -1% -7% -1% -1%; }
.ai-poster, .ai-canvas { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.ai-canvas { opacity: 0; transition: opacity .4s; }
.ai-section[data-renderer="webgl"] .ai-canvas { opacity: 1; }
.ai-section[data-renderer="webgl"] .ai-poster { opacity: 0; }
.ai-orbits { position: absolute; inset: 0; pointer-events: none; }
.ai-orbit { position: absolute; display: block; border: 1px solid #12bef965; border-radius: 50%; }
.ai-orbit-one { width: 82%; height: 40%; left: 9%; top: 13%; transform: rotate(24deg); }
.ai-orbit-two { width: 58%; height: 74%; left: 39%; top: 13%; border-color: #56d78960; transform: rotate(31deg); }
.ai-orbit-three { width: 100%; height: 37%; left: 0; top: 48%; transform: rotate(10deg); }
.ai-orbit i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #70def1;
  box-shadow: 0 0 12px #03cffa;
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-rotate: 0deg;
  animation: ai-orbit-travel 24s linear infinite;
  animation-play-state: paused;
}
.ai-orbit-two i { background: #baff00; box-shadow: 0 0 12px #baff00; animation-duration: 29s; animation-direction: reverse; }
.ai-orbit-three i { animation-duration: 34s; animation-delay: -12s; }
.ai-section[data-running="true"] .ai-orbit i { animation-play-state: running; }
.ai-labels { list-style: none; padding: 0; margin: 0; }
.ai-label { position: absolute; display: flex; align-items: center; gap: 17px; font-size: 19px; line-height: 1.3; color: #a4e6fa; white-space: nowrap; }
.ai-label i { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: #abf1ff; box-shadow: 0 0 9px #04cefc, 0 0 28px #04cefc88; }
.ai-label-automation { left: 13%; top: 11.5%; }
.ai-label-assistants { left: 79%; top: 17%; color: #caff9a; }
.ai-label-assistants i { background: #c3ff84; box-shadow: 0 0 9px #96f93e, 0 0 28px #96f93e88; }
.ai-label-websites { left: 3%; top: 74%; }
.ai-label-insights { left: 82%; top: 87%; }
.ai-copy { position: relative; min-width: 0; }
.ai-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 25px; padding: 9px 17px; border: 1px solid #14718b; border-radius: 30px; color: #edf6fc; font-size: 15px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.ai-eyebrow img { width: 30px; height: 30px; }
.ai-copy h2 { margin: 0; font: 900 84px/.99 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: uppercase; }
.ai-copy h2 > span { display: block; }
.ai-gradient { width: fit-content; color: #45e7cd; background: linear-gradient(100deg, #03c7f0 8%, #2fdecf 50%, #c7f389 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 3px; }
.ai-description { max-width: 625px; margin: 25px 0 0; color: #aeb8c8; font-family: Arial, Helvetica, sans-serif; font-size: 27px; line-height: 1.32; font-weight: 400; }
.ai-signoff { display: flex; align-items: center; gap: 23px; margin: 31px 0 29px; font-size: 15px; font-weight: 800; line-height: 1.5; text-transform: uppercase; }
.ai-signoff > span { display: block; flex: 0 0 80px; height: 5px; background: linear-gradient(90deg, #00e5cf, #00e5cf00); }
.ai-cta { display: inline-flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 30px; padding: 15px 28px; background: #fff; color: #07162a; border: 1px solid #c4faff; border-radius: 8px; font-size: 18px; font-weight: 800; line-height: 1.4; box-shadow: 0 4px 30px #02cffa17; transition: background .2s, box-shadow .2s; }
.ai-cta:hover { background: #e6ffff; box-shadow: 0 4px 32px #02cffa36; }
.ai-cta img { flex: 0 0 24px; transition: transform .2s; }
.ai-cta:hover img { transform: translateX(4px); }
.ai-motion-toggle { position: absolute; left: 7%; bottom: 1%; width: 38px; height: 38px; padding: 9px; border-radius: 50%; border: 1px solid #81bace40; background: #071b2b; cursor: pointer; opacity: .65; transition: opacity .2s; }
.ai-motion-toggle:hover, .ai-motion-toggle:focus-visible { opacity: 1; }
.ai-motion-toggle[hidden] { display: none; }
@keyframes ai-orbit-travel { to { offset-distance: 100%; } }
@media (max-width: 1559px) {
  .ai-section { padding: 90px 48px; }
  .ai-copy h2 { font-size: 72px; }
  .ai-description { font-size: 22px; }
  .ai-label { font-size: 16px; gap: 12px; }
}
@media (max-width: 1199px) {
  .ai-section { padding: 76px 32px; }
  .ai-inner { gap: 5%; }
  .ai-copy h2 { font-size: 58px; }
  .ai-description { font-size: 19px; }
  .ai-eyebrow { font-size: 12px; gap: 10px; }
  .ai-signoff { font-size: 12px; gap: 14px; }
  .ai-signoff > span { flex-basis: 56px; }
  .ai-label { font-size: 13px; gap: 9px; }
  .ai-label i { width: 10px; height: 10px; }
  .ai-label-assistants { left: 76%; }
  .ai-cta { font-size: 16px; min-height: 56px; }
}
@media (max-width: 899px) {
  .ai-section { padding: 64px 28px 70px; }
  .ai-inner { display: flex; flex-direction: column; gap: 32px; max-width: 620px; }
  .ai-visual { width: 92%; max-width: 540px; }
  .ai-copy { width: 100%; }
  .ai-copy h2 { font-size: 68px; }
  .ai-description { max-width: 560px; font-size: 21px; }
  .ai-label { font-size: 14px; }
  .ai-signoff { font-size: 13px; }
}
@media (max-width: 599px) {
  .ai-section { padding: 42px 24px 54px; }
  .ai-inner { gap: 30px; }
  .ai-visual { width: 96%; }
  .ai-label { font-size: 11px; gap: 6px; }
  .ai-label i { width: 8px; height: 8px; }
  .ai-label-assistants { left: 73%; }
  .ai-label-insights { left: 80%; }
  .ai-eyebrow { font-size: 11px; padding: 8px 13px; margin-bottom: 22px; }
  .ai-eyebrow img { width: 23px; height: 23px; }
  .ai-copy h2 { font-size: 44px; line-height: 1.03; }
  .ai-description { font-size: 17px; margin-top: 23px; line-height: 1.6; }
  .ai-signoff { font-size: 11px; margin: 27px 0; gap: 12px; }
  .ai-signoff > span { flex-basis: 45px; height: 4px; }
  .ai-cta { font-size: 16px; min-height: 56px; padding: 13px 22px; gap: 24px; }
  .ai-motion-toggle { width: 32px; height: 32px; padding: 7px; }
}
@media (max-width: 359px) {
  .ai-copy h2 { font-size: 38px; }
  .ai-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orbit i { animation: none; }
  .ai-canvas, .ai-cta, .ai-cta img { transition: none; }
}