/* Shared layout safeguards for phones, tablets, and desktop browsers. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.breakdance .bde-column,
.breakdance .bde-div,
.codex-chat-popup-field { min-width: 0; }
.breakdance .bde-heading,
.breakdance .bde-text { max-width: 100%; overflow-wrap: break-word; }
.breakdance img { max-width: 100%; }
.breakdance a[href^="mailto:"] { overflow-wrap: anywhere; }

/* The dialog, rather than its form, owns scrolling on short screens. */
.codex-chat-bubble-modal {
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  align-items: start;
  padding: clamp(12px, 3vw, 36px);
}

.codex-chat-bubble-modal.is-open {
  overflow-y: auto;
}
.codex-chat-bubble-shell {
  box-sizing: border-box;
  overflow: clip;
  min-width: 0;
  max-height: none;
  margin: auto;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
.codex-chat-bubble-modal:not(.is-open) { visibility: hidden; }
.codex-chat-bubble-backdrop { position: fixed; }
.codex-chat-popup-form,
.codex-chat-bubble-text { min-width: 0; }
.codex-chat-bubble-shell::after { max-width: 100%; left: 0; }

.breakdance .web-focus-section,
.web-focus-section {
  --web-ink: #1c1c1c;
  --web-paper: #fbfaf7;
  --web-muted: #65625e;
  --web-line: #e6e0da;
  --web-yellow: #f5b501;
  --web-shadow: 0 24px 70px rgba(28, 28, 28, 0.08);
  overflow: visible !important;
  padding: 76px 20px 82px !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(245, 181, 1, 0.13), transparent 26%),
    linear-gradient(180deg, #fff 0%, var(--web-paper) 100%) !important;
  color: var(--web-ink) !important;
  font-family: Urbanist, system-ui, sans-serif !important;
}

.breakdance .bde-logo-list.un-image-carousel-container {
  max-width: 100vw;
  overflow: hidden;
}

.web-focus-section * {
  box-sizing: border-box;
}

.web-focus-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.web-focus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  padding: 9px 16px;
  border: 1px solid rgba(245, 181, 1, 0.55);
  border-radius: 999px;
  background: rgba(245, 181, 1, 0.11);
  color: var(--web-ink) !important;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.web-focus-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--web-yellow);
  box-shadow: 0 0 0 7px rgba(245, 181, 1, 0.16);
}

.web-focus-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.65fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 34px;
}

.web-focus-title {
  max-width: 820px !important;
  margin: 0 !important;
  color: var(--web-ink) !important;
  font-size: clamp(48px, 7vw, 92px) !important;
  line-height: 0.9 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.web-focus-title span {
  color: var(--web-yellow);
}

.web-focus-copy {
  margin: 0 !important;
  color: var(--web-muted) !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.web-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.web-card {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--web-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--web-shadow);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.web-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 181, 1, 0.7);
  box-shadow: 0 28px 76px rgba(28, 28, 28, 0.12);
}

.web-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: var(--web-ink);
  color: var(--web-yellow);
}

.web-card-icon svg,
.web-portfolio-button svg {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.web-card-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.25;
}

.web-card h3 {
  margin: 0 0 12px !important;
  color: #000 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.web-card p {
  margin: 0 !important;
  color: var(--web-muted) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.web-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 22px;
  border: 1px solid var(--web-line);
  border-radius: 26px;
  background: var(--web-ink);
  color: #fff;
  overflow: visible;
}

.web-step {
  min-height: 128px;
  padding: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.web-step:last-child {
  border-right: 0;
}

.web-step strong {
  display: block;
  margin-bottom: 16px;
  color: var(--web-yellow);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.web-step span {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

.web-portfolio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid rgba(28, 28, 28, 0.1);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--web-shadow);
}

.web-portfolio-cta p {
  max-width: 670px;
  margin: 0 !important;
  color: var(--web-muted) !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.web-portfolio-cta strong {
  color: var(--web-ink);
  font-weight: 900;
}

.web-portfolio-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--web-yellow);
  color: var(--web-ink) !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.web-portfolio-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(245, 181, 1, 0.28);
}

.web-portfolio-button svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: no-preference) {
  .web-focus-section .codex-reveal-left,
  .web-focus-section .codex-reveal-right {
    transform: translateY(34px) scale(.985);
  }

  .web-focus-section .codex-reveal-left.codex-visible,
  .web-focus-section .codex-reveal-right.codex-visible {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1023px) {
  .breakdance #services-home__h2 {
    width: 100% !important;
    font-size: clamp(28px, 4.5vw, 48px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  .breakdance .codex-contact-form-card { min-width: 0; }
  .codex-chat-bubble-shell { column-gap: 22px; }
  .web-focus-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .web-focus-copy {
    max-width: 720px;
  }
  .web-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .web-step:nth-child(2),
  .web-step:nth-child(4) {
    border-right: 0;
  }
  .web-step:nth-child(1),
  .web-step:nth-child(2),
  .web-step:nth-child(3),
  .web-step:nth-child(4) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .web-step:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .codex-chat-bubble-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 54px 24px 24px;
  }
  .codex-chat-bubble-copy { display: contents; }
  .codex-chat-bubble-photo-wrap {
    width: 150px;
    align-self: center;
    margin: 0 auto;
  }
  .codex-chat-bubble-photo { width: 100%; height: auto; aspect-ratio: 1; }
  .codex-chat-bubble-hand-note { display: none; }
  .codex-chat-bubble-text h2 { font-size: clamp(28px, 5vw, 40px) !important; }
  .codex-chat-popup-form { width: 100%; }
  .codex-chat-popup-submit { margin-top: 0; width: 100%; }
  .codex-chat-popup-note { max-width: none; }
  .codex-chat-bubble-modal.is-open .codex-chat-bubble-shell {
    animation: responsiveBubblePop 350ms ease-out both;
  }
}

@media (max-width: 600px) {
  .breakdance .bde-header-builder__container { gap: 12px !important; }
  .breakdance .bde-image-15-104 { width: auto; max-width: 72px; flex: 1 1 0; }
  .breakdance .bde-menu-15-105 { flex: 0 0 44px; width: 44px; }
  .breakdance .bde-div-15-121 { flex: 0 0 auto; }
  .breakdance .bde-div-15-121 { flex-wrap: nowrap; }
  .breakdance .breakdance-menu-toggle { min-width: 44px; min-height: 44px; }
  .breakdance .bde-columns { gap: 28px; }
  .breakdance .bde-column-24-150,
  .breakdance .bde-column-24-151 { padding: 24px 20px !important; }
  .breakdance .bde-heading-24-153,
  .breakdance .bde-heading-24-155 { font-size: 22px !important; line-height: 1.25 !important; }
  .breakdance .codex-va-support-left-list,
  .breakdance .codex-va-support-list { font-size: 16px !important; line-height: 1.6 !important; }
  .breakdance .codex-contact-form-card { padding: 28px 20px !important; }
  .breakdance .codex-contact-photo-wrap,
  .breakdance .codex-contact-photo { min-height: 0 !important; height: 320px !important; }
  .breakdance .codex-contact-form-copy h2 { font-size: clamp(32px, 9vw, 42px) !important; }
  .breakdance .codex-contact-field input,
  .breakdance .codex-contact-field select,
  .breakdance .codex-contact-field textarea,
  .codex-chat-popup-field input,
  .codex-chat-popup-field select,
  .codex-chat-popup-field textarea { font-size: 16px !important; min-height: 44px !important; }
  .codex-chat-popup-row { grid-template-columns: minmax(0, 1fr); }
  .codex-chat-popup-note,
  .codex-chat-popup-submit,
  .codex-chat-popup-status { grid-column: 1 / -1; width: 100%; }
  .codex-chat-bubble-close { width: 44px; height: 44px; }
  .codex-chat-bubble-text p { font-size: 16px; }
  .web-focus-section {
    padding: 48px 16px 54px !important;
  }
  .web-focus-title {
    font-size: clamp(42px, 14vw, 58px) !important;
  }
  .web-focus-copy {
    font-size: 17px !important;
  }
  .web-focus-grid,
  .web-process {
    grid-template-columns: 1fr;
  }
  .web-card {
    min-height: auto;
    padding: 22px;
    border-radius: 22px;
  }
  .web-card-icon {
    margin-bottom: 18px;
  }
  .web-step,
  .web-step:nth-child(2),
  .web-step:nth-child(4) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .web-step:nth-child(5) {
    grid-column: auto;
  }
  .web-step:last-child {
    border-bottom: 0;
  }
  .web-portfolio-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
    border-radius: 22px;
  }
  .web-portfolio-cta p {
    font-size: 17px !important;
  }
  .web-portfolio-button {
    width: 100%;
  }
}
@keyframes responsiveBubblePop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .codex-chat-bubble-modal.is-open .codex-chat-bubble-shell { animation: none !important; transform: none; }
}


/* Product Design option 3: Web Development Orbit */
.breakdance .web-orbit-section,
.web-orbit-section {
  position: relative;
  isolation: isolate;
  overflow: clip !important;
  padding: clamp(72px, 7vw, 116px) 20px clamp(76px, 7vw, 112px) !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(245, 181, 1, .14), transparent 27%),
    radial-gradient(circle at 18% 80%, rgba(115, 142, 92, .12), transparent 28%),
    linear-gradient(180deg, #fffdf9 0%, #fbfaf7 100%) !important;
}

.web-orbit-section::before,
.web-orbit-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.web-orbit-section::before {
  width: min(44vw, 640px);
  height: min(44vw, 640px);
  right: -12vw;
  top: 6%;
  background: radial-gradient(circle, rgba(245,181,1,.18), rgba(245,181,1,0) 68%);
  animation: webOrbitBlob 10s ease-in-out infinite alternate;
}

.web-orbit-section::after {
  width: min(32vw, 420px);
  height: min(32vw, 420px);
  left: -10vw;
  bottom: 3%;
  background: radial-gradient(circle, rgba(115,142,92,.16), rgba(115,142,92,0) 70%);
  animation: webOrbitBlob 12s ease-in-out infinite alternate-reverse;
}

.web-orbit-inner {
  width: min(1540px, 100%);
  display: grid;
  grid-template-columns: minmax(330px, .58fr) minmax(620px, 1fr);
  align-items: center;
  column-gap: clamp(44px, 5vw, 92px);
}

.web-orbit-copy {
  position: relative;
  z-index: 4;
}

.web-orbit-section .web-focus-title {
  max-width: 650px !important;
  font-size: clamp(62px, 6vw, 108px) !important;
  letter-spacing: -.045em !important;
  line-height: .9 !important;
}

.web-orbit-section .web-focus-title span {
  position: relative;
  display: inline-block;
  color: var(--web-yellow);
}

.web-orbit-section .web-focus-title span::after {
  content: "";
  position: absolute;
  left: .03em;
  right: .15em;
  bottom: -.08em;
  height: .08em;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-2deg);
}

.web-orbit-section .web-focus-copy {
  max-width: 560px;
  margin-top: 48px !important;
  font-size: clamp(19px, 1.35vw, 24px) !important;
}

.web-orbit-stage {
  position: relative;
  min-height: 650px;
  perspective: 1200px;
}

.web-orbit-ring {
  position: absolute;
  left: 11%;
  top: 7%;
  width: 76%;
  height: 73%;
  border-radius: 50%;
  border: 2px dashed rgba(245, 181, 1, .42);
  transform: rotate(-10deg);
  animation: webOrbitSpin 18s linear infinite;
}

.web-orbit-ring-two {
  left: 17%;
  top: 12%;
  width: 63%;
  height: 60%;
  border-color: rgba(115, 142, 92, .28);
  transform: rotate(16deg);
  animation-duration: 24s;
  animation-direction: reverse;
}

.web-orbit-dot {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--web-yellow);
  box-shadow: 0 0 0 10px rgba(245,181,1,.13), 0 0 28px rgba(245,181,1,.55);
  animation: webOrbitPulse 2.6s ease-in-out infinite;
}

.web-orbit-dot-one { left: 16%; top: 29%; }
.web-orbit-dot-two { right: 16%; top: 40%; animation-delay: -.9s; background: #738e5c; box-shadow: 0 0 0 10px rgba(115,142,92,.13), 0 0 28px rgba(115,142,92,.4); }
.web-orbit-dot-three { left: 49%; bottom: 13%; animation-delay: -1.6s; }

.web-orbit-browser {
  position: absolute;
  z-index: 3;
  left: 32%;
  top: 20%;
  width: min(38vw, 430px);
  min-width: 330px;
  aspect-ratio: 1.25;
  border-radius: 26px;
  padding: 58px 34px 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,242,233,.9));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 46px 110px rgba(28,28,28,.18), inset 0 1px 0 rgba(255,255,255,.9);
  transform: rotateX(7deg) rotateY(-10deg) rotateZ(2deg);
  animation: webOrbitFloat 5s ease-in-out infinite;
}

.web-browser-top {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 44px;
  border-radius: 26px 26px 0 0;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 24px;
}

.web-browser-top span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.web-browser-top span:nth-child(1) { background: #ff5f57; }
.web-browser-top span:nth-child(2) { background: #ffbd2e; }
.web-browser-top span:nth-child(3) { background: #28c840; }

.web-browser-hero {
  height: 126px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.85) 0 8%, transparent 9%),
    linear-gradient(135deg, #e6d9b7 0%, #738e5c 48%, #1f3d2a 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 16px 30px rgba(28,28,28,.1);
}

.web-browser-lines {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.web-browser-lines span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: rgba(28,28,28,.12);
}
.web-browser-lines span:nth-child(1) { width: 44%; background: #1c1c1c; }
.web-browser-lines span:nth-child(2) { width: 72%; }
.web-browser-lines span:nth-child(3) { width: 58%; }

.web-browser-button {
  position: absolute;
  left: 34px;
  bottom: 32px;
  min-width: 116px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--web-yellow);
  color: var(--web-ink);
  font: 900 13px/1 Urbanist, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 14px 26px rgba(245,181,1,.28);
}

.web-browser-cursor {
  position: absolute;
  right: -22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  padding: 13px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(28,28,28,.18);
  filter: invert(74%) sepia(87%) saturate(1476%) hue-rotate(358deg) brightness(101%) contrast(95%);
}

.web-orbit-card {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: min(31vw, 360px);
  min-width: 286px;
  padding: 15px 18px 15px 15px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(28,28,28,.08);
  box-shadow: 0 28px 70px rgba(28,28,28,.12), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  animation: webSatelliteFloat var(--orbit-float, 5s) ease-in-out infinite;
}

.web-orbit-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(245,181,1,.55);
  box-shadow: 0 36px 82px rgba(28,28,28,.16), 0 0 0 8px rgba(245,181,1,.1);
}

.web-orbit-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(145deg, #1c1c1c, #34302a);
  box-shadow: 0 20px 38px rgba(28,28,28,.2), inset 0 1px 0 rgba(255,255,255,.1);
}

.web-orbit-icon::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(circle, rgba(245,181,1,.38), transparent 70%);
  filter: blur(12px);
}

.web-orbit-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: invert(73%) sepia(98%) saturate(1001%) hue-rotate(359deg) brightness(101%) contrast(101%) drop-shadow(0 9px 12px rgba(0,0,0,.18));
}

.web-orbit-card h3 {
  margin: 0 0 5px !important;
  color: #111 !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
}

.web-orbit-card p {
  margin: 0 !important;
  color: #5f6268 !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
}

.web-orbit-card::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39df49;
  box-shadow: 0 0 0 6px rgba(57,223,73,.12);
}

.web-orbit-card-code { left: 7%; top: 11%; --orbit-float: 5.2s; }
.web-orbit-card-devices { right: 0; top: 12%; --orbit-float: 5.8s; animation-delay: -.8s; }
.web-orbit-card-pages { left: 0; top: 50%; --orbit-float: 5.6s; animation-delay: -1.4s; }
.web-orbit-card-speed { right: 0; top: 52%; --orbit-float: 5s; animation-delay: -.4s; }

.web-orbit-process {
  position: absolute;
  left: 10%;
  right: 7%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.web-orbit-process::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 27px;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(245,181,1,.9) 0 22px, transparent 22px 38px);
  animation: webOrbitPath 7s linear infinite;
}

.web-orbit-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.web-orbit-step strong {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin-bottom: 12px;
  color: #111;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(245,181,1,.42);
  box-shadow: 0 16px 38px rgba(245,181,1,.2), inset 0 0 0 10px rgba(245,181,1,.08);
  font-size: 20px;
  font-weight: 950;
}

.web-orbit-step span {
  color: #111;
  font-size: 16px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.web-orbit-step small {
  max-width: 110px;
  margin-top: 5px;
  color: #69645f;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
}

.web-orbit-cta {
  grid-column: 1 / -1;
  margin-top: clamp(24px, 3vw, 44px);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
}

@keyframes webOrbitSpin { to { transform: rotate(350deg); } }
@keyframes webOrbitPulse { 0%,100% { transform: scale(.8); opacity:.48; } 50% { transform: scale(1.18); opacity:1; } }
@keyframes webOrbitFloat { 0%,100% { transform: rotateX(7deg) rotateY(-10deg) rotateZ(2deg) translateY(0); } 50% { transform: rotateX(7deg) rotateY(-10deg) rotateZ(2deg) translateY(-14px); } }
@keyframes webSatelliteFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes webOrbitPath { to { background-position: 76px 0; } }
@keyframes webOrbitBlob { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(24px,-18px,0) scale(1.06); } }

@media (max-width: 1180px) {
  .web-orbit-inner {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }
  .web-orbit-stage {
    min-height: 680px;
  }
  .web-orbit-section .web-focus-title {
    max-width: 820px !important;
  }
  .web-orbit-section .web-focus-copy {
    margin-top: 28px !important;
    max-width: 760px;
  }
}

@media (max-width: 760px) {
  .web-orbit-section {
    padding: 58px 14px 66px !important;
  }
  .web-orbit-section .web-focus-title {
    font-size: clamp(44px, 14vw, 62px) !important;
  }
  .web-orbit-section .web-focus-copy {
    margin-top: 26px !important;
    font-size: 17px !important;
  }
  .web-orbit-stage {
    min-height: auto;
    display: grid;
    gap: 16px;
    perspective: none;
  }
  .web-orbit-ring,
  .web-orbit-dot {
    display: none;
  }
  .web-orbit-browser,
  .web-orbit-card,
  .web-orbit-process {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }
  .web-orbit-browser {
    order: 1;
    aspect-ratio: auto;
    min-height: 290px;
    transform: none;
    animation: webSatelliteFloat 5s ease-in-out infinite;
  }
  .web-orbit-card {
    grid-template-columns: 74px minmax(0,1fr);
    padding: 14px;
  }
  .web-orbit-card-code { order: 2; }
  .web-orbit-card-devices { order: 3; }
  .web-orbit-card-pages { order: 4; }
  .web-orbit-card-speed { order: 5; }
  .web-orbit-icon {
    width: 74px;
    height: 74px;
    border-radius: 21px;
  }
  .web-orbit-icon img {
    width: 40px;
    height: 40px;
  }
  .web-orbit-process {
    order: 6;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  .web-orbit-process::before {
    display: none;
  }
  .web-orbit-step strong {
    width: 42px;
    height: 42px;
    font-size: 15px;
    margin-bottom: 8px;
  }
  .web-orbit-step span {
    font-size: 11px;
  }
  .web-orbit-step small {
    display: none;
  }
}

.web-orbit-stage .codex-reveal,
.web-orbit-process .codex-reveal {
  opacity: 1 !important;
  transform: none !important;
}

.web-orbit-stage .codex-reveal,
.web-orbit-process .codex-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* Product Design selected reference: connected 3D service cards */
.breakdance .web-system-section,
.web-system-section {
  position: relative;
  isolation: isolate;
  overflow: clip !important;
  padding: clamp(72px, 7vw, 112px) 18px clamp(76px, 7vw, 110px) !important;
  background:
    radial-gradient(circle at 6% 18%, rgba(245, 181, 1, .12), transparent 24%),
    radial-gradient(circle at 92% 60%, rgba(115, 142, 92, .08), transparent 26%),
    linear-gradient(180deg, #fffdf9 0%, #fbfaf7 100%) !important;
}

.web-system-section::before,
.web-system-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.web-system-section::before {
  width: 560px;
  height: 560px;
  left: -190px;
  top: 80px;
  background: radial-gradient(circle, rgba(245,181,1,.12), rgba(245,181,1,0) 68%);
  animation: webSystemBlob 10s ease-in-out infinite alternate;
}

.web-system-section::after {
  width: 460px;
  height: 460px;
  right: -160px;
  bottom: 80px;
  background: radial-gradient(circle, rgba(245,181,1,.10), rgba(245,181,1,0) 72%);
  animation: webSystemBlob 12s ease-in-out infinite alternate-reverse;
}

.web-system-inner {
  width: min(1580px, 100%);
  margin: 0 auto;
}

.web-system-top {
  display: grid;
  grid-template-columns: minmax(520px, .96fr) minmax(340px, .64fr);
  gap: clamp(44px, 7vw, 140px);
  align-items: end;
  margin-bottom: 34px;
}

.web-system-heading {
  min-width: 0;
}

.web-system-section .web-focus-title {
  max-width: 820px !important;
  font-size: clamp(64px, 6.8vw, 116px) !important;
  line-height: .88 !important;
  letter-spacing: -.05em !important;
}

.web-system-section .web-focus-title span {
  color: var(--web-yellow);
}

.web-system-section .web-focus-copy {
  max-width: 560px !important;
  margin: 0 0 30px !important;
  font-size: clamp(20px, 1.45vw, 27px) !important;
  line-height: 1.38 !important;
}

.web-system-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 56px);
  min-height: 440px;
  padding: 42px 34px 32px;
  border-radius: 42px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(28,28,28,.08);
  box-shadow: 0 26px 92px rgba(28,28,28,.08), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.web-system-card {
  position: relative;
  z-index: 2;
  align-self: end;
  min-height: 260px;
  padding: 132px 28px 26px;
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 22px 64px rgba(28,28,28,.08), inset 0 1px 0 rgba(255,255,255,.94);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  animation: webSystemFloat var(--float-speed, 5.4s) ease-in-out infinite;
}

.web-system-card:nth-of-type(2) { --float-speed: 5.8s; animation-delay: -.8s; }
.web-system-card:nth-of-type(3) { --float-speed: 5.2s; animation-delay: -1.4s; }
.web-system-card:nth-of-type(4) { --float-speed: 5.6s; animation-delay: -.4s; }

.web-system-card:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(245,181,1,.45);
  box-shadow: 0 34px 80px rgba(28,28,28,.13), 0 0 0 8px rgba(245,181,1,.08);
}

.web-system-icon {
  position: absolute;
  left: 50%;
  top: -34px;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 38px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(145deg, #fff, #f7f2e9);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 24px 58px rgba(28,28,28,.14), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -24px 28px rgba(28,28,28,.035);
}

.web-system-icon::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(circle, rgba(245,181,1,.36), transparent 66%);
  filter: blur(14px);
}

.web-system-icon-dark {
  background: linear-gradient(145deg, #161616, #332c20);
}

.web-system-icon-gauge {
  background: linear-gradient(145deg, #222, #fff2c7 145%);
}

.web-system-icon img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: invert(73%) sepia(98%) saturate(1001%) hue-rotate(359deg) brightness(101%) contrast(101%) drop-shadow(0 12px 15px rgba(0,0,0,.16));
}

.web-system-card-devices .web-system-icon img {
  width: 88px;
  height: 88px;
  filter: invert(8%) sepia(8%) saturate(532%) hue-rotate(2deg) brightness(96%) contrast(94%) drop-shadow(0 12px 15px rgba(0,0,0,.12));
}

.web-system-chip {
  position: absolute;
  top: -18px;
  right: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(28,28,28,.06);
  box-shadow: 0 14px 32px rgba(28,28,28,.08);
  color: #1c1c1c;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.web-system-chip i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #66e61c;
  box-shadow: 0 0 0 7px rgba(102,230,28,.14), 0 0 18px rgba(102,230,28,.42);
}

.web-system-card h3 {
  margin: 0 0 16px !important;
  color: #111 !important;
  font-size: clamp(20px, 1.45vw, 27px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
}

.web-system-card p {
  margin: 0 !important;
  color: #6a625d !important;
  font-size: clamp(16px, 1.05vw, 20px) !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
}

.web-system-path {
  position: absolute;
  z-index: 1;
  top: 45%;
  width: 18%;
  height: 92px;
  border-top: 4px dotted rgba(245,181,1,.72);
  border-right: 4px dotted rgba(245,181,1,.72);
  border-radius: 0 999px 999px 0;
  animation: webSystemPath 5.8s linear infinite;
}

.web-system-path::before,
.web-system-path::after {
  content: "";
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5b501;
  border: 8px solid rgba(255,255,255,.86);
  box-shadow: 0 0 0 1px rgba(245,181,1,.35), 0 16px 30px rgba(245,181,1,.24);
}

.web-system-path::before {
  right: -24px;
  top: -25px;
}

.web-system-path::after {
  right: -25px;
  top: 50px;
  width: 18px;
  height: 18px;
  border-width: 5px;
}

.web-system-path-one { left: 22%; }
.web-system-path-two { left: 47%; }
.web-system-path-three { left: 72%; }

.web-system-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 34px);
  margin-top: 26px;
}

.web-system-steps::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(245,181,1,.8) 0 22px, transparent 22px 42px);
  animation: webSystemPath 6.5s linear infinite;
}

.web-system-step {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 18px;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(28,28,28,.06);
  box-shadow: 0 20px 52px rgba(28,28,28,.08), inset 0 1px 0 rgba(255,255,255,.96);
  transition: transform .25s ease, box-shadow .25s ease;
}

.web-system-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(28,28,28,.12), 0 0 0 7px rgba(245,181,1,.08);
}

.web-system-step strong {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #111;
  background: #f5b501;
  box-shadow: inset 0 0 0 9px rgba(255,255,255,.25), 0 14px 32px rgba(245,181,1,.28);
  font-size: 18px;
  font-weight: 950;
}

.web-system-step img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: invert(8%) sepia(8%) saturate(532%) hue-rotate(2deg) brightness(96%) contrast(94%);
}

.web-system-step span {
  grid-column: 3;
  margin-bottom: -4px;
  color: #111;
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.web-system-step small {
  grid-column: 3;
  color: #6a625d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.22;
}

.web-system-cta {
  margin-top: 26px;
  background: rgba(255,255,255,.86);
}

@keyframes webSystemFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes webSystemPath {
  to { background-position: 84px 0; }
}

@keyframes webSystemBlob {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(20px,-18px,0) scale(1.06); }
}

@media (max-width: 1180px) {
  .web-system-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .web-system-section .web-focus-copy {
    max-width: 780px !important;
    margin: 0 !important;
  }
  .web-system-panel {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 72px 24px;
    padding-top: 70px;
  }
  .web-system-path {
    display: none;
  }
  .web-system-card {
    min-height: 240px;
  }
  .web-system-steps {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .web-system-steps::before {
    display: none;
  }
  .web-system-step:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .web-system-section {
    padding: 56px 14px 64px !important;
  }
  .web-system-section .web-focus-title {
    font-size: clamp(42px, 13vw, 60px) !important;
    line-height: .9 !important;
  }
  .web-system-section .web-focus-copy {
    font-size: 17px !important;
  }
  .web-system-panel {
    grid-template-columns: 1fr;
    gap: 68px;
    min-height: auto;
    padding: 70px 18px 24px;
    border-radius: 32px;
  }
  .web-system-card {
    min-height: auto;
    padding: 112px 22px 24px;
    border-radius: 24px;
  }
  .web-system-icon {
    width: 128px;
    height: 128px;
    border-radius: 32px;
  }
  .web-system-icon img {
    width: 66px;
    height: 66px;
  }
  .web-system-chip {
    right: 16px;
    font-size: 12px;
    padding: 8px 12px;
  }
  .web-system-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .web-system-step,
  .web-system-step:nth-child(5) {
    grid-column: auto;
  }
}

.web-system-section .web-system-card.codex-reveal,
.web-system-section .web-system-step.codex-reveal,
.web-system-section .web-system-cta.codex-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* Compact spacing requested for What I Bring section */
.breakdance .web-system-section,
.web-system-section {
  padding-top: clamp(42px, 4.4vw, 74px) !important;
  padding-bottom: clamp(46px, 4.8vw, 78px) !important;
}
.web-system-top {
  margin-bottom: 22px !important;
  gap: clamp(24px, 4vw, 76px) !important;
}
.web-system-section .web-focus-kicker {
  margin-bottom: 12px !important;
}
.web-system-section .web-focus-title {
  font-size: clamp(46px, 5.45vw, 88px) !important;
  line-height: .9 !important;
}
.web-system-section .web-focus-copy {
  margin-bottom: 12px !important;
  font-size: clamp(17px, 1.18vw, 22px) !important;
  line-height: 1.35 !important;
}
.web-system-panel {
  min-height: 350px !important;
  padding: 34px 30px 28px !important;
  border-radius: 34px !important;
}
.web-system-card {
  min-height: 218px !important;
  padding: 110px 24px 22px !important;
  border-radius: 24px !important;
}
.web-system-icon {
  width: 126px !important;
  height: 126px !important;
  border-radius: 32px !important;
  top: -22px !important;
}
.web-system-icon img {
  width: 62px !important;
  height: 62px !important;
}
.web-system-card-devices .web-system-icon img {
  width: 74px !important;
  height: 74px !important;
}
.web-system-card h3 {
  font-size: clamp(18px, 1.18vw, 22px) !important;
  margin-bottom: 10px !important;
}
.web-system-card p {
  font-size: clamp(14px, .92vw, 17px) !important;
  line-height: 1.38 !important;
}
.web-system-steps {
  margin-top: 18px !important;
  gap: clamp(10px, 1.45vw, 22px) !important;
}
.web-system-step {
  min-height: 76px !important;
  padding: 12px 16px !important;
  border-radius: 22px !important;
  gap: 10px !important;
}
.web-system-step strong {
  width: 46px !important;
  height: 46px !important;
  font-size: 16px !important;
}
.web-system-step img {
  width: 28px !important;
  height: 28px !important;
}
.web-system-step small {
  font-size: 12px !important;
}
.web-system-cta {
  margin-top: 18px !important;
  padding: 18px 24px !important;
}
.web-system-cta p {
  font-size: 17px !important;
}
@media (max-width: 1180px) {
  .web-system-section { padding-top: 44px !important; padding-bottom: 54px !important; }
  .web-system-top { gap: 14px !important; margin-bottom: 20px !important; }
  .web-system-section .web-focus-title { font-size: clamp(42px, 7vw, 62px) !important; }
  .web-system-panel { gap: 56px 20px !important; padding: 58px 24px 24px !important; }
  .web-system-card { min-height: 210px !important; }
}
@media (max-width: 640px) {
  .web-system-section { padding-top: 38px !important; padding-bottom: 46px !important; }
  .web-system-section .web-focus-title { font-size: clamp(34px, 10.7vw, 46px) !important; }
  .web-system-panel { gap: 50px !important; padding: 58px 14px 18px !important; border-radius: 26px !important; }
  .web-system-card { padding: 98px 18px 20px !important; }
  .web-system-icon { width: 112px !important; height: 112px !important; }
  .web-system-cta { padding: 18px !important; }
}

.web-system-section .codex-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Selected What I Bring reference: compact 3D website-build system */
.breakdance .web-system-section,
.web-system-section {
  background: #fffdf9 !important;
  padding: clamp(44px, 4.8vw, 76px) 18px clamp(48px, 5vw, 82px) !important;
}

.web-system-inner {
  width: min(1588px, 100%) !important;
}

.web-system-top {
  grid-template-columns: minmax(430px, 680px) minmax(320px, 500px) !important;
  align-items: end !important;
  gap: clamp(22px, 3vw, 52px) !important;
  justify-content: center !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 26px !important;
}

.web-system-section .web-focus-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(245,181,1,.5) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 30px rgba(28,28,28,.06) !important;
  color: #111 !important;
  font-size: 12px !important;
  letter-spacing: .28em !important;
}

.web-system-section .web-focus-kicker::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f5b501;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.44), 0 0 22px rgba(245,181,1,.38);
}

.web-system-section .web-focus-title {
  max-width: 760px !important;
  color: #111 !important;
  font-size: clamp(54px, 5.45vw, 96px) !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.web-system-section .web-focus-title span {
  color: #f5b501 !important;
}

.web-system-section .web-focus-copy {
  max-width: 560px !important;
  margin: 0 0 18px !important;
  color: #696f78 !important;
  font-size: clamp(18px, 1.35vw, 25px) !important;
  line-height: 1.35 !important;
}

@media (min-width: 1320px) {
  .web-system-section .web-focus-copy {
    transform: translateX(-10px);
  }
}

.web-system-panel {
  min-height: 382px !important;
  padding: 56px 34px 34px !important;
  gap: clamp(26px, 3vw, 58px) !important;
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,237,.62)) !important;
  border: 1px solid rgba(28,28,28,.08) !important;
  box-shadow: 0 22px 70px rgba(28,28,28,.06), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.web-system-card {
  min-height: 242px !important;
  padding: 142px 26px 24px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 22px 58px rgba(28,28,28,.07), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.web-system-card:hover {
  box-shadow: 0 30px 74px rgba(28,28,28,.11), 0 0 0 8px rgba(245,181,1,.08) !important;
}

.web-system-icon {
  top: -44px !important;
  width: 194px !important;
  height: 158px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateX(-50%) rotate(-2deg) !important;
}

.web-system-icon::before {
  inset: 28px 20px 10px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(245,181,1,.36), rgba(245,181,1,0) 70%) !important;
  filter: blur(18px) !important;
}

.web-system-icon img,
.web-system-card-devices .web-system-icon img {
  width: 194px !important;
  height: 158px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 20px rgba(28,28,28,.12)) !important;
}

.web-system-card h3 {
  font-size: clamp(18px, 1.16vw, 23px) !important;
  line-height: 1.02 !important;
}

.web-system-card p {
  color: #6b625d !important;
  font-size: clamp(14px, .96vw, 18px) !important;
}

.web-system-chip {
  top: -16px !important;
  right: 20px !important;
  padding: 10px 15px !important;
  background: rgba(255,255,255,.92) !important;
  color: #202020 !important;
}

.web-system-chip i {
  background: #6ce82e !important;
}

.web-system-card-code .web-system-chip i {
  background: #6ce82e !important;
}

.web-system-path {
  top: 44% !important;
  width: 17% !important;
  height: 78px !important;
  border-top-color: rgba(245,181,1,.78) !important;
  border-right-color: rgba(245,181,1,.78) !important;
}

.web-system-path::before,
.web-system-path::after {
  background: #f5b501 !important;
  box-shadow: 0 0 0 1px rgba(245,181,1,.35), 0 15px 30px rgba(245,181,1,.25), 0 0 24px rgba(245,181,1,.2) !important;
}

.web-system-steps {
  margin-top: 18px !important;
  gap: clamp(14px, 1.45vw, 24px) !important;
}

.web-system-step {
  grid-template-columns: 52px 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 13px !important;
  row-gap: 4px !important;
  min-height: 88px !important;
  padding: 14px 20px !important;
  border-radius: 34px !important;
  align-items: center !important;
  background: rgba(255,255,255,.92) !important;
}

.web-system-step strong {
  width: 50px !important;
  height: 50px !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  background: #f5b501 !important;
}

.web-system-step img {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: center !important;
  align-self: center !important;
}

.web-system-step span {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  align-self: end !important;
}

.web-system-step small {
  grid-column: 3 !important;
  grid-row: 2 !important;
  align-self: start !important;
}

.web-system-cta {
  border-radius: 22px !important;
}

.web-system-section .web-system-cta {
  justify-content: center !important;
  gap: clamp(22px, 3.2vw, 56px) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.web-system-section .web-system-cta p {
  max-width: 720px !important;
}

.web-system-section .web-system-cta .web-portfolio-button {
  flex: 0 0 auto !important;
}

@media (max-width: 1180px) {
  .web-system-top {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .web-system-section .web-focus-copy {
    margin-bottom: 0 !important;
  }

  .web-system-panel {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    padding-top: 68px !important;
    gap: 72px 22px !important;
  }

  .web-system-card {
    min-height: 228px !important;
  }

  .web-system-section .web-system-cta {
    max-width: 760px !important;
    text-align: center !important;
  }

  .web-system-step:nth-child(5) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(100%, 560px) !important;
    justify-content: stretch !important;
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  .breakdance .web-system-section,
  .web-system-section {
    padding: 38px 14px 46px !important;
  }

  .web-system-section .web-focus-title {
    font-size: clamp(38px, 11vw, 50px) !important;
    line-height: .92 !important;
  }

  .web-system-section .web-focus-copy {
    font-size: 17px !important;
  }

  .web-system-panel {
    grid-template-columns: 1fr !important;
    gap: 64px !important;
    padding: 64px 16px 20px !important;
    border-radius: 28px !important;
  }

  .web-system-card {
    padding: 126px 20px 22px !important;
  }

  .web-system-icon {
    width: 176px !important;
    height: 142px !important;
    top: -42px !important;
  }

  .web-system-icon img,
  .web-system-card-devices .web-system-icon img {
    width: 176px !important;
    height: 142px !important;
  }

  .web-system-steps {
    grid-template-columns: 1fr !important;
  }

  .web-system-section .web-system-cta {
    align-items: stretch !important;
    text-align: left !important;
    max-width: none !important;
  }

  .web-system-step:nth-child(5) {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
    text-align: left !important;
  }

  .web-system-step:nth-child(5) span,
  .web-system-step:nth-child(5) small {
    text-align: left !important;
  }
}

/* Selected tools reference: full-width illustrated journey, October 2026. */
.breakdance .tools-journey{background:#fff; color:#111; padding:64px 0 60px; overflow:clip; isolation:isolate;}
.tools-journey-inner{width:min(1500px,calc(100% - 80px));margin:0 auto;}
.tools-journey-header{position:relative;z-index:2;max-width:660px;}
.tools-journey-kicker{display:inline-flex;align-items:center;gap:14px;margin:0 0 22px;padding:11px 18px;border-radius:30px;background:#f8f6f3;color:#525761;font:800 12px/1 Urbanist,sans-serif;letter-spacing:.3em;}
.tools-journey-kicker span{width:13px;height:13px;border-radius:50%;background:#ffd34e;}
.tools-journey #tools-journey-title{font-family:Urbanist,sans-serif;font-size:clamp(48px,5.9vw,96px);font-weight:900;line-height:.98;letter-spacing:-.045em;text-transform:none;margin:0;}
.tools-journey #tools-journey-title em{font-style:normal;text-decoration:underline;text-decoration-color:#ffda64;text-decoration-thickness:5px;text-underline-offset:9px;}
.tools-journey-intro{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:#6b7280;margin:28px 0 0;max-width:610px;}
.tools-journey-visual{position:relative;margin:-130px -36px 0;pointer-events:none;}
.tools-journey-visual img{display:block;width:100%;height:auto;mix-blend-mode:multiply;animation:journey-drift 7s ease-in-out infinite;animation-play-state:paused;}
.journey-in-view .tools-journey-visual img{animation-play-state:running;}
.tools-journey-steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:28px;list-style:none;padding:0 22px;margin:-12px 0 0;position:relative;}
.tools-journey-steps li{min-width:0;transition:transform .35s ease;}
.tools-journey-steps li:hover{transform:translateY(-6px);}
.tools-journey-number{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff3c4;color:#b78100;font-weight:800;font-size:16px;box-shadow:inset 0 1px 3px #fff,0 3px 10px #f7d66c22;margin-bottom:12px;}
.tools-journey-steps li:nth-child(2) .tools-journey-number,.tools-journey-steps li:nth-child(5) .tools-journey-number,.tools-journey-steps li:nth-child(6) .tools-journey-number{background:#ddf7df;color:#278249;}
.tools-journey-steps li:nth-child(4) .tools-journey-number{background:#daf3f4;color:#127684;}
.tools-journey-steps h3{font:800 clamp(17px,1.4vw,22px)/1.2 Urbanist,sans-serif;letter-spacing:-.02em;text-transform:none;margin:0 0 9px;}
.tools-journey-steps p{font:500 clamp(14px,1.06vw,17px)/1.45 Urbanist,sans-serif;color:#6b7280;margin:0;}
.tools-journey-steps li:nth-child(1){margin-top:-26px;}
.tools-journey-steps li:nth-child(4){margin-top:-30px;}
.tools-journey-steps li:nth-child(5){margin-top:-95px;}
.tools-journey-steps li:nth-child(6){margin-top:-114px;}
.tools-journey-steps li:nth-child(7){margin-top:-130px;}
.tools-journey-mobile-icon{display:none;}
@keyframes journey-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:1100px){.tools-journey-inner{width:calc(100% - 48px)}.tools-journey-header{max-width:570px}.tools-journey-visual{margin:-35px -18px 0}.tools-journey-steps{gap:15px;padding:0}.tools-journey-steps li:nth-child(n){margin-top:0}.tools-journey-steps{margin-top:0}.tools-journey-steps h3{font-size:17px}.tools-journey-steps p{font-size:14px}}
@media(max-width:760px){.breakdance .tools-journey{padding:40px 0}.tools-journey-inner{width:calc(100% - 36px)}.tools-journey #tools-journey-title{font-size:clamp(43px,8vw,60px)}.tools-journey-intro{margin-top:22px;font-size:17px}.tools-journey-visual{margin:12px -12px 20px}.tools-journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.tools-journey-steps li{padding:16px;border:1px solid #f0ede8;border-radius:20px;background:#fff}.tools-journey-mobile-icon{display:block;width:42px;height:42px;object-fit:contain;margin-bottom:12px}.tools-journey-number{width:28px;height:28px;font-size:13px;float:right;margin-top:-50px}.tools-journey-steps li:last-child{grid-column:1/-1}.tools-journey-steps p{font-size:15px}.tools-journey-steps h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.tools-journey-visual img{animation:none}.tools-journey-steps li{transition:none}}
.tools-journey #tools-journey-title,.tools-journey .tools-journey-steps h3{color:#111!important;}
.tools-journey .codex-reveal{opacity:1!important;filter:none!important;transform:none!important;}
@media(min-width:1101px){.tools-journey-visual{margin-top:-180px}.tools-journey-steps{margin-top:-32px}}
@media(min-width:761px) and (max-width:1000px){.tools-journey-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.tools-journey-mobile-icon{display:block;width:36px;height:36px;object-fit:contain;margin-bottom:12px}.tools-journey-number{float:right;margin-top:-48px}.tools-journey-visual{margin:0 -18px 18px}.tools-journey-steps li{padding:14px;border:1px solid #eee;border-radius:18px}}

/* Product Design option 1: cinematic 3D command-center CTA */
.breakdance .codex-command-cta,
.codex-command-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 79% 46%, rgba(128, 73, 255, .24), transparent 31%),
    radial-gradient(circle at 57% 72%, rgba(255, 127, 48, .20), transparent 27%),
    linear-gradient(115deg, #1a1a1a 0%, #171717 48%, #101010 100%) !important;
  color: #fff !important;
  padding: clamp(48px, 4.8vw, 76px) 18px !important;
  min-height: clamp(500px, 35vw, 620px);
}

.codex-command-cta::before,
.codex-command-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.codex-command-cta::before {
  inset: 9% 47% 11% -8%;
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 183, 0, .24), transparent 14%),
    radial-gradient(circle at 78% 78%, rgba(146, 91, 255, .2), transparent 13%);
  filter: blur(22px);
  opacity: .9;
  animation: commandGlowPulse 7s ease-in-out infinite;
}

.codex-command-cta::after {
  left: 10%;
  right: 8%;
  bottom: 13%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 184, 43, .75), rgba(141, 88, 255, .7), transparent);
  transform: rotate(-2deg);
  opacity: .55;
  box-shadow: 0 0 24px rgba(255, 184, 43, .22);
  animation: commandPathDrift 6s ease-in-out infinite;
}

.codex-command-cta__inner {
  width: min(1600px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(590px, .95fr) minmax(560px, 1.05fr);
  align-items: center;
  gap: clamp(22px, 3vw, 56px);
}

.codex-command-cta__copy {
  position: relative;
  z-index: 2;
  max-width: 790px;
  animation: commandCopyIn .8s cubic-bezier(.2, .8, .2, 1) both;
}

.codex-command-cta__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 184, 43, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #ffd36a;
  font: 850 12px/1 Urbanist, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.codex-command-cta__kicker::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ffb82b;
  box-shadow: 0 0 0 7px rgba(255, 184, 43, .13), 0 0 24px rgba(255, 184, 43, .5);
}

.codex-command-cta h2 {
  margin: 0;
  color: #fff !important;
  font-family: Urbanist, sans-serif;
  font-size: clamp(48px, 4.85vw, 86px);
  line-height: .96;
  font-weight: 950;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.codex-command-cta h2 span {
  color: #ffbe3d;
  text-shadow: 0 0 30px rgba(255, 168, 45, .16);
}

.codex-command-cta__text {
  max-width: 705px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .72);
  font: 600 clamp(18px, 1.35vw, 24px)/1.38 Urbanist, sans-serif;
}

.codex-command-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.3vw, 34px);
  margin-top: clamp(30px, 4vw, 56px);
}

.codex-command-cta__button {
  --button-main: #ffbd36;
  --button-shadow: #f2742e;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: clamp(232px, 17vw, 330px);
  padding: 18px 22px 20px 30px;
  border: 2px solid rgba(17, 17, 17, .9);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8d9 0%, #ffd87b 100%);
  box-shadow:
    0 10px 0 var(--button-shadow),
    0 24px 44px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  color: #171717 !important;
  text-decoration: none !important;
  transform: translateY(0) rotate(-1.4deg);
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.codex-command-cta__button span {
  color: inherit;
  font: 950 clamp(16px, 1.18vw, 21px)/1 Urbanist, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.codex-command-cta__button b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff7b37;
  border: 2px solid rgba(17, 17, 17, .95);
  color: #171717;
  font-size: 28px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .24s ease;
}

.codex-command-cta__button--chat {
  --button-shadow: #6f49d9;
  background: linear-gradient(180deg, #fbf5ff 0%, #d9c7ff 100%);
  transform: translateY(0) rotate(-1deg);
}

.codex-command-cta__button--chat b {
  background: #8c5cff;
}

.codex-command-cta__button:hover,
.codex-command-cta__button:focus-visible {
  transform: translateY(-8px) rotate(0deg);
  box-shadow:
    0 15px 0 var(--button-shadow),
    0 34px 58px rgba(0, 0, 0, .44),
    0 0 0 8px rgba(255, 184, 43, .09),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  filter: saturate(1.08);
}

.codex-command-cta__button:hover b,
.codex-command-cta__button:focus-visible b {
  transform: translate(4px, -4px) rotate(10deg);
}

.codex-command-cta__button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.codex-command-cta__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-right: 0;
  animation: commandVisualIn .9s cubic-bezier(.16, .84, .28, 1) .08s both;
}

.codex-command-cta__visual::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 2%;
  bottom: 5%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 122, 43, .34), rgba(143, 87, 255, .18) 42%, transparent 70%);
  filter: blur(14px);
  transform: rotate(-5deg);
  opacity: .85;
}

.codex-command-cta__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 780px);
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 34px 58px rgba(0, 0, 0, .44));
  animation: commandFloat 6s ease-in-out infinite;
}

@keyframes commandFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(.6deg); }
}

@keyframes commandGlowPulse {
  0%, 100% { opacity: .72; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(20px, -10px, 0) scale(1.05); }
}

@keyframes commandPathDrift {
  0%, 100% { opacity: .38; transform: translateX(0) rotate(-2deg); }
  50% { opacity: .75; transform: translateX(18px) rotate(-1deg); }
}

@keyframes commandCopyIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes commandVisualIn {
  from { opacity: 0; transform: translate(34px, 18px) scale(.96); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (max-width: 1180px) {
  .codex-command-cta {
    padding: 56px 18px 70px !important;
  }

  .codex-command-cta__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .codex-command-cta__copy {
    max-width: 860px;
  }

  .codex-command-cta__visual {
    margin: 0 auto;
    width: min(100%, 900px);
  }

  .codex-command-cta__visual img {
    margin: 0 auto;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  .codex-command-cta__inner {
    grid-template-columns: minmax(520px, .95fr) minmax(430px, .75fr);
    gap: 22px;
  }

  .codex-command-cta h2 {
    font-size: clamp(48px, 5.2vw, 74px);
  }

  .codex-command-cta__text {
    max-width: 650px;
    font-size: clamp(17px, 1.3vw, 21px);
  }

  .codex-command-cta__visual img {
    width: min(100%, 620px);
  }
}

@media (max-width: 720px) {
  .codex-command-cta {
    padding: 46px 14px 54px !important;
  }

  .codex-command-cta__kicker {
    font-size: 11px;
    letter-spacing: .18em;
  }

  .codex-command-cta h2 {
    font-size: clamp(42px, 13.5vw, 64px);
  }

  .codex-command-cta__text {
    margin-top: 20px;
    font-size: 17px;
  }

  .codex-command-cta__actions {
    display: grid;
    gap: 16px;
  }

  .codex-command-cta__button {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    padding: 17px 18px 19px 24px;
  }

  .codex-command-cta__visual {
    margin: 8px -34px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .codex-command-cta::before,
  .codex-command-cta::after,
  .codex-command-cta__copy,
  .codex-command-cta__visual,
  .codex-command-cta__visual img {
    animation: none !important;
  }
}

/* Compact reference CTA: text-first dark panel with tactile buttons */
.breakdance .codex-command-cta,
.codex-command-cta {
  min-height: auto !important;
  padding: clamp(44px, 5vw, 76px) 18px clamp(38px, 4vw, 62px) !important;
  background:
    radial-gradient(circle at 29% 89%, rgba(255, 117, 35, .16), transparent 24%),
    radial-gradient(circle at 49% 92%, rgba(124, 77, 255, .18), transparent 20%),
    linear-gradient(180deg, #1b1b1b 0%, #181818 100%) !important;
}

.codex-command-cta::before {
  inset: auto auto 14% 7%;
  width: min(420px, 42vw);
  height: 190px;
  background: radial-gradient(circle, rgba(255, 132, 35, .18), transparent 68%);
  filter: blur(28px);
}

.codex-command-cta::after {
  left: clamp(180px, 25vw, 430px);
  right: auto;
  bottom: clamp(42px, 5vw, 72px);
  width: clamp(180px, 20vw, 310px);
  height: 42px;
  border-bottom: 3px solid rgba(151, 91, 255, .88);
  border-radius: 0 0 50% 50%;
  background: none;
  transform: rotate(2deg);
  opacity: .9;
  box-shadow: 0 12px 24px rgba(124, 77, 255, .22);
  animation: commandPathDrift 6s ease-in-out infinite;
}

.codex-command-cta__inner {
  position: relative;
  width: min(1180px, 100%) !important;
  display: grid !important;
  grid-template-columns: minmax(520px, .9fr) minmax(390px, .7fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 90px) !important;
}

.codex-command-cta__inner::before,
.codex-command-cta__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

.codex-command-cta__inner::before {
  left: -6px;
  top: -10px;
  width: 54px;
  height: 54px;
  background-image: url("data:image/svg+xml,%3Csvg width='58' height='58' viewBox='0 0 58 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 28 3 21' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M21 17 15 4' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M31 14 31 1' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.codex-command-cta__inner::after {
  left: clamp(4px, 1.4vw, 22px);
  bottom: clamp(118px, 10.5vw, 156px);
  width: 44px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 24 3 20' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M18 15 13 5' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M27 14 30 3' stroke='%23ff8a2b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.codex-command-cta__copy {
  max-width: 720px !important;
  padding-left: clamp(16px, 2.2vw, 54px);
}

.codex-command-cta h2 {
  max-width: 670px;
  font-size: clamp(38px, 4.25vw, 72px) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
}

.codex-command-cta h2 span {
  color: #ffbf42 !important;
}

.codex-command-cta__text {
  max-width: 620px;
  margin-top: 14px !important;
  color: rgba(255, 255, 255, .76) !important;
  font-size: clamp(14px, 1vw, 18px) !important;
  line-height: 1.36 !important;
  font-weight: 600 !important;
}

.codex-command-cta__actions {
  position: relative;
  z-index: 2;
  gap: clamp(14px, 1.9vw, 30px) !important;
  margin-top: clamp(22px, 2.4vw, 34px) !important;
  padding-left: 0;
}

.codex-command-cta__actions::after {
  content: "→";
  position: absolute;
  left: clamp(250px, 26vw, 410px);
  bottom: -24px;
  color: #ff9141;
  font: 900 22px/1 Urbanist, sans-serif;
  transform: rotate(-12deg);
  text-shadow: 0 0 18px rgba(255, 132, 35, .5);
}

.codex-command-cta__button {
  min-width: clamp(162px, 11.5vw, 212px) !important;
  padding: 10px 11px 12px 18px !important;
  border-width: 2px !important;
  box-shadow:
    0 6px 0 var(--button-shadow),
    0 14px 24px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.codex-command-cta__button span {
  font-size: clamp(11px, .72vw, 14px) !important;
  letter-spacing: .07em !important;
}

.codex-command-cta__button b {
  width: 30px !important;
  height: 30px !important;
  font-size: 19px !important;
}

.codex-command-cta__button--chat {
  box-shadow:
    0 6px 0 var(--button-shadow),
    0 14px 26px rgba(111, 73, 217, .24),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.codex-command-cta__button--chat::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -12px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 17 1 20' stroke='%238c5cff' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M13 9 9 2' stroke='%238c5cff' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M20 8 23 1' stroke='%238c5cff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.codex-command-cta__visual {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: clamp(310px, 32vw, 455px);
  margin: 0 !important;
  isolation: isolate;
  animation: commandVisualIn .8s cubic-bezier(.16,.84,.28,1) both;
}

.codex-command-cta__visual::before {
  content: "";
  position: absolute;
  inset: 12% 4% 8% 6%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 58% 52%, rgba(255, 135, 43, .28), transparent 34%),
    radial-gradient(circle at 80% 42%, rgba(140, 92, 255, .2), transparent 30%),
    radial-gradient(circle at 48% 82%, rgba(255, 184, 43, .18), transparent 34%);
  filter: blur(16px);
  opacity: .92;
  pointer-events: none;
  animation: commandGlowBreathe 5.5s ease-in-out infinite;
}

.codex-command-cta__visual .codex-command-cta__visual-art {
  position: relative;
  z-index: 1;
  display: block;
  width: min(112%, 650px);
  max-width: none;
  height: auto;
  object-fit: contain;
  transform-origin: center;
  filter:
    drop-shadow(0 28px 42px rgba(0, 0, 0, .34))
    drop-shadow(0 0 34px rgba(255, 139, 43, .12))
    saturate(1.06)
    contrast(1.02);
  animation: commandArtFloat 6.5s ease-in-out infinite;
}

.codex-command-cta__visual::after {
  content: "";
  position: absolute;
  inset: 18% 2% 12% 5%;
  z-index: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 185, 54, .2);
  border-left-color: rgba(140, 92, 255, .26);
  border-bottom-color: rgba(255, 139, 43, .24);
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 22px rgba(255,185,54,.12));
  opacity: .62;
  animation: commandOrbitSpin 13s linear infinite;
}

@keyframes commandOrbitSpin {
  to { transform: rotate(352deg); }
}

@keyframes commandGlowBreathe {
  0%, 100% { opacity: .68; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes commandArtFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.5deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(.7deg); }
}

@media (max-width: 720px) {
  .breakdance .codex-command-cta,
  .codex-command-cta {
    padding: 42px 18px 44px !important;
  }

  .codex-command-cta__copy {
    padding-left: 18px;
  }

  .codex-command-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .codex-command-cta h2 {
    font-size: clamp(35px, 11vw, 48px) !important;
  }

  .codex-command-cta__text br {
    display: none;
  }

  .codex-command-cta__actions {
    grid-template-columns: 1fr;
    display: grid !important;
    justify-items: start;
    padding-left: 0;
  }

  .codex-command-cta__button {
    width: min(100%, 250px) !important;
  }

  .codex-command-cta__actions::after,
  .codex-command-cta__button--chat::after {
    display: none;
  }

  .codex-command-cta__visual {
    min-height: 250px;
  }

  .codex-command-cta__visual .codex-command-cta__visual-art {
    width: min(118%, 520px);
  }
}