/* ALLERIA AI, INC. — HERO V2 */

:root {
  --page-edge: 52px;
  --hero-max: 1580px;
}

.site-shell {
  width: min(
    calc(100% - (var(--page-edge) * 2)),
    var(--hero-max)
  );
  margin-inline: auto;
}

.hero-premium {
  width: 100%;
  min-height: calc(100vh - 82px);
  padding: 42px 0 22px;
  overflow: hidden;
}

.hero-premium-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 32px;
  align-items: center;
  transform: none;
}

.hero-premium-copy {
  align-self: center;
}

.hero-ai-stage {
  min-height: 700px;
}

@media (max-width: 900px) {
  :root {
    --page-edge: 22px;
  }

  .hero-premium-grid {
    grid-template-columns: 1fr;
  }
}

/* PORTFOLIO — REAL BRAND ASSETS */

.portfolio-icon-real {
  overflow: hidden;
  padding: 0;

  background: #ffffff;
  border: 1px solid rgba(83, 118, 150, 0.12);
}

.portfolio-icon-real img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
  object-position: center;

  padding: 4px;
}

/* Runtime is private infrastructure, not a public brand */

.portfolio-icon-runtime {
  position: relative;

  color: transparent;

  background:
    linear-gradient(
      145deg,
      #38c8e8,
      #705cff
    );
}

.portfolio-icon-runtime::before {
  content: "⚙";
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}


/* CAPABILITY CLOUD — RADIAL HUD */

.capability-cloud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.capability-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 34px;
  padding: 8px 11px;

  border-radius: 999px;
  border: 1px solid rgba(110, 145, 180, 0.16);

  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 28px rgba(55, 90, 130, 0.08),
    0 0 18px rgba(80, 190, 240, 0.05);

  color: #172128;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;

  white-space: nowrap;
}

.capability-node::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 58px;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(40, 190, 220, 0.62),
    rgba(105, 92, 255, 0.18)
  );
}

.capability-node.left-ray::after {
  left: 100%;
}

.capability-node.right-ray::after {
  right: 100%;
}

.cap-dot {
  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  flex: 0 0 23px;

  border-radius: 50%;

  font-size: 12px;

  box-shadow:
    0 0 0 4px rgba(255,255,255,0.92),
    0 0 16px currentColor;
}

.cap-dot.identity {
  color: #17c9d7;
  background: rgba(23, 201, 215, 0.12);
}

.cap-dot.intelligence {
  color: #2f8cff;
  background: rgba(47, 140, 255, 0.12);
}

.cap-dot.runtime {
  color: #765cff;
  background: rgba(118, 92, 255, 0.12);
}

.cap-dot.platform {
  color: #ff7a2f;
  background: rgba(255, 122, 47, 0.12);
}


/* individual positioning — intentionally asymmetric */

.cap-identity-core {
  left: -7%;
  top: 20%;
}

.cap-memory {
  left: 12%;
  top: 5%;
}

.cap-context {
  right: 17%;
  top: 4%;
}

.cap-continuity {
  right: -3%;
  top: 14%;
}

.cap-signals {
  right: -9%;
  top: 31%;
}

.cap-understanding {
  right: -13%;
  top: 43%;
}

.cap-priority {
  right: -11%;
  top: 56%;
}

.cap-action {
  right: -4%;
  bottom: 18%;
}

.cap-semantic {
  left: -10%;
  top: 38%;
}

.cap-recovery {
  left: -12%;
  top: 51%;
}

.cap-explainability {
  left: -8%;
  bottom: 18%;
}

.cap-api {
  left: 5%;
  bottom: 3%;
}

.cap-capacity {
  left: 35%;
  bottom: -2%;
}

.cap-usage {
  right: 25%;
  bottom: -1%;
}

.cap-licensing {
  right: -1%;
  bottom: 6%;
}


/* ray directions */

.cap-identity-core,
.cap-memory,
.cap-semantic,
.cap-recovery,
.cap-explainability,
.cap-api,
.cap-capacity {
  --ray-side: left;
}

.cap-context,
.cap-continuity,
.cap-signals,
.cap-understanding,
.cap-priority,
.cap-action,
.cap-usage,
.cap-licensing {
  --ray-side: right;
}

.cap-identity-core::after,
.cap-memory::after,
.cap-semantic::after,
.cap-recovery::after,
.cap-explainability::after,
.cap-api::after,
.cap-capacity::after {
  left: 100%;
}

.cap-context::after,
.cap-continuity::after,
.cap-signals::after,
.cap-understanding::after,
.cap-priority::after,
.cap-action::after,
.cap-usage::after,
.cap-licensing::after {
  right: 100%;
}


/* CAPABILITY CLOUD — COMPACT RADIAL LAYOUT */

.hero-ai-stage {
  min-height: 610px;
}

.alleria-hero-image {
  width: min(78%, 540px);
  max-height: 570px;
}

.capability-cloud {
  inset: 4% 2% 3%;
}

.capability-node {
  min-height: 38px;
  padding: 6px 10px 6px 7px;
  gap: 8px;

  font-size: 9px;
  font-weight: 800;

  border-radius: 12px;

  box-shadow:
    0 8px 22px rgba(55, 90, 130, 0.09),
    0 0 16px rgba(80, 190, 240, 0.07);
}

.capability-node::after {
  width: 32px;
}

.cap-dot {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;

  font-size: 17px;
  line-height: 1;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 15px currentColor;
}


/* IDENTITY — TOP ARC */

.cap-identity-core {
  left: 5%;
  top: 22%;
}

.cap-memory {
  left: 22%;
  top: 5%;
}

.cap-context {
  right: 25%;
  top: 4%;
}

.cap-continuity {
  right: 3%;
  top: 15%;
}


/* INTELLIGENCE — RIGHT ARC */

.cap-signals {
  right: 1%;
  top: 31%;
}

.cap-understanding {
  right: 0;
  top: 43%;
}

.cap-priority {
  right: 2%;
  top: 55%;
}

.cap-action {
  right: 7%;
  top: 67%;
}


/* RUNTIME — LEFT ARC */

.cap-semantic {
  left: 1%;
  top: 37%;
}

.cap-recovery {
  left: 0;
  top: 49%;
}

.cap-explainability {
  left: 4%;
  top: 61%;
}


/* PLATFORM — LOWER ARC */

.cap-api {
  left: 17%;
  bottom: 5%;
}

.cap-capacity {
  left: 39%;
  bottom: 0;
}

.cap-usage {
  right: 28%;
  bottom: 1%;
}

.cap-licensing {
  right: 5%;
  bottom: 7%;
}


/* make the four technology families easier to distinguish */

.cap-dot.identity {
  background: rgba(17, 203, 211, 0.16);
}

.cap-dot.intelligence {
  background: rgba(47, 140, 255, 0.16);
}

.cap-dot.runtime {
  background: rgba(118, 92, 255, 0.16);
}

.cap-dot.platform {
  background: rgba(255, 122, 47, 0.16);
}


/* CAPABILITY HUD — SIZE + EDGE CORRECTION */

.capability-node {
  width: max-content !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  max-width: 190px;

  padding: 6px 11px 6px 7px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;

  border-radius: 14px !important;
}

.capability-node strong {
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}

.cap-explainability,
.cap-action {
  height: auto !important;
  min-height: 38px !important;
  width: max-content !important;
}


/* pull right-side capabilities safely inside viewport */

.cap-context {
  right: 18%;
  top: 4%;
}

.cap-continuity {
  right: 3%;
  top: 15%;
}

.cap-signals {
  right: 1.5%;
  top: 30%;
}

.cap-understanding {
  right: 0.5%;
  top: 42%;
}

.cap-priority {
  right: 2%;
  top: 54%;
}

.cap-action {
  right: 5%;
  top: 65%;
}

.cap-licensing {
  right: 4%;
  bottom: 8%;
}


/* left side stays close to the holographic field */

.cap-identity-core {
  left: 6%;
  top: 22%;
}

.cap-semantic {
  left: 2%;
  top: 37%;
}

.cap-recovery {
  left: 1%;
  top: 49%;
}

.cap-explainability {
  left: 5%;
  top: 61%;
}


/* bottom capability arc */

.cap-api {
  left: 21%;
  bottom: 4%;
}

.cap-capacity {
  left: 43%;
  bottom: 0;
}

.cap-usage {
  right: 25%;
  bottom: 1%;
}


/* stronger technology symbols */

.cap-dot {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  font-size: 19px;

  border: 1px solid rgba(255,255,255,.95);

  box-shadow:
    0 0 0 4px rgba(255,255,255,.92),
    0 0 18px currentColor;
}


/* HERO — FUTURE INTELLIGENCE FIELD */

.hero-ai-stage {
  position: relative;
  isolation: isolate;
}

/* digital rain / matrix field */
.hero-ai-stage::before {
  content: "";
  position: absolute;
  z-index: 0;

  inset: 2% 4% 0;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 22px,
      rgba(47, 183, 255, 0.045) 23px,
      transparent 24px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(70, 214, 255, 0.16) 0 2px,
      transparent 2px 18px
    );

  mask-image:
    radial-gradient(
      ellipse at 52% 48%,
      black 10%,
      rgba(0,0,0,.94) 42%,
      rgba(0,0,0,.42) 67%,
      transparent 88%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at 52% 48%,
      black 10%,
      rgba(0,0,0,.94) 42%,
      rgba(0,0,0,.42) 67%,
      transparent 88%
    );

  opacity: .72;

  animation: dataRain 11s linear infinite;
}

/* holographic aura */
.hero-ai-stage::after {
  content: "";
  position: absolute;
  z-index: 1;

  left: 50%;
  top: 49%;

  width: 560px;
  height: 560px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0) 0 48%,
      rgba(44, 214, 255, .11) 49% 51%,
      transparent 52% 58%,
      rgba(117, 92, 255, .13) 59% 60%,
      transparent 61%
    );

  box-shadow:
    0 0 0 32px rgba(25, 203, 229, .025),
    0 0 0 64px rgba(115, 92, 255, .022),
    0 0 90px rgba(37, 177, 255, .18),
    inset 0 0 80px rgba(104, 92, 255, .08);

  animation: intelligencePulse 4.8s ease-in-out infinite;
}

/* extra digital layer behind avatar */
.alleria-glow {
  z-index: 2;

  width: 620px;
  height: 620px;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(26, 213, 231, .22),
      transparent 34%
    ),
    radial-gradient(
      circle at 54% 52%,
      rgba(106, 77, 255, .18),
      transparent 44%
    ),
    conic-gradient(
      from 0deg,
      transparent,
      rgba(31, 215, 235, .10),
      transparent 25%,
      rgba(114, 83, 255, .11),
      transparent 55%,
      rgba(31, 215, 235, .08),
      transparent
    );

  filter: blur(18px);

  animation: holoRotate 18s linear infinite;
}

.alleria-hero-image {
  z-index: 4;
}

/* capability layer must stay above avatar aura */
.capability-cloud {
  z-index: 8;
}

/* subtle signal pulse on capability icons */
.cap-dot {
  animation: nodePulse 3.2s ease-in-out infinite;
}

/* different rhythm for visual depth */
.capability-node:nth-child(2n) .cap-dot {
  animation-delay: .8s;
}

.capability-node:nth-child(3n) .cap-dot {
  animation-delay: 1.4s;
}


/* FUTURE FIELD ANIMATIONS */

@keyframes dataRain {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      0 0,
      0 160px;
  }
}

@keyframes intelligencePulse {
  0%,
  100% {
    opacity: .72;
    transform: translate(-50%, -50%) scale(.98);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes holoRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes nodePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(255,255,255,.94),
      0 0 14px currentColor;
  }

  50% {
    box-shadow:
      0 0 0 4px rgba(255,255,255,.96),
      0 0 24px currentColor;
  }
}


/* HERO — STRONGER FUTURE AI FIELD */

.hero-ai-stage::before {
  opacity: 1;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      rgba(0, 210, 255, 0.10) 19px,
      transparent 20px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(46, 226, 255, 0.30) 0 2px,
      rgba(90, 122, 255, 0.10) 3px 6px,
      transparent 7px 18px
    );

  filter:
    drop-shadow(0 0 5px rgba(28, 215, 255, 0.20));

  animation: dataRainStrong 6s linear infinite;
}

.hero-ai-stage::after {
  width: 590px;
  height: 590px;

  background:
    radial-gradient(
      circle,
      transparent 0 44%,
      rgba(36, 226, 255, 0.22) 45% 47%,
      transparent 48% 54%,
      rgba(80, 110, 255, 0.22) 55% 57%,
      transparent 58% 63%,
      rgba(155, 74, 255, 0.18) 64% 65%,
      transparent 66%
    );

  box-shadow:
    0 0 0 26px rgba(23, 211, 241, 0.04),
    0 0 0 54px rgba(87, 91, 255, 0.05),
    0 0 85px rgba(23, 197, 255, 0.28),
    0 0 145px rgba(116, 74, 255, 0.18),
    inset 0 0 90px rgba(32, 205, 255, 0.10);

  animation:
    intelligencePulseStrong 3.2s ease-in-out infinite,
    intelligenceRotate 24s linear infinite;
}

.alleria-glow {
  width: 660px;
  height: 660px;

  background:
    radial-gradient(
      circle at 42% 40%,
      rgba(0, 229, 255, 0.30),
      transparent 29%
    ),
    radial-gradient(
      circle at 64% 40%,
      rgba(66, 115, 255, 0.27),
      transparent 31%
    ),
    radial-gradient(
      circle at 48% 66%,
      rgba(145, 67, 255, 0.24),
      transparent 36%
    ),
    conic-gradient(
      from 0deg,
      rgba(0, 225, 255, 0.05),
      rgba(60, 115, 255, 0.18),
      rgba(145, 70, 255, 0.14),
      rgba(0, 225, 255, 0.12),
      rgba(60, 115, 255, 0.18),
      rgba(0, 225, 255, 0.05)
    );

  filter:
    blur(14px)
    saturate(1.4);

  animation:
    holoRotateFast 14s linear infinite,
    glowBreath 3.8s ease-in-out infinite;
}

.cap-dot {
  animation: nodePulseStrong 2.2s ease-in-out infinite;
}

.capability-node:nth-child(2n) {
  animation: nodeFloatA 4.8s ease-in-out infinite;
}

.capability-node:nth-child(3n) {
  animation: nodeFloatB 5.5s ease-in-out infinite;
}


/* stronger family colors */

.cap-dot.identity {
  color: #00ddec;
  background: rgba(0, 221, 236, 0.22);
}

.cap-dot.intelligence {
  color: #2b84ff;
  background: rgba(43, 132, 255, 0.22);
}

.cap-dot.runtime {
  color: #8057ff;
  background: rgba(128, 87, 255, 0.22);
}

.cap-dot.platform {
  color: #ff7b2d;
  background: rgba(255, 123, 45, 0.22);
}


/* ANIMATIONS */

@keyframes dataRainStrong {
  0% {
    background-position:
      0 0,
      0 -120px;
  }

  100% {
    background-position:
      0 0,
      0 220px;
  }
}

@keyframes intelligencePulseStrong {
  0%,
  100% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(.97);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.035);
  }
}

@keyframes intelligenceRotate {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes holoRotateFast {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }
}

@keyframes glowBreath {
  0%,
  100% {
    opacity: .74;
  }

  50% {
    opacity: 1;
  }
}

@keyframes nodePulseStrong {
  0%,
  100% {
    transform: scale(.96);

    box-shadow:
      0 0 0 3px rgba(255,255,255,.94),
      0 0 12px currentColor;
  }

  50% {
    transform: scale(1.08);

    box-shadow:
      0 0 0 4px rgba(255,255,255,.98),
      0 0 26px currentColor;
  }
}

@keyframes nodeFloatA {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes nodeFloatB {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}


/* AI HUD — FUTURE HOLOGRAPHIC SYSTEM */

.ai-hud {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 49%;

  width: 600px;
  height: 600px;

  transform: translate(-50%, -50%);

  pointer-events: none;
}

.hud-ring {
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-a {
  width: 520px;
  height: 520px;

  border:
    1px solid rgba(27, 223, 255, 0.55);

  box-shadow:
    0 0 28px rgba(27, 223, 255, 0.25),
    inset 0 0 28px rgba(27, 223, 255, 0.10);

  animation:
    hudRotateA 14s linear infinite;
}

.ring-b {
  width: 450px;
  height: 450px;

  border:
    2px dashed rgba(107, 93, 255, 0.42);

  animation:
    hudRotateB 18s linear infinite;
}

.ring-c {
  width: 370px;
  height: 370px;

  border:
    1px dotted rgba(0, 214, 255, 0.62);

  box-shadow:
    0 0 24px rgba(77, 117, 255, 0.18);

  animation:
    hudPulse 3s ease-in-out infinite;
}


/* broken arcs */

.hud-arc {
  position: absolute;
  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform-origin: center;
}

.arc-a {
  width: 555px;
  height: 555px;

  transform: translate(-50%, -50%) rotate(18deg);

  border-top: 3px solid rgba(0, 226, 255, 0.72);
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;

  filter:
    drop-shadow(0 0 8px rgba(0, 226, 255, .55));

  animation:
    arcSpinA 8s linear infinite;
}

.arc-b {
  width: 485px;
  height: 485px;

  transform: translate(-50%, -50%) rotate(-42deg);

  border-right: 2px solid rgba(125, 83, 255, .70);
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;

  filter:
    drop-shadow(0 0 7px rgba(125, 83, 255, .48));

  animation:
    arcSpinB 11s linear infinite;
}

.arc-c {
  width: 410px;
  height: 410px;

  transform: translate(-50%, -50%) rotate(90deg);

  border-left: 2px solid rgba(49, 147, 255, .72);
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;

  filter:
    drop-shadow(0 0 7px rgba(49, 147, 255, .5));

  animation:
    arcSpinA 6s linear infinite reverse;
}


/* particles */

.hud-particle {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #7cefff;

  box-shadow:
    0 0 7px #51e8ff,
    0 0 18px rgba(81, 232, 255, .85);

  animation:
    particleBlink 2.2s ease-in-out infinite;
}

.p1 { left: 10%; top: 37%; }
.p2 { left: 18%; top: 17%; animation-delay: .4s; }
.p3 { right: 16%; top: 20%; animation-delay: .8s; }
.p4 { right: 7%; top: 48%; animation-delay: 1.2s; }
.p5 { right: 23%; bottom: 10%; animation-delay: .6s; }
.p6 { left: 28%; bottom: 8%; animation-delay: 1.4s; }
.p7 { left: 6%; bottom: 32%; animation-delay: 1s; }
.p8 { left: 49%; top: 3%; animation-delay: 1.6s; }


/* floating code labels */

.hud-code {
  position: absolute;

  color: rgba(44, 177, 235, .68);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .12em;

  text-shadow:
    0 0 12px rgba(30, 197, 255, .48);

  animation:
    codeFloat 4s ease-in-out infinite;
}

.code-a { left: 10%; top: 27%; }
.code-b { right: 10%; top: 35%; animation-delay: 1s; }
.code-c { left: 20%; bottom: 21%; animation-delay: 1.8s; }
.code-d { right: 20%; bottom: 19%; animation-delay: 2.4s; }


@keyframes hudRotateA {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes hudRotateB {
  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }
}

@keyframes hudPulse {
  0%,
  100% {
    opacity: .45;
    transform:
      translate(-50%, -50%)
      scale(.98);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.035);
  }
}

@keyframes arcSpinA {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes arcSpinB {
  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }
}

@keyframes particleBlink {
  0%,
  100% {
    opacity: .28;
    transform: scale(.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes codeFloat {
  0%,
  100% {
    opacity: .35;
    transform: translateY(0);
  }

  50% {
    opacity: .9;
    transform: translateY(-8px);
  }
}


/* HUD — ACTIVE SIGNAL RAYS + FINAL NODE SIZE */

.capability-node,
.cap-explainability,
.cap-action {
  width: max-content !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  padding: 4px 11px 4px 6px !important;

  display: inline-flex !important;
  align-items: center !important;

  overflow: visible;
}

/* signal ray */

.capability-node::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 46px;
  height: 2px;

  transform: translateY(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      #35ddf3,
      #6c7cff,
      transparent
    );

  background-size: 220% 100%;

  filter:
    drop-shadow(0 0 5px rgba(51, 220, 244, .65));

  opacity: .8;

  animation: signalRay 1.9s linear infinite;
}

/* left-side nodes send signal toward avatar */

.cap-identity-core::after,
.cap-memory::after,
.cap-semantic::after,
.cap-recovery::after,
.cap-explainability::after,
.cap-api::after,
.cap-capacity::after {
  left: 100%;
}

/* right-side nodes send signal toward avatar */

.cap-context::after,
.cap-continuity::after,
.cap-signals::after,
.cap-understanding::after,
.cap-priority::after,
.cap-action::after,
.cap-usage::after,
.cap-licensing::after {
  right: 100%;
  transform:
    translateY(-50%)
    rotate(180deg);
}

/* luminous connection point */

.capability-node::before {
  content: "";
  position: absolute;
  z-index: 4;

  top: 50%;

  width: 7px;
  height: 7px;

  transform: translateY(-50%);

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: #38dff4;

  box-shadow:
    0 0 5px #38dff4,
    0 0 12px rgba(56, 223, 244, .85);
}

.cap-identity-core::before,
.cap-memory::before,
.cap-semantic::before,
.cap-recovery::before,
.cap-explainability::before,
.cap-api::before,
.cap-capacity::before {
  right: -51px;
}

.cap-context::before,
.cap-continuity::before,
.cap-signals::before,
.cap-understanding::before,
.cap-priority::before,
.cap-action::before,
.cap-usage::before,
.cap-licensing::before {
  left: -51px;
}

/* moving energy pulse */

@keyframes signalRay {
  from {
    background-position: 200% 0;
    opacity: .38;
  }

  45% {
    opacity: 1;
  }

  to {
    background-position: -20% 0;
    opacity: .38;
  }
}


/* COMPANY SECTION */

.company-section {
  position: relative;
  padding: 110px 0 120px;

  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(44, 207, 235, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 72% 68%,
      rgba(111, 87, 255, 0.07),
      transparent 26%
    ),
    #ffffff;
}

.company-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.section-eyebrow {
  margin-bottom: 22px;

  color: #169eaf;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.20em;
}

.company-copy h2 {
  max-width: 680px;
  margin: 0;

  color: #11191f;
  font-size: clamp(46px, 4vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.company-lead {
  max-width: 650px;
  margin: 30px 0 0;

  color: #31424e;
  font-size: 20px;
  line-height: 1.55;
}

.company-copy p:not(.company-lead) {
  max-width: 650px;
  margin: 22px 0 0;

  color: #6a7a86;
  font-size: 16px;
  line-height: 1.75;
}


/* COMPANY SYSTEM PANEL */

.company-system-panel {
  position: relative;
  overflow: hidden;

  padding: 28px;

  border: 1px solid rgba(92, 133, 173, 0.16);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(244,250,255,.92)
    );

  box-shadow:
    0 24px 70px rgba(52, 91, 130, .08),
    0 0 45px rgba(68, 194, 239, .05);
}

.system-panel-glow {
  position: absolute;
  right: -120px;
  top: -120px;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(29, 211, 232, .18),
      rgba(102, 87, 255, .07) 46%,
      transparent 72%
    );

  filter: blur(14px);
}

.system-panel-header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 10px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(94, 127, 155, .13);

  color: #677987;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.system-panel-header i {
  width: 7px;
  height: 7px;

  margin-left: auto;

  border-radius: 50%;

  background: #1bcbd7;

  box-shadow:
    0 0 10px rgba(27, 203, 215, .55);
}

.system-panel-header strong {
  color: #2d414e;
  font-size: 8px;
}

.system-layer {
  position: relative;
  z-index: 2;

  min-height: 92px;

  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;

  border-bottom: 1px solid rgba(94, 127, 155, .10);
}

.system-layer:last-child {
  border-bottom: 0;
}

.system-layer span {
  color: #1aa4b6;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}

.system-layer strong {
  color: #19242c;

  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 950px) {
  .company-grid {
    grid-template-columns: 1fr;
  }
}


/* TIGHT HERO → COMPANY TRANSITION */

.portfolio-rail {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.company-section {
  position: relative;

  margin: 0;
  padding: 62px 0 76px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(28, 207, 226, .09),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 66%,
      rgba(111, 87, 255, .08),
      transparent 26%
    ),
    #ffffff;
}

.company-future-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 72px;
  align-items: center;
}


/* COPY */

.company-future-copy h2 {
  max-width: 670px;
  margin: 0;

  color: #11191f;

  font-size: clamp(48px, 4.2vw, 72px);
  line-height: .96;
  letter-spacing: -.055em;
}

.company-future-copy h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #16bbc5,
      #318cff 52%,
      #735cff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.company-future-lead {
  max-width: 650px;
  margin: 26px 0 0;

  color: #344651;

  font-size: 19px;
  line-height: 1.6;
}

.company-future-body {
  max-width: 650px;
  margin: 20px 0 0;

  color: #71818d;

  font-size: 15px;
  line-height: 1.75;
}

.company-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  margin-top: 28px;
  padding-top: 18px;

  border-top:
    1px solid rgba(85, 119, 148, .13);
}

.company-signals span {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #536571;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .14em;
}

.company-signals i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.company-signals .cyan {
  background: #19cbd5;
  box-shadow: 0 0 10px #19cbd5;
}

.company-signals .blue {
  background: #3b8cff;
  box-shadow: 0 0 10px #3b8cff;
}

.company-signals .violet {
  background: #785cff;
  box-shadow: 0 0 10px #785cff;
}


/* TECHNOLOGY FIELD */

.company-tech-field {
  position: relative;

  min-height: 520px;

  border:
    1px solid rgba(91, 136, 176, .12);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(31, 212, 229, .10),
      rgba(92, 102, 255, .045) 34%,
      transparent 62%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(246,251,255,.90)
    );

  box-shadow:
    0 28px 70px rgba(49, 83, 122, .08),
    0 0 55px rgba(52, 190, 235, .05);

  overflow: hidden;
}

.company-tech-field::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(39, 198, 222, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(102, 89, 255, .045) 1px,
      transparent 1px
    );

  background-size: 36px 36px;

  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 74%
    );

  -webkit-mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 74%
    );
}


/* CORE */

.company-field-core {
  position: absolute;
  z-index: 3;

  left: 50%;
  top: 50%;

  width: 190px;
  height: 190px;

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(32, 199, 218, .42);

  border-radius: 50%;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 0 0 28px rgba(31, 204, 223, .035),
    0 0 0 58px rgba(108, 87, 255, .025),
    0 0 55px rgba(40, 180, 231, .14);

  animation:
    companyCorePulse 4s ease-in-out infinite;
}

.company-field-core small {
  color: #159dab;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .16em;
}

.company-field-core strong {
  margin-top: 7px;

  color: #172128;

  font-size: 17px;
  letter-spacing: -.02em;
}

.company-field-core span {
  margin-top: 8px;

  color: #7a8994;

  font-size: 6px;
  font-weight: 800;
  letter-spacing: .14em;
}


/* MODULES */

.company-module {
  position: absolute;
  z-index: 4;

  min-width: 205px;
  padding: 13px 15px;

  display: flex;
  align-items: center;
  gap: 11px;

  border:
    1px solid rgba(79, 135, 178, .14);

  border-radius: 15px;

  background:
    rgba(255,255,255,.91);

  backdrop-filter: blur(12px);

  box-shadow:
    0 13px 32px rgba(44, 81, 119, .08);
}

.company-module::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 54px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(31, 211, 228, .65),
      rgba(103, 91, 255, .18)
    );
}

.module-products {
  left: 5%;
  top: 12%;
}

.module-products::after,
.module-runtime::after {
  left: 100%;
}

.module-systems {
  right: 4%;
  top: 17%;
}

.module-systems::after,
.module-scale::after {
  right: 100%;
}

.module-runtime {
  left: 4%;
  bottom: 13%;
}

.module-scale {
  right: 5%;
  bottom: 10%;
}

.module-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #ffffff;

  font-size: 17px;

  background:
    linear-gradient(
      145deg,
      #19cada,
      #665dff
    );

  box-shadow:
    0 0 18px rgba(58, 174, 236, .22);
}

.company-module small {
  display: block;

  color: #159ead;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .15em;
}

.company-module strong {
  display: block;
  margin-top: 2px;

  color: #172128;

  font-size: 12px;
}

.company-module span {
  display: block;
  margin-top: 4px;

  color: #758590;

  font-size: 8px;
}


/* SIGNAL PARTICLES */

.company-field-particle {
  position: absolute;
  z-index: 2;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #37ddea;

  box-shadow:
    0 0 8px #37ddea,
    0 0 18px rgba(55, 221, 234, .6);

  animation:
    companyParticle 2.8s ease-in-out infinite;
}

.particle-a {
  left: 31%;
  top: 28%;
}

.particle-b {
  right: 31%;
  top: 34%;

  animation-delay: .8s;
}

.particle-c {
  left: 34%;
  bottom: 27%;

  animation-delay: 1.4s;
}

.particle-d {
  right: 29%;
  bottom: 23%;

  animation-delay: 2s;
}


@keyframes companyCorePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 28px rgba(31, 204, 223, .035),
      0 0 0 58px rgba(108, 87, 255, .025),
      0 0 45px rgba(40, 180, 231, .12);
  }

  50% {
    box-shadow:
      0 0 0 34px rgba(31, 204, 223, .055),
      0 0 0 68px rgba(108, 87, 255, .04),
      0 0 70px rgba(40, 180, 231, .20);
  }
}

@keyframes companyParticle {
  0%,
  100% {
    opacity: .35;
    transform: scale(.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}


@media (max-width: 950px) {
  .company-section {
    padding: 54px 0 64px;
  }

  .company-future-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}


/* COMPANY FIELD — ORGANIC FUTURE COMPOSITION */

.company-tech-field {
  min-height: 520px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(31, 211, 229, .15),
      transparent 22%
    ),
    radial-gradient(
      circle at 62% 58%,
      rgba(119, 87, 255, .11),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(242,250,255,.90)
    );
}

/* less centered, more dynamic */
.company-field-core {
  left: 54%;
  top: 50%;

  width: 178px;
  height: 178px;

  box-shadow:
    0 0 0 20px rgba(26, 211, 231, .04),
    0 0 0 48px rgba(107, 88, 255, .035),
    0 0 70px rgba(41, 183, 234, .18);
}

/* broken holographic rings */
.company-tech-field::after {
  content: "";
  position: absolute;
  z-index: 1;

  left: 54%;
  top: 50%;

  width: 370px;
  height: 370px;

  transform: translate(-50%, -50%) rotate(18deg);

  border-radius: 50%;

  border-top: 2px solid rgba(20, 213, 233, .55);
  border-right: 1px solid rgba(91, 116, 255, .28);
  border-bottom: 2px solid transparent;
  border-left: 1px solid rgba(127, 82, 255, .32);

  filter:
    drop-shadow(0 0 8px rgba(21, 210, 230, .24));

  animation: companyOrbit 16s linear infinite;
}

.company-tech-field::before {
  opacity: .55;

  background:
    linear-gradient(
      rgba(25, 202, 224, .055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(104, 85, 255, .045) 1px,
      transparent 1px
    );

  background-size: 31px 31px;

  animation: companyGridShift 14s linear infinite;
}

/* break the symmetry */

.module-products {
  left: 7%;
  top: 10%;
  transform: rotate(-1.5deg);
}

.module-systems {
  right: 5%;
  top: 20%;
  transform: rotate(1.2deg);
}

.module-runtime {
  left: 3%;
  bottom: 11%;
  transform: rotate(.8deg);
}

.module-scale {
  right: 8%;
  bottom: 7%;
  transform: rotate(-1.4deg);
}

/* irregular card sizes */
.module-products {
  min-width: 215px;
}

.module-systems {
  min-width: 228px;
}

.module-runtime {
  min-width: 242px;
}

.module-scale {
  min-width: 226px;
}

/* slanted rays */

.company-module::after {
  width: 72px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(29, 217, 232, .72),
      rgba(95, 99, 255, .35),
      transparent
    );

  filter:
    drop-shadow(0 0 5px rgba(29, 217, 232, .32));
}

.module-products::after {
  left: 100%;
  transform: rotate(8deg);
  transform-origin: left center;
}

.module-systems::after {
  right: 100%;
  transform: rotate(-10deg);
  transform-origin: right center;
}

.module-runtime::after {
  left: 100%;
  transform: rotate(-7deg);
  transform-origin: left center;
}

.module-scale::after {
  right: 100%;
  transform: rotate(9deg);
  transform-origin: right center;
}

/* brighter module icons */

.module-icon {
  background:
    linear-gradient(
      145deg,
      #0ed5e3,
      #378cff 48%,
      #745cff
    );

  box-shadow:
    0 0 14px rgba(22, 205, 230, .28),
    0 0 26px rgba(109, 87, 255, .16);

  animation: moduleGlow 3.6s ease-in-out infinite;
}

.company-module:nth-of-type(3) .module-icon {
  animation-delay: .7s;
}

.company-module:nth-of-type(4) .module-icon {
  animation-delay: 1.4s;
}

.company-module:nth-of-type(5) .module-icon {
  animation-delay: 2.1s;
}

/* particles no longer symmetrical */

.particle-a {
  left: 25%;
  top: 30%;
}

.particle-b {
  right: 23%;
  top: 27%;
}

.particle-c {
  left: 31%;
  bottom: 18%;
}

.particle-d {
  right: 27%;
  bottom: 25%;
}

/* extra ambient particles */
.company-tech-field {
  box-shadow:
    0 24px 65px rgba(44, 82, 120, .07),
    inset 0 0 70px rgba(71, 190, 238, .035);
}

@keyframes companyOrbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(18deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(378deg);
  }
}

@keyframes companyGridShift {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 31px 31px, -31px 31px;
  }
}

@keyframes moduleGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 12px rgba(22, 205, 230, .25),
      0 0 22px rgba(109, 87, 255, .14);
  }

  50% {
    transform: scale(1.07);
    box-shadow:
      0 0 20px rgba(22, 205, 230, .40),
      0 0 34px rgba(109, 87, 255, .23);
  }
}


/* COMPANY TITLE — TYPOGRAPHY CORRECTION */

.company-future-copy h2 {
  line-height: 1.02;
  overflow: visible;
}

.company-future-copy h2 span {
  display: block;
  padding-bottom: 0.08em;
  overflow: visible;
}


/* PORTFOLIO SECTION */

.portfolio-section {
  position: relative;
  padding: 58px 0 74px;

  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(23, 204, 220, .07),
      transparent 24%
    ),
    radial-gradient(
      circle at 82% 62%,
      rgba(111, 88, 255, .07),
      transparent 26%
    ),
    #ffffff;
}

.portfolio-heading {
  max-width: 820px;
  margin-bottom: 36px;
}

.portfolio-heading h2 {
  margin: 0;

  color: #11191f;

  font-size: clamp(46px, 4vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
}

.portfolio-heading h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #15bdc7,
      #318cff 52%,
      #745cff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.portfolio-heading p {
  max-width: 680px;
  margin: 22px 0 0;

  color: #6d7d88;

  font-size: 16px;
  line-height: 1.7;
}


/* asymmetric portfolio layout */

.portfolio-showcase {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 22px;
  align-items: start;
}


/* shared family surface */

.portfolio-family {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(83, 127, 166, .14);
  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(245,250,255,.92)
    );

  box-shadow:
    0 22px 60px rgba(45, 80, 118, .07);

  padding: 26px;
}


/* Alleria family slightly elevated */

.alleria-family {
  margin-top: 24px;

  background:
    radial-gradient(
      circle at 78% 30%,
      rgba(32, 212, 230, .11),
      transparent 30%
    ),
    radial-gradient(
      circle at 64% 72%,
      rgba(112, 87, 255, .08),
      transparent 28%
    ),
    rgba(255,255,255,.96);
}


/* BSOS family more dominant */

.bsos-family {
  min-height: 650px;

  background:
    radial-gradient(
      circle at 70% 34%,
      rgba(255, 120, 47, .09),
      transparent 26%
    ),
    radial-gradient(
      circle at 54% 64%,
      rgba(58, 137, 255, .08),
      transparent 30%
    ),
    rgba(255,255,255,.97);
}


/* brand header */

.portfolio-family-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portfolio-family-brand img {
  width: 48px;
  height: 48px;

  object-fit: contain;

  border-radius: 12px;
}

.portfolio-family-brand span {
  display: block;

  color: #169dac;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .15em;
}

.portfolio-family-brand h3 {
  margin: 4px 0 0;

  color: #172128;

  font-size: 24px;
  letter-spacing: -.035em;
}


/* description */

.portfolio-family-lead {
  max-width: 620px;
  margin: 20px 0 0;

  color: #61727e;

  font-size: 14px;
  line-height: 1.65;
}


/* capability chips */

.portfolio-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 20px;
}

.portfolio-capabilities span {
  padding: 7px 10px;

  border-radius: 999px;

  border: 1px solid rgba(50, 168, 205, .16);

  background: rgba(255,255,255,.82);

  color: #40535f;

  font-size: 8px;
  font-weight: 750;
}


/* visual area */

.portfolio-family-visual {
  position: relative;

  min-height: 300px;
  margin-top: 24px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(245,252,255,.82),
      rgba(250,247,255,.76)
    );

  overflow: hidden;
}


/* ALLERIA IDENTITY VISUAL */

.alleria-family-visual {
  min-height: 320px;
}

.identity-orbit {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.orbit-one {
  width: 250px;
  height: 250px;

  border: 1px solid rgba(22, 205, 222, .34);

  box-shadow:
    0 0 35px rgba(22, 205, 222, .08);

  animation: portfolioOrbitA 16s linear infinite;
}

.orbit-two {
  width: 190px;
  height: 190px;

  border: 1px dashed rgba(113, 88, 255, .40);

  animation: portfolioOrbitB 12s linear infinite;
}

.identity-core {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 142px;
  height: 142px;

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,.95);

  box-shadow:
    0 0 40px rgba(37, 181, 230, .13),
    0 0 70px rgba(110, 84, 255, .08);

  text-align: center;
}

.identity-core img {
  width: 44px;
  height: 44px;

  object-fit: contain;
}

.identity-core strong {
  margin-top: 8px;

  color: #1b2830;

  font-size: 11px;
}

.identity-core small {
  margin-top: 5px;

  color: #788894;

  font-size: 6px;
  letter-spacing: .11em;
}

.identity-signal {
  position: absolute;

  padding: 7px 10px;

  border-radius: 999px;

  border: 1px solid rgba(80, 147, 205, .15);

  background: rgba(255,255,255,.9);

  color: #42545f;

  font-size: 8px;
  font-weight: 750;

  box-shadow:
    0 8px 20px rgba(45, 82, 119, .06);
}

.signal-memory {
  left: 8%;
  top: 22%;
}

.signal-context {
  right: 7%;
  top: 35%;
}

.signal-continuity {
  left: 18%;
  bottom: 12%;
}


/* BSOS ECOSYSTEM VISUAL */

.ecosystem-visual {
  min-height: 380px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(57, 137, 255, .08),
      rgba(255, 123, 48, .05) 32%,
      transparent 64%
    );
}

.ecosystem-core {
  position: absolute;

  left: 48%;
  top: 49%;

  width: 132px;
  height: 132px;

  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,.96);

  box-shadow:
    0 0 0 24px rgba(57, 137, 255, .03),
    0 0 0 48px rgba(255, 121, 45, .025),
    0 0 48px rgba(73, 133, 225, .12);
}

.ecosystem-core img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}

.ecosystem-core strong {
  margin-top: 6px;

  color: #172128;

  font-size: 13px;
}

.ecosystem-core small {
  margin-top: 4px;

  color: #73828d;

  font-size: 6px;
  letter-spacing: .13em;
}


/* ecosystem nodes intentionally irregular */

.ecosystem-node {
  position: absolute;

  min-width: 180px;
  padding: 11px 13px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(88, 127, 166, .14);
  border-radius: 14px;

  background: rgba(255,255,255,.92);

  box-shadow:
    0 10px 26px rgba(46, 82, 119, .07);
}

.ecosystem-node img,
.ecosystem-symbol {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  object-fit: contain;

  border-radius: 9px;
}

.ecosystem-symbol {
  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #30c6e3,
      #6b5cff
    );

  font-size: 13px;
  font-weight: 800;
}

.ecosystem-node strong {
  display: block;

  color: #1a2730;

  font-size: 10px;
}

.ecosystem-node small {
  display: block;
  margin-top: 3px;

  color: #768691;

  font-size: 7px;
}

.ecosystem-pe {
  left: 4%;
  top: 14%;
  transform: rotate(-1deg);
}

.ecosystem-portal {
  right: 4%;
  top: 20%;
  transform: rotate(1deg);
}

.ecosystem-runtime {
  left: 7%;
  bottom: 13%;
  transform: rotate(.8deg);
}

.ecosystem-partners {
  right: 6%;
  bottom: 8%;
  transform: rotate(-1.1deg);
}


/* family link */

.portfolio-family-link {
  width: fit-content;

  margin-top: 22px;

  display: inline-flex;
  align-items: center;
  gap: 14px;

  color: #159fad;

  font-size: 11px;
  font-weight: 800;
}

.portfolio-family-link span {
  font-size: 16px;
}

.portfolio-family-link-orange {
  color: #ef6c24;
}


/* animations */

@keyframes portfolioOrbitA {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes portfolioOrbitB {
  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }
}


@media (max-width: 980px) {
  .portfolio-section {
    padding: 48px 0 64px;
  }

  .portfolio-showcase {
    grid-template-columns: 1fr;
  }

  .alleria-family {
    margin-top: 0;
  }
}


/* PORTFOLIO CTA BUTTONS */

.portfolio-family-link {
  margin-top: 22px;
  padding: 12px 18px;

  display: inline-flex;
  align-items: center;
  gap: 18px;

  border-radius: 12px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;

  text-decoration: none;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.alleria-family .portfolio-family-link {
  background:
    linear-gradient(
      90deg,
      #ef2f8f,
      #db25ba
    );

  box-shadow:
    0 12px 28px rgba(224, 42, 155, .20);
}

.bsos-family .portfolio-family-link {
  background:
    linear-gradient(
      90deg,
      #ff7b24,
      #ff5417
    );

  box-shadow:
    0 12px 28px rgba(255, 100, 25, .20);
}

.portfolio-family-link:hover {
  transform: translateY(-2px);
}

.alleria-family .portfolio-family-link:hover {
  box-shadow:
    0 16px 34px rgba(224, 42, 155, .28);
}

.bsos-family .portfolio-family-link:hover {
  box-shadow:
    0 16px 34px rgba(255, 100, 25, .28);
}

.portfolio-family-link span {
  font-size: 16px;
  line-height: 1;
}


/* PORTFOLIO FAMILY COLOR IDENTITIES */

.alleria-family {
  background:
    radial-gradient(
      circle at 72% 36%,
      rgba(245, 67, 178, .16),
      transparent 30%
    ),
    radial-gradient(
      circle at 48% 76%,
      rgba(202, 115, 220, .10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fff7fb
    );
}

.alleria-family-visual {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(242, 67, 176, .14),
      rgba(236, 216, 230, .13) 35%,
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #fffafd,
      #f6f3f6
    );
}

.alleria-family .portfolio-family-brand span {
  color: #d42a91;
}

.alleria-family .portfolio-capabilities span {
  border-color: rgba(224, 45, 151, .18);
  color: #8b3c68;
  background: rgba(255,255,255,.88);
}

.bsos-family {
  background:
    radial-gradient(
      circle at 65% 42%,
      rgba(255, 115, 28, .12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fafafa
    );
}

.bsos-family .portfolio-family-brand span {
  color: #ee681e;
}

.bsos-family .portfolio-capabilities span {
  border-color: rgba(255, 108, 28, .18);
  color: #2b2b2b;
  background: #ffffff;
}

.ecosystem-visual {
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(255, 113, 30, .13),
      rgba(18,18,18,.025) 32%,
      transparent 68%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f6f6f6
    );
}

.ecosystem-core {
  background: #111111;

  box-shadow:
    0 0 0 22px rgba(255, 110, 28, .035),
    0 0 0 46px rgba(0,0,0,.022),
    0 0 42px rgba(255, 109, 25, .15);
}

.ecosystem-core strong {
  color: #ffffff;
}

.ecosystem-core small {
  color: #d6d6d6;
}


/* =========================================================
   PORTFOLIO — FINAL VISUAL DIRECTION
   Alleria = pink / grey / white
   PE + BSOS = orange / black / white
   ========================================================= */


/* tighter transition from Company */

.company-section {
  padding-bottom: 34px !important;
}

.portfolio-section {
  padding-top: 30px !important;
  padding-bottom: 64px !important;

  background:
    radial-gradient(
      circle at 9% 18%,
      rgba(30, 205, 223, .055),
      transparent 18%
    ),
    radial-gradient(
      circle at 92% 16%,
      rgba(235, 54, 170, .055),
      transparent 20%
    ),
    #ffffff;
}


/* heading + description on one horizontal line */

.portfolio-heading {
  max-width: none !important;

  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 50px;
  align-items: end;

  margin-bottom: 30px !important;
}

.portfolio-heading .section-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -18px;
}

.portfolio-heading h2 {
  margin: 0 !important;

  font-size: clamp(42px, 3.7vw, 64px) !important;
  line-height: 1 !important;

  white-space: nowrap;
}

.portfolio-heading h2 span {
  display: inline !important;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #ef2e91,
      #d625bf 52%,
      #7b56ff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.portfolio-heading p {
  position: relative;

  max-width: 520px !important;
  margin: 0 0 4px !important;
  padding-left: 28px;

  border-left: 1px solid rgba(95, 110, 150, .28);

  color: #617480 !important;

  font-size: 15px !important;
  line-height: 1.65 !important;
}


/* portfolio family geometry */

.portfolio-showcase {
  grid-template-columns: 1fr 1.08fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.portfolio-family {
  min-height: 620px;

  padding: 28px !important;

  border-radius: 24px !important;

  box-shadow:
    0 24px 70px rgba(40, 67, 103, .07),
    inset 0 0 40px rgba(255,255,255,.54);
}


/* =========================================================
   ALLERIA AI
   ========================================================= */

.alleria-family {
  margin-top: 0 !important;

  border-color: rgba(221, 68, 159, .16) !important;

  background:
    radial-gradient(
      circle at 74% 34%,
      rgba(255, 62, 180, .18),
      transparent 28%
    ),
    radial-gradient(
      circle at 35% 72%,
      rgba(232, 172, 220, .17),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff8fc 54%,
      #f6f3f6 100%
    ) !important;
}

.alleria-family::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 70% 54%,
      rgba(244, 45, 173, .075) 0 2px,
      transparent 3px
    );

  background-size: 34px 34px;

  mask-image:
    radial-gradient(circle at 65% 55%, black, transparent 62%);

  -webkit-mask-image:
    radial-gradient(circle at 65% 55%, black, transparent 62%);
}

.alleria-family .portfolio-family-brand {
  position: relative;
  z-index: 3;
}

.alleria-family .portfolio-family-brand img {
  width: 58px;
  height: 58px;

  padding: 4px;

  border: 1px solid rgba(224, 43, 155, .18);
  border-radius: 16px;

  background: rgba(255,255,255,.82);

  box-shadow:
    0 10px 25px rgba(220, 50, 155, .10);
}

.alleria-family .portfolio-family-brand span {
  color: #db278f !important;
}

.alleria-family .portfolio-family-brand h3 {
  font-size: 27px;
}

.alleria-family .portfolio-family-lead {
  position: relative;
  z-index: 3;

  max-width: 540px;

  color: #5d7180;

  font-size: 14px;
  line-height: 1.65;
}


/* richer Alleria visual */

.alleria-family-visual {
  position: relative;

  min-height: 350px !important;
  margin-top: 22px !important;

  border: 0;

  background:
    radial-gradient(
      circle at 52% 53%,
      rgba(255,255,255,.97) 0 19%,
      rgba(241, 190, 226, .38) 20% 30%,
      rgba(230, 125, 206, .18) 31% 42%,
      transparent 43%
    ),
    radial-gradient(
      circle at 59% 56%,
      rgba(240, 46, 173, .20),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.86),
      rgba(249,236,246,.72)
    ) !important;
}

.alleria-family-visual::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 340px;
  height: 340px;

  transform: translate(-50%, -50%) rotate(18deg);

  border-radius: 44% 56% 51% 49% / 47% 42% 58% 53%;

  border:
    2px solid rgba(237, 45, 169, .30);

  box-shadow:
    0 0 34px rgba(236, 45, 168, .10),
    inset 0 0 42px rgba(255,255,255,.6);

  animation:
    identityMorph 8s ease-in-out infinite alternate;
}

.alleria-family-visual::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  left: 25%;
  top: 29%;

  border-radius: 50%;

  background: #f233a3;

  box-shadow:
    120px 35px 0 #e62db0,
    220px 82px 0 #f65ab6,
    68px 180px 0 #d945b1,
    260px 205px 0 #ec309d,
    0 0 15px #ef319f;

  animation:
    identityParticle 3.2s ease-in-out infinite;
}

.alleria-family .orbit-one {
  border-color: rgba(239, 44, 159, .43) !important;

  box-shadow:
    0 0 34px rgba(239, 44, 159, .12) !important;
}

.alleria-family .orbit-two {
  border-color: rgba(198, 73, 207, .42) !important;
}

.alleria-family .identity-core {
  z-index: 4;

  width: 150px;
  height: 150px;

  box-shadow:
    0 0 0 17px rgba(239, 57, 167, .035),
    0 0 40px rgba(225, 45, 158, .17);
}

.alleria-family .identity-core img {
  width: 58px;
  height: 58px;
}


/* individual Alleria capability badges */

.alleria-family .identity-signal {
  z-index: 6;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;

  border: 1px solid rgba(224, 43, 151, .17);

  background: rgba(255,255,255,.92);

  color: #4f3346;

  font-size: 9px;

  box-shadow:
    0 10px 25px rgba(216, 50, 149, .10);
}

.alleria-family .identity-signal b {
  color: #e82b98;

  font-size: 17px;
  font-weight: 700;
}

.signal-identity {
  left: 8%;
  top: 48%;
}

.signal-memory {
  left: 42% !important;
  top: 7% !important;
}

.signal-context {
  right: 4% !important;
  top: 39% !important;
}

.signal-continuity {
  left: 49% !important;
  bottom: 5% !important;
}


/* Alleria CTA */

.alleria-family .portfolio-family-link {
  position: relative;
  z-index: 8;

  padding: 13px 20px !important;

  border-radius: 11px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      90deg,
      #ef2d8f,
      #df25b2
    ) !important;

  box-shadow:
    0 13px 30px rgba(226, 43, 153, .22) !important;
}


/* =========================================================
   PRIORITYENGINE + BSOS
   ========================================================= */

.bsos-family {
  border-color: rgba(255, 103, 22, .17) !important;

  background:
    radial-gradient(
      circle at 58% 57%,
      rgba(255, 113, 25, .14),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fffaf7 58%,
      #f6f6f6
    ) !important;
}

.bsos-family::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      125deg,
      transparent 0 58%,
      rgba(255, 107, 25, .045) 59% 60%,
      transparent 61%
    );

  pointer-events: none;
}

.bsos-family .portfolio-family-brand img {
  width: 60px;
  height: 60px;

  padding: 3px;

  border-radius: 15px;

  background: #080808;

  box-shadow:
    0 10px 25px rgba(0,0,0,.14);
}

.bsos-family .portfolio-family-brand span {
  color: #f06418 !important;
}

.bsos-family .portfolio-family-brand h3 {
  color: #161616;

  font-size: 27px;
}


/* orange top technology badges */

.bsos-family .portfolio-capabilities {
  position: relative;
  z-index: 5;

  gap: 9px;
}

.bsos-family .portfolio-capabilities span {
  padding: 8px 12px;

  border: 1px solid rgba(255, 104, 22, .24) !important;

  background: rgba(255,255,255,.92) !important;

  color: #292929 !important;

  font-size: 8px;

  box-shadow:
    0 7px 18px rgba(255, 112, 28, .06);
}


/* ecosystem visual */

.bsos-family .ecosystem-visual {
  min-height: 350px !important;
  margin-top: 20px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 51% 53%,
      rgba(255, 119, 24, .20) 0 12%,
      rgba(255, 149, 69, .09) 13% 28%,
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f6f6f6
    ) !important;
}

.bsos-family .ecosystem-visual::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 53%;

  width: 350px;
  height: 350px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border:
    1px solid rgba(255, 111, 20, .40);

  box-shadow:
    0 0 0 28px rgba(255, 115, 28, .025),
    0 0 0 58px rgba(0,0,0,.018),
    0 0 45px rgba(255, 110, 20, .13);

  animation:
    bsosOrbitPulse 5s ease-in-out infinite;
}

.bsos-family .ecosystem-visual::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 53%;

  width: 285px;
  height: 285px;

  transform: translate(-50%, -50%) rotate(20deg);

  border-radius: 50%;

  border-top:
    2px solid rgba(255, 112, 20, .65);

  border-right:
    1px solid transparent;

  border-bottom:
    2px solid rgba(20,20,20,.22);

  border-left:
    1px solid transparent;

  animation:
    bsosOrbitRotate 12s linear infinite;
}

.bsos-family .ecosystem-core {
  z-index: 5;

  width: 145px;
  height: 145px;

  background: #0d0d0d !important;

  border:
    1px solid rgba(255, 120, 31, .40);

  box-shadow:
    0 0 0 18px rgba(255, 111, 24, .055),
    0 0 46px rgba(255, 105, 22, .24) !important;
}

.bsos-family .ecosystem-core img {
  width: 55px;
  height: 55px;
}

.bsos-family .ecosystem-node {
  z-index: 7;

  border-color:
    rgba(33,33,33,.11);

  background:
    rgba(255,255,255,.95);

  box-shadow:
    0 10px 28px rgba(30,30,30,.09);
}

.bsos-family .ecosystem-symbol {
  background: #101010;

  box-shadow:
    inset 0 0 0 1px rgba(255,115,25,.22);
}

.bsos-family .ecosystem-pe {
  left: 3%;
  top: 11%;
}

.bsos-family .ecosystem-portal {
  right: 2%;
  top: 16%;
}

.bsos-family .ecosystem-runtime {
  left: 7%;
  bottom: 9%;
}

.bsos-family .ecosystem-partners {
  right: 4%;
  bottom: 7%;
}


/* PriorityEngine CTA */

.bsos-family .portfolio-family-link {
  position: relative;
  z-index: 8;

  padding: 13px 20px !important;

  border-radius: 11px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      90deg,
      #ff7b24,
      #ff5417
    ) !important;

  box-shadow:
    0 13px 30px rgba(255, 101, 22, .23) !important;
}


/* portfolio visual animations */

@keyframes identityMorph {
  0% {
    border-radius: 44% 56% 51% 49% / 47% 42% 58% 53%;
    transform:
      translate(-50%, -50%)
      rotate(8deg)
      scale(.96);
  }

  100% {
    border-radius: 58% 42% 46% 54% / 54% 59% 41% 46%;
    transform:
      translate(-50%, -50%)
      rotate(30deg)
      scale(1.04);
  }
}

@keyframes identityParticle {
  0%,
  100% {
    opacity: .45;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes bsosOrbitPulse {
  0%,
  100% {
    opacity: .72;
    transform:
      translate(-50%, -50%)
      scale(.98);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.025);
  }
}

@keyframes bsosOrbitRotate {
  from {
    transform:
      translate(-50%, -50%)
      rotate(20deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(380deg);
  }
}


/* responsive heading */

@media (max-width: 1100px) {
  .portfolio-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portfolio-heading h2 {
    white-space: normal;
  }

  .portfolio-heading p {
    padding-left: 0;
    border-left: 0;
  }
}


/* =========================================================
   TECHNOLOGY LANDSCAPE
   ========================================================= */

.portfolio-section {
  padding-bottom: 34px !important;
}

.technology-section {
  position: relative;
  padding: 30px 0 70px;

  background:
    radial-gradient(
      circle at 18% 24%,
      rgba(17, 202, 218, .07),
      transparent 20%
    ),
    radial-gradient(
      circle at 82% 64%,
      rgba(117, 88, 255, .08),
      transparent 26%
    ),
    radial-gradient(
      circle at 62% 24%,
      rgba(255, 118, 36, .045),
      transparent 18%
    ),
    #ffffff;

  overflow: hidden;
}

.technology-heading {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 56px;
  align-items: end;

  margin-bottom: 28px;
}

.technology-heading h2 {
  margin: 0;

  color: #11191f;

  font-size: clamp(44px, 3.8vw, 66px);
  line-height: .98;
  letter-spacing: -.055em;
}

.technology-heading h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #14bcc8,
      #338cff 52%,
      #775cff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.technology-heading p {
  margin: 0 0 5px;

  padding-left: 26px;

  border-left:
    1px solid rgba(91, 116, 147, .22);

  color: #687985;

  font-size: 15px;
  line-height: 1.7;
}


/* main field */

.technology-landscape {
  position: relative;

  min-height: 590px;

  overflow: hidden;

  border:
    1px solid rgba(89, 130, 168, .12);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 53% 48%,
      rgba(24, 208, 228, .13),
      transparent 19%
    ),
    radial-gradient(
      circle at 60% 53%,
      rgba(111, 86, 255, .10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(244,250,255,.91)
    );

  box-shadow:
    0 28px 72px rgba(45, 79, 117, .07),
    inset 0 0 70px rgba(50, 182, 234, .025);
}


/* moving digital field */

.technology-landscape::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(30, 197, 221, .052) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(107, 85, 255, .043) 1px,
      transparent 1px
    );

  background-size: 34px 34px;

  mask-image:
    radial-gradient(
      ellipse at 54% 50%,
      black 0 24%,
      rgba(0,0,0,.75) 46%,
      transparent 82%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at 54% 50%,
      black 0 24%,
      rgba(0,0,0,.75) 46%,
      transparent 82%
    );

  animation:
    techGridMove 16s linear infinite;
}


/* broken orbit */

.technology-landscape::after {
  content: "";

  position: absolute;
  z-index: 1;

  left: 54%;
  top: 49%;

  width: 440px;
  height: 440px;

  transform:
    translate(-50%, -50%)
    rotate(16deg);

  border-radius: 50%;

  border-top:
    2px solid rgba(18, 211, 232, .56);

  border-right:
    1px solid rgba(64, 130, 255, .28);

  border-bottom:
    2px solid transparent;

  border-left:
    1px solid rgba(119, 83, 255, .34);

  filter:
    drop-shadow(
      0 0 8px rgba(32, 203, 230, .22)
    );

  animation:
    techOrbit 18s linear infinite;
}


/* core */

.technology-core {
  position: absolute;
  z-index: 4;

  left: 54%;
  top: 49%;

  width: 190px;
  height: 190px;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(29, 203, 221, .38);

  border-radius: 50%;

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 0 0 22px rgba(26, 208, 228, .035),
    0 0 0 52px rgba(111, 87, 255, .028),
    0 0 60px rgba(41, 180, 232, .15);

  text-align: center;

  animation:
    techCorePulse 4s ease-in-out infinite;
}

.technology-core span {
  color: #169cae;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .15em;
}

.technology-core strong {
  margin-top: 8px;

  color: #172128;

  font-size: 17px;
  line-height: 1.04;
}

.technology-core small {
  margin-top: 8px;

  color: #778792;

  font-size: 6px;
  font-weight: 800;
  letter-spacing: .14em;
}


/* shared nodes */

.technology-node {
  position: absolute;
  z-index: 6;

  min-width: 205px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  gap: 11px;

  border:
    1px solid rgba(80, 132, 172, .14);

  border-radius: 15px;

  background:
    rgba(255,255,255,.92);

  backdrop-filter: blur(13px);

  box-shadow:
    0 12px 30px rgba(43, 79, 116, .075);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.technology-node:hover {
  transform:
    translateY(-3px)
    scale(1.015);

  box-shadow:
    0 17px 38px rgba(43, 79, 116, .12);
}

.technology-node::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 64px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(25, 212, 230, .72),
      rgba(105, 94, 255, .34),
      transparent
    );

  filter:
    drop-shadow(
      0 0 4px rgba(30, 207, 230, .30)
    );
}

.technology-node-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #ffffff;

  font-size: 16px;

  background:
    linear-gradient(
      145deg,
      #12cbd8,
      #3a8cff 48%,
      #725cff
    );

  box-shadow:
    0 0 18px rgba(45, 179, 232, .22);
}

.technology-node span {
  display: block;

  color: #159dac;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .15em;
}

.technology-node strong {
  display: block;
  margin-top: 2px;

  color: #18242c;

  font-size: 12px;
}

.technology-node small {
  display: block;
  margin-top: 4px;

  color: #768691;

  font-size: 8px;
}


/* intentionally irregular placement */

.tech-identity {
  left: 5%;
  top: 10%;

  transform: rotate(-1.2deg);
}

.tech-identity::after,
.tech-business::after,
.tech-runtime::after,
.tech-capacity::after {
  left: 100%;
}

.tech-business {
  left: 2%;
  top: 39%;

  transform: rotate(.7deg);
}

.tech-runtime {
  left: 7%;
  bottom: 11%;

  transform: rotate(-.8deg);
}

.tech-semantic {
  right: 7%;
  top: 8%;

  transform: rotate(1deg);
}

.tech-semantic::after,
.tech-api::after,
.tech-licensing::after,
.tech-explainability::after {
  right: 100%;

  transform: rotate(180deg);
}

.tech-api {
  right: 2%;
  top: 31%;

  transform: rotate(-.8deg);
}

.tech-licensing {
  right: 6%;
  bottom: 13%;

  transform: rotate(1.1deg);
}

.tech-capacity {
  left: 29%;
  bottom: 3%;

  transform: rotate(.6deg);
}

.tech-explainability {
  right: 30%;
  bottom: 2%;

  transform: rotate(-.5deg);
}


/* subtle family accents */

.tech-identity .technology-node-icon {
  background:
    linear-gradient(
      145deg,
      #ef3a9d,
      #b84ee6
    );
}

.tech-business .technology-node-icon,
.tech-semantic .technology-node-icon {
  background:
    linear-gradient(
      145deg,
      #13cbd8,
      #398cff
    );
}

.tech-runtime .technology-node-icon {
  background:
    linear-gradient(
      145deg,
      #715cff,
      #9459e8
    );
}

.tech-api .technology-node-icon,
.tech-capacity .technology-node-icon,
.tech-licensing .technology-node-icon {
  background:
    linear-gradient(
      145deg,
      #ff842e,
      #ff5b18
    );
}

.tech-explainability .technology-node-icon {
  background:
    linear-gradient(
      145deg,
      #29b7da,
      #725cff
    );
}


/* particles */

.technology-particle {
  position: absolute;
  z-index: 3;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #35dfed;

  box-shadow:
    0 0 7px #35dfed,
    0 0 17px rgba(53,223,237,.60);

  animation:
    techParticle 2.8s ease-in-out infinite;
}

.tp-a {
  left: 31%;
  top: 25%;
}

.tp-b {
  right: 31%;
  top: 28%;

  animation-delay: .6s;
}

.tp-c {
  left: 29%;
  bottom: 23%;

  animation-delay: 1.2s;
}

.tp-d {
  right: 26%;
  bottom: 27%;

  animation-delay: 1.8s;
}

.tp-e {
  left: 58%;
  top: 13%;

  animation-delay: 2.2s;
}


/* animations */

@keyframes techGridMove {
  from {
    background-position:
      0 0,
      0 0;
  }

  to {
    background-position:
      34px 34px,
      -34px 34px;
  }
}

@keyframes techOrbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(16deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(376deg);
  }
}

@keyframes techCorePulse {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.98);
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.025);
  }
}

@keyframes techParticle {
  0%,
  100% {
    opacity: .30;
    transform: scale(.72);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}


/* responsive */

@media (max-width: 1050px) {
  .technology-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .technology-heading p {
    padding-left: 0;
    border-left: 0;
  }

  .technology-landscape {
    min-height: 760px;
  }
}


/* =========================================================
   PARTNERSHIPS
   ========================================================= */

.technology-section {
  padding-bottom: 34px !important;
}

.partnerships-section {
  position: relative;

  padding: 30px 0 68px;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(27, 201, 220, .06),
      transparent 22%
    ),
    radial-gradient(
      circle at 82% 55%,
      rgba(113, 88, 255, .08),
      transparent 26%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(255, 119, 35, .045),
      transparent 18%
    ),
    #ffffff;

  overflow: hidden;
}

.partnerships-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 66px;
  align-items: center;
}


/* COPY */

.partnerships-copy h2 {
  margin: 0;

  color: #11191f;

  font-size: clamp(46px, 4vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
}

.partnerships-copy h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #18bdc8,
      #398cff 48%,
      #755cff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.partnerships-lead {
  max-width: 650px;

  margin: 26px 0 0;

  color: #364955;

  font-size: 18px;
  line-height: 1.6;
}

.partnerships-body {
  max-width: 650px;

  margin: 18px 0 0;

  color: #71818d;

  font-size: 15px;
  line-height: 1.72;
}


/* partnership types */

.partnership-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 24px;
}

.partnership-types > div {
  min-width: 170px;

  padding: 12px 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border:
    1px solid rgba(83, 130, 169, .13);

  border-radius: 14px;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 9px 24px rgba(45, 80, 115, .055);
}

.partnership-types > div > span {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #ffffff;

  font-size: 16px;

  background:
    linear-gradient(
      145deg,
      #19cbd7,
      #4a8cff 48%,
      #735cff
    );
}

.partnership-types strong {
  display: block;

  color: #1a2730;

  font-size: 10px;
}

.partnership-types small {
  display: block;

  margin-top: 3px;

  color: #788893;

  font-size: 7px;
}


/* CTA */

.partnership-cta {
  width: fit-content;

  margin-top: 24px;
  padding: 13px 18px;

  display: inline-flex;
  align-items: center;
  gap: 16px;

  border-radius: 11px;

  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      #ff7a24,
      #ff5417
    );

  box-shadow:
    0 13px 30px rgba(255, 101, 22, .19);

  font-size: 11px;
  font-weight: 800;

  text-decoration: none;
}

.partnership-cta span {
  font-size: 16px;
}

.partnership-note {
  display: block;

  margin-top: 9px;

  color: #84929b;

  font-size: 7px;
  letter-spacing: .07em;
}


/* =========================================================
   NETWORK VISUAL
   ========================================================= */

.partnership-network {
  position: relative;

  min-height: 510px;

  overflow: hidden;

  border:
    1px solid rgba(90, 130, 169, .12);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(24, 206, 226, .14),
      transparent 18%
    ),
    radial-gradient(
      circle at 62% 58%,
      rgba(116, 88, 255, .10),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(244,250,255,.90)
    );

  box-shadow:
    0 25px 65px rgba(45, 80, 117, .07);
}

.partnership-network::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(30, 199, 221, .05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(113, 88, 255, .04) 1px,
      transparent 1px
    );

  background-size: 34px 34px;

  mask-image:
    radial-gradient(
      ellipse at 54% 50%,
      black,
      transparent 78%
    );

  -webkit-mask-image:
    radial-gradient(
      ellipse at 54% 50%,
      black,
      transparent 78%
    );
}

.partnership-network::after {
  content: "";

  position: absolute;
  z-index: 1;

  left: 54%;
  top: 50%;

  width: 380px;
  height: 380px;

  transform:
    translate(-50%, -50%)
    rotate(14deg);

  border-radius: 50%;

  border-top:
    2px solid rgba(23, 211, 231, .58);

  border-right:
    1px solid rgba(75, 131, 255, .28);

  border-bottom:
    2px solid transparent;

  border-left:
    1px solid rgba(119, 84, 255, .32);

  animation:
    partnershipOrbit 17s linear infinite;
}


/* core */

.network-core {
  position: absolute;
  z-index: 4;

  left: 54%;
  top: 49%;

  width: 170px;
  height: 170px;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    1px solid rgba(29, 203, 222, .38);

  background:
    rgba(255,255,255,.93);

  box-shadow:
    0 0 0 20px rgba(25, 206, 228, .038),
    0 0 0 46px rgba(112, 88, 255, .028),
    0 0 58px rgba(43, 182, 232, .14);

  text-align: center;

  animation:
    partnershipCorePulse 4s ease-in-out infinite;
}

.network-core strong {
  color: #18242c;

  font-size: 15px;
}

.network-core span {
  margin-top: 7px;

  color: #159eae;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .15em;
}


/* nodes */

.network-node {
  position: absolute;
  z-index: 6;

  min-width: 180px;
  padding: 12px 14px;

  display: flex;
  align-items: center;
  gap: 10px;

  border:
    1px solid rgba(83, 130, 169, .14);

  border-radius: 15px;

  background:
    rgba(255,255,255,.92);

  backdrop-filter: blur(12px);

  box-shadow:
    0 11px 28px rgba(43, 79, 116, .07);
}

.network-node::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 68px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(24, 211, 230, .72),
      rgba(112, 90, 255, .32),
      transparent
    );
}

.network-node i {
  width: 37px;
  height: 37px;

  flex: 0 0 37px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #ffffff;

  font-style: normal;
  font-size: 17px;

  background:
    linear-gradient(
      145deg,
      #18cbd8,
      #448cff 50%,
      #735cff
    );

  box-shadow:
    0 0 17px rgba(42, 178, 232, .20);
}

.network-node strong {
  display: block;

  color: #1a2730;

  font-size: 11px;
}

.network-node span {
  display: block;

  margin-top: 3px;

  color: #78909c;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .14em;
}


/* intentionally irregular */

.network-technology {
  left: 6%;
  top: 12%;

  transform: rotate(-1.3deg);
}

.network-technology::after {
  left: 100%;
}

.network-integration {
  right: 5%;
  top: 23%;

  transform: rotate(1deg);
}

.network-integration::after {
  right: 100%;
  transform: rotate(180deg);
}

.network-distribution {
  left: 8%;
  bottom: 13%;

  transform: rotate(.8deg);
}

.network-distribution::after {
  left: 100%;
}

.network-distribution i {
  background:
    linear-gradient(
      145deg,
      #ff862f,
      #ff5b18
    );
}

.network-global {
  right: 8%;
  bottom: 9%;

  transform: rotate(-1.1deg);
}

.network-global::after {
  right: 100%;
  transform: rotate(180deg);
}


/* pulses */

.network-pulse {
  position: absolute;
  z-index: 3;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #36dfed;

  box-shadow:
    0 0 7px #36dfed,
    0 0 18px rgba(54,223,237,.60);

  animation:
    partnershipPulse 2.7s ease-in-out infinite;
}

.np-one {
  left: 31%;
  top: 31%;
}

.np-two {
  right: 29%;
  top: 36%;

  animation-delay: .8s;
}

.np-three {
  right: 32%;
  bottom: 25%;

  animation-delay: 1.5s;
}


/* animations */

@keyframes partnershipOrbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(14deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(374deg);
  }
}

@keyframes partnershipCorePulse {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.98);
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.025);
  }
}

@keyframes partnershipPulse {
  0%,
  100% {
    opacity: .3;
    transform: scale(.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}


/* responsive */

@media (max-width: 980px) {
  .partnerships-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .partnership-network {
    min-height: 620px;
  }
}


/* PARTNERSHIPS — TECHNOLOGY COMBINATIONS */

.network-technology i {
  background:
    linear-gradient(
      145deg,
      #ef3b9e,
      #a657e7
    );
}

.network-integration i {
  background:
    linear-gradient(
      145deg,
      #17cbd8,
      #3b8cff
    );
}

.network-distribution i {
  background:
    linear-gradient(
      145deg,
      #765cff,
      #9757e8
    );
}

.network-global i {
  background:
    linear-gradient(
      145deg,
      #ff842d,
      #ff5818
    );
}

.network-expansion-message {
  position: absolute;
  z-index: 7;

  left: 50%;
  bottom: 5%;

  transform: translateX(-50%);

  min-width: 280px;

  padding: 11px 18px;

  border:
    1px solid rgba(93, 113, 170, .14);

  border-radius: 999px;

  background:
    rgba(255,255,255,.91);

  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 28px rgba(47, 79, 116, .07);

  text-align: center;
}

.network-expansion-message small {
  display: block;

  color: #8b5cff;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .15em;
}

.network-expansion-message strong {
  display: block;

  margin-top: 4px;

  color: #172128;

  font-size: 10px;
}


/* =========================================================
   PARTNERSHIPS — MULTI-TECHNOLOGY ENERGY FIELD
   ========================================================= */

.partnership-network {
  background:
    radial-gradient(
      circle at 25% 27%,
      rgba(239, 48, 157, .16),
      transparent 25%
    ),
    radial-gradient(
      circle at 76% 27%,
      rgba(22, 203, 222, .18),
      transparent 25%
    ),
    radial-gradient(
      circle at 29% 77%,
      rgba(118, 88, 255, .16),
      transparent 25%
    ),
    radial-gradient(
      circle at 78% 76%,
      rgba(255, 111, 27, .17),
      transparent 26%
    ),
    radial-gradient(
      circle at 54% 50%,
      rgba(79, 151, 255, .13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #fffafd,
      #f7fbff 48%,
      #fff9f5
    ) !important;

  box-shadow:
    0 25px 65px rgba(45,80,117,.07),
    inset 0 0 90px rgba(103,91,255,.035);
}


/* stronger central intelligence field */

.network-core {
  border:
    1px solid rgba(57, 172, 235, .45) !important;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255,255,255,1),
      rgba(249,252,255,.94)
    ) !important;

  box-shadow:
    0 0 0 20px rgba(21, 205, 224, .055),
    0 0 0 46px rgba(114, 87, 255, .045),
    0 0 70px rgba(55, 159, 237, .22) !important;
}


/* multicolor orbit */

.partnership-network::after {
  border: 0 !important;

  background:
    conic-gradient(
      from 15deg,
      transparent 0deg 20deg,

      #ef319c 35deg 78deg,

      transparent 92deg 112deg,

      #1acdde 125deg 170deg,

      transparent 184deg 205deg,

      #765cff 220deg 268deg,

      transparent 282deg 302deg,

      #ff7020 318deg 350deg,

      transparent 360deg
    );

  padding: 2px;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  mask-composite: exclude;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;

  filter:
    drop-shadow(0 0 8px rgba(34,202,231,.28))
    drop-shadow(0 0 13px rgba(232,48,157,.12));

  animation:
    partnershipColorOrbit 13s linear infinite;
}


/* ALLERIA */

.network-technology {
  border-color:
    rgba(235, 47, 154, .22);

  box-shadow:
    0 12px 30px rgba(226, 44, 151, .10);
}

.network-technology i {
  background:
    linear-gradient(
      145deg,
      #f3339d,
      #d43ac1,
      #a354e7
    ) !important;

  box-shadow:
    0 0 20px rgba(237, 47, 158, .30);
}


/* BSOS */

.network-integration {
  border-color:
    rgba(18, 196, 220, .22);

  box-shadow:
    0 12px 30px rgba(25, 189, 220, .10);
}

.network-integration i {
  background:
    linear-gradient(
      145deg,
      #14d1db,
      #2d9bff,
      #5576ff
    ) !important;

  box-shadow:
    0 0 20px rgba(28, 190, 229, .30);
}


/* EXTERNAL SYSTEMS */

.network-distribution {
  border-color:
    rgba(119, 87, 255, .22);

  box-shadow:
    0 12px 30px rgba(112, 83, 242, .10);
}

.network-distribution i {
  background:
    linear-gradient(
      145deg,
      #725cff,
      #9254eb
    ) !important;

  box-shadow:
    0 0 20px rgba(116, 87, 255, .28);
}


/* NEW APPLICATIONS */

.network-global {
  border-color:
    rgba(255, 108, 25, .24);

  box-shadow:
    0 12px 30px rgba(255, 104, 22, .11);
}

.network-global i {
  background:
    linear-gradient(
      145deg,
      #ff8a2e,
      #ff5918
    ) !important;

  box-shadow:
    0 0 20px rgba(255, 105, 22, .30);
}


/* colored connection rays */

.network-technology::after {
  background:
    linear-gradient(
      90deg,
      rgba(239,49,156,.82),
      rgba(211,67,198,.45),
      transparent
    ) !important;
}

.network-integration::after {
  background:
    linear-gradient(
      90deg,
      rgba(24,205,222,.82),
      rgba(55,139,255,.45),
      transparent
    ) !important;
}

.network-distribution::after {
  background:
    linear-gradient(
      90deg,
      rgba(118,92,255,.82),
      rgba(148,82,231,.42),
      transparent
    ) !important;
}

.network-global::after {
  background:
    linear-gradient(
      90deg,
      rgba(255,112,28,.85),
      rgba(255,146,53,.42),
      transparent
    ) !important;
}


/* expansion message */

.network-expansion-message {
  border:
    1px solid rgba(125, 88, 255, .20) !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,247,252,.96),
      rgba(248,249,255,.96),
      rgba(255,248,243,.96)
    ) !important;

  box-shadow:
    0 10px 28px rgba(90,74,150,.09),
    0 0 25px rgba(225,49,159,.055);
}

.network-expansion-message small {
  color: #a44fe3 !important;
}


/* stronger colored particles */

.np-one {
  background: #ef319c !important;

  box-shadow:
    0 0 8px #ef319c,
    0 0 22px rgba(239,49,156,.75) !important;
}

.np-two {
  background: #19d2df !important;

  box-shadow:
    0 0 8px #19d2df,
    0 0 22px rgba(25,210,223,.75) !important;
}

.np-three {
  background: #ff7020 !important;

  box-shadow:
    0 0 8px #ff7020,
    0 0 22px rgba(255,112,32,.72) !important;
}


/* colored atmospheric glow behind each technology */

.partnership-network {
  isolation: isolate;
}

.network-technology,
.network-integration,
.network-distribution,
.network-global,
.network-core,
.network-expansion-message {
  z-index: 6;
}


@keyframes partnershipColorOrbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(15deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(375deg);
  }
}


/* =========================================================
   CONTACT
   ========================================================= */

.partnerships-section {
  padding-bottom: 34px !important;
}

.contact-section {
  position: relative;
  padding: 30px 0 52px;

  background:
    radial-gradient(
      circle at 12% 24%,
      rgba(25, 205, 222, .065),
      transparent 22%
    ),
    radial-gradient(
      circle at 88% 28%,
      rgba(239, 48, 158, .07),
      transparent 22%
    ),
    radial-gradient(
      circle at 72% 82%,
      rgba(255, 111, 27, .05),
      transparent 18%
    ),
    #ffffff;
}

.contact-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items: end;

  margin-bottom: 28px;
}

.contact-heading h2 {
  margin: 0;

  color: #11191f;

  font-size: clamp(44px, 3.8vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}

.contact-heading h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #16bdc8,
      #3a8cff 48%,
      #775cff
    );

  -webkit-background-clip: text;
  background-clip: text;
}

.contact-heading p {
  margin: 0 0 4px;
  padding-left: 26px;

  border-left:
    1px solid rgba(90, 112, 145, .22);

  color: #687985;

  font-size: 15px;
  line-height: 1.7;
}


/* three contact routes */

.contact-routes {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 16px;
}

.contact-route {
  position: relative;

  min-height: 220px;
  padding: 22px;

  display: flex;
  align-items: flex-start;
  gap: 14px;

  overflow: hidden;

  border-radius: 20px;

  text-decoration: none;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.contact-route:hover {
  transform: translateY(-3px);
}


/* corporate */

.contact-corporate {
  border:
    1px solid rgba(59, 142, 205, .18);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(27, 203, 220, .14),
      transparent 28%
    ),
    radial-gradient(
      circle at 72% 78%,
      rgba(112, 88, 255, .09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f7fbff
    );

  box-shadow:
    0 18px 48px rgba(48, 93, 132, .07);
}

.contact-corporate:hover {
  box-shadow:
    0 24px 58px rgba(48, 93, 132, .11);
}

.contact-route-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: #ffffff;

  font-size: 17px;
  font-weight: 900;

  background:
    linear-gradient(
      145deg,
      #18cbd8,
      #3d8cff 48%,
      #745cff
    );

  box-shadow:
    0 0 20px rgba(57, 151, 236, .20);
}


/* PE + BSOS */

.contact-bsos {
  border:
    1px solid rgba(255, 105, 23, .20);

  background:
    radial-gradient(
      circle at 76% 30%,
      rgba(255, 110, 24, .15),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fff9f5
    );

  box-shadow:
    0 18px 48px rgba(115, 72, 42, .07);
}

.contact-bsos:hover {
  box-shadow:
    0 24px 58px rgba(255, 100, 20, .13);
}


/* Alleria */

.contact-alleria {
  border:
    1px solid rgba(232, 48, 156, .19);

  background:
    radial-gradient(
      circle at 78% 26%,
      rgba(240, 48, 161, .15),
      transparent 29%
    ),
    radial-gradient(
      circle at 70% 78%,
      rgba(182, 83, 230, .09),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fff8fc
    );

  box-shadow:
    0 18px 48px rgba(136, 60, 108, .07);
}

.contact-alleria:hover {
  box-shadow:
    0 24px 58px rgba(229, 49, 156, .12);
}


/* logos */

.contact-route-logo {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  object-fit: contain;

  padding: 3px;

  border-radius: 12px;

  background: rgba(255,255,255,.86);
}

.contact-bsos .contact-route-logo {
  background: #101010;

  box-shadow:
    0 0 18px rgba(255, 104, 20, .14);
}

.contact-alleria .contact-route-logo {
  border:
    1px solid rgba(231, 47, 155, .15);
}


/* route copy */

.contact-route-copy {
  position: relative;
  z-index: 3;

  min-width: 0;
}

.contact-route-copy > span {
  display: block;

  color: #1a9ead;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .14em;
}

.contact-bsos .contact-route-copy > span {
  color: #ee681d;
}

.contact-alleria .contact-route-copy > span {
  color: #db2b91;
}

.contact-route-copy strong {
  display: block;

  margin-top: 6px;

  color: #18242c;

  font-size: 18px;
}

.contact-route-copy p {
  max-width: 300px;

  margin: 10px 0 0;

  color: #71818d;

  font-size: 12px;
  line-height: 1.55;
}

.contact-route-copy b {
  display: block;

  margin-top: 18px;

  color: #21313b;

  font-size: 10px;
  font-weight: 800;
}

.contact-bsos .contact-route-copy b {
  color: #ef641a;
}

.contact-alleria .contact-route-copy b {
  color: #d82c8f;
}


/* arrows */

.contact-route-arrow {
  position: absolute;

  right: 18px;
  bottom: 17px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #19cbd8,
      #725cff
    );

  font-size: 15px;
}

.contact-bsos .contact-route-arrow {
  background:
    linear-gradient(
      145deg,
      #ff842d,
      #ff5718
    );
}

.contact-alleria .contact-route-arrow {
  background:
    linear-gradient(
      145deg,
      #f1349b,
      #d72bb6
    );
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  position: relative;

  padding: 52px 0 24px;

  color: #dce5eb;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(59, 107, 255, .12),
      transparent 25%
    ),
    radial-gradient(
      circle at 18% 78%,
      rgba(235, 48, 157, .08),
      transparent 23%
    ),
    #10161b;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.footer-main {
  display: grid;

  grid-template-columns:
    1.45fr
    .8fr
    .65fr
    .8fr;

  gap: 42px;

  padding-bottom: 42px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


/* company */

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand-mark {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(71, 206, 226, .30);

  border-radius: 12px;

  color: #ffffff;

  font-size: 13px;
  font-weight: 900;

  background:
    linear-gradient(
      145deg,
      rgba(21,203,216,.18),
      rgba(113,88,255,.20)
    );
}

.footer-brand strong {
  display: block;

  color: #ffffff;

  font-size: 15px;
}

.footer-brand span {
  display: block;

  margin-top: 3px;

  color: #81929d;

  font-size: 6px;
  font-weight: 850;
  letter-spacing: .15em;
}

.footer-company p {
  max-width: 430px;

  margin: 18px 0 0;

  color: #8798a3;

  font-size: 12px;
  line-height: 1.7;
}


/* Founder */

.footer-founder > span,
.footer-navigation > span,
.footer-legal > span {
  display: block;

  margin-bottom: 13px;

  color: #72848f;

  font-size: 7px;
  font-weight: 850;
  letter-spacing: .15em;
}

.footer-founder strong {
  display: block;

  color: #ffffff;

  font-size: 15px;
}

.footer-founder a {
  width: fit-content;

  margin-top: 12px;

  display: flex;
  align-items: center;
  gap: 8px;

  color: #50cfe2;

  font-size: 10px;
  font-weight: 700;

  text-decoration: none;
}

.footer-founder a b {
  font-size: 13px;
}


/* navigation / legal */

.footer-navigation,
.footer-legal {
  display: flex;
  flex-direction: column;
}

.footer-navigation a,
.footer-legal a {
  width: fit-content;

  margin: 0 0 9px;

  color: #abb8c0;

  font-size: 10px;

  text-decoration: none;

  transition:
    color 160ms ease;
}

.footer-navigation a:hover,
.footer-legal a:hover {
  color: #ffffff;
}


/* bottom */

.footer-bottom {
  min-height: 66px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;

  padding-top: 20px;

  color: #70818c;

  font-size: 8px;
}

.footer-products {
  display: flex;
  gap: 18px;
}

.footer-products a {
  color: #aebbc3;

  font-size: 8px;
  font-weight: 700;

  text-decoration: none;
}

.footer-products a:first-child:hover {
  color: #ef4aa2;
}

.footer-products a:last-child:hover {
  color: #ff7926;
}

.footer-line {
  justify-self: end;

  color: #8d9ca6;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}


/* responsive */

@media (max-width: 1050px) {
  .contact-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-heading p {
    padding-left: 0;
    border-left: 0;
  }

  .contact-routes {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-line {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-products {
    flex-direction: column;
    gap: 8px;
  }
}