/* ==========================================================
   AIKCU — DEVELOPMENT v2 / final polish
   Финальная доводка блока "Развитие":
   - убрать дублирующиеся orange circles;
   - провести desktop/mobile траекторию через основания triangle;
   - увеличить визуальную плотность и масштаб triangle;
   - подтянуть секцию к Экосистеме и растворить горизонтальный стык.
   ========================================================== */

.development-step {
  position: relative;
  min-height: 23rem;
  margin-top: -7.5rem;
  padding-top: 3.8rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  background: linear-gradient(
    180deg,
    rgba(10, 52, 76, 0) 0%,
    rgba(10, 52, 76, .018) 20%,
    rgba(10, 52, 76, .045) 50%,
    rgba(10, 52, 76, .035) 100%
  );
}

.development-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  opacity: .12;
  background:
    linear-gradient(27deg, transparent 49.7%, rgba(99, 200, 238, .028) 50%, transparent 50.3%),
    linear-gradient(153deg, transparent 49.7%, rgba(255, 128, 40, .014) 50%, transparent 50.3%);
  background-size: 25rem 20rem, 28rem 22rem;
}

.development-step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(255, 126, 34, .42) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(91, 199, 238, .28) 0 1px, transparent 1.45px);
  background-size: 18rem 18rem, 20rem 21rem;
  background-position: 5rem 3rem, 13rem 9rem;
}

.development-step__atmosphere {
  position: absolute;
  z-index: -3;
  width: 58rem;
  height: 19rem;
  right: -1rem;
  top: 0.4rem;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 20rem 8rem at 42% 60%, rgba(79, 187, 226, .15), transparent 72%),
    radial-gradient(ellipse 16rem 6rem at 70% 42%, rgba(67, 164, 206, .09), transparent 74%),
    radial-gradient(ellipse 10rem 4rem at 61% 59%, rgba(255, 123, 31, .028), transparent 74%);
  filter: blur(18px);
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, .22) 1.5rem,
      rgba(0, 0, 0, .62) 3.25rem,
      black 5.5rem,
      black 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, .22) 1.5rem,
      rgba(0, 0, 0, .62) 3.25rem,
      black 5.5rem,
      black 100%
    );
}

.development-step__atmosphere::before {
  content: "";
  position: absolute;
  width: 64rem;
  height: 8rem;
  left: 46%;
  top: -4.2rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(73, 177, 217, .09), rgba(40, 127, 165, .03) 48%, transparent 76%);
  filter: blur(18px);
}

.development-step__layout {
  min-height: 20rem;
  padding-block: .2rem 1.1rem;
  display: grid;
  grid-template-columns: minmax(24rem, 28rem) minmax(40rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2.2rem);
}

.development-step__copy {
  position: relative;
  z-index: 5;
  align-self: center;
  max-width: 27.5rem;
  padding-right: .4rem;
}

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

.development-step__copy h2 {
  max-width: 27rem;
  margin: 0 0 1rem;
  color: var(--text);
  font-size: clamp(2.55rem, 2.95vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 500;
}

.development-step__copy h2 span {
  display: block;
  white-space: nowrap;
}

.development-step__copy > p:not(.development-step__eyebrow) {
  max-width: 22rem;
  margin: 0;
  color: var(--secondary);
  font-size: .98rem;
  line-height: 1.62;
}

.development-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 62rem);
  min-height: 20rem;
  justify-self: end;
  isolation: isolate;
}

.development-stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -1rem -1rem -1rem -1rem;
  pointer-events: none;
  background:
    radial-gradient(ellipse 18rem 7rem at 38% 68%, rgba(78, 183, 224, .12), transparent 72%),
    radial-gradient(ellipse 18rem 7rem at 64% 44%, rgba(69, 166, 207, .09), transparent 74%),
    radial-gradient(ellipse 10rem 4rem at 54% 58%, rgba(255, 123, 31, .028), transparent 74%);
  filter: blur(10px);
}

.development-stage__path {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
}

.development-path {
  fill: none;
}

.development-path--glow {
  stroke: rgba(74, 188, 235, .15);
  stroke-width: 4.2;
  filter: blur(5px);
}

.development-path--main {
  stroke: rgba(84, 201, 247, .72);
  stroke-width: 1.55;
  filter: drop-shadow(0 0 5px rgba(84, 201, 247, .22)) drop-shadow(0 0 10px rgba(84, 201, 247, .10));
}

.development-stage__path circle {
  display: none;
}

.skill-triangle {
  position: absolute;
  z-index: 2;
  width: 9.85rem;
  height: 9.1rem;
  transform: translateX(-50%);
  transform-origin: center bottom;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(132, 216, 247, .29) 0%, rgba(71, 150, 183, .18) 35%, rgba(18, 55, 71, .28) 68%, rgba(255, 125, 36, .11) 100%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .16)) drop-shadow(0 0 14px rgba(87, 204, 246, .09));
}

.skill-triangle::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: inherit;
  background: linear-gradient(180deg, rgba(117, 207, 242, .12), rgba(6, 33, 47, .31) 70%, rgba(255, 127, 41, .08));
  border-bottom: 1px solid rgba(255, 139, 62, .58);
}

.skill-triangle::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: .42rem;
  height: .42rem;
  left: 50%;
  bottom: -.19rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 119, 29, .95), 0 0 16px rgba(255, 119, 29, .36);
}

.skill-triangle__inner {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: .78rem;
  width: 80%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.skill-triangle__icon {
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: .42rem;
  display: grid;
  place-items: center;
  border-radius: .42rem;
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  box-shadow: 0 0 13px rgba(255, 255, 255, .075);
}

.skill-triangle__icon--html { background: #eb4d27; }
.skill-triangle__icon--css { background: #1e83ca; }
.skill-triangle__icon--js  { color: #181818; background: #f2d33f; }
.skill-triangle__icon--api { border-radius: 50%; background: #8b56b5; }
.skill-triangle__icon--git {
  transform: rotate(45deg);
  border-radius: .16rem;
  background: #e5532f;
}

.skill-triangle__icon--git + strong {
  margin-top: .14rem;
}

.skill-triangle__inner strong {
  display: block;
  color: #f4f7f7;
  font-size: 1.06rem;
  line-height: 1.06;
}

.skill-triangle__inner > span:last-child {
  margin-top: .16rem;
  color: #9db0ba;
  font-size: .68rem;
  line-height: 1.12;
}

.skill-triangle--html { left: 18%; bottom: 4%; }
.skill-triangle--css  { left: 37%; bottom: 16%; }
.skill-triangle--js   { left: 56%; bottom: 28%; }
.skill-triangle--api  { left: 75%; bottom: 41%; }
.skill-triangle--git  { left: 93%; bottom: 54%; }

.development-step__continuation {
  height: .3rem;
  margin-top: -1rem;
  pointer-events: none;
  background: none;
  filter: none;
}

@media (max-width: 1240px) and (min-width: 961px) {
  .development-step {
    margin-top: -7rem;
    padding-top: 3.5rem;
  }

  .development-step__layout {
    grid-template-columns: minmax(21rem, 23rem) minmax(35rem, 1fr);
    gap: 1.1rem;
  }

  .development-step__copy {
    max-width: 22.5rem;
  }

  .development-step__copy h2 {
    max-width: 22rem;
    font-size: clamp(2.15rem, 2.7vw, 2.65rem);
  }

  .development-step__copy > p:not(.development-step__eyebrow) {
    max-width: 19rem;
    font-size: .9rem;
  }

  .development-stage {
    min-height: 18.7rem;
  }

  .skill-triangle {
    width: 8.55rem;
    height: 7.85rem;
  }

  .skill-triangle__icon {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .76rem;
  }

  .skill-triangle__inner strong {
    font-size: .9rem;
  }

  .skill-triangle__inner > span:last-child {
    font-size: .61rem;
  }
}

@media (max-width: 960px) and (min-width: 761px) {
  .development-step {
    min-height: 22.5rem;
    margin-top: -6.4rem;
    padding-top: 3rem;
    background: linear-gradient(180deg, rgba(10, 52, 76, 0) 0%, rgba(10, 52, 76, .03) 100%);
  }

  .development-step__layout {
    grid-template-columns: minmax(17rem, 18rem) minmax(27rem, 1fr);
    align-items: start;
    gap: .9rem;
  }

  .development-step__copy {
    max-width: 18rem;
  }

  .development-step__copy h2 {
    max-width: 18rem;
    font-size: 2.08rem;
  }

  .development-step__copy h2 span {
    white-space: normal;
  }

  .development-step__copy > p:not(.development-step__eyebrow) {
    max-width: 16.5rem;
    font-size: .85rem;
  }

  .development-stage {
    min-height: 16.8rem;
    width: 100%;
  }

  .skill-triangle {
    width: 6.95rem;
    height: 6.35rem;
  }

  .skill-triangle__icon {
    width: 1.58rem;
    height: 1.58rem;
    margin-bottom: .28rem;
    font-size: .62rem;
  }

  .skill-triangle__inner {
    bottom: .48rem;
  }

  .skill-triangle__inner strong {
    font-size: .76rem;
  }

  .skill-triangle__inner > span:last-child {
    font-size: .52rem;
  }

  .skill-triangle--html { left: 16%; bottom: 4%; }
  .skill-triangle--css  { left: 35%; bottom: 15%; }
  .skill-triangle--js   { left: 54%; bottom: 27%; }
  .skill-triangle--api  { left: 74%; bottom: 40%; }
  .skill-triangle--git  { left: 92%; bottom: 52%; }
}

@media (max-width: 760px) {
  .development-step {
    min-height: 25rem;
    margin-top: -10.4rem;
    padding-top: 2rem;
    background: linear-gradient(180deg, rgba(10, 52, 76, 0) 0%, rgba(10, 52, 76, .025) 100%);
  }

  .development-step__layout {
    min-height: auto;
    padding-block: .6rem 1rem;
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .development-step__copy {
    max-width: 100%;
    padding-right: 0;
  }

  .development-step__copy h2 {
    max-width: 19rem;
    font-size: 2.15rem;
    line-height: 1.05;
    margin-bottom: .75rem;
  }

  .development-step__copy h2 span {
    white-space: normal;
  }

  .development-step__copy > p:not(.development-step__eyebrow) {
    max-width: 19rem;
    font-size: .95rem;
    line-height: 1.6;
  }

  .development-stage {
    min-height: 18.2rem;
    width: 100%;
    transform: translateY(-.45rem);
    margin-bottom: -.45rem;
  }

  .development-stage__path {
    width: 100%;
    inset: 0;
  }

  .skill-triangle {
    width: 6.05rem;
    height: 5.55rem;
  }

  .skill-triangle__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: .24rem;
    font-size: .58rem;
  }

  .skill-triangle__inner {
    bottom: .42rem;
    width: 82%;
  }

  .skill-triangle__inner strong {
    font-size: .70rem;
  }

  .skill-triangle__inner > span:last-child {
    font-size: .49rem;
  }

  .skill-triangle--html { left: 14%; bottom: 4%; }
  .skill-triangle--css  { left: 32%; bottom: 15%; }
  .skill-triangle--js   { left: 50%; bottom: 27%; }
  .skill-triangle--api  { left: 69%; bottom: 39%; }
  .skill-triangle--git  { left: 87%; bottom: 51%; }

  .development-step__atmosphere {
    width: 30rem;
    height: 14rem;
    right: -8rem;
    top: 8rem;
  }

  .development-step__atmosphere::before {
    width: 32rem;
    height: 8rem;
    top: -4.5rem;
  }

  .development-step__continuation {
    height: .35rem;
  }
}

@media (max-width: 420px) {
  .development-step {
    margin-top: -10rem;
    padding-top: 1.8rem;
  }

  .development-step__copy h2 {
    max-width: 17rem;
    font-size: 1.92rem;
    line-height: 1.08;
  }

  .development-step__copy > p:not(.development-step__eyebrow) {
    max-width: 17.5rem;
    font-size: .88rem;
    line-height: 1.62;
  }

  .development-stage {
    min-height: 17.8rem;
    transform: translateY(-.2rem);
    margin-bottom: -.3rem;
  }

  .skill-triangle {
    width: 5.35rem;
    height: 4.9rem;
  }

  .skill-triangle__icon {
    width: 1.34rem;
    height: 1.34rem;
    font-size: .52rem;
  }

  .skill-triangle__inner strong {
    font-size: .61rem;
  }

  .skill-triangle__inner > span:last-child {
    font-size: .43rem;
  }

  .skill-triangle--html { left: 14%; bottom: 5%; }
  .skill-triangle--css  { left: 32%; bottom: 16%; }
  .skill-triangle--js   { left: 50%; bottom: 28%; }
  .skill-triangle--api  { left: 69%; bottom: 40%; }
  .skill-triangle--git  { left: 87%; bottom: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .development-path--glow {
    filter: none;
  }
}

/* ==========================================================
   Mobile trajectory
   ========================================================== */

.development-stage__path--mobile {
  display: none;
}

@media (max-width: 760px) {
  .development-stage__path:not(.development-stage__path--mobile) {
    display: none;
  }

  .development-stage__path--mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .development-stage__path--mobile .development-path--glow {
    stroke: rgba(74, 188, 235, .12);
    stroke-width: 1.8;
    filter: blur(1.5px);
  }

  .development-stage__path--mobile .development-path--main {
    stroke: rgba(84, 201, 247, .62);
    stroke-width: .54;
    filter:
      drop-shadow(0 0 1.6px rgba(84, 201, 247, .24))
      drop-shadow(0 0 3px rgba(84, 201, 247, .10));
  }

  .development-stage__path--mobile circle {
    display: none;
  }
}


/* ==========================================================
   Desktop line actual fix
   Причина предыдущей проблемы:
   desktop SVG не растягивался на development-stage.
   ========================================================== */

@media (min-width: 761px) {
  .development-stage__path:not(.development-stage__path--mobile) {
    width: 100%;
    height: 100%;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .development-stage__path:not(.development-stage__path--mobile) .development-path {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .development-stage__path:not(.development-stage__path--mobile) .development-path--glow {
    stroke: rgba(74, 188, 235, .20);
    stroke-width: 5px;
    filter: blur(4px);
  }

  .development-stage__path:not(.development-stage__path--mobile) .development-path--main {
    stroke: rgba(94, 208, 248, .82);
    stroke-width: 1.6px;
    filter:
      drop-shadow(0 0 4px rgba(84, 201, 247, .26))
      drop-shadow(0 0 9px rgba(84, 201, 247, .12));
  }
}


/* ==========================================================
   Ecosystem → Development TRUE background sync
   Реальная нижняя база Ecosystem: #092f46.
   ========================================================== */

:root {
  --eco-dev-joint: #092f46;
}

/*
  Если старый экспериментальный seam-div остался в HTML,
  он полностью выключен и больше не влияет на изображение.
*/
.ecosystem-development-seam {
  display: none !important;
}

/*
  Ключевая правка:
  первые 12rem Development — ТОЧНО тот же непрозрачный #092f46,
  которым заканчивается Ecosystem. Это покрывает сам физический стык
  и весь negative overlap, а затем фон очень плавно меняется дальше.
*/
.development-step {
  background:
    linear-gradient(
      180deg,
      var(--eco-dev-joint) 0rem,
      var(--eco-dev-joint) 12rem,
      #093149 16rem,
      #0a334b 21rem,
      #0a344c 100%
    );
}

/*
  Геометрические линии Development не начинаются резко у границы:
  они постепенно появляются уже поверх общего базового цвета.
*/
.development-step::before {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0rem,
      rgba(0,0,0,.12) 3rem,
      rgba(0,0,0,.48) 6rem,
      black 10rem,
      black 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      transparent 0rem,
      rgba(0,0,0,.12) 3rem,
      rgba(0,0,0,.48) 6rem,
      black 10rem,
      black 100%
    );
}

/* То же для фоновых точек. */
.development-step::after {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0rem,
      rgba(0,0,0,.10) 3rem,
      rgba(0,0,0,.42) 6rem,
      black 10rem,
      black 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      transparent 0rem,
      rgba(0,0,0,.10) 3rem,
      rgba(0,0,0,.42) 6rem,
      black 10rem,
      black 100%
    );
}

/*
  Mobile overlap около 10rem, поэтому те же первые 12rem
  гарантированно перекрывают границу и на 390px.
*/
@media (max-width: 760px) {
  .development-step {
    background:
      linear-gradient(
        180deg,
        var(--eco-dev-joint) 0rem,
        var(--eco-dev-joint) 12rem,
        #093149 16rem,
        #0a334b 21rem,
        #0a344c 100%
      );
  }
}