/* Главная waiwai.is в дизайн-системе WAI 0.3. Значения — токены, компоненты — ui/components.css. */

/* Шапка прозрачная над свечением, белая при прокрутке */
.home-nav { background: transparent; transition: background var(--dur-2) var(--ease), height var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.home-nav.is-scrolled { background: var(--canvas); }
.home-nav .wordmark { font-size: 24px; }
.nav-lang { font-size: 15px; }

/* Герой: свечение уходит под шапку */
.home-hero { margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + clamp(72px, 12vh, 160px)) 0 clamp(72px, 10vh, 128px); min-height: min(86svh, 900px); display: flex; align-items: center; text-align: center; }
.home-hero .glow { inset: -10% -20% auto; height: 110%; }
.home-hero .display { max-width: 15ch; margin-inline: auto; }
.home-hero .soft { color: var(--ink-3); }
.home-hero .lead { max-width: 560px; margin: var(--s-6) auto 0; }
.home-hero .btn-row { justify-content: center; margin-top: var(--s-7); }

/* Логотипы: стена на весь экран */
.home-clients { min-height: 100svh; display: flex; align-items: center; padding: clamp(64px, 8vh, 112px) 0; }
.home-clients .wrap { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 72px); }
.clients-head { max-width: 680px; margin-inline: auto; text-align: center; }
.clients-head .h2 { margin-top: var(--s-4); }
.clients-head .lead { margin-top: var(--s-5); text-wrap: balance; }
.tm-line { display: inline-flex; align-items: center; gap: 14px; margin-top: var(--s-6); padding: 10px 20px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: var(--ring), var(--shadow-control); }
.tm-old { font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tm-line svg { color: var(--ink-3); }
.tm-new { font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.clients-label { margin: 0 0 12px; color: var(--ink-3); }
.clients-wall .clients-label + .logos + .clients-label { margin-top: var(--s-6); }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.logos li { display: grid; place-items: center; height: clamp(88px, 11vh, 120px); border-radius: var(--r-l); background: var(--card); }
.logos img { max-width: 60%; max-height: 38px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .5; transition: opacity var(--dur-1) var(--ease); }
.logos li:hover img { opacity: .85; }
.word-logo { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); opacity: .5; }
.logos-training { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Плитки направлений */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: var(--wgap); }
.bento-dev { grid-column: span 2; grid-row: span 2; }
.bento-adult, .bento-school { grid-column: span 2; }
.tile-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 28px; border-radius: var(--r-xl); color: var(--ink); text-decoration: none; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.tile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.tile-card .emoji { font-size: 40px; line-height: 1; }
.tile-body { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.tile-kicker { font-size: var(--text-small); color: var(--ink-70); }
.tile-title { font-size: var(--text-h3); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); font-weight: 500; }
.tile-text { font-size: var(--text-body); line-height: 1.5; color: var(--ink-70); max-width: 46ch; }
.tile-dev { background: var(--dev); color: var(--on-dark); }
.tile-dev .tile-kicker, .tile-dev .tile-text { color: var(--on-dark-2); }
.tile-dev .emoji { font-size: 56px; }
.tile-dev .tile-title { font-size: clamp(32px, 3.4vw, 48px); }
.tile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-2); }
.tile-tags span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font-size: 13px; color: var(--on-dark-2); }
.tile-more { display: inline-flex; align-self: flex-start; align-items: center; height: var(--control-s); padding: 0 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 500; }
.tile-adult { background: var(--adult); }
.tile-school { background: var(--school); }
.tile-plain { background: var(--card); box-shadow: var(--ring-soft); }
.tile-plain .tile-body { margin-top: var(--s-5); }
.tile-plain .tile-title { font-size: 20px; letter-spacing: -.02em; }
.tile-plain .tile-text { font-size: var(--text-small); color: var(--ink-2); }

/* Финал с волком */
.home-final { min-height: 92svh; display: flex; align-items: center; padding: var(--section-y) 0; text-align: center; }
.home-final .glow { inset: auto -20% -10%; height: 110%; }
.final-wolf { position: relative; width: 200px; height: 200px; margin: 0 auto var(--s-6); }
.final-wolf canvas, .final-wolf .wolf-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-wolf .wolf-still { opacity: 1; transition: opacity var(--dur-2) var(--ease); }
.final-wolf.is-live .wolf-still { opacity: 0; }
.home-final .lead { max-width: 620px; margin: var(--s-5) auto 0; text-wrap: balance; }
.home-final .btn-row { justify-content: center; margin-top: var(--s-7); }
.home-foot { position: relative; z-index: 1; background: var(--canvas); }

@media (max-width: 1024px) {
  .logos, .logos-training { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-dev { grid-row: span 1; }
}
@media (max-width: 700px) {
  .nav-lang { display: none; }
  .home-hero { min-height: auto; padding-top: calc(var(--nav-h) + 72px); }
  .logos, .logos-training { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos li { height: 72px; }
  .home-clients { min-height: auto; }
  .tm-line { padding: 8px 14px; gap: 10px; }
  .tm-old { font-size: 12px; }
  .final-wolf { width: 160px; height: 160px; }
  .home-final { min-height: auto; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento-dev, .bento-adult, .bento-school { grid-column: auto; }
  .tile-card { min-height: 180px; }
  .bento-dev { min-height: 300px; }
}

/* ---------- Внутренние страницы: общий каркас ---------- */
/* Заголовок страницы. Свечение по желанию: <section class="page-hero glow-host"><div class="glow glow-top" aria-hidden="true"></div>… */
.page-hero { position: relative; margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + clamp(56px, 10vh, 128px)) 0 clamp(48px, 8vh, 104px); text-align: center; }
.page-hero .glow { inset: -10% -20% auto; height: 120%; }
.page-hero .display { max-width: 16ch; margin: var(--s-4) auto 0; }
.page-hero .soft { color: var(--ink-3); }
.page-hero .lead { max-width: 640px; margin: var(--s-5) auto 0; text-wrap: balance; }
.page-hero .btn-row { justify-content: center; margin-top: var(--s-7); }
.page-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--ink-2); }
.page-back:hover { color: var(--ink); }

/* Секция страницы: заголовок по центру, потом содержимое */
.page-section { padding-block: clamp(64px, 9vw, 128px); }
.page-section + .page-section { padding-top: 0; }
.page-section .section-head { margin-bottom: clamp(40px, 5vw, 72px); }

/* Карточка работы: картинка на светлой плитке, название, строка текста */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wgap); }
.work { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.work-pic { display: grid; place-items: center; aspect-ratio: 4 / 3.4; margin-bottom: var(--s-3); padding: 7%; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--ring-soft); overflow: hidden; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.work-pic img { width: 100%; height: 100%; object-fit: contain; }
a.work:hover .work-pic { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.work-title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.work-text { font-size: var(--text-small); line-height: 1.5; color: var(--ink-2); }
.work-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Фильтры чипами */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--s-7); }
.filters button { border: 0; cursor: pointer; font: inherit; font-size: 14px; height: 36px; padding: 0 16px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: var(--ring); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.filters button .count { margin-left: 6px; opacity: .55; }

/* Текст статьи или условий */
.prose { max-width: var(--narrow); margin-inline: auto; font-size: var(--text-body-l); line-height: 1.6; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: var(--text-h3); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); font-weight: 500; }
.prose h3 { margin-top: 1.6em; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-l); }

/* Список строк: дата или метка слева, текст, ссылка всей строкой */
.rows { max-width: 920px; margin-inline: auto; border-top: 1px solid var(--hair-soft); }
.rows > a, .rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--s-5); align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--hair-soft); color: var(--ink); }
.rows > a:hover { background: var(--card); }
.rows .row-label { font-size: var(--text-small); color: var(--ink-3); }
.rows .row-main { font-size: 18px; letter-spacing: -.015em; }
.rows .row-main small { display: block; margin-top: 4px; font-size: var(--text-small); color: var(--ink-2); letter-spacing: 0; }
.rows .row-side { font-size: var(--text-small); color: var(--ink-2); }

@media (max-width: 1024px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (max-width: 700px) {
  .works { grid-template-columns: minmax(0, 1fr); }
  .rows > a, .rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page-hero { padding-top: calc(var(--nav-h) + 48px); }
}

/* Окно Forward Deployed Engineers на главной */
.fde-dialog { width: min(560px, calc(100% - 32px)); padding: 40px 36px 36px; border: 0; border-radius: 28px; background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-card); text-align: center; }
.fde-dialog::backdrop { background: rgba(25, 25, 25, .32); }
.fde-dialog .h2 { margin-top: var(--s-4); }
.fde-dialog .soft { color: var(--ink-3); }
.fde-dialog .lead { margin-top: var(--s-5); }
.fde-dialog .small { margin-top: var(--s-4); color: var(--ink-2); }
.fde-dialog .btn-row { justify-content: center; margin-top: var(--s-6); }
.fde-close { position: absolute; top: 14px; right: 14px; }

/* Подвал: ссылки переносятся на узком экране */
.home-foot .foot-links { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 700px) { .home-foot { flex-direction: column; align-items: flex-start; } }

/* Текущий раздел в шапке */
.nav-link[aria-current="page"] { opacity: 1; font-weight: 500; }

/* Словесные логотипы не вылезают из клетки на телефоне */
.logos li { overflow: hidden; padding-inline: 6px; text-align: center; }
@media (max-width: 700px) { .word-logo { font-size: 15px; } }

/* Длинная стена логотипов: девять в ряд на десктопе, чтобы блок помещался в экран */
@media (min-width: 1025px) {
  .logos-dense { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .logos-dense img { max-width: 70%; max-height: 32px; }
}
.clients-head .lead { max-width: 30ch; margin-inline: auto; }