/* Каталог мини-проектов Softjet (softjet.ru/projects/, 16.10.2026). Поверх _kit/v1 (тема Softjet), язык — как у /sites/:
   тёмный первый экран с сеткой и пятнами, заголовки Bebas Neue, рукописные акценты Caveat, синий/голубой/красный.
   Свои блоки: веер превью проектов в «окне браузера», карточка проекта со своим цветом (--pj-c), подсветка за курсором. */

:root { --sj-blue: #427cfd; --sj-sky: #97daff; --sj-red: #e84513; --ok: #3ddc97; --bg-deep: #222324; }
html { scroll-behavior: smooth; }
body { background: var(--bg); overflow-x: clip; }
.kit-header { background: rgba(34, 35, 36, .86); }
.pj-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); font-size: 14px; }
.pj-logo img { height: 24px; width: auto; display: block; }
.pj-logo span { border-left: 1px solid var(--line-strong); padding-left: 12px; white-space: nowrap; }
@media (max-width: 420px) { .pj-logo span { display: none; } }
@media (max-width: 640px) { .kit-header__cta { display: none; } .kit-burger { margin-left: auto; } }

.pj-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, var(--sj-blue), var(--sj-sky), var(--sj-red)); }

.pj-eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sj-sky); font-weight: 600; margin: 0 0 16px; }
.pj-h { font: 700 clamp(40px, 6vw, 78px)/.95 var(--font-display); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .01em; }
.pj-h .kit-hand { text-transform: none; color: var(--sj-sky); font-size: .82em; }
.pj-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-2); max-width: 680px; margin: 0 0 28px; }

/* ===== первый экран ===== */
.pj-hero { position: relative; padding: clamp(28px, 5vw, 72px) 0 clamp(56px, 8vw, 112px); overflow: clip; background: var(--bg-deep); }
.pj-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -30px), calc(var(--my, 0) * -30px), 0); transition: transform .4s ease-out; }
.pj-blob--1 { width: 520px; height: 520px; left: -160px; top: -140px; background: radial-gradient(circle, var(--sj-blue), transparent 70%); }
.pj-blob--2 { width: 420px; height: 420px; right: -120px; top: 30%; background: radial-gradient(circle, rgba(193, 33, 142, .6), transparent 70%); }
.pj-blob--3 { width: 360px; height: 360px; left: 40%; bottom: -200px; background: radial-gradient(circle, rgba(151, 218, 255, .6), transparent 70%); }
.pj-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 30% 30%, #000, transparent); }
.pj-hero__in { position: relative; display: grid; gap: 48px; align-items: center; }
.pj-hero__in > * { min-width: 0; }
@media (min-width: 1000px) { .pj-hero__in { grid-template-columns: 1fr 1.05fr; gap: 40px; } }
.pj-title { font: 700 clamp(72px, 12vw, 168px)/.84 var(--font-display); text-transform: uppercase; margin: 0 0 14px; letter-spacing: .005em;
  background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-title-hand { font: 500 clamp(28px, 3.6vw, 44px)/1.1 var(--font-hand); color: var(--sj-sky); margin: 0 0 22px; }
.pj-title-hand b { color: #fff; font-weight: 500; }
.pj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 30px 0 0; max-width: 560px; }
@media (min-width: 640px) { .pj-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pj-fact { border-left: 2px solid var(--sj-blue); padding: 2px 0 2px 12px; }
.pj-fact b { display: block; font: 700 30px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.pj-fact span { font-size: 13px; color: var(--muted); }
.pj-fact:nth-child(2) { border-color: var(--sj-sky); } .pj-fact:nth-child(3) { border-color: #C1218E; } .pj-fact:nth-child(4) { border-color: var(--ok); }

/* окно браузера с превью */
.pj-shot { display: block; border-radius: 14px; overflow: hidden; background: #1b1c1d; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .7); text-decoration: none; }
.pj-shot__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #2a2b2d; border-bottom: 1px solid var(--line); }
.pj-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #55575a; }
.pj-shot__bar i:nth-child(1) { background: #ff5f57; } .pj-shot__bar i:nth-child(2) { background: #febc2e; } .pj-shot__bar i:nth-child(3) { background: #28c840; }
.pj-shot__bar span { margin-left: 10px; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 2px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-shot img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }

/* веер в первом экране */
.pj-fan { position: relative; aspect-ratio: 1.25; }
.pj-fan .pj-shot { position: absolute; width: 74%; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r)) translate3d(calc(var(--mx, 0) * var(--d) * 1px), calc(var(--my, 0) * var(--d) * 1px), 0); }
.pj-fan .pj-shot:nth-child(1) { --tx: 32%; --ty: 0%; --r: 6deg; --d: 8; z-index: 1; }
.pj-fan .pj-shot:nth-child(2) { --tx: 2%; --ty: 18%; --r: -5deg; --d: 14; z-index: 2; }
.pj-fan .pj-shot:nth-child(3) { --tx: 18%; --ty: 42%; --r: 1.5deg; --d: 22; z-index: 3; }
.pj-fan .pj-shot:hover { z-index: 5; transform: translate(var(--tx), calc(var(--ty) - 4%)) rotate(0deg) scale(1.03); }

/* ===== проекты ===== */
.pj-list { background: var(--bg); }
.pj-sec-head { max-width: 820px; margin-bottom: clamp(32px, 5vw, 64px); }
.pj { --pj-c: var(--sj-blue); --pj-c2: var(--sj-sky); position: relative; display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 36px); border-radius: 24px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 28px;
  overflow: hidden; isolation: isolate; }
.pj::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--pj-c) 22%, transparent), transparent 60%); }
.pj:hover::before { opacity: 1; }
.pj::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--pj-c), var(--pj-c2)); }
@media (min-width: 900px) { .pj { grid-template-columns: 1.08fr 1fr; } .pj--rev .pj__vis { order: 2; } }
.pj__vis { display: block; text-decoration: none; }
.pj__vis .pj-shot { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.pj__vis:hover .pj-shot { transform: translateY(-6px) rotate(-.6deg); }
.pj__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pj-tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 4px 12px; }
.pj-tag--new { color: #1b1c1d; background: var(--pj-c2); border-color: var(--pj-c2); }
.pj__name { font: 700 clamp(36px, 4.4vw, 56px)/.95 var(--font-display); text-transform: uppercase; margin: 0 0 14px; letter-spacing: .01em; }
.pj__desc { color: var(--text-2); font-size: 17px; margin: 0 0 18px; }
.pj__points { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.pj__points li { position: relative; padding-left: 26px; color: var(--text); }
.pj__points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--pj-c); border-radius: 2px;
  box-shadow: 0 0 12px var(--pj-c); }
.pj .kit-btn:not(.kit-btn--ghost) { background: var(--pj-c); border-color: var(--pj-c); }
.pj__note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ===== для бизнеса: сетка сервисов по запросу демо ===== */
.pb-list { background: var(--bg-alt); }
.pb-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pb { --pj-c: var(--sj-blue); position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .3s, transform .3s; }
.pb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in srgb, var(--pj-c) 18%, transparent), transparent 65%); }
.pb:hover::before { opacity: 1; }
.pb:hover { border-color: color-mix(in srgb, var(--pj-c) 45%, transparent); transform: translateY(-3px); }
.pb::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--pj-c); z-index: 1; }
.pb__vis { margin: -24px -24px 18px; aspect-ratio: 8 / 5; overflow: hidden; background: #1b1c1d; border-bottom: 1px solid var(--line); }
.pb__vis img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pb:hover .pb__vis img { transform: scale(1.04); }
.pb__tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pj-c); margin: 6px 0 10px; }
.pb__name { font: 700 clamp(30px, 3vw, 38px)/.95 var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 10px; }
.pb__sub { color: var(--text); font-size: 16px; margin: 0 0 14px; }
.pb__points { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; }
.pb__points li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 15px; }
.pb__points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--pj-c); border-radius: 2px; }
.pb__act { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.pb__act .kit-btn { background: var(--pj-c); border-color: var(--pj-c); color: #1b1c1d; }
.pb__more { color: var(--text-2); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.pb__more:hover { color: var(--text); }

/* запрос демо */
.pb-demo { background: var(--bg-deep); }
.pb-demo__in { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .pb-demo__in { grid-template-columns: 1fr 1fr; gap: 56px; } }
.pb-demo__form { scroll-margin-top: 90px; }
.pb-demo__form.is-picked { animation: pb-pick 1.2s ease-out; }
@keyframes pb-pick { 0% { box-shadow: 0 0 0 0 rgba(151, 218, 255, .55); } 100% { box-shadow: 0 0 0 18px rgba(151, 218, 255, 0); } }

/* ===== свой сервис ===== */
.pj-own { background: var(--bg-alt); }
.pj-own__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .pj-own__in { grid-template-columns: 1.2fr 1fr; } }
.pj-own__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pj-own__list li { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: var(--panel); display: grid; gap: 4px; }
.pj-own__list b { font: 700 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.pj-own__list li:nth-child(1) b { color: var(--sj-sky); } .pj-own__list li:nth-child(2) b { color: #ff8fd0; } .pj-own__list li:nth-child(3) b { color: var(--ok); }
.pj-own__list span { color: var(--text-2); font-size: 15px; }

/* появление */
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-rv].is-in { opacity: 1; transform: none; }
.no-js [data-rv] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-rv] { opacity: 1; transform: none; }
  .pj-fan .pj-shot { transform: translate(var(--tx), var(--ty)) rotate(var(--r)); }
}
@media (max-width: 999px) { .pj-fan { max-width: 620px; margin: 0 auto; width: 100%; } }
@media (max-width: 640px) { .pj-fan { display: none; } .pj-hero { padding-bottom: 48px; } }