*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --services-surface: rgba(255, 255, 255, 0.88);
  --services-surface-soft: rgba(248, 251, 249, 0.82);
  --services-green: #31594a;
  --services-green-dark: #163c31;
  --services-green-deep: #09271f;
  --services-blue: #2f6f86;
  --services-text: #24352e;
  --services-muted: rgba(42, 55, 49, 0.65);
  --services-border: rgba(43, 92, 74, 0.13);
  --services-shadow: 0 24px 70px rgba(22, 38, 31, 0.12);
  --services-bg-x: 0px;
  --services-bg-y: 0px;
  --services-spot-x: 50%;
  --services-spot-y: 50%;
}

html {
  scroll-behavior: smooth;
  background: #f7f4ef;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: #f7f4ef;
  color: var(--services-text);
  font-family: "Manrope", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.services-bg {
  position: fixed;
  inset: -24px;
  z-index: -4;
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform:
    translate3d(
      var(--services-bg-x),
      var(--services-bg-y),
      0
    )
    scale(1.04);
  transition:
    opacity 4.8s ease,
    transform 0.18s ease-out;
  will-change: opacity, transform;
}

.services-bg.is-active {
  opacity: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(247, 244, 239, 0.58) 0%,
      rgba(247, 244, 239, 0.54) 40%,
      rgba(247, 244, 239, 0.70) 100%
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.18),
      transparent 36%
    );
}

.services-page {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding:
    72px
    0
    max(72px, env(safe-area-inset-bottom));
}

.services-hero,
.services-ecosystem,
.services-process,
.services-transformation,
.services-final-cta {
  width: 100%;
}

.services-hero {
  --services-spot-x: 50%;
  --services-spot-y: 50%;

  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(520px, 1.12fr);

  align-items: center;
  gap: 44px;

  min-height: 640px;

  margin-bottom: 36px;
  padding: 54px 48px;

  overflow: hidden;

  border: 1px solid rgba(43, 92, 74, 0.13);
  border-radius: 28px;

  background:
    radial-gradient(
      420px circle
      at
      var(--services-spot-x)
      var(--services-spot-y),
      rgba(85, 143, 113, 0.11),
      transparent 72%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.93),
      rgba(246, 250, 247, 0.84)
    );

  box-shadow:
    0 24px 70px rgba(22, 38, 31, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.services-hero::before {
  content: "";
  position: absolute;
  left: -130px;
  top: -180px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(173, 210, 190, 0.22);
  filter: blur(12px);
  pointer-events: none;
}

.services-hero-copy {
  position: relative;
  z-index: 8;
}

.services-kicker,
.services-section-kicker {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(43, 92, 74, 0.58);
}

.services-hero h1 {
  margin: 18px 0 20px;
  color: #1d332b;
  font-size: clamp(3.3rem, 5.8vw, 5.35rem);
  font-weight: 550;
  line-height: 0.91;
  letter-spacing: -0.065em;
}

.services-hero h1 span {
  display: block;
  width: max-content;
  color: #31594a;
  font-size: 0.92em;
  letter-spacing: -0.075em;
}

.services-hero-copy > p {
  max-width: 505px;
  margin: 0;
  color: rgba(42, 55, 49, 0.64);
  font-size: 14px;
  line-height: 1.75;
}

.services-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.services-primary-btn,
.services-secondary-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.services-primary-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(
      135deg,
      #315f52,
      #2f6f86
    );
  color: #ffffff;
  box-shadow:
    0 12px 28px rgba(35, 74, 88, 0.2);
}

.services-secondary-btn {
  border: 1px solid rgba(43, 92, 74, 0.14);
  background: rgba(255, 255, 255, 0.62);
  color: #31594a;
}

.services-primary-btn:hover,
.services-secondary-btn:hover {
  transform: translateY(-2px);
}

.services-primary-btn:hover {
  box-shadow:
    0 16px 34px rgba(35, 74, 88, 0.27);
}

.services-secondary-btn:hover {
  border-color: rgba(43, 92, 74, 0.28);
  background: rgba(247, 251, 248, 0.94);
}

.services-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 32px;
}

.services-hero-metric {
  min-width: 0;
  padding: 9px 5px 8px;
  border-top: 1px solid rgba(43, 92, 74, 0.13);
}

.services-hero-metric strong,
.services-hero-metric span {
  display: block;
}

.services-hero-metric strong {
  margin-bottom: 2px;
  color: #31594a;
  font-family: "Roboto Mono", monospace;
  font-size: 8px;
}

.services-hero-metric span {
  color: rgba(42, 55, 49, 0.54);
  font-size: 8px;
}

.services-project-map {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 520px;
}

.services-project-map::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(43, 92, 74, 0.07);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(75, 137, 106, 0.07),
      transparent 64%
    );
  pointer-events: none;
}

.services-project-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(43, 92, 74, 0.10);
  border-radius: 50%;
  pointer-events: none;
}

.services-project-map-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.project-line {
  stroke: rgba(55, 116, 89, 0.22);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 0.28s ease,
    stroke-width 0.28s ease;
}

.project-line.is-active {
  stroke: rgba(53, 126, 91, 0.7);
  stroke-width: 2;
}

.project-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;

  width: 215px;
  min-height: 245px;

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

  padding: 25px 20px;

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

  border: 1px solid rgba(183, 229, 205, 0.27);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 4%,
      rgba(119, 191, 154, 0.23),
      transparent 48%
    ),
    linear-gradient(
      150deg,
      #205340,
      #123b2e 58%,
      #0b2d24
    );

  color: #ffffff;
  text-align: center;

  box-shadow:
    0 30px 60px rgba(15, 53, 40, 0.27),
    0 0 50px rgba(72, 154, 114, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease;
}

.services-project-map.has-focus .project-core {
  transform:
    translate(-50%, -50%)
    scale(1.025);

  box-shadow:
    0 35px 70px rgba(15, 53, 40, 0.32),
    0 0 58px rgba(72, 154, 114, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.project-core-orbit {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  border: 1px solid rgba(205, 239, 221, 0.22);
  border-radius: 50%;
}

.project-core-orbit::before,
.project-core-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(205, 239, 221, 0.08);
  border-radius: 50%;
}

.project-core-orbit::before {
  inset: -9px;
}

.project-core-orbit::after {
  inset: 12px;
}

.project-core-orbit span {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #8acaa4;
  box-shadow:
    0 0 0 5px rgba(138, 202, 164, 0.08);
}

.project-core-orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(221, 246, 233, 0.8);
  box-shadow:
    0 0 12px rgba(138, 202, 164, 0.35);
}

.project-core-bars {
  position: absolute;
  top: 48px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 31px;
}

.project-core-bars span {
  width: 5px;
  border: 1px solid rgba(221, 246, 233, 0.83);
  border-radius: 2px 2px 0 0;
}

.project-core-bars span:nth-child(1) {
  height: 12px;
}

.project-core-bars span:nth-child(2) {
  height: 21px;
}

.project-core-bars span:nth-child(3) {
  height: 30px;
}

.project-core-step {
  margin-top: 9px;
  color: rgba(190, 226, 207, 0.6);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  letter-spacing: 0.16em;
}

.project-core > strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.project-core > p {
  min-height: 48px;
  margin: 10px 0 0;
  color: rgba(232, 243, 237, 0.66);
  font-size: 9px;
  line-height: 1.5;
}

.project-core-status {
  margin-top: 13px;
  padding: 5px 9px;
  border: 1px solid rgba(183, 229, 205, 0.12);
  border-radius: 999px;
  color: rgba(183, 229, 205, 0.56);
  font-family: "Roboto Mono", monospace;
  font-size: 6px;
  letter-spacing: 0.17em;
}

.project-stage {
  position: absolute;
  z-index: 4;

  width: 122px;
  min-height: 104px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 12px;

  border: 1px solid rgba(43, 92, 74, 0.12);
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.72);

  color: #29483c;

  text-align: left;
  font-family: "Manrope", sans-serif;

  cursor: pointer;

  box-shadow:
    0 11px 26px rgba(28, 50, 41, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease;
}

.project-stage:hover,
.project-stage.is-active {
  transform: translateY(-4px);

  border-color: rgba(43, 92, 74, 0.32);

  background:
    linear-gradient(
      145deg,
      rgba(248, 253, 250, 0.98),
      rgba(237, 247, 241, 0.96)
    );

  box-shadow:
    0 18px 35px rgba(28, 50, 41, 0.12),
    0 0 0 1px rgba(69, 126, 101, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.project-stage-number {
  position: absolute;
  right: 10px;
  top: 9px;
  color: rgba(43, 92, 74, 0.38);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  font-weight: 700;
}

.project-stage.is-active .project-stage-number {
  color: rgba(43, 92, 74, 0.68);
}

.project-stage-icon {
  width: 34px;
  height: 34px;

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

  margin-bottom: 10px;

  border: 1px solid rgba(43, 92, 74, 0.12);
  border-radius: 11px;

  background: rgba(235, 244, 239, 0.92);

  color: rgba(43, 92, 74, 0.67);

  transition:
    color 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease,
    transform 0.24s ease;
}

.project-stage:hover .project-stage-icon,
.project-stage.is-active .project-stage-icon {
  color: #31594a;
  border-color: rgba(43, 92, 74, 0.23);
  background: rgba(224, 239, 230, 0.98);
  transform: scale(1.04);
}

.project-stage-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-stage strong {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}

.project-stage-1 {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.project-stage-1:hover,
.project-stage-1.is-active {
  transform:
    translateX(-50%)
    translateY(-4px);
}

.project-stage-2 {
  right: 1%;
  top: 11%;
}

.project-stage-3 {
  right: -2%;
  top: 43%;
}

.project-stage-4 {
  right: 12%;
  bottom: 0;
}

.project-stage-5 {
  left: 12%;
  bottom: 0;
}

.project-stage-6 {
  left: -2%;
  top: 43%;
}

.project-stage-7 {
  left: 1%;
  top: 11%;
}

.services-ecosystem,
.services-process,
.services-transformation {
  margin-bottom: 36px;
  padding: 38px 34px 34px;
  border: 1px solid var(--services-border);
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(247, 250, 248, 0.82)
    );
  box-shadow:
    var(--services-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.services-section-head {
  margin-bottom: 30px;
  text-align: center;
}

.services-section-head.compact {
  margin-bottom: 26px;
}

.services-section-head h2 {
  margin: 7px 0 0;
  color: #203d32;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}

.services-section-head p {
  max-width: 620px;
  margin: 11px auto 0;
  color: var(--services-muted);
  font-size: 12px;
  line-height: 1.6;
}

.ecosystem-board {
  position: relative;
  min-height: 510px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    270px
    minmax(0, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px 68px;
  align-items: center;
}

.ecosystem-service {
  position: relative;
  z-index: 5;
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(43, 92, 74, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 12px 30px rgba(26, 45, 37, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.ecosystem-service:hover,
.ecosystem-service.is-active {
  transform: translateY(-4px);
  border-color: rgba(43, 92, 74, 0.28);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 18px 38px rgba(26, 45, 37, 0.12);
}

.ecosystem-service h3 {
  margin: 0 0 5px;
  color: #29483c;
  font-size: 13px;
  font-weight: 700;
}

.ecosystem-service p {
  margin: 0;
  color: rgba(42, 55, 49, 0.58);
  font-size: 9px;
  line-height: 1.5;
}

.ecosystem-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(43, 92, 74, 0.12);
  border-radius: 14px;
  background: rgba(237, 245, 240, 0.9);
  color: #31594a;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}

.ecosystem-left {
  grid-column: 1;
}

.ecosystem-right {
  grid-column: 3;
}

.ecosystem-row-1 {
  grid-row: 1;
}

.ecosystem-row-2 {
  grid-row: 2;
}

.ecosystem-row-3 {
  grid-row: 3;
}

.ecosystem-core {
  position: relative;
  z-index: 6;
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 25px;
  overflow: hidden;
  border: 1px solid rgba(174, 222, 198, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(116, 184, 149, 0.2),
      transparent 46%
    ),
    linear-gradient(
      150deg,
      #204e3d,
      #12382d 56%,
      #0b2d24
    );
  color: #fff;
  text-align: center;
  box-shadow:
    0 30px 60px rgba(15, 53, 40, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.ecosystem-board.has-active-service .ecosystem-core {
  transform: scale(1.018);
  box-shadow:
    0 34px 70px rgba(15, 53, 40, 0.3),
    0 0 42px rgba(86, 166, 127, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ecosystem-core-orbit {
  position: relative;
  width: 98px;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid rgba(198, 237, 216, 0.35);
  border-radius: 50%;
}

.ecosystem-core-orbit::before,
.ecosystem-core-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(198, 237, 216, 0.09);
  border-radius: 50%;
}

.ecosystem-core-orbit::before {
  inset: -13px;
}

.ecosystem-core-orbit::after {
  inset: 15px;
}

.ecosystem-core-orbit span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #83c39d;
  box-shadow:
    0 0 0 5px rgba(131, 195, 157, 0.09);
}

.ecosystem-core-chart {
  position: absolute;
  top: 83px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 35px;
}

.ecosystem-core-chart i {
  width: 5px;
  border: 1px solid rgba(225, 246, 235, 0.82);
  border-radius: 2px 2px 0 0;
}

.ecosystem-core-chart i:nth-child(1) {
  height: 13px;
}

.ecosystem-core-chart i:nth-child(2) {
  height: 23px;
}

.ecosystem-core-chart i:nth-child(3) {
  height: 34px;
}

.ecosystem-core h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.08;
}

.ecosystem-core p {
  max-width: 215px;
  margin: 13px auto 0;
  color: rgba(232, 243, 237, 0.68);
  font-size: 10px;
  line-height: 1.55;
}

.ecosystem-core-status {
  margin-top: 23px;
  padding: 6px 10px;
  border: 1px solid rgba(183, 229, 205, 0.14);
  border-radius: 999px;
  color: rgba(183, 229, 205, 0.7);
  font-family: "Roboto Mono", monospace;
  font-size: 7px;
  letter-spacing: 0.15em;
}

.ecosystem-wire {
  position: absolute;
  z-index: 3;
  height: 1px;
  width: 94px;
  background:
    linear-gradient(
      90deg,
      rgba(57, 120, 93, 0.2),
      rgba(57, 120, 93, 0.58),
      rgba(57, 120, 93, 0.15)
    );
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}

.wire-left-1 {
  left: calc(33.33% - 8px);
  top: 17%;
}

.wire-left-2 {
  left: calc(33.33% - 8px);
  top: 50%;
}

.wire-left-3 {
  left: calc(33.33% - 8px);
  bottom: 17%;
}

.wire-right-1 {
  right: calc(33.33% - 8px);
  top: 17%;
}

.wire-right-2 {
  right: calc(33.33% - 8px);
  top: 50%;
}

.wire-right-3 {
  right: calc(33.33% - 8px);
  bottom: 17%;
}

.ecosystem-board.has-active-service .ecosystem-wire {
  opacity: 0.9;
  filter:
    drop-shadow(
      0 0 4px rgba(55, 130, 97, 0.25)
    );
}

.services-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(43, 92, 74, 0.09);
}

.services-capabilities a {
  padding: 8px 12px;
  border: 1px solid rgba(43, 92, 74, 0.11);
  border-radius: 999px;
  background: rgba(247, 250, 248, 0.66);
  color: rgba(43, 92, 74, 0.7);
  font-size: 9px;
  font-weight: 650;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.services-capabilities a:hover {
  transform: translateY(-2px);
  border-color: rgba(43, 92, 74, 0.25);
  background: rgba(237, 245, 240, 0.94);
}

.services-process-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    36px
    minmax(0, 1fr)
    36px
    minmax(0, 1fr)
    36px
    minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.services-process-step {
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(43, 92, 74, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 10px 28px rgba(24, 43, 35, 0.06);
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.services-process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(43, 92, 74, 0.24);
  box-shadow:
    0 17px 36px rgba(24, 43, 35, 0.1);
}

.process-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.process-number {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(43, 92, 74, 0.13);
  border-radius: 50%;
  color: #31594a;
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}

.process-symbol {
  color: rgba(49, 89, 74, 0.5);
  font-size: 20px;
}

.services-process-step h3 {
  margin: 0 0 8px;
  color: #28473b;
  font-size: 14px;
  font-weight: 700;
}

.services-process-step p {
  margin: 0;
  color: rgba(42, 55, 49, 0.59);
  font-size: 9px;
  line-height: 1.55;
}

.process-arrow {
  color: rgba(49, 89, 74, 0.72);
  font-family: "Roboto Mono", monospace;
  font-size: 24px;
  text-align: center;
}

.transformation-board {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    72px
    minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(43, 92, 74, 0.11);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
}

.transformation-before,
.transformation-after {
  min-width: 0;
  padding: 28px;
}

.transformation-before {
  background:
    linear-gradient(
      135deg,
      rgba(245, 242, 237, 0.88),
      rgba(251, 249, 246, 0.68)
    );
}

.transformation-after {
  background:
    linear-gradient(
      135deg,
      rgba(238, 247, 242, 0.88),
      rgba(249, 252, 250, 0.72)
    );
}

.transformation-label {
  color: rgba(43, 92, 74, 0.58);
  font-family: "Roboto Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.transformation-before h3,
.transformation-after h3 {
  margin: 5px 0 20px;
  color: #29483c;
  font-size: 18px;
  font-weight: 650;
}

.transformation-before ul,
.transformation-after ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.transformation-before li,
.transformation-after li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 22px;
  color: rgba(42, 55, 49, 0.63);
  font-size: 10px;
}

.transformation-before li::before,
.transformation-after li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 8px;
}

.transformation-before li::before {
  content: "×";
  border: 1px solid rgba(119, 91, 75, 0.22);
  color: rgba(119, 91, 75, 0.72);
}

.transformation-after li::before {
  content: "✓";
  border: 1px solid rgba(43, 92, 74, 0.22);
  color: #31594a;
}

.transformation-switch {
  position: relative;
  z-index: 5;
  align-self: center;
  justify-self: center;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #386b57,
      #22503f
    );
  color: #fff;
  font-size: 23px;
  box-shadow:
    0 12px 28px rgba(30, 75, 57, 0.23);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.services-transformation:hover .transformation-switch {
  transform: translateX(3px);
  box-shadow:
    0 15px 34px rgba(30, 75, 57, 0.29);
}

.chaos-scene,
.dashboard-scene {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  border: 1px solid rgba(43, 92, 74, 0.09);
  border-radius: 18px;
}

.chaos-scene {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(126, 108, 93, 0.08),
      transparent 62%
    ),
    rgba(240, 236, 230, 0.72);
}

.dashboard-scene {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(72, 139, 105, 0.14),
      transparent 65%
    ),
    rgba(239, 247, 242, 0.82);
}

.chaos-paper {
  position: absolute;
  width: 70px;
  height: 82px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  border: 1px solid rgba(97, 82, 70, 0.14);
  background: rgba(255, 253, 249, 0.96);
  color: rgba(97, 82, 70, 0.45);
  font-family: "Roboto Mono", monospace;
  font-size: 8px;
  box-shadow:
    0 9px 18px rgba(68, 57, 49, 0.08);
}

.paper-a {
  left: 9%;
  top: 17%;
  transform: rotate(-13deg);
}

.paper-b {
  left: 22%;
  top: 8%;
  transform: rotate(8deg);
}

.paper-c {
  right: 18%;
  top: 13%;
  transform: rotate(14deg);
}

.paper-d {
  right: 8%;
  bottom: 13%;
  transform: rotate(-8deg);
}

.chaos-laptop,
.dashboard-laptop {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 190px;
  transform: translate(-50%, -50%);
}

.chaos-laptop-screen,
.dashboard-screen {
  position: relative;
  height: 120px;
  overflow: hidden;
  border: 5px solid #45504b;
  border-bottom-width: 8px;
  border-radius: 9px;
}

.chaos-laptop-screen {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 9px;
  background: #f4f0e9;
}

.chaos-laptop-screen span {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(82, 100, 91, 0.2) 0 2px,
      transparent 2px 8px
    );
}

.chaos-laptop-base,
.dashboard-base {
  width: 220px;
  height: 11px;
  margin-left: -15px;
  border-radius: 0 0 50% 50%;
  background:
    linear-gradient(
      180deg,
      #adb4b0,
      #757f7a
    );
}

.dashboard-screen {
  background:
    linear-gradient(
      145deg,
      #f8fbf9,
      #e7f1eb
    );
}

.dashboard-ring {
  position: absolute;
  left: 17px;
  top: 16px;
  width: 52px;
  height: 52px;
  border: 8px solid rgba(57, 123, 91, 0.18);
  border-top-color: #4f956f;
  border-radius: 50%;
}

.dashboard-bars {
  position: absolute;
  right: 18px;
  bottom: 18px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.dashboard-bars span {
  width: 10px;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(
      180deg,
      #76aa86,
      #397657
    );
}

.dashboard-bars span:nth-child(1) {
  height: 22px;
}

.dashboard-bars span:nth-child(2) {
  height: 38px;
}

.dashboard-bars span:nth-child(3) {
  height: 29px;
}

.dashboard-bars span:nth-child(4) {
  height: 52px;
}

.dashboard-bars span:nth-child(5) {
  height: 44px;
}

.dashboard-line {
  position: absolute;
  left: 24px;
  right: 84px;
  bottom: 20px;
  height: 35px;
  border-bottom: 1px solid rgba(43, 92, 74, 0.14);
  transform: skewY(-12deg);
}

.dashboard-line i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4f956f;
}

.dashboard-line i:nth-child(1) {
  left: 0;
  bottom: 3px;
}

.dashboard-line i:nth-child(2) {
  left: 30%;
  bottom: 12px;
}

.dashboard-line i:nth-child(3) {
  left: 62%;
  bottom: 18px;
}

.dashboard-line i:nth-child(4) {
  right: 0;
  top: 1px;
}

.dashboard-cloud {
  position: absolute;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(43, 92, 74, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #31594a;
  font-family: "Roboto Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  box-shadow:
    0 8px 18px rgba(31, 69, 52, 0.1);
}

.cloud-1 {
  top: 18px;
}

.cloud-2 {
  top: 83px;
}

.cloud-3 {
  bottom: 17px;
}

.services-final-cta {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 230px;
  padding: 38px 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(115, 171, 117, 0.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #173f33,
      #0e3026 58%,
      #08261e
    );
  color: #fff;
  box-shadow:
    0 28px 70px rgba(4, 22, 17, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.services-final-cta-symbol,
.services-final-cta-copy,
.services-final-cta-action {
  position: relative;
  z-index: 3;
}

.services-final-cta-symbol {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(182, 228, 201, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(118, 188, 146, 0.04),
    0 0 34px rgba(118, 188, 146, 0.13);
}

.services-final-message-icon {
  position: relative;
  width: 38px;
  height: 29px;
  border: 2px solid rgba(218, 244, 229, 0.82);
  border-radius: 7px;
}

.services-final-message-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -7px;
  width: 9px;
  height: 9px;
  border-left: 2px solid rgba(218, 244, 229, 0.82);
  border-bottom: 2px solid rgba(218, 244, 229, 0.82);
  transform: skewY(-38deg);
}

.services-final-message-icon span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: rgba(218, 244, 229, 0.5);
}

.services-final-message-icon span:nth-child(1) {
  top: 8px;
}

.services-final-message-icon span:nth-child(2) {
  top: 14px;
}

.services-final-message-icon span:nth-child(3) {
  top: 20px;
  right: 16px;
}

.services-final-cta .services-section-kicker {
  color: rgba(184, 221, 180, 0.62);
}

.services-final-cta h2 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.services-final-cta-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(236, 244, 239, 0.68);
  font-size: 11px;
  line-height: 1.6;
}

.services-final-cta-copy > span {
  display: block;
  margin-top: 8px;
  color: rgba(185, 219, 198, 0.54);
  font-size: 9px;
}

.services-final-cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.services-final-cta-action a {
  min-width: 190px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 18px;
  border: 1px solid rgba(230, 247, 237, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(71, 130, 103, 0.85),
      rgba(45, 104, 80, 0.95)
    );
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.services-final-cta-action a:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(
      135deg,
      rgba(82, 148, 117, 0.95),
      rgba(50, 113, 87, 1)
    );
  box-shadow:
    0 17px 34px rgba(0, 0, 0, 0.24);
}

.services-final-cta-action small {
  color: rgba(220, 238, 228, 0.46);
  font-size: 8px;
}

.services-final-circuit {
  position: absolute;
  right: -50px;
  bottom: -6px;
  width: 260px;
  height: 150px;
  opacity: 0.22;
  pointer-events: none;
}

.services-final-circuit i {
  position: absolute;
  right: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(173, 222, 192, 0.88)
    );
}

.services-final-circuit i::before {
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 36px;
  height: 18px;
  border-left: 1px solid rgba(173, 222, 192, 0.88);
  border-bottom: 1px solid rgba(173, 222, 192, 0.88);
  border-radius: 0 0 0 8px;
}

.services-final-circuit i:nth-child(1) {
  top: 24px;
  width: 190px;
}

.services-final-circuit i:nth-child(2) {
  top: 48px;
  width: 220px;
}

.services-final-circuit i:nth-child(3) {
  top: 72px;
  width: 175px;
}

.services-final-circuit i:nth-child(4) {
  top: 96px;
  width: 230px;
}

.services-final-circuit i:nth-child(5) {
  top: 120px;
  width: 160px;
}

.reveal-section {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.services-process-step,
.ecosystem-service,
.transformation-before,
.transformation-after {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    background 0.24s ease;
}

.is-visible .services-process-step,
.is-visible .ecosystem-service,
.is-visible .transformation-before,
.is-visible .transformation-after {
  opacity: 1;
  transform: translateY(0);
}

.is-visible .ecosystem-service:nth-of-type(1) {
  transition-delay: 0.04s;
}

.is-visible .ecosystem-service:nth-of-type(2) {
  transition-delay: 0.09s;
}

.is-visible .ecosystem-service:nth-of-type(3) {
  transition-delay: 0.14s;
}

.is-visible .ecosystem-service:nth-of-type(4) {
  transition-delay: 0.19s;
}

.is-visible .ecosystem-service:nth-of-type(5) {
  transition-delay: 0.24s;
}

.is-visible .ecosystem-service:nth-of-type(6) {
  transition-delay: 0.29s;
}

.is-visible .services-process-step:nth-of-type(1) {
  transition-delay: 0.05s;
}

.is-visible .services-process-step:nth-of-type(2) {
  transition-delay: 0.13s;
}

.is-visible .services-process-step:nth-of-type(3) {
  transition-delay: 0.21s;
}

.is-visible .services-process-step:nth-of-type(4) {
  transition-delay: 0.29s;
}

.is-visible .transformation-before {
  transition-delay: 0.08s;
}

.is-visible .transformation-after {
  transition-delay: 0.18s;
}

@media (max-width: 1040px) {
  .services-hero {
    grid-template-columns:
      minmax(0, 0.82fr)
      minmax(480px, 1.18fr);
    padding: 46px 36px;
  }

  .project-stage {
    width: 110px;
  }

  .ecosystem-board {
    grid-template-columns:
      minmax(0, 1fr)
      230px
      minmax(0, 1fr);
    gap: 14px 46px;
  }

  .ecosystem-wire {
    width: 64px;
  }
}

@media (max-width: 900px) {
  .services-hero {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .services-hero-copy {
    text-align: center;
  }

  .services-hero-copy > p {
    margin-left: auto;
    margin-right: auto;
  }

  .services-hero-actions {
    justify-content: center;
  }

  .services-project-map {
    width: min(620px, 100%);
    margin: 0 auto;
  }

  .ecosystem-board {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: 0;
    gap: 14px;
  }

  .ecosystem-core {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 300px;
    margin-bottom: 4px;
  }

  .ecosystem-left,
  .ecosystem-right {
    grid-column: auto;
  }

  .ecosystem-row-1,
  .ecosystem-row-2,
  .ecosystem-row-3 {
    grid-row: auto;
  }

  .ecosystem-wire {
    display: none;
  }

  .services-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .process-arrow {
    display: none;
  }

  .transformation-board {
    grid-template-columns: 1fr;
  }

  .transformation-switch {
    margin: -26px auto;
    transform: rotate(90deg);
  }

  .services-transformation:hover .transformation-switch {
    transform:
      rotate(90deg)
      translateX(3px);
  }

  .services-final-cta {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .services-final-cta-action {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .services-bg {
    inset: 0;
    transform: scale(1.02);
    transition: opacity 4.8s ease;
  }

  .services-page {
    width: calc(100% - 24px);
    padding:
      24px
      0
      max(48px, env(safe-area-inset-bottom));
  }

  .services-hero,
  .services-ecosystem,
  .services-process,
  .services-transformation,
  .services-final-cta {
    border-radius: 22px;
  }

  .services-hero {
    display: block;
    min-height: 0;
    margin-bottom: 22px;
    padding: 34px 17px 22px;
  }

  .services-kicker,
  .services-section-kicker {
    font-size: 8px;
    letter-spacing: 0.17em;
  }

  .services-hero h1 {
    margin: 14px 0 16px;
    font-size: clamp(2.65rem, 13vw, 4rem);
    line-height: 0.92;
  }

  .services-hero-copy > p {
    max-width: 360px;
    font-size: 12px;
    line-height: 1.65;
  }

  .services-hero-actions {
    flex-direction: column;
    margin-top: 23px;
  }

  .services-primary-btn,
  .services-secondary-btn {
    width: 100%;
  }

  .services-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 23px;
  }

  .services-project-map {
    min-height: 570px;
    margin-top: 28px;
  }

  .services-project-map::before {
    width: 280px;
    height: 280px;
  }

  .services-project-map::after {
    width: 220px;
    height: 220px;
  }

  .services-project-map-lines {
    display: none;
  }

  .project-core {
    width: 155px;
    min-height: 180px;
    padding: 20px 14px;
  }

  .project-core-orbit {
    width: 55px;
    height: 55px;
  }

  .project-core-bars {
    top: 38px;
    transform: scale(0.8);
  }

  .project-core-step {
    font-size: 6px;
  }

  .project-core > strong {
    font-size: 14px;
  }

  .project-core > p {
    min-height: 42px;
    font-size: 7px;
  }

  .project-stage {
    width: 94px;
    min-height: 84px;
    padding: 9px;
    border-radius: 14px;
  }

  .project-stage-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 7px;
    border-radius: 9px;
  }

  .project-stage-icon svg {
    width: 15px;
    height: 15px;
  }

  .project-stage strong {
    font-size: 7px;
  }

  .project-stage-1 {
    top: 0;
  }

  .project-stage-2 {
    right: 0;
    top: 14%;
  }

  .project-stage-3 {
    right: 0;
    top: 44%;
  }

  .project-stage-4 {
    right: 8%;
    bottom: 0;
  }

  .project-stage-5 {
    left: 8%;
    bottom: 0;
  }

  .project-stage-6 {
    left: 0;
    top: 44%;
  }

  .project-stage-7 {
    left: 0;
    top: 14%;
  }

  .services-ecosystem,
  .services-process,
  .services-transformation {
    margin-bottom: 22px;
    padding: 26px 14px 20px;
  }

  .services-section-head {
    margin-bottom: 22px;
  }

  .services-section-head h2 {
    font-size: 30px;
  }

  .services-section-head p {
    font-size: 11px;
  }

  .ecosystem-board {
    grid-template-columns: 1fr;
  }

  .ecosystem-core {
    grid-column: 1;
    min-height: 280px;
    padding: 26px 20px;
  }

  .ecosystem-service {
    min-height: 100px;
    padding: 14px;
  }

  .ecosystem-service h3 {
    font-size: 12px;
  }

  .ecosystem-service p {
    font-size: 9px;
  }

  .services-capabilities {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .services-capabilities::-webkit-scrollbar {
    display: none;
  }

  .services-capabilities a {
    flex: 0 0 auto;
  }

  .services-process-grid {
    grid-template-columns: 1fr;
  }

  .services-process-step {
    min-height: 0;
    padding: 17px;
  }

  .process-step-top {
    margin-bottom: 18px;
  }

  .transformation-before,
  .transformation-after {
    padding: 18px 14px;
  }

  .chaos-scene,
  .dashboard-scene {
    min-height: 220px;
  }

  .chaos-laptop,
  .dashboard-laptop {
    width: 165px;
  }

  .chaos-laptop-screen,
  .dashboard-screen {
    height: 104px;
  }

  .chaos-laptop-base,
  .dashboard-base {
    width: 190px;
    margin-left: -12px;
  }

  .transformation-switch {
    width: 48px;
    height: 48px;
    margin: -23px auto;
  }

  .services-final-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 28px 18px 26px;
    text-align: center;
  }

  .services-final-cta-symbol {
    width: 78px;
    height: 78px;
    margin: 0 auto;
  }

  .services-final-cta h2 {
    font-size: 30px;
  }

  .services-final-cta-copy p {
    margin: 0 auto;
    font-size: 10px;
  }

  .services-final-cta-action {
    width: 100%;
  }

  .services-final-cta-action a {
    width: 100%;
  }

  .services-final-circuit {
    right: -100px;
    opacity: 0.14;
  }
}

@media (max-width: 420px) {
  .services-hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .services-project-map {
    min-height: 520px;
  }

  .project-stage {
    width: 84px;
  }

  .project-stage strong {
    font-size: 6px;
  }

  .chaos-paper {
    width: 54px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-section,
  .services-process-step,
  .ecosystem-service,
  .transformation-before,
  .transformation-after {
    opacity: 1;
    transform: none;
  }
}

.project-core {
  perspective: 1100px;
  transform-style: preserve-3d;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.project-core-cabinet,
.project-core-door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 245px;
  border-radius: 28px;
}

.project-core-cabinet {
  z-index: 1;
  overflow: hidden;
  border: 3px solid #163d30;
  border-radius: 28px;

  background-image:
    url("/services/assets/cab-inside.webp");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  box-shadow:
    inset 0 0 0 1px rgba(188, 225, 207, 0.1),
    inset 0 0 18px rgba(0, 0, 0, 0.16),
    0 25px 50px rgba(7, 34, 25, 0.25);
}

.project-core-cabinet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.cabinet-title,
.cabinet-wiring,
.cabinet-module,
.cabinet-label,
.cabinet-status {
  display: none !important;
}

.project-core-door {
  z-index: 4;

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

  padding: 25px 20px;

  transform-origin: left center;

  transform:
    translateX(0)
    rotateY(0deg);

  border: 1px solid rgba(183, 229, 205, 0.27);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 50% 4%,
      rgba(119, 191, 154, 0.23),
      transparent 48%
    ),
    linear-gradient(
      150deg,
      #205340,
      #123b2e 58%,
      #0b2d24
    );

  color: #ffffff;
  text-align: center;

  box-shadow:
    0 30px 60px rgba(15, 53, 40, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  backface-visibility: visible;

  transition:
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
}

.project-core.is-open .project-core-door {
  transform:
    translateX(-90%)
    rotateY(-6deg);

  box-shadow:
    -14px 25px 42px rgba(4, 25, 18, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.project-core-fold {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 20;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 0;
  border-radius: 0 27px 0 13px;

  cursor: pointer;

  background:
    linear-gradient(
      225deg,
      #d9ebdf 0%,
      #a8cbb7 46%,
      #205340 48%,
      #123b2e 100%
    );

  box-shadow:
    -6px 7px 13px rgba(4, 28, 20, 0.18);

  transition:
    width 0.25s ease,
    height 0.25s ease,
    filter 0.25s ease;
}

.project-core-fold::before {
  content: "";

  position: absolute;
  right: 7px;
  top: 7px;

  width: 11px;
  height: 11px;

  border-top:
    1px solid rgba(29, 80, 59, 0.38);

  border-right:
    1px solid rgba(29, 80, 59, 0.38);
}

.project-core-fold::after {
  content: "";

  position: absolute;
  left: 7px;
  bottom: 7px;

  width: 15px;
  height: 1px;

  transform: rotate(-45deg);

  background:
    rgba(221, 241, 230, 0.48);
}

.project-core-fold:hover {
  width: 52px;
  height: 52px;
  filter: brightness(1.07);
}

.project-core-door .project-core-orbit {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
}

.project-core-door .project-core-bars {
  position: absolute;
  top: 48px;
}

.project-core-door .project-core-step {
  margin-top: 9px;
}

.project-core-door > strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.project-core-door > p {
  min-height: 48px;
  margin: 10px 0 0;

  color:
    rgba(232, 243, 237, 0.66);

  font-size: 9px;
  line-height: 1.5;
}

.project-core-door .project-core-status {
  margin-top: 13px;
}

@media (max-width: 760px) {
  .project-core-cabinet,
  .project-core-door {
    min-height: 180px;
    border-radius: 20px;
  }

  .project-core-door {
    padding: 20px 14px;
  }

  .project-core-fold {
    width: 34px;
    height: 34px;

    border-radius:
      0 19px 0 10px;
  }

  .project-core-fold:hover {
    width: 40px;
    height: 40px;
  }

  .project-core.is-open
  .project-core-door {
    transform:
      translateX(-84%)
      rotateY(-5deg)
      scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-core-door {
    transition: none;
  }
}

.project-core {
  perspective: 950px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

.project-core-door {
  position: absolute;
  inset: 0;
  z-index: 4;

  width: 100%;
  height: 100%;
  min-height: 245px;

  padding: 0;
  border: 0;
  border-radius: 28px;

  background: none;
  box-shadow: none;

  transform-origin: left center;
  transform-style: preserve-3d;

  transform: rotateY(0deg);

  transition:
    transform 0.9s
    cubic-bezier(0.2, 0.72, 0.18, 1);

  will-change: transform;
}

.project-core.is-open .project-core-door {
  transform: rotateY(-112deg);
}

.project-core-door-face {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 28px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.project-core-door-front {
  z-index: 2;

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

  padding: 25px 20px;

  border:
    1px solid
    rgba(183, 229, 205, 0.27);

  background:
    radial-gradient(
      circle at 50% 4%,
      rgba(119, 191, 154, 0.23),
      transparent 48%
    ),
    linear-gradient(
      150deg,
      #205340,
      #123b2e 58%,
      #0b2d24
    );

  color: #ffffff;

  text-align: center;

  box-shadow:
    0 30px 60px
    rgba(15, 53, 40, 0.27),
    inset 0 1px 0
    rgba(255, 255, 255, 0.15);
}

.project-core-door-back {
  z-index: 1;

  transform: rotateY(180deg);

  border:
    1px solid
    rgba(172, 214, 192, 0.18);

  background:
    radial-gradient(
      circle at 48% 40%,
      rgba(61, 118, 89, 0.14),
      transparent 62%
    ),
    linear-gradient(
      145deg,
      #153d30,
      #0c2e24 58%,
      #09251d
    );

  box-shadow:
    inset 0 0 0 2px
    rgba(255, 255, 255, 0.025),
    inset 0 0 30px
    rgba(0, 0, 0, 0.2),
    8px 18px 32px
    rgba(5, 27, 20, 0.17);
}

.project-core.is-open
.project-core-door-back {
  box-shadow:
    inset 0 0 0 2px
    rgba(255, 255, 255, 0.025),
    inset 0 0 30px
    rgba(0, 0, 0, 0.2),
    -10px 22px 36px
    rgba(5, 27, 20, 0.24);
}

.project-core-fold {
  position: absolute;

  top: -1px;
  right: -1px;

  z-index: 20;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 0;

  border-radius:
    0 27px 0 13px;

  cursor: pointer;

  background:
    linear-gradient(
      225deg,
      #d9ebdf 0%,
      #a8cbb7 46%,
      #205340 48%,
      #123b2e 100%
    );

  box-shadow:
    -6px 7px 13px
    rgba(4, 28, 20, 0.18);

  transition:
    width 0.25s ease,
    height 0.25s ease,
    filter 0.25s ease;
}

.project-core-fold:hover {
  width: 52px;
  height: 52px;

  filter: brightness(1.07);
}

.project-core-fold::before {
  content: "";

  position: absolute;

  right: 7px;
  top: 7px;

  width: 11px;
  height: 11px;

  border-top:
    1px solid
    rgba(29, 80, 59, 0.38);

  border-right:
    1px solid
    rgba(29, 80, 59, 0.38);
}

.project-core-fold::after {
  content: "";

  position: absolute;

  left: 7px;
  bottom: 7px;

  width: 15px;
  height: 1px;

  transform: rotate(-45deg);

  background:
    rgba(221, 241, 230, 0.48);
}

.project-core-door-front
.project-core-orbit {
  position: relative;

  width: 70px;
  height: 70px;

  margin-bottom: 5px;
}

.project-core-door-front
.project-core-bars {
  position: absolute;

  top: 48px;
}

.project-core-door-front
.project-core-step {
  margin-top: 9px;
}

.project-core-door-front
> strong {
  display: block;

  margin-top: 5px;

  font-size: 18px;
  font-weight: 600;

  line-height: 1.1;
}

.project-core-door-front
> p {
  min-height: 48px;

  margin:
    10px
    0
    0;

  color:
    rgba(232, 243, 237, 0.66);

  font-size: 9px;
  line-height: 1.5;
}

.project-core-door-front
.project-core-status {
  margin-top: 13px;
}

.project-core-close {
  position: absolute;

  right: 13px;
  top: 13px;

  z-index: 10;

  width: 28px;
  height: 28px;

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

  padding: 0;

  border:
    1px solid
    rgba(183, 220, 202, 0.15);

  border-radius: 50%;

  background:
    rgba(5, 30, 22, 0.34);

  color:
    rgba(199, 228, 213, 0.68);

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

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.project-core-close:hover {
  background:
    rgba(54, 105, 80, 0.5);

  color: #ffffff;

  transform:
    translateX(-2px);
}

.door-back-rib {
  position: absolute;

  left: 22px;
  right: 22px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(139, 186, 162, 0.12),
      rgba(195, 224, 208, 0.19),
      rgba(139, 186, 162, 0.12),
      transparent
    );
}

.door-back-rib-a {
  top: 28%;
}

.door-back-rib-b {
  top: 50%;
}

.door-back-rib-c {
  top: 72%;
}

.door-back-center {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 80px;
  height: 115px;

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

  border:
    1px solid
    rgba(169, 209, 188, 0.09);

  border-radius: 15px;

  box-shadow:
    inset 0 0 18px
    rgba(0, 0, 0, 0.12);
}

.door-back-center span {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 26px;
  height: 26px;

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

  border:
    1px solid
    rgba(179, 217, 197, 0.11);

  border-radius: 50%;
}

.door-hinge {
  position: absolute;

  left: -4px;

  width: 9px;
  height: 42px;

  border:
    1px solid
    rgba(187, 220, 203, 0.14);

  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      #071c15,
      #315f4b,
      #0b281f
    );

  box-shadow:
    2px 2px 8px
    rgba(0, 0, 0, 0.22);
}

.door-hinge-top {
  top: 35px;
}

.door-hinge-bottom {
  bottom: 35px;
}

.door-bolt {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(180, 211, 195, 0.25);

  box-shadow:
    inset 0 1px 1px
    rgba(255, 255, 255, 0.18);
}

.bolt-a {
  left: 15px;
  top: 15px;
}

.bolt-b {
  right: 15px;
  top: 15px;
}

.bolt-c {
  left: 15px;
  bottom: 15px;
}

.bolt-d {
  right: 15px;
  bottom: 15px;
}

@media (max-width: 760px) {
  .project-core-door {
    min-height: 180px;
  }

  .project-core-door-face {
    border-radius: 20px;
  }

  .project-core-door-front {
    padding:
      20px
      14px;
  }

  .project-core-fold {
    width: 34px;
    height: 34px;

    border-radius:
      0 19px 0 10px;
  }

  .project-core-fold:hover {
    width: 40px;
    height: 40px;
  }

  .project-core.is-open
  .project-core-door {
    transform:
      rotateY(-108deg);
  }

  .door-hinge {
    height: 31px;
  }

  .door-hinge-top {
    top: 25px;
  }

  .door-hinge-bottom {
    bottom: 25px;
  }
}

.project-stage {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.project-stage.is-dragging {
  cursor: grabbing;

  z-index: 20;

  box-shadow:
    0 24px 44px rgba(28, 50, 41, 0.18),
    0 0 0 1px rgba(69, 126, 101, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);

  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.services-project-map.is-dragging-stage {
  cursor: grabbing;
}

@media (max-width: 760px) {
  .project-stage {
    touch-action: auto;
    cursor: default;
  }
}

.project-stage-detail {
  --detail-origin-x: 50%;
  --detail-origin-y: 50%;

  position: absolute;

  z-index: 60;

  width: 330px;

  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.72)
    translateY(-8px);

  transform-origin:
    var(--detail-origin-x)
    var(--detail-origin-y);

  border:
    1px solid
    rgba(43, 92, 74, 0.16);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(109, 172, 139, 0.13),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(239, 247, 243, 0.96)
    );

  box-shadow:
    0 28px 65px rgba(20, 48, 37, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.28s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.42s;
}

.project-stage-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    translateY(0);

  pointer-events: auto;

  transition:
    opacity 0.28s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.project-stage-detail::before {
  content: "";

  position: absolute;

  width: 10px;
  height: 10px;

  left:
    var(--detail-origin-x);

  top:
    var(--detail-origin-y);

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

  border-radius: 50%;

  background:
    rgba(67, 129, 100, 0.38);

  box-shadow:
    0 0 0 6px rgba(67, 129, 100, 0.06);
}

.project-stage-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 19px;

  padding-bottom: 15px;

  border-bottom:
    1px solid
    rgba(43, 92, 74, 0.1);
}

.project-stage-detail-head > div {
  min-width: 0;
}

.project-stage-detail-head span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(43, 92, 74, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.project-stage-detail-head strong {
  display: block;

  color: #204336;

  font-size: 22px;
  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -0.035em;
}

.project-stage-detail-close {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

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

  padding: 0;

  border:
    1px solid
    rgba(43, 92, 74, 0.12);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.64);

  color:
    rgba(43, 92, 74, 0.58);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.project-stage-detail-close:hover {
  transform: rotate(90deg);

  background:
    rgba(231, 242, 236, 0.95);

  color: #31594a;
}

.project-brief-list {
  display: grid;

  gap: 9px;
}

.project-brief-item {
  display: grid;

  grid-template-columns:
    22px
    minmax(0, 1fr);

  gap: 10px;

  padding: 11px 12px;

  opacity: 0;

  transform:
    translateY(8px);

  border:
    1px solid
    rgba(43, 92, 74, 0.08);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.55);

  transition:
    opacity 0.36s ease,
    transform 0.36s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.project-stage-detail.is-open
.project-brief-item {
  opacity: 1;

  transform:
    translateY(0);
}

.project-stage-detail.is-open
.project-brief-item:nth-child(1) {
  transition-delay: 0.08s;
}

.project-stage-detail.is-open
.project-brief-item:nth-child(2) {
  transition-delay: 0.14s;
}

.project-stage-detail.is-open
.project-brief-item:nth-child(3) {
  transition-delay: 0.20s;
}

.project-stage-detail.is-open
.project-brief-item:nth-child(4) {
  transition-delay: 0.26s;
}

.project-brief-item:hover {
  border-color:
    rgba(43, 92, 74, 0.16);

  background:
    rgba(255, 255, 255, 0.82);
}

.project-brief-dot {
  position: relative;

  width: 17px;
  height: 17px;

  margin-top: 1px;

  border:
    1px solid
    rgba(43, 92, 74, 0.2);

  border-radius: 50%;

  background:
    rgba(224, 239, 230, 0.72);
}

.project-brief-dot::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 5px;
  height: 5px;

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

  border-radius: 50%;

  background: #4a8466;
}

.project-brief-item strong {
  display: block;

  margin-bottom: 2px;

  color: #29483c;

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

.project-brief-item p {
  margin: 0;

  color:
    rgba(42, 55, 49, 0.57);

  font-size: 8px;
  line-height: 1.5;
}

.project-brief-ready {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 16px;

  padding-top: 13px;

  border-top:
    1px solid
    rgba(43, 92, 74, 0.08);

  color:
    rgba(43, 92, 74, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.project-brief-ready span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #65a17f;

  box-shadow:
    0 0 0 4px
    rgba(101, 161, 127, 0.08);
}

@media (max-width: 760px) {
  .project-stage-detail {
    width:
      calc(100% - 24px);

    max-width: 340px;

    padding: 17px;

    border-radius: 19px;
  }

  .project-stage-detail-head strong {
    font-size: 20px;
  }

  .project-brief-item p {
    font-size: 9px;
  }
}

.project-stage::after {
  content: "";

  position: absolute;
  top: -1px;
  right: -1px;

  width: 22px;
  height: 22px;

  border-radius:
    0 16px 0 8px;

  background:
    linear-gradient(
      225deg,
      rgba(225, 240, 231, 0.98) 0%,
      rgba(188, 216, 201, 0.92) 46%,
      rgba(238, 248, 242, 0.98) 48%,
      rgba(225, 239, 231, 0.98) 100%
    );

  box-shadow:
    -4px 5px 10px rgba(31, 64, 49, 0.12);

  pointer-events: none;

  transition:
    width 0.22s ease,
    height 0.22s ease,
    filter 0.22s ease,
    transform 0.22s ease;
}

.project-stage:hover::after,
.project-stage.is-active::after {
  width: 27px;
  height: 27px;

  filter: brightness(1.04);

  transform: rotate(-2deg);
}

.project-stage::before {
  content: "";

  position: absolute;

  top: 5px;
  right: 5px;

  z-index: 2;

  width: 7px;
  height: 7px;

  border-top:
    1px solid rgba(43, 92, 74, 0.28);

  border-right:
    1px solid rgba(43, 92, 74, 0.28);

  pointer-events: none;

  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.project-stage:hover::before,
.project-stage.is-active::before {
  transform:
    translate(-2px, 2px);

  opacity: 0.9;
}

@media (max-width: 760px) {
  .project-stage::after {
    width: 18px;
    height: 18px;

    border-radius:
      0 13px 0 7px;
  }

  .project-stage:hover::after,
  .project-stage.is-active::after {
    width: 21px;
    height: 21px;
  }

  .project-stage::before {
    top: 4px;
    right: 4px;

    width: 6px;
    height: 6px;
  }
}

.project-analysis-detail {
  --analysis-origin-x: 50%;
  --analysis-origin-y: 50%;

  position: absolute;

  z-index: 65;

  width: 440px;

  padding: 20px 21px 18px;

  opacity: 0;
  visibility: hidden;

  transform:
    scaleX(0.68)
    scaleY(0.88);

  transform-origin:
    var(--analysis-origin-x)
    var(--analysis-origin-y);

  border:
    1px solid
    rgba(48, 84, 70, 0.15);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(246, 250, 248, 0.98),
      rgba(228, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px
    rgba(20, 47, 36, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.46s;
}

.project-analysis-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scaleX(1)
    scaleY(1);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.analysis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(48, 84, 70, 0.1);
}

.analysis-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(49, 91, 73, 0.46);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.analysis-head strong {
  display: block;

  max-width: 290px;

  color: #24483a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.analysis-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(48, 84, 70, 0.12);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.55);

  color:
    rgba(48, 84, 70, 0.55);

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

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.analysis-close:hover {
  transform:
    scale(1.06);

  background:
    rgba(217, 234, 225, 0.9);

  color: #24483a;
}

.analysis-flow {
  display: grid;

  grid-template-columns:
    1fr
    32px
    1fr
    32px
    0.82fr
    32px
    1fr;

  align-items: center;

  gap: 0;

  margin-top: 19px;
}

.analysis-node {
  position: relative;

  min-width: 0;

  padding:
    13px
    8px;

  text-align: center;
}

.analysis-node-label {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(44, 78, 64, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.14em;
}

.analysis-node strong {
  display: block;

  color: #27493c;

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

  line-height: 1.2;
}

.analysis-node small {
  display: block;

  margin-top: 5px;

  color:
    rgba(45, 66, 57, 0.45);

  font-size: 6px;
  line-height: 1.35;
}

.analysis-track {
  position: relative;

  height: 24px;

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.analysis-track::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 1px;

  transform:
    translateY(-50%);

  background:
    linear-gradient(
      90deg,
      rgba(72, 123, 101, 0.14),
      rgba(72, 123, 101, 0.38),
      rgba(72, 123, 101, 0.14)
    );
}

.analysis-track span {
  position: relative;

  z-index: 2;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #699d83;

  opacity: 0;
}

.project-analysis-detail.is-open
.analysis-track span {
  animation:
    analysisPacket 1.65s
    linear
    infinite;
}

.project-analysis-detail.is-open
.analysis-track span:nth-child(2) {
  animation-delay: 0.28s;
}

.project-analysis-detail.is-open
.analysis-track span:nth-child(3) {
  animation-delay: 0.56s;
}

.analysis-node-bottleneck {
  padding-left: 5px;
  padding-right: 5px;
}

.analysis-bottleneck-core {
  position: relative;

  width: 42px;
  height: 26px;

  margin:
    0 auto
    8px;

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

  gap: 3px;
}

.analysis-bottleneck-core::before,
.analysis-bottleneck-core::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 13px;
  height: 18px;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(106, 105, 69, 0.2);
}

.analysis-bottleneck-core::before {
  left: 0;

  border-right: 0;

  border-radius:
    10px 0 0 10px;
}

.analysis-bottleneck-core::after {
  right: 0;

  border-left: 0;

  border-radius:
    0 10px 10px 0;
}

.analysis-bottleneck-core i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(161, 136, 74, 0.75);

  box-shadow:
    0 0 0 4px
    rgba(161, 136, 74, 0.07);
}

.project-analysis-detail.is-open
.analysis-bottleneck-core {
  animation:
    analysisBottleneck
    1.8s
    ease-in-out
    infinite;
}

.analysis-loss-value {
  color:
    #8a6745 !important;

  font-family:
    "Roboto Mono",
    monospace;

  font-size:
    15px !important;
}

.analysis-node-fix {
  border:
    1px solid
    rgba(67, 125, 97, 0.1);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.48);
}

.analysis-node-fix::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 5px;

  width: 25px;
  height: 2px;

  transform:
    translateX(-50%);

  border-radius: 999px;

  background:
    rgba(73, 139, 106, 0.38);
}

.analysis-result {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 18px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(48, 84, 70, 0.09);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.42);
}

.analysis-result-pulse {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #579171;

  box-shadow:
    0 0 0 5px
    rgba(87, 145, 113, 0.08);
}

.project-analysis-detail.is-open
.analysis-result-pulse {
  animation:
    analysisPulse
    1.7s
    ease-in-out
    infinite;
}

.analysis-result small {
  display: block;

  color:
    rgba(48, 84, 70, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.14em;
}

.analysis-result strong {
  display: block;

  margin-top: 1px;

  color: #315848;

  font-size: 8px;
}

.analysis-result-line {
  height: 1px;

  flex: 1;

  background:
    linear-gradient(
      90deg,
      rgba(78, 128, 105, 0.18),
      rgba(78, 128, 105, 0.42)
    );
}

.analysis-result-score {
  color: #376b53;

  font-family:
    "Roboto Mono",
    monospace;

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

@keyframes analysisPacket {
  0% {
    opacity: 0;
    transform:
      translateX(-5px)
      scale(0.65);
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translateX(5px)
      scale(1);
  }
}

@keyframes analysisBottleneck {
  0%,
  100% {
    transform:
      scaleX(1);
  }

  50% {
    transform:
      scaleX(0.72);
  }
}

@keyframes analysisPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 5px
      rgba(87, 145, 113, 0.08);
  }

  50% {
    box-shadow:
      0 0 0 9px
      rgba(87, 145, 113, 0.025);
  }
}

@media (max-width: 760px) {
  .project-analysis-detail {
    width:
      calc(100% - 24px);

    max-width: 390px;

    padding:
      17px
      15px;
  }

  .analysis-flow {
    grid-template-columns:
      1fr
      20px
      1fr
      20px
      0.8fr
      20px
      1fr;
  }

  .analysis-node {
    padding:
      10px
      4px;
  }

  .analysis-node strong {
    font-size: 8px;
  }

  .analysis-node small {
    font-size: 5px;
  }
}

.project-architecture-detail {
  --architecture-origin-x: 50%;
  --architecture-origin-y: 50%;

  position: absolute;
  z-index: 66;

  width: 470px;
  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.78)
    rotateX(5deg);

  transform-origin:
    var(--architecture-origin-x)
    var(--architecture-origin-y);

  border:
    1px solid
    rgba(47, 89, 72, 0.14);

  border-radius: 21px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(102, 164, 134, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(247, 251, 248, 0.98),
      rgba(229, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px rgba(20, 47, 36, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.48s;
}

.project-architecture-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    rotateX(0deg);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.architecture-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(47, 89, 72, 0.09);
}

.architecture-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(47, 89, 72, 0.45);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.architecture-head strong {
  display: block;

  max-width: 310px;

  color: #23473a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.architecture-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(47, 89, 72, 0.12);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    rgba(47, 89, 72, 0.55);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.architecture-close:hover {
  transform:
    rotate(90deg)
    scale(1.05);

  background:
    rgba(220, 235, 227, 0.9);

  color: #23473a;
}

.architecture-map {
  position: relative;

  height: 250px;

  margin-top: 16px;

  overflow: hidden;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 16px;

  background:
    linear-gradient(
      rgba(67, 110, 91, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(67, 110, 91, 0.035) 1px,
      transparent 1px
    ),
    rgba(255, 255, 255, 0.38);

  background-size:
    22px 22px,
    22px 22px,
    auto;
}

.architecture-lines {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}

.architecture-line {
  fill: none;

  stroke:
    rgba(71, 122, 100, 0.34);

  stroke-width: 1.4;

  stroke-linecap: round;

  stroke-dasharray: 260;
  stroke-dashoffset: 260;

  transition:
    stroke-dashoffset 0.7s ease;
}

.project-architecture-detail.is-open
.architecture-line {
  stroke-dashoffset: 0;
}

.project-architecture-detail.is-open
.line-data-logic {
  transition-delay: 0.12s;
}

.project-architecture-detail.is-open
.line-logic-api {
  transition-delay: 0.26s;
}

.project-architecture-detail.is-open
.line-logic-ui {
  transition-delay: 0.34s;
}

.project-architecture-detail.is-open
.line-api-output {
  transition-delay: 0.48s;
}

.project-architecture-detail.is-open
.line-ui-output {
  transition-delay: 0.56s;
}

.architecture-node {
  position: absolute;

  width: 82px;
  min-height: 63px;

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

  padding: 9px 7px;

  opacity: 0;

  transform:
    translateY(8px)
    scale(0.9);

  border:
    1px solid
    rgba(53, 98, 79, 0.12);

  border-radius: 13px;

  background:
    rgba(248, 252, 249, 0.88);

  box-shadow:
    0 8px 20px
    rgba(29, 60, 47, 0.06);

  text-align: center;

  transition:
    opacity 0.34s ease,
    transform 0.34s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.project-architecture-detail.is-open
.architecture-node {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

.project-architecture-detail.is-open
.architecture-data {
  transition-delay: 0.08s;
}

.project-architecture-detail.is-open
.architecture-logic {
  transition-delay: 0.2s;
}

.project-architecture-detail.is-open
.architecture-api {
  transition-delay: 0.34s;
}

.project-architecture-detail.is-open
.architecture-ui {
  transition-delay: 0.42s;
}

.project-architecture-detail.is-open
.architecture-output {
  transition-delay: 0.58s;
}

.architecture-node:hover {
  border-color:
    rgba(53, 98, 79, 0.22);

  box-shadow:
    0 12px 24px
    rgba(29, 60, 47, 0.1);
}

.architecture-node span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.12em;
}

.architecture-node strong {
  display: block;

  color: #2d5544;

  font-family:
    "Roboto Mono",
    monospace;

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

.architecture-node small {
  display: block;

  margin-top: 4px;

  color:
    rgba(47, 68, 59, 0.44);

  font-size: 6px;
  line-height: 1.3;
}

.architecture-data {
  left: 22px;
  top: 93px;
}

.architecture-logic {
  left: 171px;
  top: 93px;
}

.architecture-api {
  right: 89px;
  top: 42px;
}

.architecture-ui {
  right: 89px;
  bottom: 42px;
}

.architecture-output {
  right: 15px;
  top: 93px;

  border-color:
    rgba(62, 122, 94, 0.2);

  background:
    rgba(229, 242, 234, 0.94);
}

.architecture-packet {
  position: absolute;

  z-index: 5;

  width: 5px;
  height: 5px;

  opacity: 0;

  border-radius: 50%;

  background: #5c9a78;

  box-shadow:
    0 0 0 5px
    rgba(92, 154, 120, 0.08);
}

.project-architecture-detail.is-open
.architecture-packet {
  opacity: 1;
}

.packet-a {
  left: 123px;
  top: 123px;
}

.packet-b {
  left: 285px;
  top: 75px;
}

.packet-c {
  left: 285px;
  top: 175px;
}

.project-architecture-detail.is-open
.packet-a {
  animation:
    architecturePacketA
    2.1s
    ease-in-out
    infinite;
}

.project-architecture-detail.is-open
.packet-b {
  animation:
    architecturePacketB
    2.4s
    ease-in-out
    infinite;
}

.project-architecture-detail.is-open
.packet-c {
  animation:
    architecturePacketC
    2.6s
    ease-in-out
    infinite;
}

.architecture-footer {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 14px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.42);
}

.architecture-status-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #579171;

  box-shadow:
    0 0 0 5px
    rgba(87, 145, 113, 0.07);
}

.architecture-footer small {
  display: block;

  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.13em;
}

.architecture-footer strong {
  display: block;

  margin-top: 1px;

  color: #315848;

  font-size: 8px;
}

.architecture-footer-line {
  height: 1px;

  flex: 1;

  background:
    linear-gradient(
      90deg,
      rgba(71, 122, 100, 0.18),
      rgba(71, 122, 100, 0.4)
    );
}

.architecture-version {
  color: #47725e;

  font-family:
    "Roboto Mono",
    monospace;

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

@keyframes architecturePacketA {
  0%,
  100% {
    transform:
      translateX(0)
      scale(0.7);
  }

  50% {
    transform:
      translateX(48px)
      scale(1);
  }
}

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

  50% {
    transform:
      translateX(36px)
      translateY(-22px);
  }
}

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

  50% {
    transform:
      translateX(36px)
      translateY(22px);
  }
}

@media (max-width: 760px) {
  .project-architecture-detail {
    width:
      calc(100% - 24px);

    max-width: 410px;

    padding: 16px;
  }

  .architecture-map {
    height: 225px;
  }

  .architecture-node {
    width: 70px;
    min-height: 56px;

    padding: 7px 5px;
  }

  .architecture-data {
    left: 12px;
    top: 82px;
  }

  .architecture-logic {
    left: 128px;
    top: 82px;
  }

  .architecture-api {
    right: 74px;
    top: 34px;
  }

  .architecture-ui {
    right: 74px;
    bottom: 34px;
  }

  .architecture-output {
    right: 7px;
    top: 82px;
  }
}

.project-development-detail {
  --development-origin-x: 50%;
  --development-origin-y: 50%;

  position: absolute;
  z-index: 67;

  width: 455px;
  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.8)
    translateY(10px);

  transform-origin:
    var(--development-origin-x)
    var(--development-origin-y);

  border:
    1px solid
    rgba(47, 89, 72, 0.14);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(113, 176, 145, 0.1),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(248, 251, 249, 0.98),
      rgba(228, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px rgba(20, 47, 36, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.46s;
}

.project-development-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    translateY(0);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.development-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(47, 89, 72, 0.09);
}

.development-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(47, 89, 72, 0.45);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.development-head strong {
  display: block;

  max-width: 310px;

  color: #23473a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.development-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(47, 89, 72, 0.12);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    rgba(47, 89, 72, 0.55);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.development-close:hover {
  transform:
    scale(1.06);

  background:
    rgba(220, 235, 227, 0.9);

  color: #23473a;
}

.development-board {
  display: grid;

  grid-template-columns:
    1fr
    1.05fr
    0.9fr;

  gap: 12px;

  align-items: stretch;

  margin-top: 18px;
}

.development-modules {
  display: grid;

  gap: 7px;
}

.development-module {
  position: relative;

  padding:
    9px
    10px;

  opacity: 0;

  transform:
    translateX(-12px);

  border:
    1px solid
    rgba(47, 89, 72, 0.09);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.56);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.project-development-detail.is-open
.development-module {
  opacity: 1;

  transform:
    translateX(0);
}

.project-development-detail.is-open
.module-ui {
  transition-delay: 0.08s;
}

.project-development-detail.is-open
.module-logic {
  transition-delay: 0.15s;
}

.project-development-detail.is-open
.module-data {
  transition-delay: 0.22s;
}

.project-development-detail.is-open
.module-api {
  transition-delay: 0.29s;
}

.development-module:hover {
  border-color:
    rgba(47, 89, 72, 0.18);

  background:
    rgba(255, 255, 255, 0.82);
}

.development-module span {
  display: block;

  margin-bottom: 2px;

  color:
    rgba(47, 89, 72, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.12em;
}

.development-module strong {
  display: block;

  color: #315848;

  font-size: 9px;
  font-weight: 600;
}

.development-build-zone {
  position: relative;

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

  min-height: 190px;

  padding:
    12px
    10px;

  border:
    1px solid
    rgba(47, 89, 72, 0.09);

  border-radius: 14px;

  background:
    linear-gradient(
      rgba(67, 110, 91, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(67, 110, 91, 0.03) 1px,
      transparent 1px
    ),
    rgba(255, 255, 255, 0.34);

  background-size:
    18px 18px,
    18px 18px,
    auto;
}

.development-build-core {
  position: relative;

  width: 92px;
  height: 92px;

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

  margin-bottom: 14px;
}

.build-core-ring {
  position: absolute;

  border:
    1px solid
    rgba(66, 126, 98, 0.18);

  border-radius: 50%;
}

.ring-a {
  inset: 0;
}

.ring-b {
  inset: 12px;

  border-style: dashed;
}

.project-development-detail.is-open
.ring-a {
  animation:
    developmentRotate
    8s
    linear
    infinite;
}

.project-development-detail.is-open
.ring-b {
  animation:
    developmentRotateReverse
    5s
    linear
    infinite;
}

.build-core-center {
  position: relative;

  z-index: 2;

  width: 50px;
  height: 50px;

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

  border:
    1px solid
    rgba(66, 126, 98, 0.14);

  border-radius: 12px;

  background:
    rgba(240, 247, 243, 0.9);

  box-shadow:
    0 8px 20px
    rgba(29, 60, 47, 0.08);
}

.build-core-center strong {
  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

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

.build-core-center small {
  margin-top: 2px;

  color:
    rgba(47, 89, 72, 0.4);

  font-size: 5px;
}

.development-progress {
  width: 100%;
  height: 5px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(63, 102, 85, 0.09);
}

.development-progress span {
  display: block;

  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(82, 145, 113, 0.55),
      rgba(64, 126, 97, 0.9)
    );
}

.project-development-detail.is-open
.development-progress span {
  animation:
    developmentProgress
    2.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.development-progress-label {
  margin-top: 6px;

  color:
    rgba(47, 89, 72, 0.5);

  font-family:
    "Roboto Mono",
    monospace;

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

.development-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    14px
    10px;

  opacity: 0;

  transform:
    translateX(10px);

  border:
    1px solid
    rgba(66, 126, 98, 0.1);

  border-radius: 14px;

  background:
    rgba(235, 246, 240, 0.7);

  text-align: center;

  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

.project-development-detail.is-open
.development-output {
  opacity: 1;

  transform:
    translateX(0);

  transition-delay: 1.7s;
}

.development-output-icon {
  width: 38px;
  height: 38px;

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

  margin-bottom: 9px;

  border-radius: 50%;

  background:
    rgba(83, 147, 113, 0.12);

  color: #4b8b69;

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

  box-shadow:
    0 0 0 7px
    rgba(83, 147, 113, 0.04);
}

.development-output span {
  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.14em;
}

.development-output strong {
  display: block;

  margin-top: 4px;

  color: #315848;

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

.development-output small {
  display: block;

  margin-top: 4px;

  color:
    rgba(47, 68, 59, 0.42);

  font-size: 6px;
}

.development-log {
  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  gap:
    5px
    8px;

  margin-top: 15px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.4);
}

.development-log span {
  color:
    rgba(47, 89, 72, 0.34);

  font-family:
    "Roboto Mono",
    monospace;

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

.development-log p {
  margin: 0;

  color:
    rgba(47, 68, 59, 0.5);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 6px;
  line-height: 1.35;
}

@keyframes developmentRotate {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}

@keyframes developmentRotateReverse {
  from {
    transform:
      rotate(360deg);
  }

  to {
    transform:
      rotate(0deg);
  }
}

@keyframes developmentProgress {
  0% {
    width: 0%;
  }

  25% {
    width: 28%;
  }

  55% {
    width: 63%;
  }

  82% {
    width: 88%;
  }

  100% {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .project-development-detail {
    width:
      calc(100% - 24px);

    max-width: 410px;

    padding: 16px;
  }

  .development-board {
    grid-template-columns:
      0.9fr
      1fr
      0.85fr;

    gap: 8px;
  }

  .development-module {
    padding:
      7px
      7px;
  }

  .development-module strong {
    font-size: 8px;
  }

  .development-build-zone {
    min-height: 165px;

    padding:
      9px
      7px;
  }

  .development-build-core {
    width: 74px;
    height: 74px;
  }

  .build-core-center {
    width: 44px;
    height: 44px;
  }

  .development-output {
    padding:
      10px
      7px;
  }
}

.project-integration-detail {
  --integration-origin-x: 50%;
  --integration-origin-y: 50%;

  position: absolute;
  z-index: 68;

  width: 455px;
  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.82)
    translateY(8px);

  transform-origin:
    var(--integration-origin-x)
    var(--integration-origin-y);

  border:
    1px solid
    rgba(47, 89, 72, 0.14);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(105, 168, 137, 0.11),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(248, 251, 249, 0.98),
      rgba(228, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px
    rgba(20, 47, 36, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.46s;
}

.project-integration-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    translateY(0);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.integration-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(47, 89, 72, 0.09);
}

.integration-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(47, 89, 72, 0.45);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.integration-head strong {
  display: block;

  max-width: 300px;

  color: #23473a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.integration-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(47, 89, 72, 0.12);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    rgba(47, 89, 72, 0.55);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.integration-close:hover {
  transform:
    rotate(90deg)
    scale(1.05);

  background:
    rgba(220, 235, 227, 0.9);

  color: #23473a;
}

.integration-map {
  position: relative;

  height: 245px;

  margin-top: 16px;

  overflow: hidden;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      rgba(90, 150, 119, 0.08),
      transparent 33%
    ),
    rgba(255, 255, 255, 0.36);
}

.integration-lines {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.integration-line {
  fill: none;

  stroke:
    rgba(70, 121, 99, 0.28);

  stroke-width: 1.4;

  stroke-linecap: round;

  stroke-dasharray: 240;
  stroke-dashoffset: 240;

  transition:
    stroke-dashoffset 0.62s ease;
}

.project-integration-detail.is-open
.integration-line {
  stroke-dashoffset: 0;
}

.project-integration-detail.is-open
.integration-line-crm {
  transition-delay: 0.08s;
}

.project-integration-detail.is-open
.integration-line-sheets {
  transition-delay: 0.15s;
}

.project-integration-detail.is-open
.integration-line-api {
  transition-delay: 0.22s;
}

.project-integration-detail.is-open
.integration-line-bot {
  transition-delay: 0.29s;
}

.project-integration-detail.is-open
.integration-line-drive {
  transition-delay: 0.36s;
}

.integration-hub {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 92px;
  height: 92px;

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

  display: flex;
  align-items: center;
  justify-content: center;
}

.integration-hub-ring {
  position: absolute;

  border:
    1px solid
    rgba(68, 128, 99, 0.17);

  border-radius: 50%;
}

.integration-hub
.ring-one {
  inset: 0;
}

.integration-hub
.ring-two {
  inset: 12px;

  border-style: dashed;
}

.project-integration-detail.is-open
.integration-hub
.ring-one {
  animation:
    integrationSpin
    9s
    linear
    infinite;
}

.project-integration-detail.is-open
.integration-hub
.ring-two {
  animation:
    integrationSpinReverse
    6s
    linear
    infinite;
}

.integration-hub-core {
  position: relative;

  z-index: 2;

  width: 50px;
  height: 50px;

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

  border:
    1px solid
    rgba(66, 126, 98, 0.15);

  border-radius: 14px;

  background:
    rgba(239, 247, 243, 0.92);

  box-shadow:
    0 10px 24px
    rgba(29, 60, 47, 0.09);
}

.integration-hub-core strong {
  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

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

.integration-hub-core small {
  margin-top: 2px;

  color:
    rgba(47, 89, 72, 0.4);

  font-size: 5px;
}

.integration-system {
  position: absolute;

  width: 80px;
  min-height: 52px;

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

  padding: 8px 7px;

  opacity: 0;

  transform:
    scale(0.86);

  border:
    1px solid
    rgba(47, 89, 72, 0.1);

  border-radius: 12px;

  background:
    rgba(248, 252, 249, 0.9);

  box-shadow:
    0 8px 18px
    rgba(29, 60, 47, 0.06);

  text-align: center;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.project-integration-detail.is-open
.integration-system {
  opacity: 1;
  transform: scale(1);
}

.project-integration-detail.is-open
.integration-crm {
  transition-delay: 0.08s;
}

.project-integration-detail.is-open
.integration-sheets {
  transition-delay: 0.14s;
}

.project-integration-detail.is-open
.integration-api {
  transition-delay: 0.2s;
}

.project-integration-detail.is-open
.integration-bot {
  transition-delay: 0.26s;
}

.project-integration-detail.is-open
.integration-drive {
  transition-delay: 0.32s;
}

.integration-system:hover {
  border-color:
    rgba(47, 89, 72, 0.2);

  background:
    rgba(255, 255, 255, 0.96);
}

.integration-system span {
  display: block;

  margin-bottom: 3px;

  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.12em;
}

.integration-system strong {
  display: block;

  color: #315848;

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

.integration-crm {
  left: 40px;
  top: 32px;
}

.integration-sheets {
  right: 40px;
  top: 32px;
}

.integration-api {
  left: 24px;
  bottom: 24px;
}

.integration-bot {
  left: 50%;
  bottom: 11px;

  transform:
    translateX(-50%)
    scale(0.86);
}

.project-integration-detail.is-open
.integration-bot {
  transform:
    translateX(-50%)
    scale(1);
}

.integration-drive {
  right: 24px;
  bottom: 24px;
}

.integration-packet {
  position: absolute;

  z-index: 4;

  width: 5px;
  height: 5px;

  opacity: 0;

  border-radius: 50%;

  background: #5c9a78;

  box-shadow:
    0 0 0 5px
    rgba(92, 154, 120, 0.07);
}

.project-integration-detail.is-open
.integration-packet {
  opacity: 1;
}

.packet-one {
  left: 150px;
  top: 100px;
}

.packet-two {
  right: 150px;
  top: 100px;
}

.packet-three {
  left: 145px;
  bottom: 70px;
}

.packet-four {
  left: 50%;
  bottom: 54px;

  margin-left: -2px;
}

.packet-five {
  right: 145px;
  bottom: 70px;
}

.project-integration-detail.is-open
.packet-one {
  animation:
    integrationPacketLeftTop
    2.4s
    ease-in-out
    infinite;
}

.project-integration-detail.is-open
.packet-two {
  animation:
    integrationPacketRightTop
    2.6s
    ease-in-out
    infinite;
}

.project-integration-detail.is-open
.packet-three {
  animation:
    integrationPacketLeftBottom
    2.8s
    ease-in-out
    infinite;
}

.project-integration-detail.is-open
.packet-four {
  animation:
    integrationPacketBottom
    2.3s
    ease-in-out
    infinite;
}

.project-integration-detail.is-open
.packet-five {
  animation:
    integrationPacketRightBottom
    2.7s
    ease-in-out
    infinite;
}

.integration-status {
  display: grid;

  grid-template-columns:
    1fr
    1px
    1fr
    1px
    1fr;

  align-items: center;

  gap: 12px;

  margin-top: 14px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.42);
}

.integration-status > i {
  width: 1px;
  height: 22px;

  background:
    rgba(47, 89, 72, 0.09);
}

.integration-status div {
  text-align: center;
}

.integration-status span {
  display: block;

  color:
    rgba(47, 89, 72, 0.38);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.12em;
}

.integration-status strong {
  display: block;

  margin-top: 3px;

  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;
}

@keyframes integrationSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes integrationSpinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes integrationPacketLeftTop {
  0%,
  100% {
    transform:
      translate(-34px, -25px)
      scale(0.7);
  }

  50% {
    transform:
      translate(31px, 20px)
      scale(1);
  }
}

@keyframes integrationPacketRightTop {
  0%,
  100% {
    transform:
      translate(34px, -25px)
      scale(0.7);
  }

  50% {
    transform:
      translate(-31px, 20px)
      scale(1);
  }
}

@keyframes integrationPacketLeftBottom {
  0%,
  100% {
    transform:
      translate(-34px, 24px)
      scale(0.7);
  }

  50% {
    transform:
      translate(29px, -18px)
      scale(1);
  }
}

@keyframes integrationPacketBottom {
  0%,
  100% {
    transform:
      translateY(27px)
      scale(0.7);
  }

  50% {
    transform:
      translateY(-26px)
      scale(1);
  }
}

@keyframes integrationPacketRightBottom {
  0%,
  100% {
    transform:
      translate(34px, 24px)
      scale(0.7);
  }

  50% {
    transform:
      translate(-29px, -18px)
      scale(1);
  }
}

@media (max-width: 760px) {
  .project-integration-detail {
    width:
      calc(100% - 24px);

    max-width: 410px;

    padding: 16px;
  }

  .integration-map {
    height: 220px;
  }

  .integration-system {
    width: 68px;
    min-height: 46px;
  }

  .integration-crm {
    left: 24px;
    top: 24px;
  }

  .integration-sheets {
    right: 24px;
    top: 24px;
  }

  .integration-api {
    left: 12px;
    bottom: 18px;
  }

  .integration-drive {
    right: 12px;
    bottom: 18px;
  }
}

.project-testing-detail {
  --testing-origin-x: 50%;
  --testing-origin-y: 50%;

  position: absolute;
  z-index: 69;

  width: 450px;
  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.84)
    translateY(10px);

  transform-origin:
    var(--testing-origin-x)
    var(--testing-origin-y);

  border:
    1px solid
    rgba(47, 89, 72, 0.14);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(249, 251, 250, 0.98),
      rgba(229, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px
    rgba(20, 47, 36, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.44s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.44s;
}

.project-testing-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    translateY(0);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.44s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.testing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(47, 89, 72, 0.09);
}

.testing-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(47, 89, 72, 0.45);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.testing-head strong {
  display: block;

  max-width: 300px;

  color: #23473a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.testing-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(47, 89, 72, 0.12);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    rgba(47, 89, 72, 0.55);

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

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.testing-close:hover {
  transform: scale(1.06);

  background:
    rgba(220, 235, 227, 0.9);

  color: #23473a;
}

.testing-summary {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 15px;
}

.testing-summary div {
  padding:
    9px
    10px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.48);

  text-align: center;
}

.testing-summary span {
  display: block;

  color:
    rgba(47, 89, 72, 0.38);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.12em;
}

.testing-summary strong {
  display: block;

  margin-top: 3px;

  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 14px;
}

.testing-matrix {
  display: grid;

  gap: 6px;

  margin-top: 13px;
}

.testing-row {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    58px;

  align-items: center;

  gap: 10px;

  padding:
    9px
    10px;

  opacity: 0;

  transform:
    translateX(-10px);

  border:
    1px solid
    rgba(47, 89, 72, 0.07);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.46);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.project-testing-detail.is-open
.testing-row {
  opacity: 1;

  transform:
    translateX(0);
}

.project-testing-detail.is-open
.testing-row:nth-child(1) {
  transition-delay: 0.06s;
}

.project-testing-detail.is-open
.testing-row:nth-child(2) {
  transition-delay: 0.12s;
}

.project-testing-detail.is-open
.testing-row:nth-child(3) {
  transition-delay: 0.18s;
}

.project-testing-detail.is-open
.testing-row:nth-child(4) {
  transition-delay: 0.24s;
}

.project-testing-detail.is-open
.testing-row:nth-child(5) {
  transition-delay: 0.3s;
}

.testing-row:hover {
  background:
    rgba(255, 255, 255, 0.72);

  border-color:
    rgba(47, 89, 72, 0.14);
}

.testing-row-retest {
  background:
    rgba(249, 245, 233, 0.62);

  border-color:
    rgba(164, 126, 62, 0.12);
}

.testing-id {
  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

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

.testing-row div strong {
  display: block;

  color: #315848;

  font-size: 9px;
  font-weight: 600;
}

.testing-row div small {
  display: block;

  margin-top: 2px;

  color:
    rgba(47, 68, 59, 0.42);

  font-size: 6px;
  line-height: 1.3;
}

.testing-status {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;

  border-radius: 999px;

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.08em;
}

.testing-status.is-pass {
  color: #4e8068;

  background:
    rgba(79, 139, 105, 0.1);

  border:
    1px solid
    rgba(79, 139, 105, 0.12);
}

.testing-status.is-retest {
  color: #8a6a42;

  background:
    rgba(172, 139, 76, 0.1);

  border:
    1px solid
    rgba(172, 139, 76, 0.14);
}

.testing-footer {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 14px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.42);
}

.testing-shield {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

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

  border:
    1px solid
    rgba(79, 139, 105, 0.14);

  border-radius:
    9px 9px 13px 13px;

  background:
    rgba(79, 139, 105, 0.08);

  color: #4e8068;

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

.testing-footer small {
  display: block;

  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.13em;
}

.testing-footer strong {
  display: block;

  margin-top: 2px;

  color: #315848;

  font-size: 8px;
}

.testing-footer-line {
  height: 1px;

  flex: 1;

  background:
    linear-gradient(
      90deg,
      rgba(71, 122, 100, 0.18),
      rgba(71, 122, 100, 0.4)
    );
}

.testing-score {
  color: #47725e;

  font-family:
    "Roboto Mono",
    monospace;

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

.project-testing-detail.is-open
.testing-row-retest {
  animation:
    testingRetestPulse
    2.1s
    ease-in-out
    infinite;
}

@keyframes testingRetestPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 0
      rgba(171, 137, 75, 0);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px
      rgba(171, 137, 75, 0.16),
      0 0 18px
      rgba(171, 137, 75, 0.05);
  }
}

@media (max-width: 760px) {
  .project-testing-detail {
    width:
      calc(100% - 24px);

    max-width: 410px;

    padding: 16px;
  }

  .testing-row {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      52px;

    gap: 7px;

    padding:
      8px
      8px;
  }

  .testing-row div strong {
    font-size: 8px;
  }

  .testing-row div small {
    font-size: 5px;
  }

  .testing-status {
    font-size: 5px;
  }
}

.project-launch-detail {
  --launch-origin-x: 50%;
  --launch-origin-y: 50%;

  position: absolute;
  z-index: 70;

  width: 455px;
  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    scale(0.84)
    translateY(10px);

  transform-origin:
    var(--launch-origin-x)
    var(--launch-origin-y);

  border:
    1px solid
    rgba(47, 89, 72, 0.14);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(99, 168, 133, 0.12),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(249, 251, 250, 0.98),
      rgba(228, 240, 234, 0.97)
    );

  box-shadow:
    0 30px 70px
    rgba(20, 47, 36, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  pointer-events: none;

  transition:
    opacity 0.24s ease,
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.46s;
}

.project-launch-detail.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    scale(1)
    translateY(0);

  pointer-events: auto;

  transition:
    opacity 0.24s ease,
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding-bottom: 13px;

  border-bottom:
    1px solid
    rgba(47, 89, 72, 0.09);
}

.launch-head span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(47, 89, 72, 0.45);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.16em;
}

.launch-head strong {
  display: block;

  max-width: 300px;

  color: #23473a;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.15;
}

.launch-close {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(47, 89, 72, 0.12);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    rgba(47, 89, 72, 0.55);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.launch-close:hover {
  transform:
    rotate(90deg)
    scale(1.05);

  background:
    rgba(220, 235, 227, 0.9);

  color: #23473a;
}

.launch-panel {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 14px;

  margin-top: 17px;
}

.launch-readiness {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 160px;

  padding: 14px;

  border:
    1px solid
    rgba(47, 89, 72, 0.09);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.44);

  text-align: center;
}

.launch-readiness-ring {
  position: relative;

  width: 84px;
  height: 84px;

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

  margin-bottom: 12px;

  border-radius: 50%;

  background:
    conic-gradient(
      #5c9a78 0deg,
      #5c9a78 360deg
    );

  box-shadow:
    0 0 0 8px
    rgba(92, 154, 120, 0.05);
}

.launch-readiness-ring::before {
  content: "";

  position: absolute;

  inset: 8px;

  border-radius: 50%;

  background:
    #edf5f0;
}

.launch-readiness-ring span {
  position: relative;
  z-index: 2;

  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

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

.launch-readiness small {
  display: block;

  color:
    rgba(47, 89, 72, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.14em;
}

.launch-readiness strong {
  display: block;

  margin-top: 3px;

  color: #315848;

  font-size: 10px;
}

.launch-checklist {
  display: grid;

  gap: 7px;
}

.launch-check {
  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  align-items: center;

  gap: 9px;

  padding:
    9px
    10px;

  opacity: 0;

  transform:
    translateX(10px);

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.48);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.project-launch-detail.is-open
.launch-check {
  opacity: 1;

  transform:
    translateX(0);
}

.project-launch-detail.is-open
.launch-check:nth-child(1) {
  transition-delay: 0.08s;
}

.project-launch-detail.is-open
.launch-check:nth-child(2) {
  transition-delay: 0.14s;
}

.project-launch-detail.is-open
.launch-check:nth-child(3) {
  transition-delay: 0.2s;
}

.project-launch-detail.is-open
.launch-check:nth-child(4) {
  transition-delay: 0.26s;
}

.launch-check > span {
  width: 28px;
  height: 28px;

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

  border-radius: 50%;

  background:
    rgba(82, 143, 109, 0.1);

  color: #4d8868;

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

  box-shadow:
    0 0 0 5px
    rgba(82, 143, 109, 0.03);
}

.launch-check strong {
  display: block;

  color: #315848;

  font-size: 9px;
  font-weight: 600;
}

.launch-check small {
  display: block;

  margin-top: 2px;

  color:
    rgba(47, 68, 59, 0.42);

  font-size: 6px;
}

.launch-timeline {
  display: grid;

  grid-template-columns:
    1fr
    18px
    1fr
    18px
    1fr
    18px
    1fr;

  align-items: center;

  gap: 0;

  margin-top: 15px;

  padding:
    12px
    10px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.4);
}

.launch-timeline > i {
  height: 1px;

  background:
    rgba(70, 121, 99, 0.22);
}

.launch-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.launch-timeline-step > span {
  width: 10px;
  height: 10px;

  margin-bottom: 6px;

  border:
    1px solid
    rgba(67, 112, 93, 0.18);

  border-radius: 50%;

  background:
    rgba(225, 236, 230, 0.9);
}

.launch-timeline-step.is-complete
> span {
  background: #6a9f83;

  border-color:
    rgba(76, 133, 103, 0.25);
}

.launch-timeline-step.is-current
> span {
  background: #4f8e6d;

  box-shadow:
    0 0 0 6px
    rgba(79, 142, 109, 0.08);
}

.project-launch-detail.is-open
.launch-timeline-step.is-current
> span {
  animation:
    launchCurrentPulse
    1.8s
    ease-in-out
    infinite;
}

.launch-timeline-step strong {
  color: #315848;

  font-family:
    "Roboto Mono",
    monospace;

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

.launch-timeline-step small {
  margin-top: 2px;

  color:
    rgba(47, 89, 72, 0.38);

  font-size: 5px;
}

.launch-status {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 14px;

  padding:
    11px
    12px;

  border:
    1px solid
    rgba(47, 89, 72, 0.08);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.44);
}

.launch-status-light {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: #4d996e;

  box-shadow:
    0 0 0 6px
    rgba(77, 153, 110, 0.07);
}

.project-launch-detail.is-open
.launch-status-light {
  animation:
    launchOnlinePulse
    1.6s
    ease-in-out
    infinite;
}

.launch-status small {
  display: block;

  color:
    rgba(47, 89, 72, 0.39);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  letter-spacing: 0.13em;
}

.launch-status strong {
  display: block;

  margin-top: 2px;

  color: #315848;

  font-size: 9px;
}

.launch-status-line {
  height: 1px;

  flex: 1;

  background:
    linear-gradient(
      90deg,
      rgba(71, 122, 100, 0.18),
      rgba(71, 122, 100, 0.42)
    );
}

.launch-time {
  text-align: right;
}

.launch-time strong {
  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;
}

@keyframes launchCurrentPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 6px
      rgba(79, 142, 109, 0.08);
  }

  50% {
    box-shadow:
      0 0 0 10px
      rgba(79, 142, 109, 0.025);
  }
}

@keyframes launchOnlinePulse {
  0%,
  100% {
    opacity: 1;

    box-shadow:
      0 0 0 6px
      rgba(77, 153, 110, 0.07);
  }

  50% {
    opacity: 0.72;

    box-shadow:
      0 0 0 10px
      rgba(77, 153, 110, 0.02);
  }
}

@media (max-width: 760px) {
  .project-launch-detail {
    width:
      calc(100% - 24px);

    max-width: 410px;

    padding: 16px;
  }

  .launch-panel {
    grid-template-columns:
      0.9fr
      1.1fr;

    gap: 9px;
  }

  .launch-readiness {
    min-height: 145px;

    padding: 10px;
  }

  .launch-readiness-ring {
    width: 70px;
    height: 70px;
  }

  .launch-check {
    grid-template-columns:
      25px
      minmax(0, 1fr);

    gap: 6px;

    padding:
      7px
      7px;
  }

  .launch-check > span {
    width: 24px;
    height: 24px;
  }

  .launch-timeline {
    grid-template-columns:
      1fr
      12px
      1fr
      12px
      1fr
      12px
      1fr;

    padding:
      10px
      6px;
  }
}

.development-module.is-built {
  border-color:
    rgba(71, 133, 102, 0.22);

  background:
    rgba(235, 246, 240, 0.96);

  box-shadow:
    0 8px 18px
    rgba(59, 111, 86, 0.08);
}

.development-module.is-built::after {
  content: "✓";

  position: absolute;

  right: 8px;
  top: 50%;

  transform:
    translateY(-50%);

  color: #4f8b69;

  font-family:
    "Roboto Mono",
    monospace;

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

.development-output.is-ready {
  border-color:
    rgba(71, 133, 102, 0.2);

  background:
    rgba(229, 244, 236, 0.94);

  box-shadow:
    0 12px 26px
    rgba(59, 111, 86, 0.1);
}

.development-output.is-ready
.development-output-icon {
  transform: scale(1.08);

  background:
    rgba(83, 147, 113, 0.16);

  box-shadow:
    0 0 0 9px
    rgba(83, 147, 113, 0.045);

  transition:
    transform 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.testing-row-retest.is-fixed {
  border-color:
    rgba(79, 139, 105, 0.16);

  background:
    rgba(235, 246, 240, 0.78);

  animation: none;
}

.testing-row-retest.is-fixed
.testing-status {
  transform: scale(1.03);

  box-shadow:
    0 0 0 5px
    rgba(79, 139, 105, 0.04);

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.project-line {
  transition:
    stroke 0.25s ease,
    stroke-width 0.25s ease,
    opacity 0.25s ease;
}

.project-line.is-data-active {
  stroke:
    rgba(77, 143, 108, 0.55);

  stroke-width: 1.8;
}

.project-data-packet {
  position: absolute;

  z-index: 8;

  width: 6px;
  height: 6px;

  margin:
    -3px
    0
    0
    -3px;

  border-radius: 50%;

  background:
    rgba(86, 158, 119, 0.95);

  box-shadow:
    0 0 0 5px
    rgba(86, 158, 119, 0.07),
    0 0 14px
    rgba(86, 158, 119, 0.22);

  opacity: 0;

  pointer-events: none;

  transform:
    translate3d(
      var(--packet-x, 0px),
      var(--packet-y, 0px),
      0
    )
    scale(0.7);

  will-change:
    transform,
    opacity;
}

.project-data-packet.is-moving {
  opacity: 1;
}

.project-data-packet.is-arriving {
  transform:
    translate3d(
      var(--packet-x, 0px),
      var(--packet-y, 0px),
      0
    )
    scale(1.2);
}

.project-core.is-data-receiving
.project-core-cabinet {
  box-shadow:
    inset 0 0 0 1px
    rgba(188, 225, 207, 0.12),
    inset 0 0 18px
    rgba(0, 0, 0, 0.16),
    0 25px 50px
    rgba(7, 34, 25, 0.25),
    0 0 0 7px
    rgba(76, 146, 109, 0.04),
    0 0 24px
    rgba(76, 146, 109, 0.11);
}

.project-stage.is-data-sending {
  border-color:
    rgba(63, 130, 98, 0.22);

  box-shadow:
    0 18px 34px
    rgba(28, 50, 41, 0.12),
    0 0 0 5px
    rgba(74, 143, 107, 0.04);
}

@media (
  prefers-reduced-motion: reduce
) {
  .project-data-packet {
    display: none;
  }
}

.services-project-map.is-booting
.project-core {
  opacity: 0.58;

  transition:
    opacity 0.35s ease,
    filter 0.35s ease;
}

.services-project-map.is-booting
.project-core {
  filter:
    brightness(0.86)
    saturate(0.88);
}

.services-project-map.is-booting
.project-line {
  opacity: 0.08;

  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.services-project-map.is-booting
.project-stage {
  opacity: 0.32;

  transform:
    scale(0.92);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.services-project-map.boot-core-on
.project-core {
  opacity: 1;

  filter:
    brightness(1)
    saturate(1);
}

.services-project-map.boot-lines-on
.project-line {
  opacity: 0.42;

  stroke-dashoffset: 0;

  transition:
    stroke-dashoffset 0.5s ease,
    opacity 0.4s ease;
}

.services-project-map
.project-stage.is-boot-active {
  opacity: 1;

  transform:
    scale(1.05);

  border-color:
    rgba(70, 137, 103, 0.22);

  box-shadow:
    0 16px 30px
    rgba(31, 60, 47, 0.1),
    0 0 0 6px
    rgba(75, 145, 108, 0.035);
}

  .services-project-map.is-boot-complete
  .project-core {
    opacity: 1;
    filter: none;
  }

.services-project-map.is-boot-complete
.project-core {
  opacity: 1;
}

.services-project-map.is-boot-complete
.project-line {
  opacity: 1;

  stroke-dashoffset: 0;
}

@media (
  prefers-reduced-motion: reduce
) {
  .services-project-map.is-booting
  .project-core,
  .services-project-map.is-booting
  .project-stage,
  .services-project-map.is-booting
  .project-line {
    opacity: 1;

    transform: none;

    stroke-dashoffset: 0;
  }
}

.ecosystem-core {
  perspective: 1100px;
  perspective-origin: 50% 45%;

  transform-style: preserve-3d;

  overflow: visible;

  padding: 0;
  border: 0;

  background: transparent;

  box-shadow: none;
}

.ecosystem-life-scene,
.ecosystem-core-door {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border-radius: 28px;
}

.ecosystem-life-scene {
  z-index: 1;

  overflow: hidden;

  border:
    2px solid
    rgba(27, 74, 56, 0.72);

  border-radius: 28px;

  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 31, 23, 0.08),
      rgba(8, 31, 23, 0.16)
    ),
    url("/services/assets/ecosystemsmall.webp");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 123% auto;

  box-shadow:
    inset 0 0 22px
    rgba(0, 0, 0, 0.16),
    0 24px 48px
    rgba(10, 39, 29, 0.19);
}
.ecosystem-core-door {
  z-index: 4;

  transform-origin: left center;
  transform-style: preserve-3d;

  transform:
    rotateY(0deg);

  transition:
    transform 0.92s
    cubic-bezier(0.2, 0.72, 0.18, 1);

  will-change: transform;
}

.ecosystem-core.is-open
.ecosystem-core-door {
  transform:
    rotateY(-112deg);
}

.ecosystem-core-door-face {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 28px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ecosystem-core-door-front {
  z-index: 2;

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

  padding:
    28px
    24px;

  border:
    1px solid
    rgba(183, 229, 205, 0.25);

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(111, 181, 147, 0.18),
      transparent 46%
    ),
    linear-gradient(
      150deg,
      #245842,
      #143d2f 58%,
      #0c2f24
    );

  color: #ffffff;

  text-align: center;

  box-shadow:
    0 28px 56px
    rgba(15, 53, 40, 0.25),
    inset 0 1px 0
    rgba(255, 255, 255, 0.14);
}

.ecosystem-core-door-back {
  z-index: 1;

  transform:
    rotateY(180deg);

  border:
    1px solid
    rgba(170, 211, 190, 0.15);

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(67, 121, 94, 0.15),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      #163d30,
      #0c2e24 60%,
      #08241c
    );

  box-shadow:
    inset 0 0 0 2px
    rgba(255, 255, 255, 0.02),
    inset 0 0 30px
    rgba(0, 0, 0, 0.2),
    10px 20px 34px
    rgba(5, 27, 20, 0.2);
}

.ecosystem-core-fold {
  position: absolute;

  top: -1px;
  right: -1px;

  z-index: 20;

  width: 42px;
  height: 42px;

  padding: 0;
  border: 0;

  border-radius:
    0 27px 0 13px;

  cursor: pointer;

  background:
    linear-gradient(
      225deg,
      #d9ebdf 0%,
      #a8cbb7 46%,
      #205340 48%,
      #123b2e 100%
    );

  box-shadow:
    -6px 7px 13px
    rgba(4, 28, 20, 0.18);

  transition:
    width 0.25s ease,
    height 0.25s ease,
    filter 0.25s ease;
}

.ecosystem-core-fold:hover {
  width: 52px;
  height: 52px;

  filter:
    brightness(1.07);
}

.ecosystem-core-fold::before {
  content: "";

  position: absolute;

  right: 7px;
  top: 7px;

  width: 11px;
  height: 11px;

  border-top:
    1px solid
    rgba(29, 80, 59, 0.38);

  border-right:
    1px solid
    rgba(29, 80, 59, 0.38);
}

.ecosystem-core-fold::after {
  content: "";

  position: absolute;

  left: 7px;
  bottom: 7px;

  width: 15px;
  height: 1px;

  transform:
    rotate(-45deg);

  background:
    rgba(221, 241, 230, 0.48);
}

.ecosystem-core-door-front
.ecosystem-core-orbit {
  position: relative;

  width: 92px;
  height: 92px;

  margin-bottom: 12px;
}

.ecosystem-core-door-front
.ecosystem-core-chart {
  position: absolute;

  top: 72px;
}

.ecosystem-core-door-front
h3 {
  margin:
    8px
    0
    0;

  color: #ffffff;
}

.ecosystem-core-door-front
p {
  margin:
    13px
    0
    0;

  color:
    rgba(232, 243, 237, 0.66);
}

.ecosystem-core-door-front
.ecosystem-core-status {
  margin-top: 18px;
}

.ecosystem-core-close {
  position: absolute;

  right: 13px;
  top: 13px;

  z-index: 10;

  width: 29px;
  height: 29px;

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

  padding: 0;

  border:
    1px solid
    rgba(183, 220, 202, 0.14);

  border-radius: 50%;

  background:
    rgba(5, 30, 22, 0.34);

  color:
    rgba(199, 228, 213, 0.68);

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

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.ecosystem-core-close:hover {
  transform:
    translateX(-2px);

  background:
    rgba(54, 105, 80, 0.5);

  color: #ffffff;
}

.ecosystem-hinge {
  position: absolute;

  left: -4px;

  width: 9px;
  height: 42px;

  border:
    1px solid
    rgba(187, 220, 203, 0.14);

  border-radius: 4px;

  background:
    linear-gradient(
      90deg,
      #071c15,
      #315f4b,
      #0b281f
    );

  box-shadow:
    2px 2px 8px
    rgba(0, 0, 0, 0.22);
}

.ecosystem-hinge-top {
  top: 40px;
}

.ecosystem-hinge-bottom {
  bottom: 40px;
}

.ecosystem-door-back-rib {
  position: absolute;

  left: 22px;
  right: 22px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(139, 186, 162, 0.12),
      rgba(195, 224, 208, 0.19),
      rgba(139, 186, 162, 0.12),
      transparent
    );
}

.ecosystem-door-back-rib.rib-a {
  top: 28%;
}

.ecosystem-door-back-rib.rib-b {
  top: 50%;
}

.ecosystem-door-back-rib.rib-c {
  top: 72%;
}

.ecosystem-door-bolt {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(180, 211, 195, 0.25);
}

.ecosystem-door-bolt.bolt-a {
  left: 15px;
  top: 15px;
}

.ecosystem-door-bolt.bolt-b {
  right: 15px;
  top: 15px;
}

.ecosystem-door-bolt.bolt-c {
  left: 15px;
  bottom: 15px;
}

.ecosystem-door-bolt.bolt-d {
  right: 15px;
  bottom: 15px;
}

.ecosystem-life-overlay {
  position: absolute;

  left: 12px;
  top: 12px;

  z-index: 2;

  display: grid;

  gap: 5px;

  opacity: 0;

  transform:
    translateY(-6px);

  transition:
    opacity 0.4s ease 0.35s,
    transform 0.4s ease 0.35s;
}

.ecosystem-core.is-open
.ecosystem-life-overlay {
  opacity: 1;

  transform:
    translateY(0);
}

.ecosystem-life-stat {
  width: max-content;

  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 7px;

  background:
    rgba(9, 33, 25, 0.56);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ecosystem-life-stat span {
  display: block;

  color:
    rgba(223, 241, 231, 0.5);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 4px;

  letter-spacing: 0.12em;
}

.ecosystem-life-stat strong {
  display: block;

  margin-top: 1px;

  color:
    rgba(238, 249, 243, 0.92);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 6px;
}

.ecosystem-life-deeper {
  position: absolute;

  left: 50%;
  bottom: 13px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    8px
    12px;

  opacity: 0;

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

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 999px;

  background:
    rgba(8, 32, 24, 0.62);

  color:
    rgba(244, 250, 247, 0.94);

  font-size: 7px;
  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  transition:
    opacity 0.4s ease 0.55s,
    transform 0.4s ease 0.55s,
    background 0.2s ease;
}

.ecosystem-core.is-open
.ecosystem-life-deeper {
  opacity: 1;

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

.ecosystem-life-deeper:hover {
  background:
    rgba(19, 59, 44, 0.82);
}

@media (max-width: 760px) {
  .ecosystem-life-scene,
  .ecosystem-core-door,
  .ecosystem-core-door-face {
    border-radius: 20px;
  }

  .ecosystem-core.is-open
  .ecosystem-core-door {
    transform:
      rotateY(-108deg);
  }

  .ecosystem-core-fold {
    width: 34px;
    height: 34px;

    border-radius:
      0 19px 0 10px;
  }

  .ecosystem-hinge {
    height: 31px;
  }

  .ecosystem-hinge-top {
    top: 26px;
  }

  .ecosystem-hinge-bottom {
    bottom: 26px;
  }
}

.ecosystem-reality-view {
  position: fixed;
  inset: 0;

  z-index: 120;

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

  padding: 28px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.ecosystem-reality-view.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    opacity 0.3s ease,
    visibility 0s;
}

.ecosystem-reality-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(7, 22, 17, 0.66);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ecosystem-reality-panel {
  position: relative;

  z-index: 2;

  width:
    min(
      calc(100vw - 56px),
      1180px
    );

  min-height: 620px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(280px, 0.72fr);

  overflow: hidden;

  border:
    1px solid
    rgba(172, 213, 193, 0.16);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      #102d23,
      #0a221a
    );

  box-shadow:
    0 40px 90px
    rgba(0, 0, 0, 0.34);

  transform:
    translateY(18px)
    scale(0.96);

  transition:
    transform 0.46s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.ecosystem-reality-view.is-open
.ecosystem-reality-panel {
  transform:
    translateY(0)
    scale(1);
}

.ecosystem-reality-close {
  position: absolute;

  right: 18px;
  top: 18px;

  z-index: 12;

  width: 38px;
  height: 38px;

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

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  background:
    rgba(7, 27, 20, 0.52);

  color:
    rgba(244, 250, 247, 0.86);

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

  cursor: pointer;

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.ecosystem-reality-close:hover {
  transform:
    rotate(90deg);

  background:
    rgba(29, 72, 54, 0.78);
}

.ecosystem-reality-scene {
  position: relative;

  min-height: 620px;

  overflow: hidden;
}

.ecosystem-reality-image {
  position: absolute;
  inset: -18px;

  background-image:
    linear-gradient(
      to right,
      rgba(5, 23, 17, 0.08),
      rgba(5, 23, 17, 0.02)
    ),
    url("/services/assets/ecosystembig.webp");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  transform:
    translate3d(
      var(--reality-x, 0px),
      var(--reality-y, 0px),
      0
    )
    scale(1.04);

  will-change: transform;

  transition:
    transform 0.14s linear;
}

.ecosystem-reality-live {
  position: absolute;

  left: 28px;
  top: 28px;

  z-index: 4;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  width: min(420px, 56%);
}

.reality-live-card {
  padding:
    10px
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 12px;

  background:
    rgba(12, 40, 30, 0.42);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 24px
    rgba(4, 20, 15, 0.12);
}

.reality-live-card span {
  display: block;

  color:
    rgba(232, 245, 238, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 6px;

  letter-spacing: 0.13em;
}

.reality-live-card strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(247, 252, 249, 0.96);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 9px;
}

.reality-live-card small {
  display: block;

  margin-top: 3px;

  color:
    rgba(232, 245, 238, 0.5);

  font-size: 6px;
}

.ecosystem-reality-copy {
  position: relative;

  z-index: 3;

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

  padding:
    74px
    46px
    44px;

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(83, 145, 111, 0.11),
      transparent 38%
    ),
    linear-gradient(
      160deg,
      #123427,
      #0b251c
    );
}

.ecosystem-reality-kicker {
  margin-bottom: 14px;

  color:
    rgba(151, 196, 172, 0.62);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.18em;
}

.ecosystem-reality-copy h3 {
  margin: 0;

  color: #ffffff;

  font-size: 34px;
  font-weight: 600;

  line-height: 1.08;

  letter-spacing: -0.04em;
}

.ecosystem-reality-copy p {
  margin:
    20px
    0
    0;

  color:
    rgba(232, 243, 237, 0.62);

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

.ecosystem-reality-benefits {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;

  margin-top: 28px;
}

.ecosystem-reality-benefits div {
  padding:
    12px
    13px;

  border:
    1px solid
    rgba(173, 211, 191, 0.1);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.025);
}

.ecosystem-reality-benefits span {
  display: block;

  color:
    rgba(143, 188, 164, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 6px;
}

.ecosystem-reality-benefits strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(245, 250, 247, 0.9);

  font-size: 10px;
  font-weight: 600;
}

.ecosystem-reality-status {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top: 26px;

  color:
    rgba(151, 196, 172, 0.62);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.14em;
}

.ecosystem-reality-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #67a982;

  box-shadow:
    0 0 0 5px
    rgba(103, 169, 130, 0.08);
}

.ecosystem-reality-view.is-open
.reality-live-card {
  animation:
    realityCardIn
    0.5s
    ease
    both;
}

.ecosystem-reality-view.is-open
.reality-live-card:nth-child(2) {
  animation-delay: 0.08s;
}

.ecosystem-reality-view.is-open
.reality-live-card:nth-child(3) {
  animation-delay: 0.16s;
}

.ecosystem-reality-view.is-open
.reality-live-card:nth-child(4) {
  animation-delay: 0.24s;
}

@keyframes realityCardIn {
  from {
    opacity: 0;

    transform:
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@media (max-width: 900px) {
  .ecosystem-reality-panel {
    grid-template-columns:
      1fr;

    max-height:
      calc(100vh - 36px);

    overflow-y: auto;
  }

  .ecosystem-reality-scene {
    min-height: 470px;
  }

  .ecosystem-reality-copy {
    padding:
      36px
      28px
      34px;
  }

  .ecosystem-reality-copy h3 {
    font-size: 29px;
  }
}

@media (max-width: 760px) {
  .ecosystem-reality-view {
    padding: 12px;
  }

  .ecosystem-reality-panel {
    width: 100%;

    border-radius: 20px;
  }

  .ecosystem-reality-scene {
    min-height: 390px;
  }

  .ecosystem-reality-live {
    left: 14px;
    top: 14px;

    width:
      calc(100% - 28px);

    grid-template-columns:
      repeat(2, 1fr);
  }

  .ecosystem-reality-copy {
    padding:
      28px
      20px
      26px;
  }

  .ecosystem-reality-copy h3 {
    font-size: 25px;
  }

  .ecosystem-reality-copy p {
    font-size: 12px;
  }
}

.reality-hotspot {
  position: absolute;

  z-index: 8;

  border: 1px solid
    rgba(121, 208, 161, 0);

  border-radius: 12px;

  background:
    rgba(76, 153, 111, 0);

  cursor: pointer;

  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.reality-hotspot:hover {
  border-color:
    rgba(112, 196, 150, 0.34);

  background:
    rgba(76, 153, 111, 0.06);

  box-shadow:
    0 0 0 5px
    rgba(76, 153, 111, 0.035),
    0 0 22px
    rgba(76, 153, 111, 0.12);

  transform:
    scale(1.03);
}

.reality-hotspot-laptop {
  left: 69%;
  top: 66%;

  width: 21%;
  height: 24%;

  transform:
    rotate(4deg);
}

.reality-hotspot-laptop:hover {
  transform:
    rotate(4deg)
    scale(1.03);
}

.ecosystem-detail-view {
  position: fixed;
  inset: 0;

  z-index: 180;

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

  padding: 28px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.ecosystem-detail-view.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    opacity 0.5s ease,
    visibility 0s;
}

.ecosystem-detail-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(5, 18, 13, 0.18);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.ecosystem-detail-panel {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      58vw
    );

  aspect-ratio: 16 / 10;

  overflow: hidden;

  margin-left: 10vw;

  border:
    1px solid
    rgba(126, 191, 157, 0.2);

  border-radius: 22px;

  background:
    #071b14;

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, 0.34);

  transform:
    translate(
      18vw,
      18vh
    )
    scale(0.28);

  transform-origin:
    50% 50%;

  opacity: 0;

  transition:
    transform 1.15s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    opacity 0.55s ease;
}

.ecosystem-detail-view.is-open
.ecosystem-detail-panel {
  transform:
    translate(
      8vw,
      0
    )
    scale(1);

  opacity: 1;
}

.ecosystem-detail-image {
  position: absolute;
  inset: 0;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ecosystem-detail-close {
  position: absolute;

  right: 16px;
  top: 16px;

  z-index: 6;

  width: 40px;
  height: 40px;

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

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  background:
    rgba(5, 24, 17, 0.72);

  color: #ffffff;

  font-size: 23px;

  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.ecosystem-detail-close:hover {
  transform:
    rotate(90deg);

  background:
    rgba(29, 74, 54, 0.9);
}

.ecosystem-detail-panel {
  position: fixed;

  z-index: 181;

  right: 7vw;
  top: 18vh;

  width:
    min(
      650px,
      43vw
    );

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border:
    1px solid
    rgba(126, 191, 157, 0.2);

  border-radius: 20px;

  background:
    #071b14;

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, 0.32);

  opacity: 0;

  transform:
    translate(
      -7vw,
      42vh
    )
    scale(0.16);

  transform-origin:
    left bottom;

  transition:
    transform 1.35s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    opacity 0.55s ease;
}

.ecosystem-detail-view.is-open
.ecosystem-detail-panel {
  opacity: 1;

  transform:
    translate(
      0,
      0
    )
    scale(1);
}

.ecosystem-detail-tail {
  position: fixed;
  inset: 0;

  z-index: 179;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      125deg,
      rgba(67, 157, 113, 0.04),
      rgba(78, 165, 120, 0.18),
      rgba(126, 211, 164, 0.10)
    );

  clip-path:
    polygon(
      51% 73%,
      56% 78%,
      58% 62%,
      58% 40%
    );

  filter:
    drop-shadow(
      0 10px 22px
      rgba(14, 52, 37, 0.12)
    );

  transition:
    clip-path 1.35s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    opacity 0.4s ease;
}

.ecosystem-detail-view.is-open
.ecosystem-detail-tail {
  opacity: 1;

  clip-path:
    polygon(
      51% 73%,
      56% 78%,
      58% 64%,
      58% 37%
    );
}

.ecosystem-detail-tail::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      125deg,
      transparent 46%,
      rgba(205, 244, 222, 0.09) 56%,
      transparent 69%
    );
}

@media (max-width: 760px) {
  .ecosystem-detail-view {
    padding: 12px;
  }

  .ecosystem-detail-panel {
    right: 4vw;
    top: 14vh;

    width: 72vw;

    border-radius: 18px;

    transform:
      translate(
        -4vw,
        40vh
      )
      scale(0.18);
  }

  .ecosystem-detail-view.is-open
  .ecosystem-detail-panel {
    transform:
      translate(
        0,
        0
      )
      scale(1);
  }

  .ecosystem-detail-tail {
    display: none;
  }
}

.ecosystem-detail-panel {
  right: 5vw;
  top: 16vh;

  width: min(610px, 40vw);

  margin: 0;

  transform-origin:
    left bottom;

  transform:
    translate(
      var(--detail-start-x, 0px),
      var(--detail-start-y, 0px)
    )
    scale(0.12);

  opacity: 0;

  transition:
    transform 1.45s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    opacity 0.45s ease;
}

.ecosystem-detail-view.is-open
.ecosystem-detail-panel {
  transform:
    translate(
      0,
      0
    )
    scale(1);

  opacity: 1;
}

.ecosystem-detail-tail {
  clip-path:
    polygon(
      var(--tail-x1, 50%)
      var(--tail-y1, 70%),

      var(--tail-x2, 52%)
      var(--tail-y2, 72%),

      var(--tail-x1, 50%)
      var(--tail-y1, 70%),

      var(--tail-x2, 52%)
      var(--tail-y2, 72%)
    );
}

.ecosystem-detail-view.is-open
.ecosystem-detail-tail {
  clip-path:
    polygon(
      var(--tail-x1, 50%)
      var(--tail-y1, 70%),

      var(--tail-x2, 52%)
      var(--tail-y2, 72%),

      var(--tail-panel-x2, 70%)
      var(--tail-panel-y2, 55%),

      var(--tail-panel-x1, 70%)
      var(--tail-panel-y1, 45%)
    );
}

.reality-hotspot-line {
  left: 57.5%;
  top: 18%;

  width: 14.5%;
  height: 17%;

  transform:
    rotate(-2deg);
}

.reality-hotspot-line:hover {
  transform:
    rotate(-2deg)
    scale(1.04);
}

.reality-hotspot-donut {
  left: 74.5%;
  top: 27%;

  width: 11%;
  height: 12%;

  border-radius: 12px;

  transform:
    rotate(2deg);
}

.reality-hotspot-donut:hover {
  transform:
    rotate(2deg)
    scale(1.04);
}

.reality-hotspot-bars {
  left: 64.5%;
  top: 40%;

  width: 20.5%;
  height: 18%;

  transform:
    rotate(2deg);
}

.reality-hotspot-bars:hover {
  transform:
    rotate(2deg)
    scale(1.04);
}

.ecosystem-service {
  overflow: hidden;
}

.ecosystem-service-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.ecosystem-mini {
  position: absolute;

  right: 14px;
  bottom: 12px;

  z-index: 2;

  width: 112px;
  height: 52px;

  opacity: 0;

  transform:
    translateY(8px)
    scale(0.94);

  pointer-events: none;

  transition:
    opacity 0.32s ease,
    transform 0.38s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

.ecosystem-service:hover
.ecosystem-mini,
.ecosystem-service.is-active
.ecosystem-mini {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

.ecosystem-mini-powerbi {
  overflow: hidden;

  border:
    1px solid
    rgba(52, 105, 82, 0.12);

  border-radius: 10px;

  background:
    rgba(241, 248, 244, 0.74);
}

.mini-bi-grid {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(57, 108, 86, 0.06)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(57, 108, 86, 0.06)
      1px,
      transparent 1px
    );

  background-size:
    18px 13px;
}

.mini-bi-line {
  position: absolute;

  left: 7px;
  right: 7px;
  bottom: 6px;

  width:
    calc(100% - 14px);

  height: 37px;

  overflow: visible;
}

.mini-bi-line polyline {
  fill: none;

  stroke:
    rgba(63, 129, 97, 0.72);

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.mini-bi-line circle {
  fill: #4d8969;

  opacity: 0;

  transform-origin: center;
}

.ecosystem-service:hover
.mini-bi-line polyline,
.ecosystem-service.is-active
.mini-bi-line polyline {
  animation:
    miniBiLine
    0.8s
    ease
    forwards;
}

.ecosystem-service:hover
.mini-bi-line circle,
.ecosystem-service.is-active
.mini-bi-line circle {
  animation:
    miniBiPoint
    0.3s
    ease
    0.55s
    forwards;
}

.mini-bi-value {
  position: absolute;

  right: 6px;
  top: 4px;

  color: #3c7459;

  font-family:
    "Roboto Mono",
    monospace;

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

  opacity: 0;

  transform:
    translateY(-3px);
}

.ecosystem-service:hover
.mini-bi-value,
.ecosystem-service.is-active
.mini-bi-value {
  animation:
    miniBiValue
    0.35s
    ease
    0.65s
    forwards;
}

.ecosystem-mini-excel {
  display: grid;

  grid-template-rows:
    1fr
    auto;

  gap: 4px;
}

.mini-excel-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  grid-template-rows:
    repeat(3, 1fr);

  gap: 2px;
}

.mini-excel-grid span {
  border:
    1px solid
    rgba(49, 101, 78, 0.12);

  border-radius: 2px;

  background:
    rgba(245, 250, 247, 0.8);

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.ecosystem-service:hover
.mini-excel-grid span:nth-child(3),
.ecosystem-service.is-active
.mini-excel-grid span:nth-child(3) {
  animation:
    excelCell
    0.9s
    ease
    infinite;
}

.ecosystem-service:hover
.mini-excel-grid span:nth-child(6),
.ecosystem-service.is-active
.mini-excel-grid span:nth-child(6) {
  animation:
    excelCell
    0.9s
    ease
    0.15s
    infinite;
}

.ecosystem-service:hover
.mini-excel-grid span:nth-child(9),
.ecosystem-service.is-active
.mini-excel-grid span:nth-child(9) {
  animation:
    excelCell
    0.9s
    ease
    0.3s
    infinite;
}

.ecosystem-service:hover
.mini-excel-grid span:nth-child(12),
.ecosystem-service.is-active
.mini-excel-grid span:nth-child(12) {
  animation:
    excelResult
    0.9s
    ease
    0.45s
    infinite;
}

.mini-excel-formula {
  padding:
    2px
    4px;

  border-radius: 4px;

  background:
    rgba(231, 242, 236, 0.9);

  color:
    rgba(47, 89, 72, 0.62);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 5px;

  white-space: nowrap;
}

.ecosystem-mini-apps {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;
}

.mini-apps-node {
  min-width: 27px;

  padding:
    5px
    4px;

  border:
    1px solid
    rgba(47, 89, 72, 0.1);

  border-radius: 6px;

  background:
    rgba(247, 251, 248, 0.9);

  color:
    rgba(47, 89, 72, 0.58);

  font-family:
    "Roboto Mono",
    monospace;

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

  text-align: center;
}

.mini-apps-node.is-result {
  background:
    rgba(221, 240, 229, 0.95);

  color: #397357;
}

.mini-apps-link {
  color:
    rgba(47, 89, 72, 0.34);

  font-size: 10px;
}

.mini-apps-packet {
  position: absolute;

  left: 13px;
  top: 50%;

  width: 5px;
  height: 5px;

  margin-top: -2.5px;

  border-radius: 50%;

  background: #559473;

  opacity: 0;

  box-shadow:
    0 0 0 4px
    rgba(85, 148, 115, 0.07);
}

.ecosystem-service:hover
.mini-apps-packet,
.ecosystem-service.is-active
.mini-apps-packet {
  animation:
    appsPacket
    1.6s
    ease-in-out
    infinite;
}

.ecosystem-mini-integration {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;
}

.mini-api-system {
  min-width: 31px;

  padding:
    6px
    5px;

  border:
    1px solid
    rgba(47, 89, 72, 0.11);

  border-radius: 7px;

  background:
    rgba(247, 251, 248, 0.9);

  color:
    rgba(47, 89, 72, 0.62);

  font-family:
    "Roboto Mono",
    monospace;

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

  text-align: center;
}

.mini-api-channel {
  position: relative;

  width: 32px;
  height: 1px;

  background:
    rgba(54, 111, 85, 0.2);
}

.mini-api-packet {
  position: absolute;

  top: 50%;

  width: 5px;
  height: 5px;

  margin-top: -2.5px;

  border-radius: 50%;

  background: #579372;

  opacity: 0;
}

.mini-api-packet.packet-a {
  left: 0;
}

.mini-api-packet.packet-b {
  right: 0;
}

.ecosystem-service:hover
.mini-api-packet.packet-a,
.ecosystem-service.is-active
.mini-api-packet.packet-a {
  animation:
    apiPacketA
    1.3s
    ease-in-out
    infinite;
}

.ecosystem-service:hover
.mini-api-packet.packet-b,
.ecosystem-service.is-active
.mini-api-packet.packet-b {
  animation:
    apiPacketB
    1.3s
    ease-in-out
    infinite;
}

.ecosystem-mini-process {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;
}

.mini-process-before,
.mini-process-after {
  display: flex;

  gap: 2px;
}

.mini-process-before span,
.mini-process-after span {
  width: 13px;
  height: 13px;

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

  border:
    1px solid
    rgba(47, 89, 72, 0.11);

  border-radius: 4px;

  background:
    rgba(247, 251, 248, 0.88);

  color:
    rgba(47, 89, 72, 0.55);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 4px;
}

.mini-process-before
.is-remove {
  color:
    rgba(133, 86, 64, 0.58);

  background:
    rgba(246, 235, 230, 0.88);
}

.ecosystem-service:hover
.mini-process-before
.is-remove,
.ecosystem-service.is-active
.mini-process-before
.is-remove {
  animation:
    processRemove
    1.25s
    ease
    infinite;
}

.mini-process-after span {
  background:
    rgba(225, 241, 232, 0.95);

  color: #42765c;
}

.mini-process-arrow {
  color:
    rgba(47, 89, 72, 0.4);

  font-size: 11px;
}

.ecosystem-mini-data {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
}

.mini-data-chaos,
.mini-data-clean {
  position: relative;

  width: 42px;
  height: 38px;
}

.mini-data-chaos span,
.mini-data-clean span {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 2px;

  background:
    rgba(67, 124, 96, 0.58);

  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

.mini-data-chaos span:nth-child(1) {
  left: 2px;
  top: 4px;
}

.mini-data-chaos span:nth-child(2) {
  left: 16px;
  top: 1px;
}

.mini-data-chaos span:nth-child(3) {
  right: 3px;
  top: 7px;
}

.mini-data-chaos span:nth-child(4) {
  left: 7px;
  top: 16px;
}

.mini-data-chaos span:nth-child(5) {
  left: 21px;
  top: 13px;
}

.mini-data-chaos span:nth-child(6) {
  right: 1px;
  top: 20px;
}

.mini-data-chaos span:nth-child(7) {
  left: 3px;
  bottom: 2px;
}

.mini-data-chaos span:nth-child(8) {
  left: 18px;
  bottom: 5px;
}

.mini-data-chaos span:nth-child(9) {
  right: 5px;
  bottom: 1px;
}

.mini-data-clean {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  grid-template-rows:
    repeat(3, 1fr);

  gap: 3px;
}

.mini-data-clean span {
  position: static;

  width: auto;
  height: auto;

  border-radius: 2px;

  background:
    rgba(79, 145, 111, 0.62);

  opacity: 0;
}

.ecosystem-service:hover
.mini-data-clean span,
.ecosystem-service.is-active
.mini-data-clean span {
  animation:
    dataClean
    0.5s
    ease
    forwards;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(2),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(2) {
  animation-delay: 0.05s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(3),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(3) {
  animation-delay: 0.1s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(4),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(4) {
  animation-delay: 0.15s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(5),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(5) {
  animation-delay: 0.2s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(6),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(6) {
  animation-delay: 0.25s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(7),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(7) {
  animation-delay: 0.3s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(8),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(8) {
  animation-delay: 0.35s;
}

.ecosystem-service:hover
.mini-data-clean span:nth-child(9),
.ecosystem-service.is-active
.mini-data-clean span:nth-child(9) {
  animation-delay: 0.4s;
}

.mini-data-arrow {
  color:
    rgba(47, 89, 72, 0.4);

  font-size: 11px;
}

@keyframes miniBiLine {
  from {
    stroke-dashoffset: 150;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes miniBiPoint {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes miniBiValue {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes excelCell {
  0%,
  100% {
    background:
      rgba(245, 250, 247, 0.8);

    transform:
      scale(1);
  }

  50% {
    background:
      rgba(199, 229, 212, 0.95);

    transform:
      scale(1.08);
  }
}

@keyframes excelResult {
  0%,
  100% {
    background:
      rgba(245, 250, 247, 0.8);
  }

  50% {
    background:
      rgba(118, 181, 145, 0.75);

    border-color:
      rgba(70, 137, 103, 0.35);
  }
}

@keyframes appsPacket {
  0% {
    left: 13px;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: 94px;
    opacity: 0;
  }
}

@keyframes apiPacketA {
  0% {
    left: 0;
    opacity: 0;
  }

  20%,
  80% {
    opacity: 1;
  }

  100% {
    left: 27px;
    opacity: 0;
  }
}

@keyframes apiPacketB {
  0% {
    right: 0;
    opacity: 0;
  }

  20%,
  80% {
    opacity: 1;
  }

  100% {
    right: 27px;
    opacity: 0;
  }
}

@keyframes processRemove {
  0%,
  35% {
    opacity: 1;

    transform:
      scale(1);
  }

  65%,
  100% {
    opacity: 0;

    transform:
      scale(0.45);
  }
}

@keyframes dataClean {
  from {
    opacity: 0;

    transform:
      scale(0.5);
  }

  to {
    opacity: 1;

    transform:
      scale(1);
  }
}

@media (max-width: 900px) {
  .ecosystem-mini {
    width: 100px;
  }
}

@media (max-width: 760px) {
  .ecosystem-mini {
    right: 12px;
    bottom: 10px;

    width: 96px;
    height: 44px;

    opacity: 0.72;

    transform: none;
  }
}

.ecosystem-service-fold {
  position: absolute;
  top: 0;
  right: 0;

  width: 34px;
  height: 34px;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;

  z-index: 8;
}

.ecosystem-service-fold::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 34px;
  height: 34px;

  background:
    linear-gradient(
      225deg,
      rgba(255, 255, 255, 0) 0 48%,
      rgba(58, 110, 85, 0.12) 49% 51%,
      rgba(232, 241, 236, 0.98) 52% 100%
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%
    );

  transition:
    transform 0.32s ease,
    filter 0.32s ease;
}

.ecosystem-service-fold::after {
  content: "";

  position: absolute;

  top: 7px;
  right: 7px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(57, 116, 87, 0.46);

  box-shadow:
    0 0 0 4px rgba(57, 116, 87, 0.06);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.ecosystem-service-fold span {
  position: absolute;

  top: 1px;
  right: 1px;

  width: 22px;
  height: 22px;

  border-top:
    1px solid rgba(53, 105, 81, 0.15);

  border-right:
    1px solid rgba(53, 105, 81, 0.15);

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%
    );

  opacity: 0.7;
}

.ecosystem-service-fold:hover::before {
  transform:
    translate(-2px, 2px)
    rotate(-2deg);

  filter:
    drop-shadow(
      -2px 3px 4px
      rgba(26, 61, 46, 0.12)
    );
}

.ecosystem-service-fold:hover::after {
  transform: scale(1.25);

  background:
    rgba(55, 126, 89, 0.78);

  box-shadow:
    0 0 0 6px
    rgba(55, 126, 89, 0.08);
}

.ecosystem-service-fold:focus-visible {
  outline:
    2px solid
    rgba(55, 126, 89, 0.42);

  outline-offset: 3px;

  border-radius: 5px;
}

.ecosystem-service:hover
.ecosystem-service-fold::before {
  transform:
    translate(-1px, 1px);
}

@media (max-width: 760px) {
  .ecosystem-service-fold {
    width: 38px;
    height: 38px;
  }

  .ecosystem-service-fold::before {
    width: 38px;
    height: 38px;
  }

  .ecosystem-service-fold::after {
    top: 8px;
    right: 8px;

    width: 6px;
    height: 6px;
  }
}

.ecosystem-diagnostic {
  position: fixed;
  inset: 0;
  z-index: 140;

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

  padding: 28px;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.ecosystem-diagnostic.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.ecosystem-diagnostic-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(14, 28, 23, 0.58);

  backdrop-filter: blur(10px);
}

.ecosystem-diagnostic-panel {
  position: relative;
  z-index: 2;

  width:
    min(
      calc(100vw - 56px),
      900px
    );

  max-height:
    calc(100vh - 56px);

  overflow-y: auto;

  padding: 34px;

  border:
    1px solid
    rgba(83, 137, 110, 0.18);

  border-radius: 26px;

  background:
    rgba(247, 249, 246, 0.98);

  box-shadow:
    0 28px 80px
    rgba(12, 31, 23, 0.26);

  transform:
    translateY(18px)
    scale(0.98);

  transition:
    transform 0.42s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.ecosystem-diagnostic.is-open
.ecosystem-diagnostic-panel {
  transform:
    translateY(0)
    scale(1);
}

.ecosystem-diagnostic-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 36px;
  height: 36px;

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

  border:
    1px solid
    rgba(55, 104, 82, 0.14);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.72);

  color: #315b48;

  font-size: 20px;

  cursor: pointer;
}

.ecosystem-diagnostic-main {
  display: block;
}

.ecosystem-diagnostic-kicker {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  color:
    rgba(49, 88, 70, 0.52);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.13em;
}

.ecosystem-diagnostic-kicker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 30px;
  height: 22px;

  padding: 0 7px;

  border-radius: 7px;

  background:
    rgba(75, 139, 106, 0.1);

  color: #3e795b;
}

.ecosystem-diagnostic-main > h3 {
  margin:
    0
    52px
    26px
    0;

  color: #243d33;

  font-size:
    clamp(
      24px,
      3vw,
      38px
    );

  font-weight: 500;

  line-height: 1.1;
}

.ecosystem-diagnostic-columns {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    42px
    minmax(0, 1fr);

  align-items: stretch;

  gap: 14px;
}

.ecosystem-diagnostic-block {
  min-height: 210px;

  padding: 22px;

  border-radius: 20px;

  border:
    1px solid
    rgba(48, 89, 71, 0.1);
}

.ecosystem-diagnostic-block.is-pain {
  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 247, 0.96),
      rgba(247, 238, 232, 0.75)
    );
}

.ecosystem-diagnostic-block.is-solution {
  background:
    linear-gradient(
      145deg,
      rgba(243, 250, 246, 0.98),
      rgba(224, 241, 231, 0.84)
    );
}

.ecosystem-diagnostic-label {
  display: block;

  margin-bottom: 18px;

  color:
    rgba(49, 88, 70, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.14em;
}

.ecosystem-diagnostic-block strong {
  display: block;

  margin-bottom: 12px;

  color: #29483a;

  font-size: 16px;
  font-weight: 600;

  line-height: 1.3;
}

.ecosystem-diagnostic-block p {
  margin: 0;

  color:
    rgba(37, 64, 53, 0.7);

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

.ecosystem-diagnostic-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  color:
    rgba(56, 107, 82, 0.42);

  font-size: 24px;
}

.ecosystem-diagnostic-impact {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-top: 14px;
}

.ecosystem-diagnostic-impact > div {
  padding: 13px 15px;

  border:
    1px solid
    rgba(51, 98, 76, 0.09);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.56);
}

.ecosystem-diagnostic-impact span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(48, 90, 70, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
}

.ecosystem-diagnostic-impact strong {
  color: #315e49;

  font-size: 10px;
  font-weight: 600;
}

.ecosystem-diagnostic-start {
  width: 100%;

  margin-top: 18px;

  padding: 16px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;
  border-radius: 14px;

  background: #315f49;

  color: #fff;

  font-family: inherit;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.ecosystem-diagnostic-start:hover {
  transform: translateY(-2px);

  background: #254d3a;
}

.ecosystem-quiz,
.ecosystem-quiz-result {
  display: none;
}

.ecosystem-quiz.is-active,
.ecosystem-quiz-result.is-active {
  display: block;
}

.ecosystem-diagnostic-main.is-hidden {
  display: none;
}

.ecosystem-quiz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 30px;
}

.ecosystem-quiz-head > div:first-child > span {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(49, 89, 70, 0.46);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;
  letter-spacing: 0.14em;
}

.ecosystem-quiz-head strong {
  color: #284638;

  font-size: 24px;
  font-weight: 500;
}

.ecosystem-quiz-progress {
  width: 150px;
}

.ecosystem-quiz-progress > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(47, 86, 68, 0.55);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;

  text-align: right;
}

.ecosystem-quiz-progress > div {
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(51, 102, 78, 0.09);
}

.ecosystem-quiz-progress i {
  display: block;

  width: 33%;
  height: 100%;

  border-radius: inherit;

  background: #4b8b69;

  transition:
    width 0.35s ease;
}

.ecosystem-quiz-question > span {
  display: block;

  margin-bottom: 10px;

  color:
    rgba(45, 87, 67, 0.48);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;
}

.ecosystem-quiz-question h4 {
  margin:
    0
    0
    22px;

  color: #29483a;

  font-size: 20px;
  font-weight: 500;

  line-height: 1.35;
}

.ecosystem-quiz-options {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;
}

.ecosystem-quiz-option {
  min-height: 72px;

  padding: 14px 16px;

  border:
    1px solid
    rgba(49, 96, 73, 0.11);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.68);

  color: #315542;

  font-family: inherit;

  font-size: 11px;

  text-align: left;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.ecosystem-quiz-option:hover {
  transform: translateY(-2px);

  border-color:
    rgba(65, 127, 96, 0.3);

  background:
    rgba(232, 244, 237, 0.86);
}

.ecosystem-quiz-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 24px;
}

.ecosystem-quiz-back {
  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(45, 84, 66, 0.66);

  font-family: inherit;

  font-size: 10px;

  cursor: pointer;
}

.ecosystem-quiz-footer > span {
  color:
    rgba(47, 84, 67, 0.4);

  font-size: 9px;
}

.ecosystem-result-score {
  margin-bottom: 18px;
}

.ecosystem-result-score span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(46, 87, 68, 0.46);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;

  letter-spacing: 0.12em;
}

.ecosystem-result-score strong {
  color: #3f7b5c;

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 42px;
}

.ecosystem-quiz-result > h3 {
  margin: 0 0 12px;

  color: #274538;

  font-size: 27px;
  font-weight: 500;
}

.ecosystem-quiz-result > p {
  max-width: 680px;

  margin: 0;

  color:
    rgba(38, 67, 55, 0.7);

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

.ecosystem-result-metrics {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-top: 22px;
}

.ecosystem-result-metrics > div {
  padding: 14px;

  border-radius: 14px;

  background:
    rgba(226, 241, 233, 0.76);
}

.ecosystem-result-metrics span {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(42, 81, 62, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
}

.ecosystem-result-metrics strong {
  color: #315f49;

  font-size: 11px;
}

.ecosystem-result-summary {
  margin-top: 16px;

  padding: 16px;

  border:
    1px solid
    rgba(50, 99, 75, 0.1);

  border-radius: 14px;
}

.ecosystem-result-summary > span {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(46, 83, 66, 0.44);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
}

.ecosystem-result-summary p {
  margin: 0;

  color:
    rgba(35, 64, 52, 0.72);

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

.ecosystem-result-actions {
  display: flex;

  gap: 10px;

  margin-top: 18px;
}

.ecosystem-result-send,
.ecosystem-result-restart {
  min-height: 44px;

  padding:
    0
    16px;

  border-radius: 12px;

  font-family: inherit;

  font-size: 10px;

  cursor: pointer;
}

.ecosystem-result-send {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;

  background: #315f49;

  color: #fff;
}

.ecosystem-result-restart {
  border:
    1px solid
    rgba(48, 94, 72, 0.14);

  background:
    rgba(255, 255, 255, 0.72);

  color: #315542;
}

.ecosystem-result-note {
  display: block;

  margin-top: 12px;

  color:
    rgba(44, 79, 63, 0.4);

  font-size: 8px;
}

@media (max-width: 760px) {
  .ecosystem-diagnostic {
    align-items: flex-start;

    padding:
      72px
      12px
      18px;
  }

  .ecosystem-diagnostic-panel {
    width: 100%;
    max-height:
      calc(100vh - 90px);

    padding:
      25px
      16px
      20px;

    border-radius: 20px;
  }

  .ecosystem-diagnostic-columns {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .ecosystem-diagnostic-arrow {
    height: 25px;

    transform: rotate(90deg);
  }

  .ecosystem-diagnostic-block {
    min-height: 0;
  }

  .ecosystem-diagnostic-impact,
  .ecosystem-result-metrics {
    grid-template-columns: 1fr;
  }

  .ecosystem-quiz-options {
    grid-template-columns: 1fr;
  }

  .ecosystem-quiz-head {
    display: block;
  }

  .ecosystem-quiz-progress {
    width: 100%;

    margin-top: 18px;
  }

  .ecosystem-result-actions {
    flex-direction: column;
  }

  .ecosystem-result-send {
    flex: none;
  }
}

.ecosystem-wire {
  position: absolute;

  height: 1px;

  background:
    rgba(67, 125, 99, 0.32);

  pointer-events: none;

  z-index: 1;

  transform-origin: center;
}

.wire-left-1 {
  left: 31.5%;
  top: 32%;

  width: 18%;

  transform:
    rotate(35deg);
}

.wire-left-2 {
  left: 31.5%;
  top: 50%;

  width: 18%;

  transform:
    rotate(0deg);
}

.wire-left-3 {
  left: 31.5%;
  top: 68%;

  width: 18%;

  transform:
    rotate(-35deg);
}

.wire-right-1 {
  right: 31.5%;
  top: 32%;

  width: 18%;

  transform:
    rotate(-35deg);
}

.wire-right-2 {
  right: 31.5%;
  top: 50%;

  width: 18%;

  transform:
    rotate(0deg);
}

.wire-right-3 {
  right: 31.5%;
  top: 68%;

  width: 18%;

  transform:
    rotate(35deg);
}

@media (max-width: 760px) {
  .ecosystem-wire {
    display: none;
  }
}
.services-capabilities button {
  appearance: none;
  -webkit-appearance: none;

  padding: 9px 14px;

  border:
    1px solid
    rgba(53, 105, 81, 0.12);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.62);

  color:
    rgba(48, 88, 69, 0.72);

  font-family: inherit;
  font-size: inherit;

  cursor: pointer;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.services-capabilities button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(54, 113, 85, 0.25);

  background:
    rgba(235, 246, 240, 0.94);

  color:
    #315f49;

  box-shadow:
    0 7px 18px
    rgba(32, 72, 53, 0.07);
}

.services-capabilities button.is-active {
  border-color:
    rgba(55, 120, 88, 0.32);

  background:
    rgba(221, 240, 230, 0.96);

  color:
    #28543f;

  box-shadow:
    inset 0 0 0 1px
    rgba(67, 130, 99, 0.05);
}

.services-capabilities button:focus-visible {
  outline:
    2px solid
    rgba(55, 126, 89, 0.32);

  outline-offset: 3px;
}

.capability-detail {
  position: relative;

  width:
    min(
      760px,
      calc(100% - 32px)
    );

  max-height: 0;

  margin:
    0
    auto;

  padding:
    0
    26px;

  overflow: hidden;

  border:
    1px solid
    transparent;

  border-radius: 20px;

  background:
    rgba(247, 250, 248, 0);

  opacity: 0;

  transform:
    translateY(12px)
    scale(0.985);

  pointer-events: none;

  transition:
    max-height 0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    margin 0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    padding 0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    opacity 0.28s ease,
    transform 0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    border-color 0.3s ease,
    background 0.3s ease;
}

.capability-detail.is-open {
  max-height: 260px;

  margin:
    16px
    auto
    2px;

  padding:
    22px
    26px;

  border-color:
    rgba(52, 103, 79, 0.12);

  background:
    linear-gradient(
      145deg,
      rgba(250, 252, 250, 0.98),
      rgba(231, 243, 236, 0.94)
    );

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  pointer-events: auto;

  box-shadow:
    0 16px 38px
    rgba(29, 67, 49, 0.08);
}

.capability-detail::before {
  content: "";

  position: absolute;

  top: 0;
  left: 26px;

  width: 46px;
  height: 2px;

  border-radius: 999px;

  background:
    rgba(68, 139, 104, 0.5);
}

.capability-detail-close {
  position: absolute;

  top: 13px;
  right: 15px;

  width: 30px;
  height: 30px;

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

  padding: 0;

  border:
    1px solid
    rgba(48, 94, 72, 0.11);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.68);

  color:
    rgba(43, 79, 62, 0.64);

  font-family: inherit;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.capability-detail-close:hover {
  transform:
    rotate(90deg);

  background:
    rgba(255, 255, 255, 0.96);
}

.capability-detail-kicker {
  margin-bottom: 8px;

  color:
    rgba(49, 91, 71, 0.43);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
  font-weight: 600;

  letter-spacing: 0.16em;
}

.capability-detail h3 {
  margin:
    0
    46px
    8px
    0;

  color: #294a3b;

  font-size: 18px;
  font-weight: 600;

  line-height: 1.25;
}

.capability-detail > p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(37, 66, 54, 0.68);

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

.capability-detail-result {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-top: 15px;

  padding-top: 13px;

  border-top:
    1px solid
    rgba(48, 95, 72, 0.08);
}

.capability-detail-result span {
  flex: 0 0 auto;

  color:
    rgba(47, 87, 68, 0.4);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
  font-weight: 600;

  letter-spacing: 0.12em;
}

.capability-detail-result strong {
  color: #32634c;

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

  line-height: 1.45;
}

@media (max-width: 760px) {
  .services-capabilities button {
    padding:
      9px
      12px;
  }

  .capability-detail {
    width:
      calc(100% - 12px);

    padding:
      0
      17px;

    border-radius: 17px;
  }

  .capability-detail.is-open {
    max-height: 340px;

    margin-top: 14px;

    padding:
      20px
      17px;
  }

  .capability-detail::before {
    left: 17px;
  }

  .capability-detail h3 {
    font-size: 16px;
  }

  .capability-detail > p {
    font-size: 10px;
  }

  .capability-detail-result {
    align-items: flex-start;

    flex-direction: column;

    gap: 5px;
  }
}
.services-capabilities button {
  position: relative;

  padding-right: 30px;

  overflow: hidden;
}

.services-capabilities button::after {
  content: "↗";

  position: absolute;

  top: 50%;
  right: 11px;

  transform:
    translateY(-50%)
    translateX(-3px);

  color:
    rgba(48, 97, 73, 0.42);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 8px;

  opacity: 0;

  transition:
    opacity 0.2s ease,
    transform 0.25s ease,
    color 0.2s ease;
}

.services-capabilities button:hover::after,
.services-capabilities button.is-active::after {
  opacity: 1;

  transform:
    translateY(-50%)
    translateX(0);

  color:
    rgba(45, 103, 75, 0.78);
}

.services-capabilities button::before {
  content: "";

  position: absolute;

  left: 12px;
  right: 28px;
  bottom: 5px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(63, 126, 94, 0.34),
      transparent
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform 0.32s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.services-capabilities button:hover::before,
.services-capabilities button.is-active::before {
  transform:
    scaleX(1);
}

.services-process-grid-six {
  grid-template-columns:
    1fr
    34px
    1fr
    34px
    1fr;
}

.services-process-grid-six
.services-process-step:nth-of-type(4) {
  grid-column: 1;
  grid-row: 2;
}

.services-process-grid-six
.services-process-step:nth-of-type(5) {
  grid-column: 3;
  grid-row: 2;
}

.services-process-grid-six
.services-process-step:nth-of-type(6) {
  grid-column: 5;
  grid-row: 2;
}

.services-process-grid-six
.process-arrow:nth-of-type(4) {
  grid-column: 2;
  grid-row: 2;
}

.services-process-grid-six
.process-arrow:nth-of-type(5) {
  grid-column: 4;
  grid-row: 2;
}

@media (max-width: 900px) {
  .services-process-grid-six {
    grid-template-columns:
      1fr;
  }

  .services-process-grid-six
  .services-process-step,
  .services-process-grid-six
  .process-arrow {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .services-process-grid-six
  .process-arrow {
    transform:
      rotate(90deg);
  }
}
.services-capabilities {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  gap: 7px;

  width: 100%;

  overflow: visible;
}

.services-capabilities button {
  flex: 0 0 auto;

  min-width: 0;

  padding:
    8px
    25px
    8px
    12px;

  white-space: nowrap;

  font-size: 9px;
  font-weight: 650;
  line-height: 1;
}

.services-capabilities button::after {
  right: 9px;
}

@media (max-width: 900px) {
  .services-capabilities {
    justify-content: flex-start;

    overflow-x: auto;
    overflow-y: hidden;

    flex-wrap: nowrap;

    padding-bottom: 5px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .services-capabilities::-webkit-scrollbar {
    display: none;
  }

  .services-capabilities button {
    flex: 0 0 auto;

    font-size: 9px;
  }
}
.services-process-grid-six
.services-process-step:nth-of-type(4) {
  grid-column: 5;
  grid-row: 2;
}

.services-process-grid-six
.services-process-step:nth-of-type(5) {
  grid-column: 3;
  grid-row: 2;
}

.services-process-grid-six
.services-process-step:nth-of-type(6) {
  grid-column: 1;
  grid-row: 2;
}

.services-process-grid-six
.process-arrow:nth-of-type(3) {
  grid-column: 4;
  grid-row: 2;

  transform: rotate(180deg);
}

.services-process-grid-six
.process-arrow:nth-of-type(4) {
  grid-column: 2;
  grid-row: 2;

  transform: rotate(180deg);
}

.services-process-grid-six
.services-process-step:nth-of-type(3) {
  position: relative;
}

.services-process-grid-six
.services-process-step:nth-of-type(3)::after {
  content: "↓";

  position: absolute;

  left: 50%;
  bottom: -34px;

  transform:
    translateX(-50%);

  color:
    rgba(45, 100, 74, 0.72);

  font-size: 18px;
  font-weight: 500;

  pointer-events: none;
}

@media (max-width: 900px) {
  .services-process-grid-six
  .services-process-step:nth-of-type(3)::after {
    display: none;
  }

  .services-process-grid-six
  .process-arrow:nth-of-type(3),
  .services-process-grid-six
  .process-arrow:nth-of-type(4) {
    transform:
      rotate(90deg);
  }
}
.services-delivery {
  position: relative;

  margin-top: 30px;

  padding:
    42px
    34px
    28px;

  overflow: hidden;

  border:
    1px solid
    rgba(48, 89, 71, 0.1);

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(252, 253, 252, 0.98),
      rgba(241, 247, 243, 0.96)
    );

  box-shadow:
    0 24px 70px
    rgba(23, 55, 41, 0.1);
}

.services-delivery
.services-section-head {
  margin-bottom: 32px;
}

.services-delivery
.services-section-head p {
  max-width: 680px;

  margin-left: auto;
  margin-right: auto;
}

.delivery-board {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.9fr)
    minmax(0, 1fr);

  grid-template-rows:
    repeat(3, minmax(120px, auto));

  gap:
    16px
    42px;

  align-items: center;
}

.delivery-card {
  position: relative;

  min-height: 130px;

  display: grid;

  grid-template-columns:
    58px
    1fr
    34px;

  align-items: center;

  gap: 16px;

  padding:
    18px
    18px;

  border:
    1px solid
    rgba(49, 91, 70, 0.1);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 12px 28px
    rgba(34, 70, 52, 0.06);

  opacity: 0.5;

  transform:
    translateY(8px)
    scale(0.985);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.delivery-card.is-ready {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  border-color:
    rgba(49, 112, 80, 0.18);

  box-shadow:
    0 16px 34px
    rgba(32, 72, 53, 0.08);
}

.delivery-card-1 {
  grid-column: 1;
  grid-row: 1;
}

.delivery-card-2 {
  grid-column: 1;
  grid-row: 2;
}

.delivery-card-3 {
  grid-column: 1;
  grid-row: 3;
}

.delivery-card-4 {
  grid-column: 3;
  grid-row: 1;
}

.delivery-card-5 {
  grid-column: 3;
  grid-row: 2;
}

.delivery-card-6 {
  grid-column: 3;
  grid-row: 3;
}

.delivery-card-icon {
  width: 58px;
  height: 58px;

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

  border:
    1px solid
    rgba(54, 106, 81, 0.1);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(236, 246, 240, 0.98),
      rgba(225, 240, 231, 0.92)
    );

  color: #315f49;

  font-family:
    "Roboto Mono",
    monospace;

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

.delivery-card-copy {
  min-width: 0;
}

.delivery-card-number {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(53, 111, 82, 0.58);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.12em;
}

.delivery-card h3 {
  margin:
    0
    0
    7px;

  color: #27483a;

  font-size: 16px;
  font-weight: 600;
}

.delivery-card p {
  margin: 0;

  color:
    rgba(37, 66, 54, 0.68);

  font-size: 10px;
  line-height: 1.55;
}

.delivery-card-check {
  width: 32px;
  height: 32px;

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

  border-radius: 50%;

  background:
    rgba(46, 130, 83, 0.11);

  color:
    rgba(46, 130, 83, 0.35);

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

  transform:
    scale(0.82);

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.delivery-card.is-ready
.delivery-card-check {
  background:
    #2f8657;

  color:
    #fff;

  transform:
    scale(1);

  box-shadow:
    0 6px 16px
    rgba(47, 134, 87, 0.25);
}

.delivery-core {
  position: relative;

  grid-column: 2;
  grid-row:
    1 /
    4;

  min-height: 410px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.delivery-core-circuit {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.delivery-core-circuit::before,
.delivery-core-circuit::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 43%;
  height: 1px;

  background:
    rgba(69, 128, 99, 0.22);
}

.delivery-core-circuit::before {
  left: -15%;
}

.delivery-core-circuit::after {
  right: -15%;
}

.delivery-core-circuit i {
  position: absolute;

  width: 42%;
  height: 1px;

  background:
    rgba(72, 136, 103, 0.18);

  transform-origin: center;
}

.delivery-core-circuit
.circuit-a {
  left: -14%;
  top: 24%;
  transform: rotate(28deg);
}

.delivery-core-circuit
.circuit-b {
  left: -14%;
  top: 38%;
  transform: rotate(12deg);
}

.delivery-core-circuit
.circuit-c {
  left: -14%;
  top: 62%;
  transform: rotate(-12deg);
}

.delivery-core-circuit
.circuit-d {
  left: -14%;
  top: 76%;
  transform: rotate(-28deg);
}

.delivery-core-circuit
.circuit-e {
  right: -14%;
  top: 24%;
  transform: rotate(-28deg);
}

.delivery-core-circuit
.circuit-f {
  right: -14%;
  top: 38%;
  transform: rotate(-12deg);
}

.delivery-core-circuit
.circuit-g {
  right: -14%;
  top: 62%;
  transform: rotate(12deg);
}

.delivery-core-circuit
.circuit-h {
  right: -14%;
  top: 76%;
  transform: rotate(28deg);
}

.delivery-core-panel {
  position: relative;

  width:
    min(
      100%,
      310px
    );

  min-height: 285px;

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

  padding:
    28px
    24px;

  overflow: hidden;

  border:
    1px solid
    rgba(69, 162, 104, 0.22);

  border-radius: 24px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(46, 129, 79, 0.2),
      transparent 46%
    ),
    linear-gradient(
      160deg,
      #113d2a,
      #08291c
    );

  box-shadow:
    0 24px 54px
    rgba(18, 58, 37, 0.26);

  color: #fff;

  transform:
    scale(0.96);

  transition:
    transform 0.6s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    box-shadow 0.6s ease;
}

.services-delivery.is-complete
.delivery-core-panel {
  transform:
    scale(1);

  box-shadow:
    0 28px 70px
    rgba(18, 75, 43, 0.36),
    0 0 0 1px
    rgba(107, 255, 156, 0.08),
    0 0 42px
    rgba(89, 233, 133, 0.15);
}

.delivery-core-panel::before {
  content: "";

  position: absolute;
  inset: 14px;

  border:
    1px solid
    rgba(112, 228, 152, 0.08);

  border-radius: 16px;

  pointer-events: none;
}

.delivery-core-status {
  margin-bottom: 18px;

  color:
    rgba(176, 235, 197, 0.7);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 9px;

  letter-spacing: 0.18em;
}

.delivery-core-panel > strong {
  color:
    rgba(217, 255, 226, 0.3);

  font-size:
    clamp(
      32px,
      4vw,
      48px
    );

  font-weight: 600;

  line-height: 1.05;

  text-align: center;

  text-shadow:
    none;

  transition:
    color 0.5s ease,
    text-shadow 0.5s ease;
}

.services-delivery.is-complete
.delivery-core-panel > strong {
  color: #d8ffe2;

  text-shadow:
    0 0 18px
    rgba(97, 255, 141, 0.35);
}

.delivery-core-check {
  width: 38px;
  height: 38px;

  margin:
    20px
    0;

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

  border:
    1px solid
    rgba(157, 231, 181, 0.18);

  border-radius: 50%;

  color:
    rgba(210, 255, 223, 0.25);

  font-size: 18px;

  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.services-delivery.is-complete
.delivery-core-check {
  color:
    #dcffe5;

  border-color:
    rgba(134, 235, 165, 0.7);

  box-shadow:
    0 0 18px
    rgba(90, 232, 133, 0.22);
}

.delivery-core-meta {
  color:
    rgba(216, 241, 223, 0.56);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 9px;

  line-height: 1.75;

  text-align: center;

  letter-spacing: 0.1em;
}

.delivery-footer {
  margin-top: 28px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 24px;

  padding:
    18px
    22px;

  border:
    1px solid
    rgba(46, 91, 69, 0.1);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.72);
}

.delivery-brandmark {
  width: 78px;
  height: 78px;

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

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #154731,
      #092c1e
    );

  color: #fff;

  box-shadow:
    0 12px 28px
    rgba(23, 66, 43, 0.2);
}

.delivery-brandmark strong {
  font-size: 28px;
  line-height: 1;
}

.delivery-brandmark span {
  margin-top: 5px;

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 6px;

  letter-spacing: 0.11em;
}

.delivery-footer-copy {
  min-width: 0;
}

.delivery-footer-copy strong {
  display: block;

  margin-bottom: 7px;

  color: #234636;

  font-size: 15px;
  font-weight: 600;
}

.delivery-footer-copy span {
  display: block;

  color: #2f7d53;

  font-size: 14px;
  font-weight: 600;
}

.delivery-stamp {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 104px;
  height: 104px;

  border:
    3px double
    rgba(42, 111, 72, 0.48);

  border-radius: 50%;

  color:
    rgba(42, 111, 72, 0.78);

  font-family:
    "Roboto Mono",
    monospace;

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

  letter-spacing: 0.08em;

  transform:
    rotate(-12deg);

  opacity: 0.35;

  transition:
    opacity 0.4s ease,
    transform 0.55s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.services-delivery.is-complete
.delivery-stamp {
  opacity: 1;

  transform:
    rotate(-8deg)
    scale(1.04);
}

.delivery-signature {
  margin-top: 18px;

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

  gap: 3px;

  color:
    rgba(33, 77, 56, 0.82);
}

.delivery-signature strong {
  font-size: 16px;
  letter-spacing: 0.04em;
}

.delivery-signature span {
  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;

  letter-spacing: 0.16em;

  color:
    rgba(46, 91, 69, 0.52);
}

@media (max-width: 980px) {
  .delivery-board {
    grid-template-columns:
      1fr
      1fr;

    grid-template-rows:
      auto;

    gap: 14px;
  }

  .delivery-core {
    grid-column:
      1 /
      3;

    grid-row: 1;

    min-height: 330px;
  }

  .delivery-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  .services-delivery {
    padding:
      30px
      14px
      20px;

    border-radius: 22px;
  }

  .delivery-board {
    grid-template-columns: 1fr;
  }

  .delivery-core {
    grid-column: 1;

    min-height: 300px;
  }

  .delivery-card {
    grid-template-columns:
      48px
      1fr
      30px;

    min-height: 0;

    padding:
      15px
      14px;
  }

  .delivery-card-icon {
    width: 48px;
    height: 48px;
  }

  .delivery-footer {
    grid-template-columns:
      auto
      1fr;

    gap: 14px;
  }

  .delivery-stamp {
    grid-column:
      1 /
      3;

    justify-self: center;

    width: 86px;
    height: 86px;
  }

  .delivery-brandmark {
    width: 64px;
    height: 64px;
  }

  .delivery-footer-copy strong {
    font-size: 12px;
  }

  .delivery-footer-copy span {
    font-size: 11px;
  }
}
.delivery-signature {
  display: none;
}

.delivery-card.is-ready {
  opacity: 1;

  border-color:
    rgba(43, 103, 76, 0.2);

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 16px 36px
    rgba(25, 63, 45, 0.09);
}

.delivery-card.is-ready h3 {
  color: #234737;
}

.delivery-card.is-ready p {
  color:
    rgba(35, 65, 52, 0.76);
}

.delivery-card-icon {
  position: relative;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.8),
    0 7px 16px
    rgba(35, 79, 58, 0.05);
}

.delivery-card.is-ready
.delivery-card-icon {
  border-color:
    rgba(50, 116, 83, 0.18);

  background:
    linear-gradient(
      145deg,
      rgba(236, 248, 241, 1),
      rgba(218, 238, 226, 0.96)
    );

  color: #275b42;
}

.delivery-core {
  perspective: 900px;

  isolation: isolate;
}

.delivery-core::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 42px;

  width: 76%;
  height: 48px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(7, 40, 25, 0.24);

  filter:
    blur(19px);

  opacity: 0.7;

  z-index: -3;
}

.delivery-core::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      100%,
      310px
    );

  height: 285px;

  transform:
    translate(-50%, -46%)
    translateY(14px)
    rotateX(3deg);

  clip-path:
    polygon(
      8% 0,
      92% 0,
      100% 8%,
      100% 92%,
      92% 100%,
      8% 100%,
      0 92%,
      0 8%
    );

  background:
    linear-gradient(
      160deg,
      #08271b,
      #041b12
    );

  box-shadow:
    0 26px 42px
    rgba(5, 37, 22, 0.28);

  z-index: -2;
}

.delivery-core-panel {
  position: relative;

  clip-path:
    polygon(
      8% 0,
      92% 0,
      100% 8%,
      100% 92%,
      92% 100%,
      8% 100%,
      0 92%,
      0 8%
    );

  border-radius: 0;

  transform:
    rotateX(2deg)
    rotateY(-2deg)
    translateY(-5px);

  transform-style:
    preserve-3d;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(67, 162, 99, 0.26),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #174e36 0%,
      #0c3927 44%,
      #06271a 100%
    );

  border:
    1px solid
    rgba(123, 223, 155, 0.26);

  box-shadow:
    inset 1px 1px 0
    rgba(210, 255, 222, 0.12),
    inset -10px -12px 24px
    rgba(0, 20, 11, 0.24),
    inset 8px 8px 20px
    rgba(88, 181, 118, 0.06),
    0 20px 32px
    rgba(5, 49, 28, 0.26),
    0 8px 0
    rgba(4, 31, 19, 0.72);

  transition:
    transform 0.8s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    box-shadow 0.8s ease,
    filter 0.8s ease;
}

.delivery-core-panel::before {
  content: "";

  position: absolute;

  inset: 15px;

  clip-path:
    polygon(
      5% 0,
      95% 0,
      100% 5%,
      100% 95%,
      95% 100%,
      5% 100%,
      0 95%,
      0 5%
    );

  border:
    1px solid
    rgba(137, 229, 165, 0.12);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0)
    );

  box-shadow:
    inset 0 0 25px
    rgba(94, 214, 130, 0.035);

  pointer-events: none;
}

.delivery-core-panel::after {
  content: "";

  position: absolute;

  top: -38%;
  left: -30%;

  width: 80%;
  height: 160%;

  transform:
    rotate(24deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(210, 255, 221, 0.045),
      rgba(210, 255, 221, 0.09),
      transparent
    );

  pointer-events: none;

  opacity: 0.4;
}

.services-delivery.is-complete
.delivery-core-panel {
  transform:
    rotateX(0deg)
    rotateY(0deg)
    translateY(-8px)
    scale(1.025);

  filter:
    brightness(1.04);

  box-shadow:
    inset 1px 1px 0
    rgba(213, 255, 224, 0.16),
    inset -11px -14px 27px
    rgba(0, 22, 12, 0.24),
    inset 9px 9px 22px
    rgba(91, 197, 124, 0.08),
    0 27px 45px
    rgba(5, 51, 29, 0.34),
    0 9px 0
    rgba(4, 29, 18, 0.74),
    0 0 36px
    rgba(76, 208, 115, 0.13);
}

.delivery-core-status {
  position: relative;

  padding:
    0
    18px;

  color:
    rgba(182, 239, 201, 0.72);
}

.delivery-core-status::before,
.delivery-core-status::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(126, 213, 154, 0.42)
    );
}

.delivery-core-status::before {
  right: 100%;
}

.delivery-core-status::after {
  left: 100%;

  transform:
    scaleX(-1);
}

.delivery-core-panel > strong {
  position: relative;

  z-index: 2;

  letter-spacing:
    -0.035em;
}

.services-delivery.is-complete
.delivery-core-panel > strong {
  color: #dfffe8;

  text-shadow:
    0 0 12px
    rgba(118, 255, 159, 0.28),
    0 0 28px
    rgba(79, 218, 119, 0.17);
}

.delivery-core-check {
  position: relative;

  z-index: 2;

  background:
    rgba(0, 25, 13, 0.18);
}

.services-delivery.is-complete
.delivery-core-check {
  background:
    rgba(70, 160, 98, 0.12);

  box-shadow:
    inset 0 0 12px
    rgba(121, 241, 156, 0.08),
    0 0 20px
    rgba(83, 223, 123, 0.16);
}

.delivery-core-meta {
  position: relative;

  z-index: 2;
}

.delivery-core-circuit {
  z-index: -1;
}

.delivery-core-circuit::before,
.delivery-core-circuit::after,
.delivery-core-circuit i {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(60, 119, 90, 0.1),
      rgba(66, 139, 102, 0.34)
    );
}

.delivery-core-circuit i::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(74, 141, 107, 0.35);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 0 3px
    rgba(72, 142, 106, 0.035);
}

.delivery-core-circuit
.circuit-a::after,
.delivery-core-circuit
.circuit-b::after,
.delivery-core-circuit
.circuit-c::after,
.delivery-core-circuit
.circuit-d::after {
  right: -1px;
}

.delivery-core-circuit
.circuit-e::after,
.delivery-core-circuit
.circuit-f::after,
.delivery-core-circuit
.circuit-g::after,
.delivery-core-circuit
.circuit-h::after {
  left: -1px;
}

.services-delivery.is-complete
.delivery-core-circuit i::after {
  background:
    rgba(84, 182, 127, 0.78);

  box-shadow:
    0 0 0 3px
    rgba(88, 182, 129, 0.08),
    0 0 11px
    rgba(70, 199, 116, 0.24);
}

.delivery-card::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 7px;
  height: 7px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    rgba(61, 124, 93, 0.18);

  border:
    1px solid
    rgba(55, 115, 86, 0.18);

  box-shadow:
    0 0 0 3px
    rgba(57, 121, 89, 0.025);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.delivery-card-1::after,
.delivery-card-2::after,
.delivery-card-3::after {
  right: -25px;
}

.delivery-card-4::after,
.delivery-card-5::after,
.delivery-card-6::after {
  left: -25px;
}

.delivery-card.is-ready::after {
  background:
    #4a9870;

  transform:
    translateY(-50%)
    scale(1.1);

  box-shadow:
    0 0 0 4px
    rgba(67, 148, 105, 0.07),
    0 0 14px
    rgba(64, 160, 107, 0.24);
}

.delivery-footer {
  position: relative;

  margin-bottom: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.91),
      rgba(245, 250, 247, 0.84)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.9),
    0 14px 32px
    rgba(31, 70, 51, 0.06);
}

.delivery-brandmark {
  position: relative;

  background:
    radial-gradient(
      circle at 32% 24%,
      rgba(82, 157, 112, 0.46),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #164b34,
      #07291b
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.12),
    0 13px 26px
    rgba(12, 50, 31, 0.22);
}

.delivery-stamp {
  background:
    rgba(255, 255, 255, 0.3);

  box-shadow:
    inset 0 0 0 4px
    rgba(52, 116, 82, 0.035);
}

.services-delivery.is-complete
.delivery-stamp {
  opacity: 0.82;

  transform:
    rotate(-8deg)
    scale(1.03);
}

@media (max-width: 980px) {
  .delivery-card::after {
    display: none;
  }

  .delivery-core::after {
    width:
      min(
        80%,
        310px
      );
  }
}

@media (max-width: 760px) {
  .delivery-core::before {
    bottom: 30px;

    width: 72%;
  }

  .delivery-core-panel {
    transform:
      none;
  }

  .services-delivery.is-complete
  .delivery-core-panel {
    transform:
      translateY(-4px)
      scale(1.01);
  }
}
.delivery-core::after {
  left: 50%;
  top: 50%;

  width: min(100%, 300px);
  height: 278px;

  transform:
    translate(-50%, -50%)
    translateY(8px);

  clip-path: none;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #0b3b28 0%,
      #062a1c 55%,
      #031b11 100%
    );

  box-shadow:
    0 18px 34px
    rgba(3, 34, 20, 0.24);

  z-index: -2;
}

.delivery-core::before {
  left: 50%;
  bottom: 38px;

  width: 72%;
  height: 34px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(3, 35, 20, 0.26);

  filter:
    blur(18px);

  opacity: 0.65;
}

.delivery-core-panel {
  clip-path: none;

  border-radius: 24px;

  transform:
    translateY(-5px);

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(91, 190, 126, 0.22),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #15563b 0%,
      #0c422d 45%,
      #073320 100%
    );

  border:
    1px solid
    rgba(137, 224, 164, 0.3);

  box-shadow:
    inset 0 1px 0
    rgba(230, 255, 238, 0.18),
    inset 1px 0 0
    rgba(203, 255, 220, 0.06),
    inset -8px -10px 22px
    rgba(0, 20, 10, 0.18),
    0 8px 0
    #052719,
    0 18px 32px
    rgba(3, 43, 24, 0.25);

  filter: none;
}

.delivery-core-panel::before {
  inset: 13px;

  clip-path: none;

  border-radius: 16px;

  border:
    1px solid
    rgba(163, 231, 184, 0.18);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      transparent 48%
    );

  box-shadow:
    inset 0 0 25px
    rgba(87, 193, 119, 0.035);
}

.delivery-core-panel::after {
  top: -55%;
  left: -45%;

  width: 72%;
  height: 190%;

  transform:
    rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(225, 255, 234, 0.025),
      rgba(225, 255, 234, 0.075),
      transparent
    );

  opacity: 0.55;
}

.delivery-core-status {
  color:
    rgba(202, 242, 214, 0.82);

  text-shadow:
    0 1px 2px
    rgba(0, 0, 0, 0.22);
}

.delivery-core-panel > strong {
  color: #e4f5e9;

  opacity: 1;

  text-shadow:
    0 2px 3px
    rgba(0, 0, 0, 0.2),
    0 0 18px
    rgba(131, 224, 158, 0.08);

  filter: none;
}

.delivery-core-check {
  color: #c9edd4;

  opacity: 1;

  border-color:
    rgba(170, 231, 188, 0.32);

  background:
    rgba(5, 46, 28, 0.34);
}

.delivery-core-meta {
  color:
    rgba(211, 240, 219, 0.78);

  opacity: 1;

  text-shadow:
    0 1px 2px
    rgba(0, 0, 0, 0.18);
}

.services-delivery.is-complete
.delivery-core-panel {
  transform:
    translateY(-7px);

  filter: none;

  box-shadow:
    inset 0 1px 0
    rgba(230, 255, 238, 0.2),
    inset 1px 0 0
    rgba(203, 255, 220, 0.07),
    inset -8px -10px 22px
    rgba(0, 20, 10, 0.17),
    0 8px 0
    #052719,
    0 20px 36px
    rgba(3, 43, 24, 0.28),
    0 0 30px
    rgba(74, 173, 105, 0.08);
}

.services-delivery.is-complete
.delivery-core-panel > strong {
  color: #effff3;

  opacity: 1;

  text-shadow:
    0 2px 3px
    rgba(0, 0, 0, 0.18),
    0 0 16px
    rgba(136, 236, 165, 0.13);
}

.services-delivery.is-complete
.delivery-core-status {
  color:
    rgba(211, 247, 222, 0.9);
}

.services-delivery.is-complete
.delivery-core-meta {
  color:
    rgba(220, 247, 228, 0.86);
}

.services-delivery.is-complete
.delivery-core-check {
  color: #e3f9e9;

  background:
    rgba(67, 145, 91, 0.22);

  border-color:
    rgba(168, 235, 188, 0.42);
}

@media (max-width: 760px) {
  .delivery-core-panel {
    transform: none;

    border-radius: 20px;
  }

  .delivery-core-panel::before {
    border-radius: 13px;
  }

  .services-delivery.is-complete
  .delivery-core-panel {
    transform: none;
  }
}

.services-delivery {
  margin-bottom: 36px;
}

@media (max-width: 760px) {
  .services-delivery {
    margin-bottom: 22px;
  }
}

.services-delivery {
  margin-bottom: 38px;

  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(113, 191, 141, 0.075),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(252, 253, 252, 0.99),
      rgba(240, 247, 243, 0.97)
    );
}

.delivery-board {
  position: relative;
}

.delivery-board::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 390px;
  height: 330px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(56, 153, 96, 0.12),
      rgba(56, 153, 96, 0.04) 40%,
      transparent 72%
    );

  filter:
    blur(12px);

  pointer-events: none;

  opacity: 0.55;

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.services-delivery.is-complete
.delivery-board::before {
  opacity: 1;

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

.delivery-core {
  min-height: 390px;
}

.delivery-core::before {
  bottom: 44px;

  width: 70%;
  height: 30px;

  background:
    rgba(4, 33, 19, 0.22);

  filter:
    blur(16px);

  opacity: 0.6;
}

.delivery-core::after {
  width:
    min(
      100%,
      340px
    );

  height: 250px;

  transform:
    translate(-50%, -50%)
    translateY(5px);

  border-radius: 23px;

  background:
    linear-gradient(
      145deg,
      #0a3624 0%,
      #052719 60%,
      #03190f 100%
    );

  box-shadow:
    0 14px 26px
    rgba(3, 33, 19, 0.23);
}

.delivery-core-panel {
  width:
    min(
      100%,
      340px
    );

  min-height: 250px;

  padding:
    24px
    28px;

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(95, 194, 130, 0.24),
      transparent 43%
    ),
    radial-gradient(
      circle at 15% 12%,
      rgba(132, 225, 160, 0.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #15573b 0%,
      #0b432d 48%,
      #07321f 100%
    );

  border:
    1px solid
    rgba(145, 229, 171, 0.34);

  transform:
    translateY(-4px);

  box-shadow:
    inset 0 1px 0
    rgba(235, 255, 241, 0.2),
    inset 1px 0 0
    rgba(213, 255, 227, 0.07),
    inset -7px -8px 18px
    rgba(0, 19, 10, 0.15),
    0 5px 0
    #052619,
    0 18px 30px
    rgba(3, 45, 25, 0.24),
    0 0 0 1px
    rgba(66, 137, 96, 0.03);
}

.delivery-core-panel::before {
  inset: 12px;

  border-radius: 15px;

  border:
    1px solid
    rgba(167, 235, 187, 0.16);

  box-shadow:
    inset 0 0 28px
    rgba(104, 211, 136, 0.04);
}

.delivery-core-panel::after {
  top: -60%;
  left: -36%;

  width: 55%;
  height: 210%;

  opacity: 0.42;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(230, 255, 237, 0.025),
      rgba(230, 255, 237, 0.08),
      transparent
    );
}

.delivery-core-status {
  margin-bottom: 14px;

  color:
    rgba(205, 243, 216, 0.84);

  font-size: 8px;

  letter-spacing: 0.2em;
}

.delivery-core-panel > strong {
  color: #ecfff1;

  font-size:
    clamp(
      34px,
      4vw,
      46px
    );

  line-height: 0.98;

  letter-spacing:
    -0.045em;

  text-shadow:
    0 2px 3px
    rgba(0, 0, 0, 0.18),
    0 0 18px
    rgba(108, 221, 140, 0.11);
}

.delivery-core-check {
  width: 36px;
  height: 36px;

  margin:
    17px
    0;

  color: #d7f4df;

  background:
    rgba(7, 52, 31, 0.32);

  border:
    1px solid
    rgba(172, 235, 191, 0.34);

  box-shadow:
    inset 0 0 14px
    rgba(124, 226, 154, 0.04);
}

.delivery-core-meta {
  color:
    rgba(216, 244, 224, 0.82);

  font-size: 8px;

  line-height: 1.7;

  letter-spacing: 0.12em;
}

.services-delivery.is-complete
.delivery-core-panel {
  transform:
    translateY(-8px)
    scale(1.025);

  box-shadow:
    inset 0 1px 0
    rgba(235, 255, 241, 0.24),
    inset 1px 0 0
    rgba(213, 255, 227, 0.08),
    inset -7px -8px 18px
    rgba(0, 19, 10, 0.14),
    0 5px 0
    #052619,
    0 22px 34px
    rgba(3, 45, 25, 0.28),
    0 0 36px
    rgba(72, 183, 108, 0.12),
    0 0 0 1px
    rgba(119, 211, 148, 0.08);
}

.services-delivery.is-complete
.delivery-core-panel > strong {
  color: #f2fff5;

  text-shadow:
    0 2px 3px
    rgba(0, 0, 0, 0.16),
    0 0 20px
    rgba(119, 239, 154, 0.2),
    0 0 40px
    rgba(83, 203, 119, 0.08);
}

.delivery-core-circuit::before,
.delivery-core-circuit::after,
.delivery-core-circuit i {
  background:
    linear-gradient(
      90deg,
      rgba(57, 116, 86, 0.08),
      rgba(63, 139, 99, 0.42)
    );
}

.services-delivery.is-complete
.delivery-core-circuit::before,
.services-delivery.is-complete
.delivery-core-circuit::after,
.services-delivery.is-complete
.delivery-core-circuit i {
  background:
    linear-gradient(
      90deg,
      rgba(66, 134, 97, 0.13),
      rgba(75, 169, 116, 0.58)
    );
}

.delivery-card {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.delivery-card.is-ready {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(244, 250, 246, 0.92)
    );

  border-color:
    rgba(50, 115, 82, 0.2);

  box-shadow:
    0 14px 30px
    rgba(28, 67, 49, 0.075);
}

.delivery-card.is-ready
.delivery-card-number {
  color:
    rgba(46, 111, 78, 0.78);
}

.delivery-card.is-ready h3 {
  color: #244b39;
}

.delivery-card.is-ready p {
  color:
    rgba(35, 63, 51, 0.76);
}

.delivery-card-check {
  opacity: 0.58;
}

.delivery-card.is-ready
.delivery-card-check {
  opacity: 1;

  background:
    linear-gradient(
      145deg,
      #3a9766,
      #27774d
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.16),
    0 6px 14px
    rgba(40, 127, 79, 0.2);
}

.delivery-card.is-ready::after {
  background:
    #4b9c72;

  box-shadow:
    0 0 0 4px
    rgba(68, 151, 107, 0.07),
    0 0 14px
    rgba(63, 173, 111, 0.28);
}

.delivery-footer {
  margin-top: 24px;

  border-color:
    rgba(46, 100, 72, 0.14);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 247, 242, 0.92)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.94),
    0 14px 30px
    rgba(30, 70, 50, 0.07);
}

.delivery-footer-copy strong {
  color: #214635;

  font-size: 14px;
}

.delivery-footer-copy span {
  color: #2f8155;

  font-size: 13px;
}

.delivery-stamp {
  border-width: 2px;

  color:
    rgba(44, 120, 75, 0.68);

  background:
    rgba(248, 252, 249, 0.6);

  box-shadow:
    inset 0 0 0 5px
    rgba(54, 126, 82, 0.035);

  opacity: 0.38;
}

.services-delivery.is-complete
.delivery-stamp {
  opacity: 0.92;

  transform:
    rotate(-7deg)
    scale(1.05);

  box-shadow:
    inset 0 0 0 5px
    rgba(54, 126, 82, 0.045),
    0 7px 18px
    rgba(39, 102, 65, 0.08);
}

@media (max-width: 760px) {
  .services-delivery {
    margin-bottom: 24px;
  }

  .delivery-core {
    min-height: 310px;
  }

  .delivery-core::after {
    width:
      min(
        88%,
        320px
      );

    height: 238px;
  }

  .delivery-core-panel {
    width:
      min(
        88%,
        320px
      );

    min-height: 238px;

    padding:
      22px
      20px;
  }

  .delivery-core-panel > strong {
    font-size: 36px;
  }
}
.delivery-core-circuit
.circuit {
  opacity: 0.28;

  transition:
    opacity 0.45s ease,
    filter 0.45s ease,
    background 0.45s ease;
}

.delivery-core-circuit
.circuit.is-powered {
  opacity: 1;

  background:
    linear-gradient(
      90deg,
      rgba(80, 164, 117, 0.22),
      rgba(87, 205, 133, 0.9)
    );

  filter:
    drop-shadow(
      0 0 4px
      rgba(72, 201, 123, 0.34)
    );
}

.delivery-core-circuit
.circuit.is-powered::after {
  background:
    #64c98c;

  box-shadow:
    0 0 0 4px
    rgba(89, 196, 132, 0.09),
    0 0 13px
    rgba(75, 215, 131, 0.42);
}

.delivery-core-panel {
  transition:
    transform 0.75s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    box-shadow 0.75s ease,
    filter 0.75s ease;
}

.services-delivery.is-core-starting
.delivery-core-panel {
  transform:
    translateY(-6px)
    scale(1.012);

  filter:
    brightness(1.07);
}

.services-delivery.is-core-starting
.delivery-core-panel > strong {
  text-shadow:
    0 0 14px
    rgba(144, 255, 178, 0.18);
}

.delivery-core-panel.is-powered {
  animation:
    deliveryCorePower
    1.1s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.delivery-stamp.is-delivered {
  animation:
    deliveryStampHit
    0.7s
    cubic-bezier(
      0.18,
      0.89,
      0.32,
      1.28
    )
    both;
}

@keyframes deliveryCorePower {
  0% {
    filter:
      brightness(1);

    box-shadow:
      0 22px 34px
      rgba(3, 45, 25, 0.28);
  }

  38% {
    filter:
      brightness(1.13);

    box-shadow:
      0 28px 48px
      rgba(3, 45, 25, 0.34),
      0 0 42px
      rgba(72, 201, 123, 0.18);
  }

  100% {
    filter:
      brightness(1.04);

    box-shadow:
      0 22px 34px
      rgba(3, 45, 25, 0.28);
  }
}

@keyframes deliveryStampHit {
  0% {
    opacity: 0;

    transform:
      rotate(-14deg)
      scale(1.28);
  }

  55% {
    opacity: 1;

    transform:
      rotate(-6deg)
      scale(0.96);
  }

  100% {
    opacity: 0.92;

    transform:
      rotate(-7deg)
      scale(1.05);
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .delivery-core-panel.is-powered,
  .delivery-stamp.is-delivered {
    animation: none;
  }
}
.delivery-core-meta {
  width: 190px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    7px
    14px;

  margin-top: 2px;

  font-size: 7px;

  line-height: 1;

  letter-spacing: 0.1em;
}

.delivery-core-metric {
  display: flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(211, 240, 219, 0.58);

  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    transform 0.35s ease;
}

.delivery-core-metric i {
  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  display: block;

  border-radius: 50%;

  background:
    rgba(149, 212, 169, 0.24);

  box-shadow:
    0 0 0 2px
    rgba(111, 184, 137, 0.035);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.services-delivery.is-complete
.delivery-core-metric {
  color:
    rgba(225, 249, 232, 0.9);
}

.services-delivery.is-complete
.delivery-core-metric i {
  background:
    #72c993;

  box-shadow:
    0 0 0 3px
    rgba(96, 194, 133, 0.08),
    0 0 10px
    rgba(89, 222, 138, 0.28);
}

.delivery-card.is-focused {
  transform:
    translateY(-3px)
    scale(1.018);

  border-color:
    rgba(48, 126, 86, 0.32);

  box-shadow:
    0 18px 38px
    rgba(29, 76, 52, 0.13);
}

.delivery-card.is-dimmed {
  opacity: 0.68;
}

.delivery-card.is-focused
.delivery-card-icon {
  transform:
    translateY(-1px)
    scale(1.06);

  border-color:
    rgba(48, 126, 86, 0.26);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.9),
    0 8px 20px
    rgba(36, 109, 70, 0.12);
}

.delivery-card.is-focused::after {
  transform:
    translateY(-50%)
    scale(1.35);

  background:
    #54ae7d;

  box-shadow:
    0 0 0 5px
    rgba(75, 166, 117, 0.09),
    0 0 18px
    rgba(69, 201, 121, 0.4);
}

.delivery-core-panel.has-card-focus {
  transform:
    translateY(-9px)
    scale(1.032);

  box-shadow:
    inset 0 1px 0
    rgba(235, 255, 241, 0.25),
    inset -7px -8px 18px
    rgba(0, 19, 10, 0.14),
    0 5px 0
    #052619,
    0 23px 38px
    rgba(3, 45, 25, 0.3),
    0 0 42px
    rgba(76, 190, 111, 0.15);
}

.delivery-core-status {
  min-width: 170px;

  text-align: center;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    color 0.25s ease;
}

.delivery-core-status.is-changing {
  opacity: 0;

  transform:
    translateY(-3px);
}

.delivery-core-status.is-focused {
  color: #d8ffe4;

  text-shadow:
    0 0 12px
    rgba(105, 232, 145, 0.22);
}

@media (max-width: 760px) {
  .delivery-card.is-focused {
    transform: none;
  }

  .delivery-card.is-dimmed {
    opacity: 1;
  }

  .delivery-core-panel.has-card-focus {
    transform: none;
  }
}
.delivery-core-metric.is-highlighted {
  color: #f0fff4;

  transform:
    translateX(2px);

  text-shadow:
    0 0 10px
    rgba(108, 238, 150, 0.22);
}

.delivery-core-metric.is-highlighted i {
  background:
    #7bd39b;

  transform:
    scale(1.35);

  box-shadow:
    0 0 0 4px
    rgba(104, 213, 147, 0.09),
    0 0 13px
    rgba(88, 231, 143, 0.42);
}

.delivery-safe {
  position: relative;

  width:
    min(
      100%,
      340px
    );

  height: 250px;

  perspective: 1200px;

  transform-style:
    preserve-3d;
}

.delivery-safe-inside {
  position: absolute;
  inset: 0;

  overflow: hidden;

  border-radius: 23px;

  background: #061d14;

  box-shadow:
    inset 0 0 0 1px
    rgba(126, 203, 151, 0.18),
    inset 0 0 30px
    rgba(0, 0, 0, 0.42),
    0 18px 34px
    rgba(4, 37, 22, 0.2);

  transform:
    translateZ(-8px);
}

.delivery-safe-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  opacity: 0.96;

  transform:
    scale(1.02);

  transition:
    transform 5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    filter 0.8s ease;
}

.delivery-safe.is-open
.delivery-safe-image {
  transform:
    scale(1.065);
}

.delivery-core-panel {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  min-height: 0;

  margin: 0;

  z-index: 4;

  appearance: none;

  cursor: pointer;

  transform-origin:
    left center;

  transform-style:
    preserve-3d;

  backface-visibility: hidden;

  transition:
    transform 1.15s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    box-shadow 0.8s ease;
}

.delivery-safe.is-open
.delivery-core-panel {
  transform:
    rotateY(-104deg)
    translateZ(4px);

  box-shadow:
    18px 20px 38px
    rgba(0, 0, 0, 0.28);
}

.delivery-safe-open {
  position: absolute;

  left: 50%;
  bottom: 15px;

  transform:
    translateX(-50%);

  color:
    rgba(219, 250, 228, 0.58);

  font-family:
    "Roboto Mono",
    monospace;

  font-size: 7px;
  font-weight: 600;

  letter-spacing: 0.16em;

  white-space: nowrap;

  opacity: 0;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.services-delivery.is-complete
.delivery-safe-open {
  opacity: 1;
}

.delivery-core-panel:hover
.delivery-safe-open {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(-2px);

  color: #e4ffec;
}

.delivery-safe-close {
  position: absolute;

  top: 10px;
  right: 10px;

  z-index: 7;

  width: 30px;
  height: 30px;

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

  padding: 0;

  border:
    1px solid
    rgba(220, 255, 230, 0.22);

  border-radius: 50%;

  background:
    rgba(3, 23, 14, 0.72);

  backdrop-filter:
    blur(8px);

  color: #e7ffed;

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

  cursor: pointer;

  opacity: 0;
  pointer-events: none;

  transform:
    scale(0.8);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

.delivery-safe.is-open
.delivery-safe-close {
  opacity: 1;

  pointer-events: auto;

  transform:
    scale(1);
}

.delivery-safe-close:hover {
  background:
    rgba(14, 64, 39, 0.92);
}

.delivery-room-link {
  position: absolute;

  z-index: 5;

  display: block;

  border-radius: 8px;

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.4s ease,
    box-shadow 0.3s ease;
}

.delivery-safe.is-open
.delivery-room-link {
  opacity: 1;

  pointer-events: auto;
}

.delivery-room-link:hover {
  box-shadow:
    0 0 0 2px
    rgba(129, 215, 157, 0.55),
    0 0 18px
    rgba(82, 203, 125, 0.3);
}

.delivery-room-link-cases {
  left: 36.5%;
  top: 11.5%;

  width: 9.5%;
  height: 8%;
}

.delivery-room-link-price {
  left: 47%;
  top: 11.5%;

  width: 8.3%;
  height: 8%;
}

.delivery-room-link-contact {
  left: 56.3%;
  top: 11.5%;

  width: 11%;
  height: 8%;
}

.delivery-room-caption {
  position: absolute;

  left: 50%;
  bottom: 11px;

  z-index: 4;

  width: 80%;

  transform:
    translateX(-50%)
    translateY(8px);

  padding:
    7px
    12px;

  border:
    1px solid
    rgba(156, 224, 177, 0.14);

  border-radius: 10px;

  background:
    rgba(3, 26, 16, 0.58);

  backdrop-filter:
    blur(8px);

  text-align: center;

  opacity: 0;

  transition:
    opacity 0.6s ease
    0.45s,
    transform 0.6s ease
    0.45s;
}

.delivery-safe.is-open
.delivery-room-caption {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}

.delivery-room-caption strong {
  display: block;

  color: #f0fff4;

  font-size: 10px;
  font-weight: 600;
}

.delivery-room-caption span {
  display: block;

  margin-top: 2px;

  color:
    rgba(203, 242, 215, 0.75);

  font-size: 8px;
}

.delivery-safe.is-open::after {
  content: "";

  position: absolute;

  inset: -12px;

  z-index: -1;

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(73, 184, 109, 0.15),
      transparent 68%
    );

  filter:
    blur(16px);

  pointer-events: none;
}

@media (max-width: 760px) {
  .delivery-safe {
    width:
      min(
        88vw,
        320px
      );

    height: 238px;
  }

  .delivery-safe.is-open
  .delivery-core-panel {
    transform:
      rotateY(-92deg);
  }

  .delivery-room-caption {
    width: 88%;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .delivery-core-panel,
  .delivery-safe-image,
  .delivery-room-caption {
    transition: none;
  }
}
.delivery-core::after {
  display: none !important;
}

.delivery-core::before {
  bottom: 46px;

  width: 68%;
  height: 24px;

  background:
    rgba(4, 35, 21, 0.2);

  filter:
    blur(16px);

  opacity: 0.55;
}

.delivery-safe {
  isolation: isolate;

  border-radius: 23px;
}

.delivery-core-panel {
  box-shadow:
    inset 0 1px 0
    rgba(235, 255, 241, 0.2),
    inset 1px 0 0
    rgba(213, 255, 227, 0.07),
    inset -7px -8px 18px
    rgba(0, 19, 10, 0.15),
    0 18px 30px
    rgba(3, 45, 25, 0.24) !important;
}

.services-delivery.is-complete
.delivery-core-panel {
  box-shadow:
    inset 0 1px 0
    rgba(235, 255, 241, 0.24),
    inset 1px 0 0
    rgba(213, 255, 227, 0.08),
    inset -7px -8px 18px
    rgba(0, 19, 10, 0.14),
    0 22px 34px
    rgba(3, 45, 25, 0.28),
    0 0 36px
    rgba(72, 183, 108, 0.12) !important;
}

.delivery-safe-inside {
  box-shadow:
    inset 0 0 0 1px
    rgba(126, 203, 151, 0.18),
    inset 0 0 30px
    rgba(0, 0, 0, 0.42),
    0 16px 28px
    rgba(4, 37, 22, 0.18);
}
.delivery-safe.is-open
.delivery-core-panel {
  box-shadow:
    18px 20px 38px
    rgba(0, 0, 0, 0.28) !important;
}

.delivery-safe {
  perspective: 1800px;
  perspective-origin: 42% 50%;

  transform-style:
    preserve-3d;

  overflow: visible;

  isolation: isolate;

  border-radius: 23px;
}

.delivery-safe-inside {
  inset: 4px;

  border-radius: 20px;

  overflow: hidden;

  clip-path:
    inset(
      0
      round
      20px
    );

  transform:
    translateZ(-16px);

  background: #061d14;

  transition:
    box-shadow 1.1s ease,
    filter 1.1s ease;
}

.delivery-safe-image {
  cursor: zoom-in;

  transform:
    scale(1.015);

  transition:
    transform 4.2s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    filter 1.1s ease;
}

.delivery-core-panel {
  transform-origin:
    0% 50% !important;

  transform:
    rotateY(0deg)
    translateZ(10px) !important;

  transform-style:
    preserve-3d;

  backface-visibility:
    visible;

  will-change:
    transform;

  transition:
    transform 2.35s
    cubic-bezier(
      0.16,
      0.78,
      0.18,
      1
    ),
    box-shadow 1.6s ease,
    filter 1.4s ease !important;
}

.delivery-safe.is-open
.delivery-core-panel {
  transform:
    rotateY(-112deg)
    translateZ(10px) !important;

  box-shadow:
    30px
    18px
    42px
    rgba(
      0,
      0,
      0,
      0.31
    ) !important;

  filter:
    brightness(0.94);
}

.delivery-core-panel::after {
  content: "";

  position: absolute;

  top: 7px;
  right: -8px;
  bottom: 7px;

  width: 8px;

  border-radius:
    0
    5px
    5px
    0;

  background:
    linear-gradient(
      90deg,
      #041d13,
      #0d5735 48%,
      #032016
    );

  box-shadow:
    inset
    1px
    0
    rgba(
      255,
      255,
      255,
      0.09
    );

  transform:
    rotateY(90deg);

  transform-origin:
    left center;

  pointer-events: none;
}

.delivery-safe.is-open
.delivery-safe-inside {
  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      126,
      203,
      151,
      0.2
    ),
    inset
    0
    0
    36px
    rgba(
      0,
      0,
      0,
      0.28
    ),
    0
    20px
    38px
    rgba(
      4,
      37,
      22,
      0.18
    ),
    0
    0
    35px
    rgba(
      79,
      189,
      113,
      0.12
    );
}

.delivery-safe.is-open
.delivery-safe-image {
  transform:
    scale(1.045);
}

.delivery-image-viewer {
  position: fixed;

  inset: 0;

  z-index: 500;

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

  padding: 28px;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  background:
    rgba(
      3,
      13,
      9,
      0.82
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.delivery-image-viewer.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    opacity 0.45s ease,
    visibility 0s;
}

.delivery-image-viewer-panel {
  position: relative;

  width:
    min(
      96vw,
      1500px
    );

  height:
    min(
      92vh,
      980px
    );

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

  overflow: hidden;

  border:
    1px solid
    rgba(
      156,
      224,
      177,
      0.22
    );

  border-radius: 24px;

  background: #07150f;

  box-shadow:
    0
    40px
    100px
    rgba(
      0,
      0,
      0,
      0.52
    );

  transform:
    scale(0.94)
    translateY(12px);

  transition:
    transform 0.65s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.delivery-image-viewer.is-open
.delivery-image-viewer-panel {
  transform:
    scale(1)
    translateY(0);
}

.delivery-image-viewer-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;
}

.delivery-image-viewer-close {
  position: absolute;

  top: 16px;
  right: 16px;

  z-index: 3;

  width: 42px;
  height: 42px;

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

  padding: 0;

  border:
    1px solid
    rgba(
      220,
      255,
      230,
      0.25
    );

  border-radius: 50%;

  background:
    rgba(
      4,
      27,
      17,
      0.78
    );

  color: #ffffff;

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

  cursor: pointer;

  backdrop-filter:
    blur(10px);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.delivery-image-viewer-close:hover {
  transform:
    scale(1.07);

  background:
    rgba(
      25,
      80,
      51,
      0.95
    );
}

@media (max-width: 760px) {
  .delivery-safe {
    perspective: 1350px;
  }

  .delivery-safe-inside {
    inset: 3px;

    border-radius: 18px;

    clip-path:
      inset(
        0
        round
        18px
      );
  }

  .delivery-safe.is-open
  .delivery-core-panel {
    transform:
      rotateY(-102deg)
      translateZ(7px) !important;
  }

  .delivery-image-viewer {
    padding: 10px;
  }

  .delivery-image-viewer-panel {
    width:
      calc(
        100vw - 20px
      );

    height:
      calc(
        100vh - 20px
      );

    border-radius: 18px;
  }

  .delivery-image-viewer-close {
    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .delivery-core-panel,
  .delivery-safe-image,
  .delivery-image-viewer,
  .delivery-image-viewer-panel {
    transition-duration:
      0.01ms !important;
  }
}
.delivery-core-panel {
  transition:
    transform 2.35s
    cubic-bezier(
      0.16,
      0.78,
      0.18,
      1
    ),
    box-shadow 1.6s ease,
    filter 1.4s ease !important;
}

.delivery-safe:not(.is-open)
.delivery-core-panel {
  transform:
    rotateY(0deg)
    translateZ(10px) !important;
}

.delivery-safe.is-open
.delivery-core-panel {
  transform:
    rotateY(-112deg)
    translateZ(10px) !important;
}

.delivery-image-viewer {
  position: fixed;
  inset: 0;

  z-index: 500;

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

  padding: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(10, 26, 18, 0.22),
      rgba(2, 10, 7, 0.84) 72%
    );

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}

.delivery-image-viewer::before {
  content: "";

  position: absolute;
  inset: -8%;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(4, 14, 9, 0.20) 66%,
      rgba(1, 7, 5, 0.78) 100%
    );

  z-index: 2;
}

.delivery-image-viewer-panel {
  position: relative;

  width:
    min(
      96vw,
      1500px
    );

  height:
    min(
      94vh,
      980px
    );

  overflow: visible;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  isolation: isolate;
}

.delivery-image-viewer-panel::before {
  content: "";

  position: absolute;

  inset:
    -5%
    -8%;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(9, 49, 33, 0.58) 0%,
      rgba(9, 49, 33, 0.24) 12%,
      transparent 28%,
      transparent 72%,
      rgba(9, 49, 33, 0.24) 88%,
      rgba(9, 49, 33, 0.58) 100%
    );

  filter:
    blur(34px);

  opacity: 0.82;

  transform:
    scale(1.04);
}

.delivery-image-viewer-panel::after {
  content: "";

  position: absolute;

  inset:
    -4%
    -6%;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 58%,
      rgba(1, 10, 6, 0.16) 72%,
      rgba(1, 7, 5, 0.68) 100%
    );

  filter:
    blur(18px);
}

.delivery-image-viewer-image {
  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  border-radius: 22px;

  box-shadow:
    0
    26px
    70px
    rgba(0, 0, 0, 0.46);

  filter:
    contrast(1.02)
    saturate(1.02);
}

.delivery-image-viewer.is-open
.delivery-image-viewer-image {
  animation:
    deliveryViewerBreath
    10s
    ease-in-out
    infinite
    alternate;
}

.delivery-image-viewer-close {
  z-index: 6;

  top: 20px;
  right: 20px;

  background:
    rgba(4, 21, 13, 0.58);

  box-shadow:
    0
    8px
    24px
    rgba(0, 0, 0, 0.28);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

@keyframes deliveryViewerBreath {
  0% {
    transform:
      scale(1);
  }

  100% {
    transform:
      scale(1.012);
  }
}

@media (max-width: 760px) {
  .delivery-image-viewer-panel {
    width:
      100vw;

    height:
      100vh;
  }

  .delivery-image-viewer-panel::before {
    inset:
      -3%
      -10%;

    filter:
      blur(24px);
  }

  .delivery-image-viewer-panel::after {
    inset:
      -2%
      -7%;
  }

  .delivery-image-viewer-image {
    border-radius: 0;

    box-shadow: none;
  }

  .delivery-image-viewer-close {
    top: 12px;
    right: 12px;
  }
}

.delivery-image-viewer-image {
  --viewer-parallax-x: 0px;
  --viewer-parallax-y: 0px;

  transform:
    translate3d(
      var(--viewer-parallax-x),
      var(--viewer-parallax-y),
      0
    )
    scale(1.012);

  transition:
    transform 0.18s ease-out;
}

.delivery-image-viewer.is-open
.delivery-image-viewer-image {
  animation: none;
}

.delivery-viewer-link {
  position: absolute;

  z-index: 5;

  display: block;

  border-radius: 9px;

  opacity: 0;

  pointer-events: auto;

  transition:
    box-shadow 0.45s ease,
    opacity 0.45s ease;
}

.delivery-image-viewer.is-open
.delivery-viewer-link {
  opacity: 1;
}

.delivery-viewer-link-cases {
  left: 36.5%;
  top: 11.5%;

  width: 9.5%;
  height: 8%;
}

.delivery-viewer-link-price {
  left: 47%;
  top: 11.5%;

  width: 8.3%;
  height: 8%;
}

.delivery-viewer-link-contact {
  left: 56.3%;
  top: 11.5%;

  width: 11%;
  height: 8%;
}

.delivery-image-viewer.is-open
.delivery-viewer-link.is-hinting {
  animation:
    deliveryViewerLinkHint
    1.15s
    ease
    1;
}

.delivery-viewer-link:hover {
  box-shadow:
    0 0 0 1px
    rgba(
      205,
      166,
      93,
      0.62
    ),
    0 0 18px
    rgba(
      205,
      166,
      93,
      0.28
    ),
    inset 0 0 14px
    rgba(
      205,
      166,
      93,
      0.08
    );
}

@keyframes deliveryViewerLinkHint {
  0% {
    box-shadow: none;
  }

  35% {
    box-shadow:
      0 0 0 1px
      rgba(
        205,
        166,
        93,
        0.56
      ),
      0 0 20px
      rgba(
        205,
        166,
        93,
        0.26
      );
  }

  100% {
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  .delivery-image-viewer-image {
    transform: none;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .delivery-image-viewer-image {
    transform: none !important;
  }

  .delivery-viewer-link {
    animation: none !important;
  }
}

.delivery-image-viewer-close {
  position: absolute;

  top: 34px !important;
  right: 34px !important;

  z-index: 20 !important;

  width: 44px;
  height: 44px;

  background:
    rgba(6, 24, 16, 0.88) !important;

  border:
    1px solid
    rgba(167, 221, 186, 0.34) !important;

  color: #ffffff !important;

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.34);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.delivery-image-viewer-close:hover {
  transform:
    scale(1.06);

  background:
    rgba(15, 55, 37, 0.96) !important;

  border-color:
    rgba(191, 236, 206, 0.5) !important;
}

@media (max-width: 760px) {
  .delivery-image-viewer-close {
    top: 18px !important;
    right: 18px !important;

    width: 40px;
    height: 40px;
  }
}
.delivery-image-viewer-panel {
  width:
    min(
      96vw,
      calc(94vh * 4 / 3),
      1448px
    ) !important;

  height: auto !important;

  aspect-ratio: 4 / 3;

  overflow: visible;
}

.delivery-image-viewer-image {
  width: 100%;
  height: 100%;

  object-fit: fill;
}

.delivery-image-viewer-close {
  top: 18px !important;
  right: 18px !important;

  z-index: 30 !important;
}

@media (max-width: 760px) {
  .delivery-image-viewer {
    padding:
      max(
        76px,
        env(safe-area-inset-top)
      )
      8px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }

  .delivery-image-viewer-panel {
    width:
      calc(
        100vw - 16px
      ) !important;

    height: auto !important;

    aspect-ratio: 4 / 3;

    flex: 0 0 auto;
  }

  .delivery-image-viewer-image {
    width: 100%;
    height: 100%;

    object-fit: fill;

    border-radius: 12px;
  }

  .delivery-image-viewer-close {
    top: 10px !important;
    right: 10px !important;

    width: 38px;
    height: 38px;

    z-index: 40 !important;
  }

  .delivery-viewer-link-cases {
    left: 36.5%;
    top: 11.5%;

    width: 9.5%;
    height: 8%;
  }

  .delivery-viewer-link-price {
    left: 47%;
    top: 11.5%;

    width: 8.3%;
    height: 8%;
  }

  .delivery-viewer-link-contact {
    left: 56.3%;
    top: 11.5%;

    width: 11%;
    height: 8%;
  }
}

.services-hero h1 span,
.services-ecosystem .services-section-head h2,
.services-transformation .services-section-head h2 {
  color: transparent !important;
  -webkit-text-fill-color: transparent;

  background:
    linear-gradient(
      90deg,
      #ff3f91 0%,
      #ff52ae 20%,
      #e159ff 45%,
      #a768ff 68%,
      #5d9dff 100%
    );

  background-size: 180% 100%;
  background-position: 0% 50%;

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

  animation:
    servicesGradientShift
    8s
    ease-in-out
    infinite;
}

@keyframes servicesGradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.services-final-cta h2 {
  color: transparent !important;
  -webkit-text-fill-color: transparent;

  background:
    linear-gradient(
      90deg,
      #ff3f91 0%,
      #ff52ae 20%,
      #e159ff 45%,
      #a768ff 68%,
      #5d9dff 100%
    );

  background-size: 180% 100%;
  background-position: 0% 50%;

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

  animation:
    servicesGradientShift
    8s
    ease-in-out
    infinite;
}

@media (max-width: 760px) {
  .services-hero-copy {
    text-align: left;
  }

  .services-hero h1 {
    width: 100%;
    max-width: none;
    margin: 14px 0 16px;
    text-align: left;
  }

  .services-hero-copy > p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}