/* about.html: стили страницы (раньше были встроены в <head>). Кнопки и прочие компоненты — из css/base.css. */
/* Кнопки — из css/base.css (ui-library #buttons) */

/* Типографика — ui-library #typography: заголовки Inter uppercase, lead — ink-soft, акцент — Stampatello */
main { overflow-x: clip; }
.pg-section { position: relative; padding: var(--space-11) 0; }
.pg-section .wrap { max-width: 1120px; }
.pg-section h2 { margin: 0 0 var(--space-5); font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -.02em; color: var(--cocoa); text-wrap: balance; }
.pg-section h3 { margin: 0 0 var(--space-3); font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); line-height: var(--lh-snug); letter-spacing: .06em; text-transform: uppercase; color: inherit; }
.pg-lead { max-width: 58ch; margin: 0; color: rgba(76, 43, 35, .58); font-size: clamp(18px, 1.6vw, 22px); line-height: var(--lh-normal); }
.pg-soft { max-width: 60ch; margin: 0; color: rgba(76, 43, 35, .72); font-size: 16px; line-height: var(--lh-loose); }
.pg-kicker { display: inline-block; margin-bottom: var(--space-3); color: var(--rust); font-family: var(--hand); font-size: 28px; line-height: 1.2; }

/* Подписи секций (eyebrow) — Stampatello Face to, как «о бренде» */
.pg-section .eyebrow { margin-bottom: var(--space-3); font-family: var(--hand); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.pg-section .eyebrow::before { display: none; }

/* Hero — градиент как у страниц игр (#gradients) */
.pg-hero { padding: var(--space-10) 0 var(--space-11); background: radial-gradient(55% 60% at 90% 8%, rgba(236, 160, 74, .35), transparent 70%), linear-gradient(126deg, #f8ebd8 0%, #f5e2c7 58%, #f3d3aa 100%); }
.pg-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-10); align-items: center; }
.pg-hero h1 { margin: 0 0 var(--space-6); font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.4vw, 80px); line-height: var(--lh-tight); letter-spacing: .02em; text-transform: uppercase; color: var(--cocoa); text-wrap: balance; }
.pg-hero h1 span { color: var(--rust); }
.pg-hero__photo { position: relative; margin: 0; }
.pg-hero__photo img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-md); }

/* Имя бренда и цифры — тёмный какао-блок; цифры выровнены по центру с разделителями */
.nv-b { background: var(--cocoa); color: var(--cream); }
.nv-b .eyebrow { color: var(--honey); }
.nv-b h2 { color: var(--cream); }
.nv-b__top { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-9); align-items: end; }
.nv-words { display: flex; gap: var(--space-8); }
.nv-words b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: var(--lh-tight); letter-spacing: -.03em; }
.nv-words div:first-child b { color: var(--honey); } .nv-words div:last-child b { color: var(--cream); }
.nv-words span { display: block; margin-top: var(--space-2); color: rgba(245, 231, 211, .65); font-size: 15px; font-style: italic; }
.nv-text p { max-width: 52ch; margin: 0; color: rgba(245, 231, 211, .82); font-size: 17px; line-height: var(--lh-loose); }
.nv-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-9); padding-top: var(--space-8); border-top: 1px solid rgba(245, 231, 211, .22); text-align: center; }
.nv-stat strong { display: block; color: var(--honey); font-family: var(--hand); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; }
.nv-stat span { display: block; margin-top: var(--space-3); color: rgba(245, 231, 211, .65); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Миссия — пара purple / purple-dark */
.pg-mission { background: linear-gradient(135deg, var(--purple-dark), var(--purple)); color: var(--cream); text-align: center; }
.pg-mission .eyebrow { justify-content: center; color: var(--honey); }
.pg-mission h2 { max-width: 20ch; margin-inline: auto; color: var(--cream); }
.pg-mission p { max-width: 58ch; margin: 0 auto; color: rgba(245, 231, 211, .85); font-size: clamp(18px, 1.6vw, 22px); line-height: var(--lh-normal); }

/* Ценности */
.pg-believe ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin: var(--space-8) 0 0; padding: 0; list-style: none; counter-reset: b; }
.pg-believe ol > li { counter-increment: b; position: relative; display: flex; min-height: 260px; align-items: flex-start; padding: var(--space-12) var(--space-6) var(--space-6); border-radius: 22px; font-size: clamp(18px, 1.7vw, 22px); line-height: var(--lh-snug); font-weight: 700; box-shadow: var(--shadow-md); }
.pg-believe ol > li::before { content: "0" counter(b); position: absolute; left: var(--space-6); top: var(--space-5); font-family: var(--hand); font-weight: 400; font-size: 56px; line-height: var(--lh-tight); opacity: .5; }
.pg-believe ol > li:nth-child(1) { background: var(--rust); color: var(--cream); }
.pg-believe ol > li:nth-child(2) { background: var(--honey); color: var(--cocoa); }
.pg-believe ol > li:nth-child(3) { background: var(--blue); color: var(--cream); }

/* Что создаём — манифест-предложение */
.dv5 { background: var(--cocoa); color: var(--cream); }
.dv5 .eyebrow { color: var(--honey); }
.dv5 h2 { color: var(--cream); }
.dv5__text { max-width: 980px; margin: var(--space-8) 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.6vw, 50px); line-height: var(--lh-snug); letter-spacing: -.02em; }
.dv5__text a { padding: 0 .3em; border-radius: 10px; background: var(--honey); color: var(--cocoa); text-decoration: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .2s, color .2s; }
.dv5__text a:nth-of-type(2) { background: var(--blue); color: var(--cream); }
.dv5__text a:nth-of-type(3) { background: var(--purple); color: var(--cream); }
.dv5__text a:hover { background: var(--cream); color: var(--cocoa); }
.dv5__sub { max-width: 60ch; margin: var(--space-7) 0 0; color: rgba(245, 231, 211, .75); font-size: 17px; line-height: var(--lh-loose); }

/* Миссия: доп. строка; светлые секции */
.pg-mission .pg-mission__note { margin-top: var(--space-5); font-size: 16px; color: rgba(245, 231, 211, .7); }
.pg-believe { background: var(--paper); }

/* Команда */
.pg-team { background: var(--cocoa); color: var(--cream); }
.pg-team h2 { color: var(--cream); } .pg-team .eyebrow { color: var(--honey); } .pg-team .pg-soft { color: rgba(245, 231, 211, .82); }
.pg-team__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: end; margin-bottom: var(--space-9); }
.pg-team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.pg-team__grid figure { margin: 0; width: calc((100% - 2 * var(--space-6)) / 3); }
.pg-team__grid img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }

/* Где нас найти: круглые бейджи площадок; ниже — блок «Сотрудничество» на всю ширину (css/about-collab.css) */
.pg-where { padding-bottom: var(--space-9); background: var(--cream); }
.pg-where .pg-soft { color: rgba(76, 43, 35, .78); }
.wb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-9); margin: var(--space-8) 0 0; }
.wb { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: 0; color: var(--cocoa); font-weight: 700; text-decoration: none; border-radius: 12px; } /* ссылка на магазин бренда на площадке */
.wb__badge { display: grid; width: 112px; height: 112px; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: 6px 6px 0 var(--cocoa); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wb:is(:hover, :focus-visible) .wb__badge { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--cocoa); }
.wb:active .wb__badge, .wb.is-pressed .wb__badge { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--cocoa); } /* нажатие — анимация до перехода (js/press-nav.js) */
.wb { -webkit-tap-highlight-color: transparent; }
.wb__badge img { display: block; height: 44px; width: auto; max-width: 70%; }
.wb__name { font-size: 16px; }
.wb:is(:hover, :focus-visible) .wb__name { color: var(--rust); }
.wb:focus-visible { outline: 2px solid var(--rust); outline-offset: 6px; }

@media (max-width: 860px) {
  .pg-section { padding: var(--space-10) 0; }
  .pg-where { padding-bottom: var(--space-9); }
  .pg-hero__grid, .pg-team__head { grid-template-columns: 1fr; }
  .nv-b__top { grid-template-columns: 1fr; gap: var(--space-6); }
  .nv-words { justify-content: center; text-align: center; } /* alma / bella — по центру на телефоне */
  .nv-stats { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); padding-top: var(--space-7); }
  .nv-stat:last-child { grid-column: 1 / -1; }
  .nv-stat span { margin-top: 10px; font-size: 11px; letter-spacing: .12em; }

  .pg-hero__grid { gap: var(--space-8); }
  .pg-believe ol { grid-template-columns: 1fr; }
  .pg-believe ol > li { min-height: 180px; }
  .pg-team__grid figure { width: calc((100% - var(--space-6)) / 2); }
  .wb-row { gap: var(--space-6); }
  .wb__badge { width: 104px; height: 104px; }
  .wb__badge img { height: 42px; }
}
@media (max-width: 520px) { .pg-team__grid figure { width: 100%; } }