@scope (.php-header) {
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-navigation);
  width: 100%;
  background: transparent;
}

.container {
  width: 100%;
  max-width: 80rem;
  min-height: 4.5rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2.75vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--color-white);
  text-decoration: none;
}

.brandMark {
  width: auto;
  height: 3.5rem;
}

.navigationPanel {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2rem, 7vw, 5.6rem);
}

.navigation {
  display: flex;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-self: stretch;
}

.navigationLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-top: 0.1rem;
  color: rgb(255 255 255 / 92%);
  font-size: var(--font-size-menu);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.navigationLink::after {
  position: absolute;
  right: 0;
  bottom: 0.8rem;
  left: 0;
  height: 1px;
  background: var(--logo-magenta);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.navigationLink:hover,
.navigationLinkActive {
  color: var(--color-white);
}

.navigationLink:hover::after,
.navigationLinkActive::after {
  opacity: 1;
  transform: scaleX(1);
}

.contactButton {
  display: inline-flex;
  min-height: 2.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.25rem;
  background: linear-gradient(100deg, #6f148f, #8518b4);
  color: var(--color-white);
  font-size: var(--font-size-button-secondary);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0 1.5rem rgb(130 25 178 / 12%);
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}

.contactButton:hover {
  box-shadow: 0 0 1.75rem rgb(214 51 255 / 30%);
  transform: translateY(-1px);
}

.arrow {
  font-size: 1.05rem;
  line-height: 0;
  transition: transform var(--transition-fast);
}

.contactButton:hover .arrow {
  transform: translateX(0.15rem);
}

.menuButton {
  display: none;
}

@media (min-width: 68rem) {
  .brandMark {
    width: clamp(13.75rem, 13vw, 15rem);
    height: auto;
  }
}

@media (max-width: 67.9375rem) {
  .container {
    min-height: 4.25rem;
  }

  .menuButton {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    border: 0;
    padding: 0.65rem 0;
    background: transparent;
    color: var(--color-white);
    font: inherit;
    font-size: var(--font-size-menu);
    cursor: pointer;
  }

  .menuIcon {
    position: relative;
    width: 1.5rem;
    height: 1rem;
  }

  .menuIcon span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-white);
    transform-origin: center;
    transition: transform var(--transition-base);
  }

  .menuIcon span:first-child {
    transform: translate(-50%, -0.3rem);
  }

  .menuIcon span:last-child {
    transform: translate(-50%, 0.3rem);
  }

  .menuIconOpen span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .menuIconOpen span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .navigationPanel {
    position: fixed;
    inset: 4.25rem 0 0;
    visibility: hidden;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1.75rem clamp(1.25rem, 5vw, 3rem) 2.5rem;
    background:
      radial-gradient(
        circle at 80% 10%,
        rgb(106 27 245 / 18%),
        transparent 22rem
      ),
      rgb(2 8 25 / 98%);
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base),
      visibility var(--transition-base);
  }

  .navigationPanelOpen {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .navigation {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navigationLink {
    min-height: 3.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 9%);
    font-size: var(--font-size-menu);
  }

  .navigationLink::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -0.75rem;
    width: 2px;
    height: 1.5rem;
    transform: translateY(-50%) scaleY(0);
  }

  .navigationLink:hover::after,
  .navigationLinkActive::after {
    transform: translateY(-50%) scaleY(1);
  }

  .contactButton {
    min-height: 3rem;
    align-self: flex-start;
    padding-inline: 1.5rem;
    font-size: var(--font-size-button-secondary);
  }
}

@media (max-width: 25rem) {
  .brandMark {
    height: 3.15rem;
  }

  .menuButtonLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contactButton:hover,
  .contactButton:hover .arrow {
    transform: none;
  }
}

}

@scope (.php-hero-layout) {
.root {
  position: relative;
  isolation: isolate;
  min-height: 42rem;
  padding-top: 3rem;
  overflow: hidden;
}

.layerStack,
.background,
.ambient,
.decorative,
.foreground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layerStack {
  z-index: 0;
}

.background {
  z-index: 0;
}

.ambient {
  z-index: 10;
}

.decorative {
  z-index: 30;
}

.foreground {
  z-index: 50;
}

.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2.75vw, 2rem);
}

.grid {
  min-height: 42rem;
  display: grid;
  grid-template-columns: minmax(21rem, 0.82fr) minmax(35rem, 1.18fr);
  align-items: center;
}

.copyArea {
  position: relative;
  z-index: 40;
  min-width: 0;
  max-width: var(--text-width-hero);
  padding-block: 3.25rem 4rem;
}

.visualArea {
  position: relative;
  z-index: 20;
  min-width: 0;
  align-self: stretch;
}

@media (max-width: 79.9375rem) {
  .root {
    --hero-space-eyebrow-title: 1rem;
    --hero-space-title-body: 1.3rem;
    --hero-space-body-note: 0.95rem;
    --hero-space-note-actions: 1.15rem;
    --hero-space-actions-trust: 0.85rem;
  }

  .root {
    min-height: 0;
    overflow: visible;
  }

  .container {
    padding-block: 2rem 0;
    overflow: visible;
  }

  .grid {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .copyArea {
    max-width: 43rem;
    padding-block: 0;
  }

  .visualArea {
    width: 100%;
    max-width: 43rem;
    height: auto;
    margin: 1.25rem auto 0;
    overflow: visible;
  }
}

@media (max-width: 62rem) {
  .root {
    padding-top: 4.25rem;
  }
}

@media (max-width: 47.9375rem) {
  .container {
    padding-block: 1.5rem 0;
  }

  .copyArea {
    max-width: 100%;
  }

  .visualArea {
    max-width: 100%;
    height: auto;
    margin-top: 1.125rem;
  }
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .visualArea {
    margin-top: 0;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: clamp(80rem, 94vw, 94rem);
  }

  .grid {
    column-gap: clamp(0.5rem, calc(23.25vw - 18.1rem), 3rem);
    grid-template-columns: minmax(21rem, 31.25rem) minmax(0, 1fr);
  }
}

/* Responsive del Hero: el mensaje y la figura tienen prioridad sobre las capacidades. */
@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .root {
    --hero-h1: clamp(2.45rem, 3.3vw, 2.625rem);
  }

  .grid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.95fr) minmax(22rem, 1.05fr);
    align-items: center;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .copyArea {
    max-width: var(--text-width-hero);
  }

  .visualArea {
    width: auto;
    max-width: none;
    margin: 0;
    align-self: stretch;
  }

  .php-home-hero .robotComposition {
    width: 100%;
    max-height: none;
    height: 100%;
    margin: 0;
    overflow: visible;
  }

  .php-home-hero .robot {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

}

@scope (.php-home-hero) {
.homeVisual {
  --hero-robot-height: 43rem;
  --hero-robot-x: 50%;
  --hero-robot-y: clamp(3rem, 4vw, 4.5rem);
  --hero-face-anchor-offset: -60%;
  --hero-composition-width: 47.3rem;
  --hero-capabilities-top: 1.75rem;
  --hero-capabilities-bottom: 8.75rem;
  --hero-capability-list-width: 10.5rem;
  --hero-capability-gap: 0.55rem;
  --hero-capability-icon-size: 2.35rem;
  --hero-capability-left-inset: 0.5625rem;
  --hero-fog-asset-x: 50%;
  --hero-fog-asset-y: -0.9rem;
  --hero-fog-asset-scale: 1.16;
  --hero-fog-asset-opacity: 0.9;
  position: relative;
  width: 100%;
  height: 100%;
}

.homeBackground {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05081d;
}

.foundationLayer {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(
      ellipse 58% 72% at 58% 34%,
      rgb(102 48 196 / 32%) 0,
      rgb(70 35 145 / 22%) 38%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 50% 64% at 79% 39%,
      rgb(32 88 206 / 30%) 0,
      rgb(25 62 150 / 20%) 43%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 52% 49% at 46% 79%,
      rgb(110 55 178 / 26%) 0,
      rgb(65 36 120 / 16%) 48%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 44% 46% at 76% 82%,
      rgb(50 94 190 / 24%) 0,
      rgb(32 54 112 / 15%) 48%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 46% 62% at -5% 18%,
      rgb(3 7 24 / 72%) 0,
      rgb(4 8 30 / 36%) 56%,
      transparent 88%
    ),
    radial-gradient(
      ellipse 43% 58% at 105% 12%,
      rgb(3 7 24 / 66%) 0,
      rgb(4 8 30 / 32%) 58%,
      transparent 88%
    ),
    radial-gradient(
      ellipse 82% 54% at 52% 108%,
      rgb(4 8 30 / 76%) 0,
      rgb(5 10 32 / 38%) 58%,
      transparent 90%
    ),
    #060c26;
}

.lightVolumeMaster {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url("../../hero/light-volume-master.webp?v=20261002-1");
  background-position: center 78%;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.atmosphericLightLayer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.graphicsPrototype {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.graphicsPrototype canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.lightMass {
  position: absolute;
  opacity: 1;
  mix-blend-mode: screen;
  filter: blur(6.75rem);
  transform: translateZ(0);
}

.lightMassMain {
  top: -4%;
  left: 34%;
  width: 70%;
  height: 80%;
  border-radius: 58% 42% 63% 37% / 46% 57% 43% 54%;
  background: radial-gradient(
    ellipse at 45% 42%,
    rgb(151 74 255 / 32%) 0,
    rgb(96 52 192 / 21%) 38%,
    rgb(7 18 47 / 0%) 74%
  );
}

.lightMassBlue {
  top: 13%;
  right: -3%;
  width: 59%;
  height: 69%;
  border-radius: 43% 57% 38% 62% / 58% 41% 59% 42%;
  background: radial-gradient(
    ellipse at 43% 46%,
    rgb(55 116 255 / 30%) 0,
    rgb(31 74 170 / 20%) 41%,
    rgb(7 18 47 / 0%) 76%
  );
}

.lightMassViolet {
  top: 18%;
  left: 22%;
  width: 56%;
  height: 60%;
  border-radius: 62% 38% 54% 46% / 42% 61% 39% 58%;
  background: radial-gradient(
    ellipse at 56% 48%,
    rgb(137 84 224 / 24%) 0,
    rgb(88 45 180 / 14%) 45%,
    rgb(5 8 29 / 0%) 79%
  );
}

.lightMassMagenta {
  top: 17%;
  left: 36%;
  width: 38%;
  height: 51%;
  border-radius: 47% 53% 61% 39% / 57% 43% 52% 48%;
  background: radial-gradient(
    ellipse at 47% 48%,
    rgb(214 61 219 / 20%) 0,
    rgb(115 40 140 / 11%) 45%,
    rgb(5 8 29 / 0%) 78%
  );
}

.lightMassBottom {
  right: 15%;
  bottom: -10%;
  width: 58%;
  height: 45%;
  border-radius: 46% 54% 63% 37% / 61% 42% 58% 39%;
  background: radial-gradient(
    ellipse at 48% 52%,
    rgb(93 92 210 / 24%) 0,
    rgb(70 46 155 / 15%) 45%,
    rgb(5 8 29 / 0%) 80%
  );
}

.lightMassNeck {
  right: 21%;
  bottom: 8%;
  width: 47%;
  height: 43%;
  border-radius: 57% 43% 49% 51% / 44% 59% 41% 56%;
  background: radial-gradient(
    ellipse at 46% 48%,
    rgb(80 93 170 / 23%) 0,
    rgb(50 94 190 / 13%) 46%,
    rgb(7 18 47 / 0%) 79%
  );
}

.atmosphericVolumeLayer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.volumeMass {
  position: absolute;
  transform: translateZ(0);
}

.volumeBackOne {
  top: 18%;
  left: 42%;
  width: 58%;
  height: 66%;
  border-radius: 61% 39% 52% 48% / 43% 58% 42% 57%;
  background: radial-gradient(
    ellipse at 43% 49%,
    rgb(90 72 190 / 14%) 0,
    rgb(30 45 110 / 7%) 48%,
    transparent 82%
  );
  filter: blur(8.5rem);
}

.volumeBackTwo {
  top: 6%;
  right: -11%;
  width: 51%;
  height: 58%;
  border-radius: 42% 58% 66% 34% / 59% 38% 62% 41%;
  background: radial-gradient(
    ellipse at 38% 54%,
    rgb(70 100 200 / 11%) 0,
    rgb(30 45 110 / 6%) 52%,
    transparent 84%
  );
  filter: blur(8.75rem);
}

.volumeBackThree {
  top: 36%;
  left: 18%;
  width: 43%;
  height: 55%;
  border-radius: 67% 33% 44% 56% / 38% 63% 37% 62%;
  background: radial-gradient(
    ellipse at 61% 44%,
    rgb(130 82 210 / 9%) 0,
    rgb(30 45 110 / 5%) 51%,
    transparent 83%
  );
  filter: blur(8rem);
}

.volumeMidOne {
  top: 32%;
  left: 39%;
  width: 39%;
  height: 57%;
  border-radius: 48% 52% 37% 63% / 62% 41% 59% 38%;
  background: radial-gradient(
    ellipse at 47% 55%,
    rgb(90 72 190 / 12%) 0,
    rgb(30 45 110 / 6%) 46%,
    transparent 80%
  );
  filter: blur(6.5rem);
}

.volumeMidTwo {
  top: 46%;
  right: 11%;
  width: 35%;
  height: 45%;
  border-radius: 63% 37% 57% 43% / 44% 61% 39% 56%;
  background: radial-gradient(
    ellipse at 42% 47%,
    rgb(70 100 200 / 10%) 0,
    rgb(30 45 110 / 6%) 49%,
    transparent 82%
  );
  filter: blur(6rem);
}

.volumeMidThree {
  top: 23%;
  left: 33%;
  width: 31%;
  height: 48%;
  border-radius: 38% 62% 51% 49% / 57% 36% 64% 43%;
  background: radial-gradient(
    ellipse at 58% 52%,
    rgb(130 82 210 / 10%) 0,
    rgb(90 72 190 / 6%) 45%,
    transparent 81%
  );
  filter: blur(6.75rem);
}

.volumeFrontOne {
  right: 20%;
  bottom: -9%;
  width: 33%;
  height: 33%;
  border-radius: 57% 43% 64% 36% / 39% 58% 42% 61%;
  background: radial-gradient(
    ellipse at 48% 43%,
    rgb(70 100 200 / 9%) 0,
    rgb(30 45 110 / 5%) 48%,
    transparent 83%
  );
  filter: blur(4.75rem);
}

.volumeFrontTwo {
  bottom: -5%;
  left: 39%;
  width: 27%;
  height: 29%;
  border-radius: 41% 59% 35% 65% / 63% 42% 58% 37%;
  background: radial-gradient(
    ellipse at 55% 46%,
    rgb(130 82 210 / 8%) 0,
    rgb(90 72 190 / 4%) 47%,
    transparent 82%
  );
  filter: blur(4.25rem);
}

.atmosphericParticlesLayer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particlesBack,
.particlesMid,
.particlesFront {
  position: absolute;
  inset: 0;
}

.particlesBack {
  opacity: 0.62;
  filter: blur(1.2px);
}

.particlesMid {
  opacity: 0.88;
}

.particlesFront {
  opacity: 0.92;
}

.particleField {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.particleFieldA1,
.particleFieldA2,
.particleFieldA3,
.particleFieldA4,
.particleFieldA5,
.particleFieldA6 {
  width: 1px;
  height: 1px;
}

.particleFieldA1 {
  top: 18%;
  left: 51%;
  background: rgb(140 110 255 / 28%);
  box-shadow:
    2.8rem 1.1rem rgb(88 122 255 / 16%),
    6.4rem -0.7rem rgb(185 150 255 / 24%),
    9.8rem 2.9rem rgb(120 180 255 / 12%),
    13.3rem 0.6rem rgb(140 110 255 / 34%),
    17.1rem 4.2rem rgb(88 122 255 / 19%),
    21.6rem 1.5rem rgb(185 150 255 / 11%),
    25.2rem 5.6rem rgb(120 180 255 / 22%),
    29.7rem 2.2rem rgb(140 110 255 / 14%);
}

.particleFieldA2 {
  top: 30%;
  left: 47%;
  background: rgb(88 122 255 / 18%);
  box-shadow:
    3.4rem 2.8rem rgb(185 150 255 / 12%),
    7.9rem 0.4rem rgb(140 110 255 / 32%),
    12.1rem 4.9rem rgb(120 180 255 / 17%),
    16.5rem 1.7rem rgb(88 122 255 / 26%),
    20.2rem 6.1rem rgb(185 150 255 / 14%),
    24.8rem 2.5rem rgb(140 110 255 / 21%),
    28.1rem 7.4rem rgb(120 180 255 / 9%),
    32.4rem 4.1rem rgb(88 122 255 / 15%);
}

.particleFieldA3 {
  top: 45%;
  left: 54%;
  background: rgb(185 150 255 / 19%);
  box-shadow:
    2.1rem 4.4rem rgb(120 180 255 / 12%),
    5.7rem 1.3rem rgb(140 110 255 / 27%),
    9.4rem 6.8rem rgb(88 122 255 / 16%),
    13.9rem 2.2rem rgb(185 150 255 / 10%),
    18.2rem 8.1rem rgb(120 180 255 / 14%),
    22.6rem 3.7rem rgb(140 110 255 / 22%),
    26.8rem 7.2rem rgb(88 122 255 / 11%),
    30.5rem 1.1rem rgb(185 150 255 / 18%);
}

.particleFieldA4 {
  top: 58%;
  left: 46%;
  background: rgb(120 180 255 / 14%);
  box-shadow:
    4rem 2.1rem rgb(140 110 255 / 8%),
    8.6rem -0.8rem rgb(88 122 255 / 18%),
    12.8rem 3.9rem rgb(185 150 255 / 12%),
    17.4rem 0.5rem rgb(120 180 255 / 24%),
    21.1rem 5.8rem rgb(140 110 255 / 13%),
    25.7rem 2.6rem rgb(88 122 255 / 28%),
    29.9rem 6.9rem rgb(185 150 255 / 16%),
    33.2rem 1.8rem rgb(120 180 255 / 9%);
}

.particleFieldA5 {
  top: 70%;
  left: 52%;
  background: rgb(140 110 255 / 21%);
  box-shadow:
    2.6rem 3.2rem rgb(88 122 255 / 14%),
    6.9rem 0.9rem rgb(185 150 255 / 18%),
    11.3rem 4.8rem rgb(120 180 255 / 11%),
    15.6rem 1.7rem rgb(140 110 255 / 27%),
    19.8rem 5.9rem rgb(88 122 255 / 16%),
    24.3rem 2.4rem rgb(185 150 255 / 24%),
    28.7rem 7.1rem rgb(120 180 255 / 13%),
    32rem 3.6rem rgb(140 110 255 / 17%);
}

.particleFieldA6 {
  top: 39%;
  left: 59%;
  background: rgb(185 150 255 / 34%);
  box-shadow:
    3.3rem 5.2rem rgb(120 180 255 / 29%),
    7.7rem 1.8rem rgb(140 110 255 / 38%),
    12.4rem 6.9rem rgb(88 122 255 / 26%),
    16.8rem 3.1rem rgb(185 150 255 / 32%),
    21.2rem 8.4rem rgb(120 180 255 / 24%),
    25.6rem 4.3rem rgb(140 110 255 / 10%),
    29.1rem 0.7rem rgb(88 122 255 / 28%),
    33.5rem 5.9rem rgb(185 150 255 / 21%);
}

.particleFieldB1,
.particleFieldB2,
.particleFieldB3 {
  width: 2px;
  height: 2px;
}

.particleFieldB1 {
  top: 13%;
  left: 49%;
  background: rgb(88 122 255 / 16%);
  box-shadow:
    4.7rem 3.3rem rgb(185 150 255 / 14%),
    9.5rem 0.8rem rgb(140 110 255 / 19%),
    14.2rem 5.7rem rgb(120 180 255 / 11%),
    18.6rem 1.9rem rgb(88 122 255 / 22%),
    23.1rem 7.2rem rgb(185 150 255 / 8%),
    27.8rem 3.6rem rgb(140 110 255 / 17%),
    31.5rem 8.4rem rgb(120 180 255 / 13%),
    35.2rem 1.2rem rgb(88 122 255 / 18%),
    38.1rem 5.1rem rgb(185 150 255 / 12%);
}

.particleFieldB2 {
  top: 37%;
  left: 50%;
  background: rgb(140 110 255 / 26%);
  box-shadow:
    3.8rem 2.6rem rgb(88 122 255 / 18%),
    8.4rem -0.5rem rgb(185 150 255 / 22%),
    13rem 4.7rem rgb(120 180 255 / 15%),
    17.3rem 1.4rem rgb(140 110 255 / 10%),
    21.9rem 6.5rem rgb(88 122 255 / 9%),
    26.2rem 2.9rem rgb(185 150 255 / 16%),
    30.8rem 7.8rem rgb(120 180 255 / 24%),
    34.1rem 3.5rem rgb(140 110 255 / 13%),
    37.4rem 0.6rem rgb(88 122 255 / 19%);
}

.particleFieldB3 {
  top: 64%;
  left: 48%;
  background: rgb(120 180 255 / 18%);
  box-shadow:
    4.2rem 4.1rem rgb(140 110 255 / 14%),
    8.9rem 1.1rem rgb(88 122 255 / 27%),
    13.5rem 5.9rem rgb(185 150 255 / 9%),
    17.8rem 2.3rem rgb(120 180 255 / 16%),
    22.4rem 7.5rem rgb(140 110 255 / 21%),
    26.9rem 3.4rem rgb(88 122 255 / 13%),
    31.1rem 8.2rem rgb(185 150 255 / 18%),
    34.8rem 0.8rem rgb(120 180 255 / 24%),
    38rem 4.9rem rgb(140 110 255 / 15%);
}

.particleFieldC1 {
  top: 24%;
  left: 55%;
  width: 3px;
  height: 3px;
  background: rgb(140 110 255 / 17%);
  box-shadow:
    3.9rem 4.8rem rgb(88 122 255 / 12%),
    8.7rem 1.2rem rgb(185 150 255 / 16%),
    13.4rem 6.5rem rgb(120 180 255 / 8%),
    18.1rem 2.8rem rgb(140 110 255 / 19%),
    22.7rem 8.1rem rgb(88 122 255 / 14%),
    27.2rem 3.7rem rgb(185 150 255 / 9%),
    31.4rem 9.3rem rgb(120 180 255 / 11%),
    35.1rem 5.2rem rgb(140 110 255 / 16%),
    38.5rem 0.9rem rgb(88 122 255 / 13%),
    41.2rem 7.4rem rgb(185 150 255 / 18%),
    44rem 3rem rgb(120 180 255 / 8%);
}

.particleFieldD1 {
  top: 49%;
  left: 62%;
  width: 4px;
  height: 4px;
  background: rgb(88 122 255 / 13%);
  box-shadow:
    11.8rem 7.2rem rgb(140 110 255 / 16%),
    23.6rem 2.9rem rgb(120 180 255 / 12%);
  filter: blur(1.7px);
}

.microDetailLayer {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.microDetailField {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.microDetailField:nth-child(1) {
  opacity: 0.76;
  filter: blur(6px);
  mix-blend-mode: soft-light;
  transform: translate3d(-0.8%, 0.4%, 0);
}

.microDetailField:nth-child(2) {
  opacity: 0.68;
  filter: blur(12px);
  mix-blend-mode: screen;
  transform: translate3d(0.6%, -0.5%, 0);
}

.microDetailField:nth-child(3) {
  opacity: 0.64;
  filter: blur(18px);
  mix-blend-mode: soft-light;
  transform: translate3d(0.2%, 0.8%, 0);
}

.microDetailField:nth-child(4) {
  opacity: 0.58;
  filter: blur(24px);
  mix-blend-mode: multiply;
  transform: translate3d(-0.5%, -0.2%, 0);
}

.microDetailField:nth-child(5) {
  opacity: 0.52;
  filter: blur(30px);
  mix-blend-mode: screen;
  transform: translate3d(0.9%, 0.3%, 0);
}

.eyebrow {
  margin: 0 0 var(--hero-space-eyebrow-title);
  color: #d633ff;
  font-size: var(--hero-eyebrow);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: var(--line-height-eyebrow);
  text-transform: uppercase;
}

.title {
  max-width: var(--text-width-hero);
  margin: 0;
  color: var(--color-white);
  font-size: var(--hero-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h1);
  line-height: var(--hero-h1-line);
  text-wrap: balance;
}

.title mark {
  background: transparent;
  color: #ffcc00;
}

.highlightPhrase {
  color: var(--color-yellow-strategic);
  display: inline-block;
  white-space: nowrap;
}

.subtitle {
  max-width: var(--text-width-body);
  margin: var(--hero-space-title-body) 0 0;
  color: rgb(220 226 240 / 86%);
  font-size: var(--hero-body);
  line-height: var(--hero-body-line);
}

.principle {
  max-width: var(--text-width-body);
  margin: var(--hero-space-body-note) 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--logo-magenta);
  color: rgb(255 255 255 / 92%);
  font-size: var(--hero-note);
  font-weight: var(--font-weight-semibold);
  line-height: var(--hero-body-line);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--hero-space-note-actions);
}

.primaryAction,
.secondaryAction {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.5rem;
  color: var(--color-white);
  font-size: var(--hero-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
}

.primaryAction {
  gap: 0.55rem;
  border: 1px solid transparent;
  background: linear-gradient(100deg, #711691, #a919b7);
  box-shadow: 0 0 1.75rem rgb(169 25 183 / 18%);
}

.secondaryAction {
  border: 1px solid rgb(255 88 214 / 80%);
  background: rgb(4 10 29 / 35%);
}

.primaryAction:hover,
.secondaryAction:hover {
  transform: translateY(-1px);
}

.primaryAction:hover {
  box-shadow: 0 0 2rem rgb(214 51 255 / 30%);
}

.secondaryAction:hover {
  border-color: var(--color-white);
}

.actionArrow {
  font-size: 1.05rem;
  line-height: 0;
}

.trustLine {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: var(--hero-space-actions-trust) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--hero-trust);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  opacity: 1;
}

.trustIcon {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 1.2em;
  fill: rgb(214 51 255 / 12%);
  stroke: var(--logo-magenta);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

@media (min-width: 80rem) {
  .trustLine > span:last-child {
    white-space: nowrap;
  }
}

.robotComposition {
  position: absolute;
  bottom: var(--hero-robot-y);
  left: var(--hero-robot-x);
  width: var(--hero-composition-width);
  height: var(--hero-robot-height);
  transform: translateX(-50%);
}

.robot {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  width: auto;
  height: var(--hero-robot-height);
  max-width: min(46vw, 43.125rem);
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
}

.heroFog {
  position: absolute;
  z-index: 2;
  bottom: var(--hero-fog-asset-y);
  left: var(--hero-fog-asset-x);
  width: 39rem;
  height: auto;
  max-width: none;
  opacity: var(--hero-fog-asset-opacity);
  pointer-events: none;
  transform: translateX(-50%) scale(var(--hero-fog-asset-scale));
  transform-origin: 50% 100%;
}

.capabilityList {
  position: absolute;
  z-index: 4;
  top: var(--hero-capabilities-top);
  bottom: var(--hero-capabilities-bottom);
  display: flex;
  width: var(--hero-capability-list-width);
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.left {
  left: var(--hero-capability-left-inset);
}

.right {
  right: 0;
}

.capability {
  display: flex;
  align-items: center;
  gap: var(--hero-capability-gap);
  color: rgb(255 255 255 / 92%);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caption);
  line-height: var(--line-height-caption);
  text-transform: uppercase;
}

.capability span {
  min-width: 0;
}

.capabilityIcon {
  width: var(--hero-capability-icon-size);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 79.9375rem) {
  .homeVisual {
    --hero-robot-width: min(52vw, 31.25rem);
    --hero-robot-y: 0;
    --hero-composition-width: var(--hero-robot-width);
  }

  .robotComposition {
    position: relative;
    bottom: auto;
    left: auto;
    width: var(--hero-composition-width);
    height: auto;
    margin-inline: auto;
    overflow: visible;
    transform: none;
  }

  .robot {
    position: relative;
    bottom: auto;
    left: 50%;
    display: block;
    width: var(--hero-robot-width);
    height: auto;
    max-width: 100%;
    transform: translateX(-50%);
  }

  .capabilityList {
    display: none;
  }
}

@media (max-width: 62rem) {
  .lightMass {
    filter: blur(5rem);
  }

  .lightMassMain {
    top: 15%;
    left: 42%;
    width: 58%;
    height: 52%;
    background: radial-gradient(
      ellipse at 51% 45%,
      rgb(151 74 255 / 25%) 0,
      rgb(96 52 192 / 16%) 38%,
      rgb(7 18 47 / 0%) 76%
    );
  }

  .lightMassBlue {
    top: 25%;
    right: -10%;
    width: 47%;
    height: 44%;
    background: radial-gradient(
      ellipse at 43% 46%,
      rgb(55 116 255 / 23%) 0,
      rgb(31 74 170 / 15%) 42%,
      rgb(7 18 47 / 0%) 79%
    );
  }

  .lightMassViolet {
    top: 29%;
    left: 32%;
    width: 42%;
    height: 43%;
    background: radial-gradient(
      ellipse at 56% 48%,
      rgb(137 84 224 / 19%) 0,
      rgb(88 45 180 / 11%) 45%,
      rgb(5 8 29 / 0%) 80%
    );
  }

  .lightMassMagenta {
    top: 27%;
    left: 46%;
    width: 31%;
    height: 39%;
    opacity: 0.82;
  }

  .lightMassBottom {
    right: -2%;
    bottom: -6%;
    width: 55%;
    height: 32%;
    opacity: 0.84;
  }

  .lightMassNeck {
    right: 4%;
    bottom: 8%;
    width: 43%;
    height: 34%;
    opacity: 0.82;
  }

  .particleMobileHidden {
    display: none;
  }

  .atmosphericParticlesLayer {
    opacity: 0.76;
  }

  .microDetailMobileHidden {
    display: none;
  }

  .microDetailLayer {
    opacity: 0.82;
  }
}

@media (max-width: 47.9375rem) {
  .homeVisual {
    --hero-robot-width: min(82vw, 20.625rem);
    --hero-composition-width: var(--hero-robot-width);
  }

  .trustLine {
    align-items: flex-start;
    gap: 0.625rem;
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .root {
    --hero-h1: clamp(2.2rem, 3.7vw, 2.375rem);
  }

  .trustLine {
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    opacity: 1;
  }

  .subtitle {
    line-height: 1.5;
  }

  .principle {
    line-height: 1.4;
  }

  .homeVisual {
    --hero-robot-width: min(58vw, 28.75rem);
  }

  .robotComposition {
    margin: 1rem auto 0;
    max-height: 26.875rem;
    overflow: hidden;
    width: min(48vw, 25rem);
  }

  .robot {
    height: auto;
    object-fit: contain;
    object-position: center top;
    width: 100%;
  }
}

@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .trustLine {
    align-items: center;
    font-weight: var(--font-weight-semibold);
    gap: 0.625rem;
    line-height: 1.35;
    opacity: 1;
  }

  .trustIcon {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 1.2em;
  }

  .subtitle {
    line-height: 1.5;
  }

  .principle {
    line-height: 1.4;
  }

  .capability {
    line-height: 1.2;
  }

  .robotComposition {
    margin: 1.125rem auto 0;
    max-height: 31.25rem;
    overflow: hidden;
    width: min(46vw, 28.75rem);
  }

  .robot {
    height: auto;
    object-fit: contain;
    object-position: center top;
    width: 100%;
  }
}

@media (min-width: 80rem) {
  .subtitle {
    line-height: 1.5;
  }

  .principle {
    line-height: 1.4;
  }

  .trustLine {
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    opacity: 1;
  }

  .capability {
    line-height: 1.2;
  }
}

@media (min-width: 100rem) {
  .right .capability:nth-child(2) {
    transform: translateX(clamp(1.5rem, 1.75vw, 3rem));
  }
}

@media (min-width: 90rem) and (max-width: 99.9375rem) {
  .homeVisual {
    --hero-capability-list-width: 9.25rem;
    --hero-capability-gap: 0.45rem;
    --hero-capability-icon-size: 2.15rem;
    --hero-capabilities-top: 1.5rem;
    --hero-capabilities-bottom: 8rem;
    --hero-capability-left-inset: 1.8125rem;
  }

  .left {
    left: var(--hero-capability-left-inset);
  }

  .capability {
    line-height: 1.15;
  }
}

@media (min-width: 80rem) and (max-width: 89.9375rem) {
  .homeVisual {
    --hero-capability-list-width: clamp(7rem, calc(22.5vw - 11rem), 9.25rem);
    --hero-capability-gap: clamp(0.25rem, calc(2vw - 1.35rem), 0.45rem);
    --hero-capability-icon-size: clamp(
      1.625rem,
      calc(5.25vw - 2.575rem),
      2.15rem
    );
    --hero-capabilities-top: 1.25rem;
    --hero-capabilities-bottom: 7.25rem;
    --hero-capability-left-inset: calc(
      clamp(1.25rem, calc(21.5rem - 22.5vw), 3.5rem) + 0.5625rem
    );
  }

  .left {
    left: var(--hero-capability-left-inset);
  }

  .capability {
    letter-spacing: 0.02em;
    line-height: 1.15;
  }
}

@media (max-width: 24.3125rem) {
  .title {
    max-width: 16.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primaryAction:hover,
  .secondaryAction:hover {
    transform: none;
  }
}

}

@scope (.php-industries) {
.section {
  color: var(--color-white);
  padding: 0.5rem 0 2rem;
  position: relative;
}

.shell {
  background: transparent;
  border: 1px solid rgb(92 118 170 / 24%);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 31% 69%;
  margin: 0 auto;
  max-width: 92.5rem;
  min-height: 210px;
  overflow: hidden;
  padding: 0;
  width: calc(100% - 56px);
}

.editorial {
  border-right: 1px solid rgb(92 118 170 / 20%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24px 28px;
}

.editorial h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h2);
  margin: 0;
  max-width: none;
}

.titleLine {
  display: block;
  white-space: nowrap;
}

.titleEmphasis {
  color: var(--color-yellow-strategic);
}

.editorial p,
.industryFooter p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 12px 0 0;
}

.editorialAction,
.industryFooter a {
  color: #e8c4ff;
  font-size: var(--font-size-button-secondary);
  font-weight: var(--font-weight-semibold);
  margin-top: 14px;
  text-decoration: none;
  width: fit-content;
}

.editorialAction:hover,
.industryFooter a:hover {
  color: var(--color-white);
}

.editorialAction:focus-visible,
.industryFooter a:focus-visible {
  border-radius: var(--radius-small);
  outline: 2px solid var(--color-magenta);
  outline-offset: 0.3rem;
}

.industries {
  display: grid;
  grid-template-rows: 86px auto;
  min-width: 0;
  padding: 24px 28px;
}

.industryList {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 86px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.industry {
  align-items: center;
  border-right: 1px solid rgb(92 118 170 / 18%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  padding: 6px 2px;
  text-align: center;
}

.industry:nth-child(6) {
  border-right: 0;
}

.industry img {
  height: auto;
  max-width: var(--industry-icon);
  width: 100%;
}

.industry span {
  color: var(--color-text-secondary);
  font-size: var(--industry-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.industryFooter {
  align-items: start;
  border-top: 1px solid rgb(92 118 170 / 18%);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0;
  min-height: 58px;
  padding: 16px 0 4px;
}

.industryFooter p {
  column-gap: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  max-width: 34rem;
  row-gap: 0.25rem;
}

.industryFooter a {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .industry {
    padding-inline: 12px;
  }

  .editorial h2 {
    line-height: 1.1;
  }

  .editorial p {
    line-height: 1.4;
  }

  .editorialAction,
  .industryFooter,
  .industryFooter p,
  .industryFooter a {
    line-height: 1.35;
  }

  .industry span {
    line-height: 1.15;
  }
}

@media (min-width: 80rem) {
  .industry {
    padding-inline: 12px;
  }

  .editorial h2 {
    line-height: 1.1;
  }

  .editorial p {
    line-height: 1.4;
  }

  .editorialAction,
  .industryFooter,
  .industryFooter p,
  .industryFooter a {
    line-height: 1.35;
  }

  .industry span {
    line-height: 1.15;
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .editorial p {
    line-height: 1.4;
  }

  .industry span {
    line-height: 1.15;
  }

  .industryFooter,
  .industryFooter p,
  .industryFooter a {
    line-height: 1.35;
  }

  .shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    width: calc(100% - 48px);
  }

  .editorial {
    border-bottom: 1px solid rgb(92 118 170 / 20%);
    border-right: 0;
    padding: 24px;
    width: 100%;
  }

  .industries {
    display: block;
    height: auto;
    min-height: 0;
    padding: 24px;
    width: 100%;
  }

  .industryList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 80px);
    height: auto;
    width: 100%;
  }

  .industry {
    border-bottom: 1px solid rgb(92 118 170 / 18%);
  }

  .industry:nth-child(3),
  .industry:nth-child(6) {
    border-right: 0;
  }

  .industry:nth-child(n + 4) {
    border-bottom: 0;
  }

  .industryFooter {
    align-items: flex-start;
    border-top: 1px solid rgb(92 118 170 / 18%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    margin: 0;
    min-height: 0;
    padding: 16px 0 4px;
    position: static;
    width: 100%;
  }

  .industryFooter a {
    display: inline-flex;
  }
}

@media (max-width: 47.9375rem) {
  .shell {
    border-radius: 12px;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    width: calc(100% - 32px);
  }

  .editorial {
    border-bottom: 1px solid rgb(92 118 170 / 20%);
    border-right: 0;
    padding: 26px 20px 24px;
  }

  .industries {
    display: block;
    height: auto;
    min-height: 0;
    padding: 26px 20px 24px;
  }

  .industryList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 74px);
    height: auto;
    min-height: 0;
    width: 100%;
  }

  .industry {
    border-bottom: 1px solid rgb(92 118 170 / 18%);
    border-right: 1px solid rgb(92 118 170 / 18%);
    gap: 4px;
    padding: 6px 2px;
  }

  .industry:nth-child(even) {
    border-right: 0;
  }

  .industry:nth-child(n + 5) {
    border-bottom: 0;
  }

  .industryFooter {
    align-items: flex-start;
    border-top: 1px solid rgb(92 118 170 / 18%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
    padding: 16px 0 4px;
    position: static;
    width: 100%;
  }

  .industryFooter a {
    display: inline-flex;
  }
}

@media (max-width: 24.3125rem) {
  .industry {
    padding-inline: 2px;
  }

  .industry span {
    font-weight: var(--font-weight-semibold);
  }
}

}

@scope (.php-problem) {
.section {
  padding: clamp(2rem, 3vw, 3rem) 0;
}

.problemContainer {
  box-sizing: border-box;
  min-width: 0;
  padding-inline: var(--container-gutter);
  width: 100%;
}

.copy {
  max-width: min(100%, 34rem);
}

.copy h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h2);
  margin: 0;
}

.copy h2 span {
  display: block;
}

.copy h2 mark {
  background: transparent;
  color: var(--color-yellow-strategic);
  display: inline-block;
  white-space: nowrap;
}

.copy p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 1rem 0 0;
  max-width: var(--text-width-body);
}

.copy a {
  color: #e8c4ff;
  display: inline-block;
  font-size: var(--font-size-button-secondary);
  font-weight: var(--font-weight-semibold);
  margin-top: 0.875rem;
  text-decoration: none;
}

.copy a:hover {
  color: var(--color-white);
}

.copy a:focus-visible {
  border-radius: var(--radius-small);
  outline: 2px solid var(--color-magenta);
  outline-offset: 0.3rem;
}

@media (max-width: 47.9375rem) {
  .section {
    padding-block: 2rem 2.5rem;
  }

  .copy {
    max-width: 100%;
  }
}

}

@scope (.php-solutions) {
.section {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--container-gutter);
}

.content {
  margin-inline: auto;
  max-width: 74rem;
  width: 100%;
}

.sectionTitle {
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h3);
  margin: 0 0 1.5rem;
  max-width: 34rem;
  text-align: left;
}

.sectionTitle mark {
  background: transparent;
  color: var(--color-yellow-strategic);
}

.highlightPhrase {
  display: inline-block;
  white-space: nowrap;
}

.grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

.card {
  align-items: center;
  background: rgb(5 8 29 / 10%);
  border: 1px solid rgb(111 131 177 / 15%);
  display: grid;
  gap: 0.75rem;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  justify-items: center;
  min-width: 0;
  padding: 1.25rem 1rem;
  text-align: center;
}

.card img {
  height: auto;
  max-width: 3rem;
  width: 100%;
}

.card h3 {
  color: var(--color-white);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h4);
  margin: 0;
}

.card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  margin: 0;
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .sectionTitle {
    max-width: none;
    text-align: center;
    white-space: nowrap;
  }

  .grid {
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375rem) {
  .section {
    padding-block: 2.5rem;
  }

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

  .card {
    height: auto;
    padding: 1.25rem 1rem;
  }

  .card img {
    max-width: 3rem;
  }
}

}

@scope (.php-knowledge) {
.section {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--container-gutter);
}

.content {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: minmax(0, 22fr) minmax(0, 78fr);
  margin-inline: auto;
  max-width: 100%;
  width: 100%;
}

.editorialHeader {
  align-self: center;
  max-width: 22rem;
}

.editorialHeader h2 {
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h2);
  margin: 0;
}

.editorialHeader h2 mark {
  background: transparent;
  color: var(--color-yellow-strategic);
}

.editorialHeader p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: clamp(1.125rem, 1.5vw, 1.5rem) 0 0;
}

.articlesGrid {
  align-items: start;
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}

.featuredCard,
.secondaryCard {
  border: 1px solid rgb(92 118 170 / 18%);
  min-width: 0;
}

.featuredCard {
  background: rgb(3 9 29 / 3%);
  box-sizing: border-box;
  display: block;
  height: auto;
  min-height: 0;
  padding: clamp(1.5rem, 1.8vw, 1.875rem);
  position: relative;
}

.secondaryStack {
  align-content: start;
  align-items: start;
  display: grid;
  gap: clamp(0.875rem, 1.2vw, 1.125rem);
  grid-template-rows: auto auto;
  min-height: 0;
}

.secondaryCard {
  align-items: center;
  background: rgb(3 9 29 / 3%);
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  padding-block: clamp(1.375rem, 1.5vw, 1.625rem);
  padding-inline: clamp(1.25rem, 1.5vw, 1.625rem);
}

.secondaryStack > .secondaryCard:last-child {
  align-self: start;
  height: auto;
  min-height: 0;
  padding-block: clamp(1.125rem, 1.35vw, 1.375rem);
}

.articleCopy {
  align-self: start;
}

.featuredCard .articleCopy,
.secondaryCard .articleCopy {
  align-self: center;
}

.featuredCard .articleCopy {
  align-self: auto;
  max-width: 58%;
  position: relative;
  z-index: 1;
}

.articleVisual {
  align-self: center;
  pointer-events: none;
  width: 100%;
}

.secondaryCard .articleVisual {
  width: 100%;
}

.label {
  color: #e8c4ff;
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caption);
  line-height: var(--line-height-caption);
  margin: 0;
}

.articleCopy h3 {
  color: var(--color-white);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h5);
  margin: 0;
}

.articleTitleRow {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(0.75rem, 1vw, 1rem);
  margin-top: clamp(0.875rem, 1vw, 1.125rem);
}

.articleTitleRow a {
  color: #e8c4ff;
  display: inline-block;
  font-size: var(--font-size-button-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.articleTitleRow a:hover {
  color: var(--color-white);
}

.articleTitleRow a:focus-visible {
  border-radius: var(--radius-small);
  outline: 2px solid var(--color-magenta);
  outline-offset: 0.3rem;
}

.featuredCard .articleTitleRow {
  align-items: flex-start;
  display: block;
}

.featuredCard .articleTitleRow h3 {
  line-height: 1.32;
}

.featuredCard .articleTitleRow a {
  margin-top: clamp(1.25rem, 1.5vw, 1.5rem);
}

.secondaryCard .articleTitleRow h3 {
  flex: 0 1 auto;
  min-width: 0;
}

.secondaryCard .articleTitleRow a {
  display: inline;
  margin-inline-start: clamp(0.75rem, 1vw, 1rem);
  white-space: nowrap;
}

.articleVisual img {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  pointer-events: none;
  width: 100%;
}

.featuredCard .articleVisual {
  bottom: clamp(2rem, 3.4vw, 3.5rem);
  position: absolute;
  right: clamp(0.5rem, 1vw, 1rem);
  width: clamp(18rem, 56%, 27rem);
  z-index: 1;
}

.featuredCard .articleVisual img {
  transform: rotate(-4deg) scale(1.08);
  transform-origin: 70% 55%;
}

@media (min-width: 80rem) {
  .content {
    align-items: start;
    gap: clamp(1.25rem, 1.7vw, 1.75rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .editorialHeader {
    grid-column: span 3;
    max-width: none;
  }

  .articlesGrid {
    --knowledge-secondary-row-gap: clamp(0.875rem, 1.2vw, 1.125rem);

    grid-column: span 9;
    column-gap: clamp(1.25rem, 1.7vw, 1.75rem);
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: auto auto;
    row-gap: var(--knowledge-secondary-row-gap);
  }

  .featuredCard {
    grid-column: span 5;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .secondaryStack {
    display: contents;
  }

  .secondaryStack > .secondaryCard {
    grid-column: 6 / span 4;
  }

  .secondaryStack > .secondaryCard:first-child {
    grid-row: 1;
  }

  .secondaryStack > .secondaryCard:last-child {
    grid-row: 2;
  }
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .content {
    grid-template-columns: 1fr;
  }

  .editorialHeader {
    max-width: 36rem;
  }

}

@media (max-width: 47.9375rem) {
  .content,
  .articlesGrid,
  .secondaryStack {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding-block: 2.5rem;
  }

  .secondaryCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .featuredCard,
  .secondaryCard {
    display: flex;
    flex-direction: column;
  }

  .featuredCard,
  .secondaryCard,
  .secondaryStack {
    min-height: unset;
  }

  .featuredCard .articleCopy,
  .secondaryCard .articleCopy {
    align-self: stretch;
  }

  .featuredCard .articleCopy {
    max-width: none;
  }

  .articleVisual,
  .secondaryCard .articleVisual {
    align-self: center;
    height: auto;
    margin-top: 1rem;
    position: relative;
    width: min(62%, 19rem);
  }

  .featuredCard .articleVisual {
    bottom: auto;
    right: auto;
    width: min(78%, 24rem);
  }

  .featuredCard .articleVisual img {
    transform: rotate(-2.5deg) scale(1.04);
  }

  .secondaryCard .articleVisual {
    width: min(42%, 12rem);
  }

  .articleVisual img {
    height: auto;
  }

}

}

.php-home-page {
  background: #03020a;
}

@scope (.php-home-canvas) {
.postHeroCanvas {
  --hero-bottom-color: #03020a;
  --landscape-rise: clamp(28rem, 30vw, 34rem);
  isolation: isolate;
  margin-top: -1px;
  position: relative;
}

.postHeroCanvas::before,
.postHeroCanvas::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.postHeroCanvas::before {
  background-color: var(--hero-bottom-color);

  background-image:
    /* CAPA INFERIOR — integración progresiva de las montañas */
    linear-gradient(
      to bottom,
      transparent 68%,
      rgb(3 2 10 / 28%) 78%,
      rgb(3 2 10 / 68%) 90%,
      #03020a 100%
    ),

    /* CAPA IMAGEN — NO CAMBIAR POSICIÓN */
    url("../../home/home-fondo-1.webp?v=20261002-1");

  background-position:
    center,
    center calc(50% - var(--landscape-rise));

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    100% 100%,
    cover;

  z-index: 0;
}

.postHeroCanvas::after {
  background: linear-gradient(
    to bottom,
    var(--hero-bottom-color) 0%,
    var(--hero-bottom-color) 8%,
    color-mix(in srgb, var(--hero-bottom-color) 92%, transparent) 16%,
    color-mix(in srgb, var(--hero-bottom-color) 65%, transparent) 26%,
    color-mix(in srgb, var(--hero-bottom-color) 24%, transparent) 36%,
    transparent 44%
  );
  z-index: 1;
}

.postHeroCanvas > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 47.9375rem) {
  .postHeroCanvas::before {
    background-image:
      linear-gradient(
        to bottom,
        transparent 56%,
        rgb(3 2 10 / 42%) 70%,
        rgb(3 2 10 / 78%) 88%,
        #03020a 100%
      ),
      url("../../home/home-fondo-1.webp?v=20261002-1");
    background-position: center bottom, center calc(50% - var(--landscape-rise));
    background-size: 100% clamp(10rem, 20vw, 20rem), cover;
  }
}

}

/*
 * Home geometry baseline
 *
 * All content-bearing areas share one horizontal reference. Each section keeps
 * its own internal grid; this rule only establishes the page-level gutters and
 * prevents section-specific widths from creating competing alignment axes.
 */
.php-header .container,
.php-home-hero .container,
.php-industries .shell,
.php-problem .problemContainer,
.php-solutions .content,
.php-knowledge .content {
  box-sizing: border-box;
  width: min(var(--site-container-max), calc(100% - (var(--container-gutter) * 2)));
  max-width: var(--site-container-max);
  margin-inline: auto;
}

.php-header .container,
.php-home-hero .container {
  padding-inline: 0;
}

.php-problem .problemContainer {
  padding-inline: 0;
}

.php-solutions .section,
.php-knowledge .section {
  padding-inline: 0;
}

@media (min-width: 64rem) {
  .php-problem .problemContainer {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--container-gutter);
  }

  .php-problem .copy {
    grid-column: 1 / span 5;
  }
}

@media (min-width: 80rem) {
  .php-solutions .sectionTitle {
    max-width: none;
    text-align: center;
    white-space: nowrap;
  }
}

/* Solution icons scale as a visual system, not as isolated card overrides. */
.php-solutions {
  --solution-icon-size: clamp(3rem, 3.5vw, 4.5rem);
}

.php-solutions .card img {
  max-width: var(--solution-icon-size);
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .php-solutions {
    --solution-icon-size: clamp(2.75rem, 5vw, 3.25rem);
  }
}

@media (max-width: 47.9375rem) {
  .php-solutions {
    --solution-icon-size: clamp(2.5rem, 11vw, 3rem);
  }
}

/* Industries use the same visible icon scale as the solutions band. */
.php-industries {
  --industry-icon: clamp(3rem, 3.5vw, 4.5rem);
  --industry-row-size: max(5.375rem, calc(var(--industry-icon) + 2.25rem));
}

.php-industries .industries {
  grid-template-rows: var(--industry-row-size) auto;
}

.php-industries .industryList {
  grid-template-rows: var(--industry-row-size);
}

@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .php-industries {
    --industry-icon: clamp(2.75rem, 5vw, 3.25rem);
  }

  .php-industries .industryList {
    grid-template-rows: repeat(2, var(--industry-row-size));
  }
}

@media (max-width: 47.9375rem) {
  .php-industries {
    --industry-icon: clamp(2.5rem, 11vw, 3rem);
  }

  .php-industries .industryList {
    grid-template-rows: repeat(3, var(--industry-row-size));
  }
}

/* Compact editorial rhythm: preserve breathing room without empty bands. */
.php-industries .section {
  padding-bottom: 1.25rem;
}

.php-problem .section {
  padding-block: clamp(1.5rem, 2vw, 2rem);
}

.php-solutions .section,
.php-knowledge .section {
  padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}

.php-knowledge .section {
  padding-top: 0;
  padding-bottom: var(--section-gap);
}

.php-solutions .section {
  padding-bottom: var(--section-gap);
}

/* Final conversion band: one continuous surface divided by a structural grid. */
@scope (.php-final-cta) {
  .section {
    padding-top: 0;
  }

  .band {
    align-items: center;
    background: transparent;
    border: var(--border-subtle);
    border-radius: var(--radius-medium);
    display: grid;
    gap: clamp(1.25rem, 2vw, 2rem);
    grid-template-columns: minmax(0, 29fr) minmax(0, 31fr) minmax(0, 40fr);
    padding: clamp(1.125rem, 1.8vw, 1.75rem) clamp(1.5rem, 2vw, 2.25rem);
  }

  .message {
    align-items: center;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: auto minmax(0, 1fr);
  }

  .conversationIcon {
    align-items: center;
    background: linear-gradient(145deg, rgb(214 51 255 / 30%), rgb(106 27 245 / 18%));
    border-radius: 50%;
    display: inline-flex;
    height: clamp(3.25rem, 4vw, 4.25rem);
    justify-content: center;
    width: clamp(3.25rem, 4vw, 4.25rem);
  }

  .conversationIcon svg,
  .guaranteeIcon svg {
    fill: none;
    height: 55%;
    stroke: var(--logo-magenta);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    width: 55%;
  }

  .message h2 {
    color: var(--color-white);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h4);
    margin: 0;
  }

  .message mark {
    background: transparent;
    color: var(--color-yellow-strategic);
  }

  .diagnostic {
    border-inline: var(--border-subtle);
    display: grid;
    gap: var(--space-2);
    padding-inline: clamp(1.25rem, 2vw, 2rem);
  }

  .diagnostic p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    margin: 0;
  }

  .diagnostic > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-metadata);
    line-height: var(--line-height-caption);
  }

  .diagnosticAction {
    align-items: center;
    align-self: start;
    background: linear-gradient(100deg, #7f18b7, #c428d8);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    display: inline-flex;
    font-size: var(--font-size-functional);
    font-weight: var(--font-weight-semibold);
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-2);
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    text-decoration: none;
    width: fit-content;
  }

  .guarantees {
    display: grid;
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guarantees li {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    min-width: 0;
  }

  .guaranteeIcon {
    align-items: center;
    border: 1px solid rgb(214 51 255 / 46%);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
  }

  .guarantees li > span:last-child {
    color: var(--color-text-secondary);
    font-size: var(--font-size-metadata);
    line-height: var(--line-height-caption);
  }

  @media (min-width: 48rem) and (max-width: 79.9375rem) {
    .band {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .guarantees {
      border-top: var(--border-subtle);
      grid-column: 1 / -1;
      padding-top: var(--space-4);
    }
  }

  @media (max-width: 47.9375rem) {
    .section {
      padding-top: 0;
    }

    .band,
    .guarantees {
      grid-template-columns: minmax(0, 1fr);
    }

    .diagnostic {
      border-inline: 0;
      border-block: var(--border-subtle);
      padding-block: var(--space-5);
      padding-inline: 0;
    }

    .guarantees {
      gap: var(--space-4);
    }
  }
}

/* Footer: editorial information architecture, not a group of cards. */
@scope (.php-site-footer) {
  .footer {
    /* The footer surface begins after the external CTA-to-footer gap. */
    background: transparent;
    border-top: 1px solid rgb(111 131 177 / 24%);
    overflow: hidden;
    padding-block: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }

  .footer::after {
    background:
      linear-gradient(135deg, transparent 47%, rgb(79 117 255 / 16%) 48%, transparent 49%) 0 0 / 3.5rem 3.5rem,
      linear-gradient(45deg, transparent 47%, rgb(214 51 255 / 12%) 48%, transparent 49%) 1.75rem 1.75rem / 3.5rem 3.5rem;
    bottom: -2rem;
    content: "";
    height: 10rem;
    pointer-events: none;
    position: absolute;
    right: -2rem;
    width: min(34vw, 28rem);
  }

  .footerGrid {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: minmax(0, 30fr) minmax(0, 21fr) minmax(0, 21fr) minmax(0, 28fr);
    position: relative;
    z-index: 1;
  }

  .footerBrand,
  .footerNav,
  .footerLegal,
  .footerSignature {
    min-width: 0;
  }

  .footerBrand > img {
    height: auto;
    max-width: 12rem;
    width: 100%;
  }

  .footerBrand p,
  .footerSignature p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    margin-top: var(--space-3);
  }

  .footerSocials {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .footerSocial {
    align-items: center;
    border: 1px solid rgb(162 174 201 / 56%);
    border-radius: 50%;
    cursor: default;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    opacity: 1;
    width: 2.25rem;
  }

  .footerSocial svg {
    fill: none;
    height: 52%;
    stroke: var(--color-white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 52%;
  }

  .footerNav h2,
  .footerLegal h2 {
    color: var(--color-white);
    font-size: var(--font-size-metadata);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caption);
    line-height: var(--line-height-caption);
    margin: 0;
  }

  .footerNav ul,
  .footerLegal ul {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .footerNav a,
  .footerLegal a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-small);
    line-height: var(--line-height-body-small);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footerNav a:hover,
  .footerLegal a:hover {
    color: var(--logo-magenta);
  }

  .footerSignature {
    justify-self: end;
    max-width: 13rem;
    text-align: right;
  }

  .footerSignature > img {
    filter: drop-shadow(0 0 0.9rem rgb(214 51 255 / 18%));
    height: auto;
    margin-left: auto;
    max-width: 12rem;
    width: 100%;
  }

  @media (min-width: 48rem) and (max-width: 79.9375rem) {
    .footerGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 47.9375rem) {
    .footerGrid {
      grid-template-columns: minmax(0, 1fr);
    }

    .footerSignature {
      justify-self: start;
      text-align: left;
    }

    .footerSignature > img {
      margin-left: 0;
    }
  }
}

/* CTA and footer consume the same approved page-level alignment axis. */
.php-final-cta .container,
.php-site-footer .container {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--site-container-max);
  width: min(var(--site-container-max), calc(100% - (var(--container-gutter) * 2)));
}

/* External separation only: it belongs to the page canvas, not CTA or Footer internals. */
.php-site-footer {
  /* Structural separation outside both components; body background stays visible. */
  margin-top: var(--section-gap);
}

/* Ningún footer del sitio utiliza la rejilla decorativa de la esquina. */
.php-site-footer .footer::after {
  content: none;
}

/* Asset versionado para evitar que el navegador conserve el personaje anterior. */
.php-home-hero .robot {
  content: url("../../hero/robot_futurista3.png");
}

@media (min-width: 80rem) {
  .php-home-hero .robotComposition {
    overflow: visible;
  }

  .php-home-hero .left {
    left: 3%;
  }

  .php-home-hero .right {
    right: 3%;
  }

  .php-home-hero .capabilityList {
    display: flex;
    justify-content: space-around;
  }

  .php-home-hero .capability {
    align-self: stretch;
  }

  .php-home-hero .left {
    top: 0;
    bottom: 60%;
  }

  .php-home-hero .right {
    top: 5%;
    bottom: 43%;
  }

  .php-home-hero .left .capability:nth-child(1) {
    transform: translateX(24%);
  }

  .php-home-hero .left .capability:nth-child(2) {
    transform: translateX(-8%);
  }

  .php-home-hero .left .capability:nth-child(3) {
    transform: translateX(-52%);
  }

  .php-home-hero .left .capability:nth-child(4) {
    transform: translateX(-46%);
  }

  .php-home-hero .right .capability:nth-child(1) {
    transform: translateX(24%);
  }

  .php-home-hero .right .capability:nth-child(2) {
    transform: translateX(24%);
  }

  .php-home-hero .right .capability:nth-child(3) {
    transform: translateX(24%);
  }

  .php-home-hero .right .capability:nth-child(4) {
    transform: translateX(24%);
  }

  .php-home-hero .right .capability:nth-child(5) {
    transform: translateX(24%);
  }

  .php-home-hero .robot {
    left: 50%;
    width: auto;
    height: var(--hero-robot-height);
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
    transform: translateX(var(--hero-face-anchor-offset));
  }
}

/* Las ocho capacidades forman una única columna a la izquierda de la figura. */
@media (min-width: 80rem) {
  .php-home-hero .left,
  .php-home-hero .right {
    right: clamp(-11rem, -12vw, -8rem);
    left: auto;
    width: var(--hero-capability-list-width);
  }

  .php-home-hero .left {
    top: 4%;
    bottom: 60%;
  }

  .php-home-hero .right {
    top: 43%;
    bottom: 0;
  }

  .php-home-hero .left .capability:nth-child(n),
  .php-home-hero .right .capability:nth-child(n) {
    transform: none;
  }
}