.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: start;
  gap: 30px;
}

.about-panel {
  padding: 27px;
}

.about-panel h2 {
  margin: 18px 0 12px;

  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.05;
}

.about-panel p {
  margin: 0 0 15px;

  color: var(--ddcs-text-soft);

  line-height: 1.8;
}

.about-panel p:last-child {
  margin-bottom: 0;
}

.about-values {
  margin-top: 31px;
}

.about-value {
  padding: 22px;
}

.about-value h3 {
  margin: 16px 0 9px;

  font-size: 19px;
}

.about-value p {
  margin: 0;

  color: var(--ddcs-text-soft);

  font-size: 11px;
  line-height: 1.7;
}

.about-value-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: var(--ddcs-lime);
  background: var(--ddcs-lime-soft);

  font-size: 18px;
  font-weight: 900;
}

.about-value-icon.purple {
  color: #d9adff;
  background: var(--ddcs-purple-soft);
}

.about-mission-section {
  border-top: 1px solid var(--ddcs-border);

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(139, 0, 255, 0.1),
      transparent 30%
    ),
    rgba(255, 255, 255, 0.012);
}

.about-mission-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 31px;

  border: 1px solid rgba(182, 255, 0, 0.16);
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(182, 255, 0, 0.055),
      rgba(139, 0, 255, 0.075)
    ),
    var(--ddcs-surface);
}

.about-mission-card h2 {
  max-width: 760px;

  margin: 10px 0 11px;

  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
}

.about-mission-card p {
  max-width: 770px;

  margin: 0;

  color: var(--ddcs-text-soft);

  line-height: 1.75;
}

@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-mission-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 650px) {
  .about-panel,
  .about-value,
  .about-mission-card {
    padding: 21px;
  }

  .about-mission-card .ddcs-button {
    width: 100%;
  }
}