/* ─── DESKTOP: абсолютный режим ─── */
  .diagram {
    position: relative;
    width: 1240px;
    height: 536px;
    flex-shrink: 0;
  }

  .diagram__card {
    position: absolute;
    background: #F6F6F6;
    border-radius: 16px;
    border: 1px solid #EAEAEA;
    overflow: hidden;
  }

  .diagram__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0 10px;
  }

  .diagram__card-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #EAEAEA;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .diagram__card-icon svg { width: 16px; height: 16px; }

  .diagram__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .diagram__card-title-text {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .diagram__card-dots {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
  }

  .diagram__card-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #868686;
  }

  .diagram__card-body {
    margin: 6px 8px 8px 8px;
    background: #F0F0F0;
    border-radius: 8px;
    padding: 4px;
  }

  .diagram__card-inner {
    background: #FAFAFA;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .diagram__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    pointer-events: none;
  }

  .diagram__glow--blue { background: rgb(60 74 250 / 55%); }
  .diagram__glow--pink { background: #F9C8E6; }

  /* ── Список пунктов ── */
  .diagram__bullet-list {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    z-index: 1;
  }

  .diagram__bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
  }

  .diagram__bullet-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #868686;
    flex-shrink: 0;
    margin-top: 9px;
  }

  .diagram__bullet-text {


font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;

color: #868686;



  }

  /* Ссылка «подробнее» */
  .diagram__link-more {

    color: #FBB111;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding-left: 4px;


font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 15px;
/* identical to box height */
text-decoration-line: underline;

/* yellow */
color: #FBB111;



  }
  .diagram__link-more:hover { text-decoration: underline; }

  /* ─── Модификаторы позиций карточек (desktop) ─── */
  .diagram__card--1 { left: 20px;  top: 88px;  width: 364px; height: 244px; }
  .diagram__card--1 .diagram__card-body { height: 184px; }

  .diagram__card--2 { left: 421px; top: 20px;  width: 401px; height: 172px; }
  .diagram__card--2 .diagram__card-body { height: 112px; }

  .diagram__card--3 { left: 420px; top: 296px; width: 426px; height: 220px; }
  .diagram__card--3 .diagram__card-body { height: 160px; }

  .diagram__card--4 { left: 881px; top: 41px;  width: 339px; height: 268px; }
  .diagram__card--4 .diagram__card-body { height: 196px; }

  /* ─── SVG линии ─── */
  .diagram__connections {
    position: absolute;
    top: 0; left: 0;
    width: 1240px;
    height: 536px;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════
     ПЛАНШЕТ: < 1200px — сетка 2 в ряд, без линий
  ═══════════════════════════════════════════ */
  @media (max-width: 1199px) {
 
    .diagram {
      position: static;
      width: 100%;
      max-width: 800px;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 0 auto;
    }

    .diagram__connections {
      display: none;
    }

    .diagram__card {
      position: static;
      width: 100% !important;
      height: auto !important;
    }

    .diagram__card-body {
      height: auto !important;
    }

    .diagram__card-inner {
      height: auto !important;
    }
  }

  /* ═══════════════════════════════════════════
     МОБИЛКА: < 600px — по 1 в ряд
  ═══════════════════════════════════════════ */

  
  @media (max-width: 599px) {
  
    .diagram {
      grid-template-columns: 1fr;
      max-width: 100%;
      gap: 30px;
    }

    .diagram__card-title-text {
      font-size: 12px;


font-size: 16px;
line-height: 20px;
font-weight: 500;

    }

    .diagram__bullet-text {
  
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;

color: #868686;



    }

    .diagram__bullet-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #868686;
    flex-shrink: 0;
    margin-top: 9px;
}
  }


   @media (max-width: 599px) {

 .diagram  {
  position: relative;
max-width: 100%;
        gap: 30px;
        display: flex;
        flex-direction: column;


          
 }
 .diagram > .diagram__card {
position: relative;
      width: 100% !important;
        height: auto !important;
        left: initial!important;
        right: initial!important;
        top: initial!important;
        bottom: initial!important;
                overflow: visible;
 }

 .diagram >   .diagram__card:not(.diagram__card--4)::after {
      content: '';
    position: absolute;
        width: 15px;
        height: 54px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='43' viewBox='0 0 12 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L6 38' stroke='%2300CA5E' stroke-width='1.5'/%3E%3Crect x='11' y='1' width='10' height='10' rx='5' transform='rotate(90 11 1)' fill='white' stroke='black' stroke-width='2'/%3E%3Crect x='11' y='32' width='10' height='10' rx='5' transform='rotate(90 11 32)' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
        left: 50%;
        margin-left: -6px;
        bottom: -43px;
 }

 }
  /* @media (max-width: 599px) {
 

  .diagram__card:not(.diagram__card--4)::after {
    content: '';
    position: absolute;
    top: calc(100% - 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 43px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='43' viewBox='0 0 12 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L6 38' stroke='%2300CA5E' stroke-width='1.5'/%3E%3Crect x='11' y='1' width='10' height='10' rx='5' transform='rotate(90 11 1)' fill='white' stroke='black' stroke-width='2'/%3E%3Crect x='11' y='32' width='10' height='10' rx='5' transform='rotate(90 11 32)' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
  }
} */

 /* .diagram > .diagram__card::after {
   width: 12px;
    height: 43px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='43' viewBox='0 0 12 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L6 38' stroke='%2300CA5E' stroke-width='1.5'/%3E%3Crect x='11' y='1' width='10' height='10' rx='5' transform='rotate(90 11 1)' fill='white' stroke='black' stroke-width='2'/%3E%3Crect x='11' y='32' width='10' height='10' rx='5' transform='rotate(90 11 32)' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
 } */