/* === 40 · ABOUT — scrub-манифест + bento + маркиза стека === */
.about { position: relative; overflow: hidden; }
.about-glow {
  position: absolute; inset: auto -10% -20% -10%; height: 60%;
  background:
    radial-gradient(50% 60% at 25% 100%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 70%),
    radial-gradient(50% 60% at 80% 90%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 70%);
  filter: blur(18px); pointer-events: none;
}
.about .container { position: relative; z-index: 1; }

.about-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 3.3rem);
  line-height: 1.18; letter-spacing: -.02em;
  max-width: 24ch;
  margin: 1.5rem 0 clamp(3rem, 7vw, 5.5rem);
}
.about-statement .about-word { transition: color .2s; }

.about-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; gap: 14px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.about-card {
  grid-column: span 2;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--ice) 16%, transparent);
  border-radius: var(--radius);
  background: rgba(15,21,36,.78);
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .4s, transform .4s, box-shadow .4s;
}
.about-card--lg { grid-row: span 2; justify-content: center; }
.about-card:hover {
  border-color: color-mix(in srgb, var(--sky) 55%, transparent);
  transform: translateY(-4px);
  box-shadow: var(--glow-cyan);
}
.about-card h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); }
.about-card--lg h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.about-card p { color: var(--text-dim); }

.about-stack {
  display: flex; align-items: center; gap: 1.5rem;
  border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.about-stack-label {
  flex: none; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--text-dim);
}
.about-marquee {
  position: relative; overflow: hidden; flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.about-marquee-row {
  display: flex; gap: 2.5rem; width: max-content;
  animation: about-scroll 26s linear infinite;
}
.about-marquee:hover .about-marquee-row { animation-play-state: paused; }
.about-marquee-row span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--text-dim); white-space: nowrap;
  transition: color .3s;
}
.about-marquee-row span:hover { color: var(--cyan); }
@keyframes about-scroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-card, .about-card--lg { grid-column: span 1; grid-row: auto; }
  .about-stack { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-marquee-row { animation: none; }
}