/* «Инженер» — слой поверх «Просто» (styles/pk-simple.css), 28.09.2026.
   Раскладка, фон (сетка у курсора), форма кнопок и эффекты — как в
   опубликованном «Просто». Своё здесь:
   — пара шрифтов: заголовки Spectral (спокойная экранная антиква — Noto
     Serif Display с курсивом Илья счёл «загогулистым», тяжело читать на
     ходу), всё прямым начертанием; текст Onest (гротеск под кириллицу);
   — логотип — строка терминала IBM Plex Mono с мигающим зелёным курсором;
     после имени — тонкая мигающая каретка, как в текстовом редакторе;
   — цвета как в редакторе кода (ночь — графит без синевы), акцент —
     «зелёный терминала»;
   — заголовки появляются по словам, первый экран уходит целиком (pk-tech.js);
   — блок контакта: заголовок слева, кнопка справа, а не всё в углу;
   — шапка «Частых вопросов»: заголовок в строку, пояснение по его линии.
   Шрифты свои, /site/templates/fonts/, OFL. */

@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url(/site/templates/fonts/Spectral-300-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url(/site/templates/fonts/Spectral-300-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/templates/fonts/Spectral-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/templates/fonts/Spectral-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/Spectral-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/Spectral-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/templates/fonts/Onest-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/templates/fonts/Onest-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/Onest-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/Onest-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/templates/fonts/Onest-600-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/templates/fonts/Onest-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/IBMPlexMono-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/templates/fonts/IBMPlexMono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root,
:root[data-theme=light] {
  --paper: #f8f9fa;
  --paper-deep: #eef0f2;
  --ink: #0d1117;
  --ink-soft: #31373f;
  --ink-muted: #656d76;
  --line: #dfe3e8;
  --accent: #1f883d;
  --accent-ink: #1a7f37;
  --on-accent: #ffffff;
  --display: Spectral, "Source Serif 4", Georgia, serif;
  --body: Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --term: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme=dark] {
  --paper: #111111;
  --paper-deep: #1a1a1a;
  --ink: #ececec;
  --ink-soft: #c9c9c9;
  --ink-muted: #8f8f8f;
  --line: #2a2a2a;
  --accent: #3fb950;
  --accent-ink: #56d364;
  --on-accent: #111111;
}

/* Спокойная антиква, всё прямым начертанием — читается на ходу */
.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell .selected-link { font-weight: 400; letter-spacing: -.015em; }
/* Вопросы в FAQ — шрифтом текста, но жирнее: так их легче пробегать глазами */
.site-shell .how-i-work__faq summary { font-family: var(--body); font-weight: 600; letter-spacing: -.01em; font-size: clamp(18px, 1.5vw, 22px); }
.site-shell .hero h1.hero-title { font-weight: 400; letter-spacing: -.025em; }
.site-shell .hero h1 .hero-name-line,
.site-shell .hero h1 .hero-name-line span,
.site-shell .page-intro h1 span,
.site-shell .article h1 span { font-style: normal; }

/* ——— Логотип: строка терминала с мигающим курсором ——— */
.site-shell .wordmark { font-size: 0; }
.site-shell .wordmark::before {
  content: "~/petkevich.kz";
  font: 500 14px/1 var(--term);
  letter-spacing: 0;
  color: var(--ink);
}
.site-shell .wordmark::after {
  content: "";
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 4px;
  vertical-align: -3px;
  background: var(--accent);
  animation: pk-blink 1.1s steps(1) infinite;
}
@keyframes pk-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* ——— Имя: скромное, одной строкой ——— */
.site-shell .hero h1.hero-title { font-size: clamp(40px, 4.6vw, 80px); gap: clamp(14px, 1.4vw, 24px); margin-bottom: clamp(24px, 3.5vh, 40px); align-items: center; }
.site-shell .hero-avatar { width: clamp(48px, 4.4vw, 76px); height: clamp(48px, 4.4vw, 76px); align-self: center; margin-top: 0; }
.site-shell .hero .hero-name-text { display: flex; flex-direction: row; flex-wrap: nowrap; column-gap: .24em; white-space: nowrap; }
.site-shell .hero .hero-name-text > * { flex: none; }
/* Параллакс одного имени наезжал бы на текст — первый экран уходит целиком (pk-tech.js) */
.site-shell .hero h1.hero-title { transform: none !important; opacity: 1 !important; }
/* После имени — тонкая каретка, как в текстовом редакторе */
.site-shell .hero-name-line em {
  display: inline-block;
  width: .055em; height: .45em; /* ровно высота строчных букв Spectral */
  margin-left: .14em;
  overflow: hidden; /* иначе невидимая «.» внутри сдвигает каретку */
  vertical-align: baseline;
  background: var(--accent);
  color: transparent;
  animation: pk-blink 1.1s steps(1) infinite;
}
/* Надпись над именем и значок сноски убраны из содержимого: пустые теги шаблона прячем */
.site-shell .hero-kicker:empty,
.site-shell .b2b-note-trigger:empty { display: none; }
.site-shell .hero-details { max-width: none; }
.site-shell .hero-specialization { display: block; margin-top: 4px; }

/* ——— Кнопки: форма как в «Просто», шрифт текста ——— */
.site-shell .desktop-nav a:last-child,
.site-shell .hero > .text-link,
.site-shell .contact-panel > .text-link,
.site-shell .article-cta .text-link { font-family: var(--body); font-weight: 500; letter-spacing: 0; }

/* Круглые стрелки в плитках не сплющиваются в овал на узком экране */
.site-shell .selected-link__arrow { flex: none; aspect-ratio: 1; }

/* «+/×» в вопросах: круг как в «Просто», но без белой заливки у открытого */
.site-shell .how-i-work__faq details[open] summary::after {
  background-color: transparent;
  border-color: var(--accent);
}

/* ——— «Частые вопросы»: заголовок в одну строку, пояснение — по его нижней линии ——— */
.site-shell .how-i-work__intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: last baseline;
  gap: 16px clamp(32px, 6vw, 120px);
  margin-bottom: clamp(32px, 5vh, 56px);
}
.site-shell .how-i-work__intro h2 { max-width: none; margin: 0; }
.site-shell .how-i-work__intro p { max-width: 38ch; margin: 0; color: var(--ink-muted); }

/* ——— Контакт: заголовок слева во всю строку, кнопка справа ——— */
.site-shell .contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 6vw, 120px);
  align-items: end;
}
.site-shell .contact-panel > .eyebrow { grid-column: 1 / -1; }
.site-shell .contact-panel h2 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(40px, 5.6vw, 96px);
  text-wrap: balance;
  line-height: 1.02;
}
.site-shell .contact-panel > .text-link { margin: 0 0 .6em; justify-self: end; align-self: end; }

/* ——— Заголовки появляются по словам (слова режет pk-tech.js) ——— */
.pk-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .08em .16em 0;
  margin: 0 -.08em -.16em 0;
}
.pk-w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--pk-wi, 0) * 55ms);
}
.pk-words-in .pk-w > span { transform: none; }

@media (max-width: 720px) {
  .site-shell .hero h1.hero-title { flex-direction: row; align-items: center; font-size: clamp(28px, 8.4vw, 48px); gap: 14px; }
  .site-shell .hero-avatar { width: 52px; height: 52px; }
  .site-shell .selected-link,
  .site-shell .selected-link + .selected-link { padding-left: 0; padding-right: 0; }
  .site-shell .contact-panel { display: block; }
  .site-shell .contact-panel > .text-link { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell .wordmark::after,
  .site-shell .hero-name-line em { animation: none; }
  .pk-w > span { transform: none; transition: none; }
}