/* === Base container === */
.znak-levels-container {
  width: 100%;
  padding: 10px;
  text-align: center;
  font-family: "Normalidad", Sans-serif;
  overflow: hidden;
  position: relative;
}

/* subtle background grid glow */
.znak-levels-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23636b87' stroke-width='0.3'%3E%3Cpath d='M100 0H0v100'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}

/* === Pyramid layout === */
.znak-levels-pyramid {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 2;
}

/* === Level item === */
.znak-level {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 16px;
  padding: 18px 28px;
  width: 100%;
  max-width: 900px;
  border: 1px solid rgba(255,255,255,0.08);
  background: radial-gradient(circle at 30% 30%, #1c2c4cd9, #0c1220de);
  color: #fff;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.19,1,0.22,1), box-shadow 0.3s, width 0.4s ease;
}

.znak-level:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

/* glowing pulse for L2/L3 */
.znak-level[data-level="L2"],
.znak-level[data-level="L3"] {
  background: linear-gradient(145deg, #be195af2, #be195a9e);
  border: 1px solid rgba(255,255,255,0.15);
  animation: glowPulse 3s infinite ease-in-out;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(192,28,84,0.5), inset 0 0 8px rgba(192,28,84,0.3);
  }
  50% {
    box-shadow: 0 0 24px rgba(192,28,84,0.8), inset 0 0 12px rgba(192,28,84,0.4);
  }
}

/* === Texts === */
.znak-label {
  position: static;
  font-weight: 600;
  opacity: 0.85;
  min-width: 36px;
  text-align: left;
}

.znak-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.4;
  text-align: left;
}

/* === Description box === */
.znak-levels-description {
  margin-top: 40px;
  border-radius: 14px;
  padding: 24px;
  max-width: 900px;
  margin-inline: auto;
  transition: all 0.3s;
  background: #efefefba;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

/* === Caption === */
.znak-levels-caption {
  color: #7f89b1;
  margin-top: 24px;
  font-size: 15px;
  letter-spacing: 0.2px;
}

/* === Desktop pyramid widths (smooth) === */
@media (min-width: 1025px) {
  .znak-levels-pyramid {
    align-items: center;
  }

  .znak-level[data-level="L1"] { width: 95%; }
  .znak-level[data-level="L2"] { width: 87%; }
  .znak-level[data-level="L3"] { width: 79%; }
  .znak-level[data-level="L4"] { width: 71%; }
  .znak-level[data-level="L5"] { width: 63%; }

  .znak-levels-pyramid .znak-level {
    margin: 0 auto;
  }
}

/* === Tablet widths (768–1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
  .znak-level[data-level="L1"] { width: 100%; }
  .znak-level[data-level="L2"] { width: 94%; }
  .znak-level[data-level="L3"] { width: 88%; }
  .znak-level[data-level="L4"] { width: 82%; }
  .znak-level[data-level="L5"] { width: 76%; }
}

/* === Mobile widths (<=767px) === */
@media (max-width: 767px) {
  .znak-level[data-level="L1"] { width: 100%; }
  .znak-level[data-level="L2"] { width: 96%; }
  .znak-level[data-level="L3"] { width: 92%; }
  .znak-level[data-level="L4"] { width: 88%; }
  .znak-level[data-level="L5"] { width: 84%; }

  .znak-levels-container {
    padding: 40px 15px;
  }

  .znak-level {
    max-width: 500px;
    margin: 0 auto;
    justify-content: flex-start;
    padding: 16px 20px;
  }

  .znak-label {
    font-size: 13px;
    min-width: 32px;
  }

  .znak-title {
    font-size: 14px;
  }
}

/* === Desktop pyramid widths — fluid with clamp() (v4.0) === */
@media (min-width: 1025px) {
  .znak-levels-pyramid {
    align-items: center;
  }

  .znak-level[data-level="L1"] { width: clamp(80%, 95vw, 95%); }
  .znak-level[data-level="L2"] { width: clamp(72%, 88vw, 87%); }
  .znak-level[data-level="L3"] { width: clamp(64%, 81vw, 79%); }
  .znak-level[data-level="L4"] { width: clamp(56%, 74vw, 71%); }
  .znak-level[data-level="L5"] { width: clamp(48%, 67vw, 63%); }

  .znak-levels-pyramid .znak-level {
    margin: 0 auto;
    transition: width 0.5s ease, transform 0.3s ease;
  }

  /* лёгкое «всплытие» активного уровня */
  .znak-level:hover {
    transform: translateY(-6px) scale(1.025);
  }
}

.znak-level {
  justify-content: flex-start;
  padding-left: clamp(24px, 3vw, 40px);
}