/* =============================================================================
   about.css — About-cluster polish (Quiet Aurora)
   Loaded on: /about, /about/ceo, /about/culture, /about/careers (+ de/fr/it mirrors)
   Scope: everything is gated under .about-page (added to <main>) so the rest of
   the site is untouched. Palette stays locked: blue #2E5CF2 primary, yellow
   #FFD300 single pop. Motion respects prefers-reduced-motion (handled in main.css
   global block + explicit fallbacks below).
   ========================================================================== */

/* ---- 1. Cut the excess air -------------------------------------------------
   The pages had too much empty vertical space between short narrative blocks.
   Tighten section rhythm and pull consecutive narrative sections closer. */
.about-page .section { padding: clamp(52px, 6.5vw, 92px) 0; }
.about-page .section + .section { padding-top: clamp(40px, 5vw, 72px); }
.about-page .section > .container > p { max-width: 68ch; line-height: 1.7; }
.about-page .section > .container > h2 + p { margin-top: var(--s-3); }
.about-page .section__lead { margin-bottom: var(--s-6); }

/* Gradient tick on every section heading — fills the space to the left of lonely
   headings and ties each block to the brand instead of floating in whitespace. */
.about-page .section > .container > h2 {
  position: relative;
  padding-left: 20px;
}
.about-page .section > .container > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--c-brand), var(--c-cta));
}

/* ---- 2. De-grey the photography -------------------------------------------
   The team photos (hero "first block", CEO portrait, galleries) read as dull
   grey slabs on the navy background. Warm them and lift contrast, then blend the
   frame into the aurora with a colored halo + a soft brand scrim so they look
   deliberate rather than washed-out. */
.about-page .hero__visual img,
.about-page .hero__visual video,
.about-page .ac-portrait__img,
.about-page .ac-gallery img {
  filter: saturate(1.16) contrast(1.06) brightness(1.02);
}

.about-page .hero__visual {
  border-color: rgba(120, 150, 255, .24);
  box-shadow:
    0 30px 80px rgba(11, 16, 32, .55),
    0 18px 55px -22px rgba(46, 92, 242, .65),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Inner brand scrim: kills the flat grey studio backdrop with a top blue tint and
   a bottom navy fade. z-index:2 keeps it above the lazy hero <video> layer. */
.about-page .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(120, 150, 255, .16), transparent 58%),
    linear-gradient(180deg, rgba(11, 16, 32, 0) 52%, rgba(11, 16, 32, .42) 100%);
}

/* ---- 3. Pictogram chips (injected .card__icon reuse the site convention) ----
   Leadership monograms: same chip, initials instead of a glyph. */
.about-page .card__icon { flex: 0 0 auto; }
.about-page .card__icon--mono {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  background: linear-gradient(135deg, rgba(46, 92, 242, .22), rgba(255, 211, 0, .14));
  color: #cdd8ff;
}

/* Job-role cards get an icon header row so the roles read as a set, not a list. */
.about-page .ac-job .card__icon { margin-bottom: var(--s-3); }

/* ---- 4. Galleries with rhythm ---------------------------------------------
   A featured first tile + hover zoom turns the flat equal grid into something
   with a focal point and life. */
.about-page .ac-gallery { gap: 14px; }
.about-page .ac-gallery img {
  transition: transform .5s var(--ease-out), filter .5s var(--ease-out), box-shadow .5s var(--ease-out);
  cursor: zoom-in;
}
.about-page .ac-gallery img:hover {
  transform: scale(1.035);
  filter: saturate(1.24) contrast(1.08) brightness(1.03);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
}
@media (min-width: 780px) {
  .about-page .ac-gallery--wide { grid-auto-flow: dense; }
  .about-page .ac-gallery--wide img:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
  }
}

/* ---- 5. Value / belief cards: quieter accent + reveal ---------------------- */
.about-page .card,
.about-page .ac-job,
.about-page .proc__step {
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.about-page .ac-job:hover,
.about-page .proc__step:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 150, 255, .35);
}

/* ---- 6. Motion: staggered scroll-reveal ------------------------------------
   Uses the site's existing [data-reveal] observer (main.js). Stagger by index so
   card grids animate in sequence. Reduced-motion is neutralised in main.css. */
.about-page .grid > [data-reveal]:nth-child(2),
.about-page .stats > [data-reveal]:nth-child(2),
.about-page .proc > [data-reveal]:nth-child(2) { transition-delay: .07s; }
.about-page .grid > [data-reveal]:nth-child(3),
.about-page .stats > [data-reveal]:nth-child(3),
.about-page .proc > [data-reveal]:nth-child(3) { transition-delay: .14s; }
.about-page .grid > [data-reveal]:nth-child(4),
.about-page .stats > [data-reveal]:nth-child(4),
.about-page .proc > [data-reveal]:nth-child(4) { transition-delay: .21s; }
.about-page .grid > [data-reveal]:nth-child(5),
.about-page .proc > [data-reveal]:nth-child(5) { transition-delay: .28s; }
.about-page .grid > [data-reveal]:nth-child(6) { transition-delay: .35s; }

/* ---- 7. Careers hero: living glow behind the swapped team photo ------------
   box-shadow is not clipped by the frame's overflow:hidden, so an animated
   blue/yellow halo reads as motion around the photo (Artur's "обыграй анимацией"
   on top of the on-target image swap). Collapses to a static halo under
   reduced-motion. */
.about-page--careers .hero__visual {
  box-shadow:
    0 30px 80px rgba(11, 16, 32, .55),
    0 0 60px -6px rgba(46, 92, 242, .55),
    0 0 90px -10px rgba(255, 211, 0, .28);
}
@media (prefers-reduced-motion: no-preference) {
  .about-page--careers .hero__visual { animation: about-glow 6s ease-in-out infinite alternate, float-y 6s ease-in-out infinite alternate; }
}
@keyframes about-glow {
  0%   { box-shadow: 0 30px 80px rgba(11,16,32,.55), 0 0 42px -8px rgba(46,92,242,.45), 0 0 70px -12px rgba(255,211,0,.20); }
  100% { box-shadow: 0 30px 80px rgba(11,16,32,.55), 0 0 78px -4px rgba(46,92,242,.68), 0 0 110px -8px rgba(255,211,0,.34); }
}

/* Slow ken-burns on the on-target team photo — reads as quiet momentum/growth
   behind the "Grow with YuSMP" message. Clipped by the frame's overflow:hidden,
   layered under the brand scrim (::after, z-index:2). Static under reduced-motion. */
.about-page--careers .hero__visual img { transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .about-page--careers .hero__visual img {
    animation: careers-kenburns 20s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes careers-kenburns {
  0%   { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.2%, -1.8%, 0); }
}

/* =============================================================================
   8. Vacancy detail pages (.about-page--vacancy)
   /about/careers/{qa-engineer,it-project-manager,frontend-developer} + mirrors.
   The pages were plain: hero + three long bulleted lists with acres of air.
   Turn each list into an airy, varied card grid with its own pictogram marker,
   so Responsibilities / Requirements / What-we-offer each read as a distinct set
   instead of three identical bullet columns. Palette locked: blue + yellow pop.
   ========================================================================== */
.about-page--vacancy .section > .container > h2 { margin-bottom: var(--s-5, 24px); }

.about-page--vacancy .ac-list {
  max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 14px;
}
.about-page--vacancy .ac-list li {
  margin: 0;
  padding: 16px 20px 16px 54px;
  line-height: 1.5;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .1));
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.about-page--vacancy .ac-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 150, 255, .38);
  box-shadow: 0 16px 40px -24px rgba(46, 92, 242, .75);
}
/* neutralise the inline default bullet, each variant paints its own marker */
.about-page--vacancy .ac-list li::before { content: none; }

/* Responsibilities — numbered chips (a sequence of duties) */
.about-page--vacancy .ac-list--num { counter-reset: vac; }
.about-page--vacancy .ac-list--num li::before {
  counter-increment: vac;
  content: counter(vac, decimal-leading-zero);
  position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .01em; color: #cdd8ff;
  background: linear-gradient(135deg, rgba(46, 92, 242, .30), rgba(255, 211, 0, .16));
  border-radius: 9px;
}

/* Requirements — check chips (things you already bring) */
.about-page--vacancy .ac-list--check li::before {
  content: "✓";
  position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #9db4ff;
  background: rgba(46, 92, 242, .16);
  border-radius: 9px;
}

/* What we offer — the single yellow pop, a perk dot */
.about-page--vacancy .ac-list--perk li { padding-left: 42px; }
.about-page--vacancy .ac-list--perk li::before {
  content: "";
  position: absolute; left: 18px; top: 22px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-cta, #FFD300);
  box-shadow: 0 0 0 5px rgba(255, 211, 0, .14);
}

/* Quick-facts strip under the hero: the lonely one-liner becomes pictogram chips */
.about-page--vacancy .vac-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.about-page--vacancy .vac-facts li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .1));
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: 14px; line-height: 1.2;
}
.about-page--vacancy .vac-facts svg {
  width: 17px; height: 17px; flex: 0 0 auto; color: var(--c-accent, #9db4ff);
}

/* ---- 7. Founder interview: 2-column Q&A grid -------------------------------
   The two long narrative sections on /about/ceo ("In his words", "The team")
   were tall stacks of H2+paragraph running the full column width — a wall of
   text with lots of dead air. Recast as a two-column card grid so each answer
   reads as its own beat, the block is ~40% shorter, and the numerals add rhythm
   without needing imagery. Dark Quiet-Aurora surface, blue accent, yellow pop. */
.about-page .qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: var(--s-6);
}
.about-page .qa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--c-border, rgba(255, 255, 255, .1));
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.about-page .qa::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-cta, #2E5CF2), rgba(255, 211, 0, .85));
  opacity: .9;
}
.about-page .qa:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 150, 255, .35);
  box-shadow: 0 18px 40px -24px rgba(46, 92, 242, .6);
}
.about-page .qa__n {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-cta, #2E5CF2);
  font-variant-numeric: tabular-nums;
}
.about-page .qa__q {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.28;
}
.about-page .qa__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--c-text-muted, #b6bfd4);
}
/* Odd last card (3 items) spans full width but reads as a lead paragraph pair */
.about-page .qa-grid > .qa:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.about-page .qa-grid > .qa:last-child:nth-child(odd) .qa__a { max-width: 82ch; }

/* Staggered reveal for the Q&A cards */
.about-page .qa-grid > [data-reveal]:nth-child(2) { transition-delay: .07s; }
.about-page .qa-grid > [data-reveal]:nth-child(3) { transition-delay: .14s; }
.about-page .qa-grid > [data-reveal]:nth-child(4) { transition-delay: .21s; }

@media (max-width: 720px) {
  .about-page .qa-grid { grid-template-columns: 1fr; }
  .about-page .qa-grid > .qa:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---- 8. "What we offer" perks: flat bullet list -> pictogram cards ----------
   The careers-hub perks were a stack of blue-dot bullets floating in a wide,
   half-empty column. Recast as an auto-fit grid of icon cards so the perks fill
   the space, read as a set of distinct benefits, and pick up the site's chip
   convention (64px card__icon) + Quiet-Aurora hover lift. */
.about-page .offer-grid {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.about-page .offer-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--c-border, rgba(255, 255, 255, .1));
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.about-page .offer-card::before { content: none; }
.about-page .offer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 150, 255, .38);
  box-shadow: 0 16px 40px -24px rgba(46, 92, 242, .75);
}
.about-page .offer-card .card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}
.about-page .offer-card .card__icon svg { width: 24px; height: 24px; }
.about-page .offer-card:hover .card__icon { transform: scale(1.06) rotate(-2deg); }
.about-page .offer-card__text {
  line-height: 1.45;
  font-weight: 500;
  color: var(--c-text, #eaf0ff);
}
/* Staggered reveal for the perk cards */
.about-page .offer-grid > [data-reveal]:nth-child(2) { transition-delay: .05s; }
.about-page .offer-grid > [data-reveal]:nth-child(3) { transition-delay: .10s; }
.about-page .offer-grid > [data-reveal]:nth-child(4) { transition-delay: .15s; }
.about-page .offer-grid > [data-reveal]:nth-child(5) { transition-delay: .20s; }
.about-page .offer-grid > [data-reveal]:nth-child(6) { transition-delay: .25s; }
@media (max-width: 560px) {
  .about-page .offer-card { padding: 15px 18px; gap: 13px; }
  .about-page .offer-card .card__icon { width: 42px; height: 42px; }
}