/**
 * Block: Platforms / Что делаем (#pichy-platforms)
 * Mesh-градиент + полупрозрачные панели, компактная секция, воздух внутри.
 */

#pichy-platforms.pichy-block--platforms {
  --plat-blue: #302C73;
  --plat-blue-deep: #1E1B4B;
  --plat-orange: #DE6916;
  --plat-orange-light: #E8741A;
  --plat-orange-deep: #B85610;
  --plat-peach: #F2A474;
  --plat-cream: #FAEDE5;
  --plat-glass: rgba(250, 237, 229, 0.94);
  --plat-glass-strong: #FFFFFF;
  --plat-line: rgba(48, 44, 115, 0.1);
  --plat-line-soft: rgba(48, 44, 115, 0.07);
  --plat-radius: 1.125rem;
  overflow: hidden;
  background-color: var(--plat-orange-deep);
  color: var(--plat-cream);
}

/* ─── Background mesh ─── */
#pichy-platforms .platforms-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#pichy-platforms .platforms-bg__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% -18%, rgba(255, 236, 214, 0.75) 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 100% 20%, rgba(242, 164, 116, 0.42) 0%, transparent 54%),
    radial-gradient(ellipse 44% 38% at 0% 88%, rgba(48, 44, 115, 0.38) 0%, transparent 56%),
    linear-gradient(
      168deg,
      #F2A474 0%,
      var(--plat-orange-light) 20%,
      var(--plat-orange) 48%,
      var(--plat-orange-deep) 82%,
      #7A3810 100%
    );
}

#pichy-platforms .platforms-bg__warm {
  position: absolute;
  width: min(62vw, 34rem);
  height: min(62vw, 34rem);
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 244, 0.28) 0%, transparent 68%);
  filter: blur(48px);
}

#pichy-platforms .platforms-bg__depth {
  position: absolute;
  width: min(48vw, 24rem);
  height: min(48vw, 24rem);
  bottom: -18%;
  left: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 27, 75, 0.32) 0%, transparent 66%);
  filter: blur(44px);
}

/* ─── Section: компактнее по высоте, воздух внутри ─── */
#pichy-platforms .platforms-section {
  position: relative;
  z-index: 1;
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    gap: 2.25rem;
  }
}

@media (min-width: 1024px) {
  #pichy-platforms .platforms-section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    gap: 2.5rem;
  }
}

/* ─── Header ─── */
#pichy-platforms .platforms-header__label {
  display: block;
  margin: 0 0 1rem;
  color: rgba(255, 248, 240, 0.72);
}

#pichy-platforms .platforms-header__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  #pichy-platforms .platforms-header__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 2rem 3.5rem;
    align-items: end;
  }
}

#pichy-platforms .platforms-header__title {
  margin: 0;
  max-width: 15ch;
  color: var(--plat-cream);
  text-wrap: balance;
}

#pichy-platforms .platforms-header__lead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm2);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 248, 240, 0.82);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-header__lead {
    font-size: calc(var(--pichy-sm2) * 1.05);
    letter-spacing: 0.16em;
    line-height: 1.8;
  }
}

/* ─── Panels: cream без обводок ─── */
#pichy-platforms .platforms-pillars-band,
#pichy-platforms .platforms-map {
  background: var(--plat-glass);
  border: none;
  border-radius: var(--plat-radius);
  box-shadow: 0 14px 36px rgba(74, 28, 4, 0.14);
  color: var(--plat-blue);
}

/* ─── Pillars: одна панель, три колонки ─── */
#pichy-platforms .platforms-pillars-band {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-pillars-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#pichy-platforms .platforms-pillar {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.625rem 1.5rem;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-pillar {
    padding: 1.75rem 1.625rem;
  }
}

#pichy-platforms .platforms-pillar__num {
  display: block;
  font-family: var(--pichy-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--plat-orange);
  opacity: 1;
}

#pichy-platforms .platforms-pillar__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

#pichy-platforms .platforms-pillar__title {
  margin: 0;
  font-family: var(--pichy-font-display);
  font-size: var(--pichy-t0);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--plat-blue-deep);
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-pillar__title {
    font-size: calc(var(--pichy-t0) * 1.05);
  }
}

#pichy-platforms .platforms-pillar__text {
  margin: 0;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm1);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: var(--pichy-tracking-body);
  color: var(--plat-blue);
  opacity: 0.92;
}

/* ─── Map: типографическая сетка площадок ─── */
#pichy-platforms .platforms-map {
  padding: 1.75rem 1.5rem 1.875rem;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-map {
    padding: 2rem 2rem 2.125rem;
  }
}

#pichy-platforms .platforms-map__grid {
  display: grid;
  gap: 1.75rem 1.5rem;
}

@media (min-width: 768px) {
  #pichy-platforms .platforms-map__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.75rem;
  }
}

#pichy-platforms .platforms-map__zone {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#pichy-platforms .platforms-map__label {
  margin: 0;
  font-family: var(--pichy-font-body);
  font-size: var(--pichy-sm2);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plat-orange);
  opacity: 0.72;
}

#pichy-platforms .platforms-map__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#pichy-platforms .platforms-map__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--pichy-font-display);
  font-size: clamp(0.75rem, 1.35vw, 0.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--plat-blue-deep);
  padding: 0;
  background: none;
  border: none;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

#pichy-platforms .platforms-map__item:not(:last-child)::after {
  content: "·";
  margin-left: 0.625rem;
  font-family: var(--pichy-font-body);
  font-weight: 400;
  font-size: 0.875em;
  letter-spacing: 0;
  color: rgba(222, 105, 22, 0.45);
  pointer-events: none;
}

#pichy-platforms .platforms-map__item:hover {
  color: var(--plat-orange-deep);
  letter-spacing: 0.13em;
}

@media (min-width: 1024px) {
  #pichy-platforms .platforms-pillars-band,
  #pichy-platforms .platforms-map {
    border-radius: 1.25rem;
  }
}