/* CY_BORG — визитка разработчика (встроена из business-card); классы с префиксом bc-, чтобы не пересекаться со стилями сайта */
.devcard { --yellow: #fcee0a; --pink: #ff2a6d; --cyan: #05d9e8; --ink: #08080b; --paper: #f3f1e6;
  --display: "Rubik Mono One", "Arial Black", Impact, sans-serif; --mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  margin-top: 34px; padding-top: 26px; border-top: 2px dashed rgba(255, 255, 255, .18); font-family: var(--mono); }
.devcard *, .devcard *::before, .devcard *::after { box-sizing: border-box; }
.devcard * { margin: 0; } /* как в оригинале визитки: без дефолтных отступов h2/p карточка «едет» */
.devcard h3 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(15px, 3.4vw, 22px); color: var(--paper); text-transform: uppercase; letter-spacing: .02em; }
.devcard h3 b { color: var(--yellow); text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); }
.devcard .dev-sub { margin: 0 0 20px; font-size: 12px; letter-spacing: .2em; color: var(--cyan); text-transform: uppercase; }
.bc-stage { display: flex; flex-wrap: wrap; gap: 36px; width: 100%; }
.bc-slot { width: min(100%, 560px); }
.devcard a { color: inherit; text-decoration: none; }
.devcard .dev-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; font-size: 13px; letter-spacing: .08em; }
.devcard .dev-links a { color: var(--yellow); border-bottom: 2px solid var(--pink); padding-bottom: 2px; }
.devcard .dev-links a:hover, .devcard .dev-links a:focus-visible { color: var(--pink); outline: none; }
.devcard .dev-links b { color: var(--pink); margin-right: 6px; }

/* ───────── card shell: 91 × 55 mm, everything scales in cqw ───────── */
  .bc-card {
    position: relative; overflow: hidden;
    width: 100%; aspect-ratio: 91 / 55;
    container-type: inline-size;
    box-shadow: 0 0 0 1px #000, 6px 6px 0 var(--pink), 0 0 60px rgba(255,42,109,.25);
    transition: transform .2s ease;
  }
  .bc-card:hover { transform: translate(-3px, -3px) rotate(-.6deg); }
  .bc-card::after { /* scanlines + grain */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
      var(--noise);
    mix-blend-mode: overlay; opacity: .55;
  }

  /* ───────── FRONT ───────── */
  .bc-front { background: var(--ink); color: var(--yellow); font-family: var(--mono); }
  .bc-front::before { /* halftone corner */
    content: ""; position: absolute; right: -8cqw; top: -8cqw; width: 52cqw; height: 52cqw;
    background: radial-gradient(circle, var(--pink) 28%, transparent 30%) 0 0 / 2.2cqw 2.2cqw;
    -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0, transparent 68%);
            mask-image: radial-gradient(circle at 70% 30%, #000 0, transparent 68%);
    opacity: .75;
  }
  .bc-f-top {
    position: absolute; left: 5cqw; right: 5cqw; top: 4.2cqw;
    display: flex; justify-content: space-between;
    font-size: 2.5cqw; letter-spacing: .18em; color: var(--cyan); z-index: 2;
  }
  .bc-sticker {
    position: absolute; right: 5cqw; top: 11.5cqw; z-index: 3;
    background: var(--pink); color: var(--ink);
    font-family: var(--display); font-size: 3.4cqw; letter-spacing: .02em;
    padding: 1.2cqw 2.4cqw; transform: rotate(5deg);
    box-shadow: .8cqw .8cqw 0 var(--ink), .8cqw .8cqw 0 .25cqw var(--yellow);
  }
  .bc-name {
    position: absolute; left: 5cqw; top: 14.5cqw; z-index: 2;
    font-family: var(--display); text-transform: uppercase; line-height: .98;
  }
  .bc-name .bc-l1 { font-size: 11.5cqw; color: var(--yellow); }
  .bc-name .bc-l2 { font-size: 10.6cqw; color: transparent; -webkit-text-stroke: .35cqw var(--paper); margin-top: .8cqw; }
  .bc-glitch { position: relative; display: block; width: max-content; }
  .bc-glitch::before, .bc-glitch::after {
    content: attr(data-t); position: absolute; inset: 0; pointer-events: none;
    -webkit-text-stroke: 0; mix-blend-mode: screen;
  }
  .bc-glitch::before { color: var(--cyan); clip-path: inset(0 0 58% 0); animation: bc-gl1 5s ease-in-out infinite; will-change: clip-path, transform; }
  .bc-glitch::after  { color: var(--pink); clip-path: inset(62% 0 0 0); animation: bc-gl2 6.5s ease-in-out infinite; will-change: clip-path, transform; }
  @keyframes bc-gl1 {
    0%, 100% { clip-path: inset(0 0 58% 0);  transform: translateX(-.5cqw); }
    30%      { clip-path: inset(22% 0 38% 0); transform: translateX(-.9cqw); }
    55%      { clip-path: inset(48% 0 12% 0); transform: translateX(-.4cqw); }
    80%      { clip-path: inset(8% 0 66% 0);  transform: translateX(-.8cqw); }
  }
  @keyframes bc-gl2 {
    0%, 100% { clip-path: inset(62% 0 0 0);   transform: translateX(.5cqw); }
    25%      { clip-path: inset(30% 0 36% 0); transform: translateX(.9cqw); }
    55%      { clip-path: inset(5% 0 70% 0);  transform: translateX(.4cqw); }
    80%      { clip-path: inset(52% 0 14% 0); transform: translateX(.8cqw); }
  }

  .bc-role {
    position: absolute; left: 0; top: 36.5cqw; z-index: 2;
    background: var(--yellow); color: var(--ink);
    font-weight: 700; font-size: 3.5cqw; letter-spacing: .08em;
    padding: 1.1cqw 3cqw 1.1cqw 5cqw; text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 2.4cqw) 100%, 0 100%);
  }
  .bc-tag {
    position: absolute; left: 5cqw; top: 44.5cqw; z-index: 2; max-width: 70cqw;
    font-size: 2.6cqw; line-height: 1.4; color: var(--paper); opacity: .92;
  }
  .bc-tag b { color: var(--pink); }
  .bc-vert {
    position: absolute; right: 2.4cqw; bottom: 7.5cqw; z-index: 2;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 2.4cqw; letter-spacing: .3em; color: var(--yellow); opacity: .8;
  }
  .bc-hazard {
    position: absolute; left: 0; right: 0; bottom: 0; height: 5.6cqw; z-index: 2;
    background: repeating-linear-gradient(-45deg, var(--yellow) 0 2.4cqw, var(--ink) 2.4cqw 4.8cqw);
  }
  .bc-hazard span {
    position: absolute; left: 5cqw; top: 50%; transform: translateY(-50%);
    background: var(--ink); color: var(--yellow);
    font-size: 2.6cqw; font-weight: 700; letter-spacing: .22em; padding: .3cqw 1.6cqw;
  }

  /* ───────── BACK ───────── */
  .bc-back { background: var(--yellow); color: var(--ink); font-family: var(--mono); }
  .bc-back::before { /* offset pink block */
    content: ""; position: absolute; right: -4cqw; bottom: -4cqw; width: 54cqw; height: 31cqw;
    background: var(--pink); transform: rotate(-4deg);
  }
  .bc-b-head {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ink); color: var(--yellow);
    padding: 1.9cqw 5cqw; font-size: 2.7cqw; letter-spacing: .2em; font-weight: 700;
  }
  .bc-b-head em { font-style: normal; color: var(--pink); }
  .bc-cls {
    position: absolute; left: 5cqw; top: 12cqw; z-index: 2;
    font-family: var(--display); font-size: 5cqw; line-height: 1.05; text-transform: uppercase;
  }
  .bc-cls small { display: block; font-family: var(--mono); font-size: 2.5cqw; letter-spacing: .2em; font-weight: 700; margin-bottom: 1cqw; }
  .bc-stats {
    position: absolute; left: 5cqw; top: 27.5cqw; z-index: 2; width: 40cqw;
    display: grid; gap: 1.5cqw; font-size: 2.5cqw; font-weight: 700; letter-spacing: .08em;
  }
  .bc-stat { display: grid; grid-template-columns: 17cqw 1fr 4cqw; align-items: center; gap: 1.5cqw; }
  .bc-bar {
    height: 2.4cqw; border: .3cqw solid var(--ink);
    background:
      repeating-linear-gradient(90deg, var(--ink) 0 1.7cqw, transparent 1.7cqw 2cqw)
      0 0 / calc(var(--v) * 10%) 100% no-repeat;
  }
  .bc-stat i { font-style: normal; text-align: right; }
  .bc-contacts {
    position: absolute; right: 5cqw; top: 12cqw; z-index: 3; width: 46cqw;
    background: var(--ink); color: var(--yellow); padding: 2.4cqw 2.6cqw;
    box-shadow: -1cqw 1cqw 0 var(--cyan);
    font-size: 2.3cqw; line-height: 1.7;
  }
  .bc-contacts div { display: flex; gap: 1.2cqw; white-space: nowrap; }
  .bc-contacts a { color: inherit; text-decoration: none; }
  .bc-contacts b { color: var(--pink); min-width: 6.5cqw; flex-shrink: 0; }
  .bc-b-foot {
    position: absolute; left: 5cqw; bottom: 4cqw; z-index: 2; width: 41cqw;
    display: flex; flex-direction: column; gap: 1.2cqw;
  }
  .bc-barcode {
    height: 6.5cqw;
    background: repeating-linear-gradient(90deg,
      var(--ink) 0 .45cqw, transparent .45cqw 1cqw,
      var(--ink) 1cqw 2.1cqw, transparent 2.1cqw 2.7cqw,
      var(--ink) 2.7cqw 3cqw, transparent 3cqw 4cqw,
      var(--ink) 4cqw 4.9cqw, transparent 4.9cqw 5.4cqw);
  }
  .bc-b-foot span { font-size: 2.2cqw; letter-spacing: .16em; font-weight: 700; white-space: nowrap; }
  .bc-qr-row {
    position: absolute; left: 57cqw; right: 5cqw; bottom: 4.5cqw; z-index: 3;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw;
  }
  .bc-slogan {
    min-width: 0; padding-bottom: 1cqw; overflow-wrap: anywhere;
    font-weight: 700; font-size: 2.5cqw; line-height: 1.3; color: var(--ink);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .bc-slogan small { display: block; margin-top: 1.2cqw; font-size: 2cqw; letter-spacing: .12em; color: var(--paper); }
  .bc-qr-link { flex: none; width: 17cqw; height: 17cqw; display: block; box-shadow: .9cqw .9cqw 0 var(--ink); }
  .bc-qr { width: 100%; height: 100%; display: block; }

  
@media (prefers-reduced-motion: reduce) { .bc-glitch::before, .bc-glitch::after { animation: none; } .bc-card { transition: none; } }
@media print { .devcard { display: none; } }
.devcard .dev-links a.dev-open { background: var(--yellow); color: var(--ink); border-bottom-color: var(--ink); padding: 4px 10px; font-weight: 700; }
.devcard .dev-links a.dev-open b { color: var(--ink); }
.devcard .dev-links a.dev-open:hover, .devcard .dev-links a.dev-open:focus-visible { background: var(--pink); color: var(--ink); }