.ecosystem-step {
  position: relative;
  min-height: 52rem;
  margin-top: -6rem;
  padding-top: 6rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);

  background:
    linear-gradient(
      180deg,
      rgba(10,49,73,0) 0rem,
      rgba(10,49,73,.22) 3rem,
      rgba(10,49,73,.68) 7rem,
      #0b3952 13rem,
      #0a354d 67%,
      #092f46 100%
    );
}

.ecosystem-step::before {
  content: "";
  position: absolute;
  z-index: -5;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background:
    linear-gradient(27deg, transparent 49.7%, rgba(101,198,235,.043) 50%, transparent 50.3%),
    linear-gradient(153deg, transparent 49.7%, rgba(255,127,38,.032) 50%, transparent 50.3%);
  background-size: 30rem 25rem, 35rem 29rem;
}

.ecosystem-step::after {
  content: "";
  position: absolute;
  z-index: -4;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,126,34,.70) 0 1px, transparent 1.65px),
    radial-gradient(circle, rgba(90,198,238,.52) 0 1px, transparent 1.65px);
  background-size: 18rem 21rem, 23rem 25rem;
  background-position: 2rem 5rem, 11rem 1rem;
  opacity: .37;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 6rem, black 100%);
  mask-image: linear-gradient(180deg, transparent 0, black 6rem, black 100%);
}

.ecosystem-step__atmosphere {
  position: absolute;
  z-index: -2;
  width: 56rem;
  height: 34rem;
  left: 58%;
  top: 9.5rem;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse,
      rgba(98,207,246,.24),
      rgba(48,146,185,.115) 37%,
      rgba(255,123,34,.048) 54%,
      transparent 73%
    );
  filter: blur(18px);
}

.ecosystem-step__atmosphere::before {
  content: "";
  position: absolute;
  width: 76rem;
  height: 13rem;
  left: 50%;
  top: -8.7rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(62,172,214,.14),
      rgba(34,115,153,.055) 44%,
      transparent 73%
    );
  filter: blur(17px);
}

.ecosystem-step__layout {
  min-height: 42rem;
  padding-block: 1.8rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(13.25rem, .50fr) minmax(43rem, 1.50fr);
  align-items: center;
  gap: clamp(1.5rem, 2.8vw, 3rem);
}

.ecosystem-step__copy {
  position: relative;
  z-index: 4;
  align-self: center;
}

.ecosystem-step__eyebrow {
  margin: 0 0 .85rem;
  color: var(--orange);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.ecosystem-step__copy h2 {
  margin: 0 0 .95rem;
  color: var(--text);
  font-size: clamp(2.45rem, 3.2vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 500;
}

.ecosystem-step__copy > p:not(.ecosystem-step__eyebrow) {
  max-width: 16.5rem;
  margin: 0 0 1.45rem;
  color: var(--secondary);
  font-size: .90rem;
  line-height: 1.60;
}

.ecosystem-step__link {
  min-height: 2.7rem;
  padding-inline: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--orange);
  background: rgba(7,31,47,.20);
  border: 1px solid rgba(255,126,39,.58);
  border-radius: .65rem;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 650;
  backdrop-filter: blur(10px);
}

.ecosystem-stage {
  position: relative;
  min-height: 38.5rem;
  isolation: isolate;
}

.ecosystem-stage::before {
  content: "";
  position: absolute;
  z-index: -3;
  width: 38rem;
  height: 30rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(255,124,34,.145),
      rgba(82,194,234,.15) 33%,
      rgba(40,132,173,.075) 57%,
      transparent 75%
    );
  filter: blur(11px);
}

.ecosystem-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(255,125,35,.16),
      rgba(255,125,35,.055) 34%,
      transparent 69%
    );
  filter: blur(7px);
}

.ecosystem-stage__lines {
  position: absolute;
  z-index: 0;
  width: min(100%, 46rem);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.ecosystem-stage__lines line {
  stroke: rgba(255,132,43,.58);
  stroke-width: 1.45;
  filter:
    drop-shadow(0 0 4px rgba(255,116,28,.38))
    drop-shadow(0 0 8px rgba(255,116,28,.14));
}

.ecosystem-stage__lines circle {
  fill: #ff7a21;
  filter:
    drop-shadow(0 0 6px rgba(255,116,28,.95))
    drop-shadow(0 0 13px rgba(255,116,28,.46));
}

.ecosystem-stage__lines .orbit {
  fill: none;
  stroke: rgba(111,214,250,.20);
  stroke-width: 1;
  stroke-dasharray: 4 8;
}

.ecosystem-core,
.project-hex {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:
    linear-gradient(
      145deg,
      rgba(70,149,176,.34),
      rgba(20,68,87,.32) 48%,
      rgba(3,23,36,.54)
    );
  backdrop-filter: blur(12px);
  filter: drop-shadow(0 16px 27px rgba(0,0,0,.12));
}

.ecosystem-core::before,
.project-hex::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  border: 1px solid rgba(167,235,255,.82);
  box-shadow:
    inset 0 0 24px rgba(101,214,252,.085),
    0 0 16px rgba(88,203,245,.13);
  pointer-events: none;
}

.ecosystem-core {
  width: 11.15rem;
  height: 10.05rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,123,31,.28), transparent 49%),
    linear-gradient(
      145deg,
      rgba(66,136,160,.50),
      rgba(8,39,55,.64)
    );
  box-shadow:
    0 0 30px rgba(255,119,29,.29),
    0 0 58px rgba(255,119,29,.11),
    0 0 72px rgba(86,200,240,.10);
}

.ecosystem-core span {
  color: var(--text);
  font-size: 1.72rem;
  font-weight: 800;
}

.ecosystem-core strong {
  color: var(--orange);
  font-size: 1.82rem;
}

.project-hex {
  width: 9.7rem;
  height: 8.75rem;
  padding: .8rem .65rem .65rem;
  color: var(--text);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition:
    transform 180ms ease,
    filter 180ms ease,
    background 180ms ease;
}

.project-hex:hover,
.project-hex:focus-visible,
.project-hex.is-active {
  z-index: 5;
  transform: translate(-50%, -50%) translateY(-3px) scale(1.035);
  filter:
    drop-shadow(0 17px 27px rgba(0,0,0,.15))
    drop-shadow(0 0 19px rgba(90,207,247,.17));
  background:
    linear-gradient(
      145deg,
      rgba(78,162,189,.47),
      rgba(23,75,95,.42) 48%,
      rgba(4,27,41,.64)
    );
}

/* Плотнее вокруг AIKCU LAB, синхронно с SVG endpoint. */
.project-hex--service   { left: 50%;   top: 16.9%; }
.project-hex--level     { left: 75.7%; top: 30.6%; }
.project-hex--checking  { left: 75.7%; top: 68.5%; }
.project-hex--portfolio { left: 50%;   top: 83.9%; }
.project-hex--board     { left: 24.3%; top: 68.5%; }
.project-hex--currency  { left: 24.3%; top: 30.6%; }

.project-hex__thumb {
  width: 4.4rem;
  height: 2.42rem;
  margin-bottom: .32rem;
  overflow: hidden;
  display: block;
  border-radius: .35rem;
  border: 1px solid rgba(172,233,255,.23);
  background: rgba(3,17,27,.40);
}

.project-hex__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-hex__symbol {
  width: 2.85rem;
  height: 2.85rem;
  margin-bottom: .27rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,126,36,.42);
  color: var(--orange);
  background: rgba(7,27,40,.30);
}

.project-hex__symbol--service {
  font-size: 1.9rem;
  line-height: 1;
}

.project-hex__symbol--portfolio {
  color: #c77dff;
  border-color: rgba(199,125,255,.44);
}

.project-hex__title {
  display: block;
  color: #f6f8f7;
  font-size: .82rem;
  line-height: 1.13;
  font-weight: 730;
}

.project-hex__status {
  margin-top: .25rem;
  display: block;
  font-size: .64rem;
  line-height: 1.1;
  font-weight: 590;
}

.status-prototype { color: #7dd6fc; }
.status-live      { color: #5be093; }
.status-done      { color: #5be093; }
.status-mvp       { color: #6fd3ff; }
.status-portfolio { color: var(--orange); }

/* Preview: остаётся только интерактивным состоянием. */
.project-preview {
  position: absolute;
  z-index: 12;
  width: min(22rem, 37%);
  right: -1.8rem;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(
      145deg,
      rgba(41,94,112,.39),
      rgba(6,31,45,.72)
    );
  border: 1px solid rgba(171,233,255,.48);
  border-radius: 1rem;
  box-shadow:
    0 22px 58px rgba(0,0,0,.18),
    0 0 32px rgba(87,202,243,.09);
  backdrop-filter: blur(18px);
}

.project-preview[hidden] {
  display: none !important;
}

.project-preview__close {
  position: absolute;
  z-index: 3;
  top: .55rem;
  right: .55rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: #eaf5f8;
  background: rgba(4,23,35,.60);
  border: 1px solid rgba(150,218,245,.30);
  border-radius: 50%;
  cursor: pointer;
}

.project-preview__media {
  aspect-ratio: 16 / 9.3;
  overflow: hidden;
  background: #081827;
}

.project-preview__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Checking Service: показываем скриншот целиком, без обрезки по краям. */
.project-preview__media img[src$="checking-service.webp"] {
  object-fit: contain;
  object-position: center;
}

.project-preview__body {
  padding: .95rem 1.1rem 1.1rem;
}

.project-preview__label {
  margin: 0 0 .45rem;
  color: #8aacba;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: .61rem;
  letter-spacing: .12em;
}

.project-preview h3 {
  margin: 0 0 .5rem;
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1.12;
}

.project-preview__body > p:not(.project-preview__label) {
  margin: 0;
  color: var(--secondary);
  font-size: .82rem;
  line-height: 1.52;
}

.project-preview__meta {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  color: #93aab6;
  font-size: .67rem;
}

.project-preview__meta span:first-child {
  color: #56db8b;
  font-weight: 700;
}

.project-preview__link {
  margin-top: .8rem;
  display: inline-block;
  color: var(--cyan);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
}

.project-preview__link.is-hidden {
  display: none;
}

.ecosystem-step__continuation {
  height: 6.5rem;
  margin-top: -3rem;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 52% 22%,
      rgba(86,192,231,.11),
      transparent 57%
    );
  filter: blur(8px);
}

#skills-anchor,
#about-anchor {
  position: absolute;
  left: 0;
}

#skills-anchor { bottom: 1.5rem; }
#about-anchor { bottom: 0; }

@media (max-width: 1040px) {
  .ecosystem-step__layout {
    grid-template-columns: minmax(12rem, .43fr) minmax(37rem, 1.57fr);
    gap: 1.2rem;
  }

  .ecosystem-stage {
    transform: scale(.94);
    transform-origin: center center;
  }

  .project-preview {
    right: -.5rem;
    width: 20.5rem;
  }
}

@media (max-width: 760px) {
  .ecosystem-step {
    min-height: 52rem;
    margin-top: -4rem;
    padding-top: 4rem;
  }

  .ecosystem-step__layout {
    min-height: auto;
    padding-block: 4.25rem 1.25rem;
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .ecosystem-step__copy h2 {
    font-size: 2.5rem;
  }

  .ecosystem-step__copy > p:not(.ecosystem-step__eyebrow) {
    max-width: 22rem;
  }

  .ecosystem-stage {
    width: 100%;
    min-height: 31.5rem;
    transform: none;
  }

  .ecosystem-stage__lines {
    width: 29rem;
    max-width: 120%;
  }

  .ecosystem-core {
    width: 6.7rem;
    height: 6.05rem;
  }

  .ecosystem-core span   { font-size: 1.06rem; }
  .ecosystem-core strong { font-size: 1.13rem; }

  .project-hex {
    width: 6.25rem;
    height: 5.7rem;
    padding: .5rem .38rem .38rem;
  }

  .project-hex__thumb {
    width: 2.9rem;
    height: 1.6rem;
  }

  .project-hex__symbol {
    width: 2.02rem;
    height: 2.02rem;
  }

  .project-hex__title {
    font-size: .60rem;
  }

  .project-hex__status {
    font-size: .50rem;
  }

  .project-hex--service   { left: 50%;   top: 16.9%; }
  .project-hex--level     { left: 75.7%; top: 30.6%; }
  .project-hex--checking  { left: 75.7%; top: 68.5%; }
  .project-hex--portfolio { left: 50%;   top: 83.9%; }
  .project-hex--board     { left: 24.3%; top: 68.5%; }
  .project-hex--currency  { left: 24.3%; top: 30.6%; }

  .project-preview {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
    transform: none;
    margin-top: .9rem;
  }

  .project-preview__media {
    aspect-ratio: 16 / 8.9;
  }

  .ecosystem-step__continuation {
    height: 5rem;
    margin-top: 0;
  }
}


/* ==========================================================
   v2.1 — интерактивное состояние project preview
   Статическая Экосистема v2 не меняется.
   ========================================================== */

.ecosystem-diagram {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: none;
  transform-origin: 50% 50%;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    filter 260ms ease;
}

/*
  Когда preview открыт на desktop:
  диаграмма не перекрывается карточкой, а уступает ей место.
*/
@media (min-width: 761px) {
  .ecosystem-stage.is-preview-open .ecosystem-diagram {
    transform: translateX(-15%) scale(.84);
    filter: saturate(.96);
  }

  .project-preview {
    width: min(21.5rem, 34%);
    right: -1.4rem;
  }
}

/* Backdrop на desktop не нужен. */
.project-preview-backdrop {
  display: none;
}

/*
  Preview появляется поверх диаграммы только как отдельное состояние.
  hidden остаётся источником истины для закрытого состояния.
*/
.project-preview:not([hidden]) {
  animation: ecosystem-preview-in 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes ecosystem-preview-in {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

/* ----------------------------------------------------------
   Mobile <= 760px
   Preview становится modal / bottom-sheet.
   Радиальная схема НЕ двигается и НЕ исчезает.
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  .ecosystem-stage.is-preview-open .ecosystem-diagram {
    transform: none;
    filter: none;
  }

  .project-preview-backdrop:not([hidden]) {
    position: fixed;
    z-index: 998;
    inset: 0;
    display: block;
    background: rgba(1, 13, 22, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .project-preview {
    position: fixed;
    z-index: 999;
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(78vh, 42rem);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none;
    border-radius: 1rem;
    box-shadow:
      0 28px 80px rgba(0,0,0,.38),
      0 0 34px rgba(87,202,243,.12);
  }

  .project-preview:not([hidden]) {
    animation: ecosystem-sheet-in 210ms cubic-bezier(.2,.8,.2,1);
  }

  @keyframes ecosystem-sheet-in {
    from {
      opacity: 0;
      transform: translateY(18px) scale(.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .project-preview__close {
    position: sticky;
    float: right;
    top: .55rem;
    margin: .55rem .55rem -2.55rem 0;
  }

  .project-preview__media {
    aspect-ratio: 16 / 9.1;
  }

  body.project-preview-modal-open {
    overflow: hidden;
    touch-action: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-diagram,
  .project-preview:not([hidden]) {
    transition: none;
    animation: none;
  }
}