/* ===== Начална страница ===== */
.hero { position: relative; padding: 76px 0 88px; overflow: hidden; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .hero { padding: 120px 0 120px; min-height: calc(100svh - 64px); display: flex; align-items: center; } }
.hero-art { position: absolute; inset: 8% -4% 0 18%; width: 86%; height: 92%; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 38%, #000 92%, transparent); mask: linear-gradient(90deg, transparent 0, #000 38%, #000 92%, transparent); }
@media (max-width: 899px) { .hero-art { inset: auto -10% 0 -10%; width: 120%; height: 46%; opacity: .55; -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); } }
.hero-art .gl { stroke: rgba(255, 255, 255, .05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-art .p-gold { fill: none; stroke: url(#gold-stroke); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(200, 167, 94, .45)); }
.hero-art .p-faint { fill: none; stroke: rgba(238, 234, 225, .22); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.hero-art .p-area { fill: url(#gold-area); stroke: none; }
.hero-art .lbl { font: 500 11px var(--mono); letter-spacing: .12em; fill: var(--muted); text-transform: uppercase; }
.hero-grid { position: relative; display: grid; gap: 52px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; align-items: end; } }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy h1 { max-width: 17ch; }
.hero-copy .lead { max-width: 54ch; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink-2); padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--glass); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(200, 167, 94, .6); animation: ping 2.6s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(200, 167, 94, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(200, 167, 94, 0); } }
.hero-ledger { width: 100%; padding: 6px 24px; background: rgba(10, 10, 12, .55); border: 1px solid var(--line); border-radius: var(--r);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-ledger li { grid-template-columns: 118px 1fr; }
.hero-ledger li:first-child { border-top: 0; }
.hero-ledger li:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-in { opacity: 0; transform: translate3d(0, 14px, 0); animation: rise 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Проекти — редакционен списък */
.works { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.work { border-bottom: 1px solid var(--line); }
.work-link { position: relative; display: grid; gap: 18px 28px; padding: 34px 0; color: inherit; text-decoration: none; }
@media (min-width: 900px) { .work-link { grid-template-columns: 72px minmax(0, 1fr) 340px; align-items: center; padding: 42px 18px; margin: 0 -18px; border-radius: var(--r); transition: background .5s var(--ease); } }
.work-link::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.work-link:hover::before, .work-link:focus-visible::before { transform: scaleX(1); }
@media (min-width: 900px) { .work-link:hover { background: linear-gradient(90deg, rgba(200, 167, 94, .05), transparent 70%); } }
.work-no { font: 500 1.05rem/1 var(--mono); color: var(--gold); letter-spacing: .08em; align-self: start; padding-top: 8px; }
.work-body { display: grid; gap: 12px; }
.work-cat { font: 500 .72rem/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.work-title { font: 500 clamp(1.6rem, 2.6vw, 2.15rem)/1.1 var(--serif); color: var(--ink); transition: color .4s; }
.work-link:hover .work-title { color: var(--gold-hi); }
.work-body p { color: var(--ink-2); max-width: 58ch; }
.work-thumb { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 16 / 10; background: #0c0c0f; order: -1; }
@media (min-width: 900px) { .work-thumb { order: 0; } }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transform: scale(1.01); filter: saturate(.85) brightness(.9);
  transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.work-link:hover .work-thumb img { transform: scale(1.05); filter: none; }
.work-go { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--gold-hi); }
.work-go::after { content: "→"; transition: transform .35s var(--ease); }
.work-link:hover .work-go::after { transform: translateX(5px); }
@media (min-width: 900px) { .work-go { position: absolute; right: 18px; bottom: 16px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
  .work-link:hover .work-go, .work-link:focus-visible .work-go { opacity: 1; transform: none; } }

/* Умения */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { display: grid; gap: 14px; align-content: start; padding: 30px 0 34px; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .pillar { padding: 34px 34px 40px; border-bottom: 0; border-left: 1px solid var(--line); } .pillar:first-child { border-left: 0; padding-left: 0; } }
.pillar-no { font: italic 500 1.9rem/1 var(--serif); color: var(--gold); }
.pillar p { color: var(--ink-2); font-size: .98rem; }

/* Как работя — златна линия */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.how::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--gold-lo) 70%, transparent); }
.how li { position: relative; display: grid; gap: 8px; padding-left: 36px; }
.how-node { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; transform: rotate(45deg); background: var(--bg); border: 1px solid var(--gold); }
.how-k { font: 500 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.how li > p:last-child { color: var(--ink-2); }
@media (min-width: 860px) {
  .how { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .how::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-lo) 80%, transparent); }
  .how li { padding-left: 0; padding-top: 34px; }
}

/* Контакт */
.contact { display: grid; gap: 20px; padding: 40px 26px; overflow: hidden; }
@media (min-width: 760px) { .contact { padding: 64px 64px; } }
.contact::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 167, 94, .16), transparent 65%); }
.contact h2 { max-width: 18ch; }
.contact p { color: var(--ink-2); }