/* ============================================================
   VELARY US — страницы: Home, About
   ============================================================ */

/* ------------------------------------------------------------
   HOME · Hero (4213:30357)
   ------------------------------------------------------------ */
/* Шапка и герой вместе занимают 900px, как фрейм Home в макете.
   Меню закреплено только в пределах героя: секция Works перекрывает его слоем.
   Размеры и отступы — в layout.css (генерируются из макета). */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  background: var(--bg-hero);
}
.hero__content { display: flex; flex-direction: column; align-items: center; }
.hero__stack   { display: flex; flex-direction: column; align-items: center; }
.scribble      { position: relative; color: var(--ink); }
.hero__headline{ display: flex; justify-content: center; align-items: flex-start; width: 100%; margin-inline: auto; }
.hero__hi      { flex: none; display: flex; align-items: center; justify-content: center; align-self: stretch; color: var(--ink); }
.hero__hi path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero__title   {
  white-space: pre-wrap;   /* в макете у строки есть ведущий пробел */
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  margin-inline: auto;
}
.hero__desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}
.hero__desc p { margin-inline: auto; }

.works {
  position: relative;
  z-index: 51;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: auto; }
.card  { display: flex; flex-direction: column; position: relative; color: var(--text-body); }
.card__body { display: flex; flex-direction: column; }
.card__text { display: flex; flex-direction: column; }

.about { background: var(--bg-about); }
.about__grid  { display: flex; align-items: flex-start; justify-content: center; }   /* в макете обе колонки 928 и центрирование ничего не меняет */
.about__text  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.about__aside { position: relative; flex: none; display: flex; flex-direction: column; }
.about__photo { position: relative; width: 100%; background: var(--photo-bg); overflow: hidden; }
.about__photo img { position: absolute; left: 2.89%; top: 2.16%; width: 99.72%; height: 98.05%; object-fit: cover; object-position: top center; }
/* Заголовок «Skills & Tools» — Inter Bold 18/148%, ls −1%, прописные (4315:9056) */
.about__skills-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.48;
  letter-spacing: -.18px;
  text-transform: uppercase;
  color: var(--text-body);
}

.skills { display: flex; flex-wrap: wrap; }
.skill  { border-radius: 100px; background: var(--skill-bg); color: var(--skill-text); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
.about__cv { display: flex; justify-content: flex-end; }
.about__hey { position: absolute; left: -12px; top: -58px; display: flex; align-items: center; justify-content: center; mix-blend-mode: multiply; pointer-events: none; }
.about__hey path { fill: none; stroke: var(--hey-stroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .about__hey { mix-blend-mode: normal; }   /* в тёмном макете режим обычный */

.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Каракуля — Shape Wrapper (4213:30363) */
.hero__shape { display: flex; justify-content: center; }

.scribble__layer { position: absolute; }
.scribble__layer path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribble__s1 { left: -.5px;  top: -.5px;  width: 141.069px; height: 142px; }
.scribble__s3 { left: 7px;    top: 26.5px; width: 157.584px; height: 88.161px; }
.scribble__s4 { left: 36px;   top: 13.5px; width: 103.083px; height: 124.808px; }
.scribble__s6 { left: 36px;   top: 41.5px; width: 85.54px;   height: 59.765px; }

/* Заголовок */

.hero__hi path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   Гигантская надпись WORKS — две половины на стыке секций
   верх: Union (807.604×80) в герое · низ: 1440×67.621 в секции работ
   ------------------------------------------------------------ */
.ghost { width: 100%; max-width: 1440px; margin-inline: auto; pointer-events: none; }
.ghost--top { display: flex; justify-content: center; }
.ghost--top svg {
  width: calc(100% * 807.604 / 1440);
  max-width: 807.604px;
  height: auto;
}
.ghost--top path { fill: var(--ghost-top); fill-opacity: var(--ghost-top-op); }
.ghost--bottom svg { width: 100%; height: auto; }
.ghost--bottom path { fill: var(--ghost-bottom); fill-opacity: var(--ghost-bottom-op); }

/* ------------------------------------------------------------
   HOME · Works (4005:1477)
   ------------------------------------------------------------ */

/* --- Обложки карточек --- */
.cover-softpay { background: var(--softpay-bg); }
.cover-softpay .cover__media {
  /* экспорт из макета уже обрезан ровно по видимой области 626x282 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.cover-softpay__logo { position: absolute; left: 25px; top: 95px; width: 223px; height: 34.86px; }
.cover-softpay__badge {
  position: absolute;
  left: 29px; top: 148px;
  padding: 11.36px 22.71px;
  border-radius: 879px;
  background: var(--backdrop-subtle);   /* эффект стекла — .glass-card-badge из layout.css */
  color: #fff;
  font-weight: 700;
  font-size: 18.17px;
  line-height: 23.85px;
  letter-spacing: -.545px;
  white-space: nowrap;
}

.cover-aurea {
  background: var(--aurea-bg);
  display: flex;
  align-items: center;
  gap: 0;
}
.cover-aurea__text {
  flex: none;
  width: 231px;   /* 4262:4331 — Content wrapper */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-inline: 22px;
}
.cover-aurea__title {
  font-weight: 700;
  font-size: 34px;   /* в макете 34 */
  line-height: 1.15;
  letter-spacing: -.68px;
  color: rgba(255, 255, 255, .9);
}
.cover-aurea__sub {
  font-family: var(--font-serif);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: #000;
}
.cover-aurea__frame {
  flex: none;
  width: 395px;   /* 4262:4354 */
  height: 100%;
  background: var(--aurea-frame);
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
}
.cover-aurea__frame .cover__media {
  /* экспорт 395x282 из макета: фон, рамка и поля уже внутри картинки */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
}

.cover-parknow { background: #1c1c1c; }
.cover-parknow .cover__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }   /* экспорт обложки из макета целиком */
.cover-parknow__logo { position: absolute; right: 26px; top: 22px; width: 73.7px; height: 73.7px; z-index: 2; }
.cover-parknow__title {
  position: absolute;
  right: 26px; top: 100px;
  z-index: 2;
  width: 228px;
  text-align: right;
  font-weight: 700;
  font-size: 38.86px;
  line-height: 1.15;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .9);
}

.cover-dogportal {
  background: var(--dogportal-bg);
  border: 1px solid var(--dogportal-line);
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
}
.cover-dogportal__panel {
  flex: none;
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 16px 28px 24px;
}
.cover-dogportal__logo { width: 114px; height: 20px; object-fit: contain; }
.cover-dogportal__title {
  font-weight: 700;
  font-size: 25px;
  line-height: 1.29;
  text-transform: none;
  color: var(--dogportal-title);
}
.cover-dogportal__meta { font-size: 12px; line-height: 1.4; color: var(--dogportal-text); }
.cover-dogportal__photo { flex: none; width: 376px;   /* 4310:8688 */ border-radius: 0 16px 16px 0; overflow: hidden; }
.cover-dogportal__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   ABOUT (4005:1774)
   ------------------------------------------------------------ */

.about__text p { margin-bottom: 0; }
.about__text p + p { margin-top: 0; }
.about__block { display: flex; flex-direction: column; }
.about__block h2 {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.48;
  letter-spacing: -.18px;
  text-transform: uppercase;
  color: var(--text-body);
}
.about__block ul { list-style: disc; padding-left: 27px; }
.about__block li { line-height: 1.4; }
.about__lead b { font-weight: 600; }

.about__photo img {
  position: absolute;
  left: 2.89%; top: 2.16%;
  width: 99.72%; height: 98.05%;
  object-fit: cover;
  object-position: top center;
}

/* Каракуля HEY! в правом верхнем углу (4157:2348) */

.about__hey path { fill: none; stroke: var(--hey-stroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"]

/* ------------------------------------------------------------
   Адаптив
   ------------------------------------------------------------ */
@media (max-width: 1199px) {








  .btn-cv { max-width: 340px; }
}

@media (max-width: 767px) {




  .scribble > svg { transform: scale(.5848); transform-origin: 0 0; }
  /* В мобильном макете «HI,» стоит в строке с заголовком, а не отдельной колонкой */











  .cover-aurea__frame { width: 55%; }
  .cover-aurea__frame img { inset: 0; width: 100%; height: 100%; }
  .cover-aurea__title { font-size: 24px; max-width: none; }
  .cover-softpay__logo { width: 160px; height: 25px; left: 18px; top: 60px; }
  .cover-softpay__badge { left: 18px; top: 100px; font-size: 14px; padding: 8px 16px; }
  .cover-parknow__logo { width: 52px; height: 52px; left: 18px; top: 20px; }
  .cover-parknow__title { font-size: 28px; left: 18px; top: 88px; width: 200px; }
  .cover-dogportal__panel { width: 46%; padding: 18px 12px 18px 16px; }
  .cover-dogportal__title { font-size: 18px; }
  .cover-dogportal__meta { margin-top: 12px; }
}


/* Текст блоков About: в макете textCase = TITLE (4005:1882, 1884, 1885, 1886, 4315:9094).
   Заголовки блоков остаются прописными, теги навыков — без преобразования. */
.about__block p,
.about__block li { text-transform: capitalize; }
.about__block h2 { text-transform: uppercase; }
.skill { text-transform: none; }