:root{
  --bg:#0b0f12;

  /* карточки ближе к твоим отзывам: «чуть квадратнее» */
  --card:#111827;
  --card2:#0f1624;

  --text:#e7eefc;
  --muted:#9bb0cc;
  --accent:#6be2ff;

  /* скругление капсулы уменьшено */
  --radius:26px;       /* можно 22–28 по вкусу */
}

/* глобальный фон */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* ===== твой фоновый блок ===== */
.bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:#0b0f12;
}
.bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.03);
  filter:blur(6px) saturate(1.05);
  opacity:.98; will-change:transform,filter;
}
.bg-overlay{
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.18));
  mix-blend-mode:multiply;
}

/* ===== заголовок ===== */
.dev-header{
  max-width:1100px; margin:28px auto 10px; padding:0 20px; text-align:center;
}
.dev-header h1{
  margin:0 0 6px; font-size:clamp(22px,3vw,34px);
}
.dev-header p{
  margin:0; color:var(--muted); font-size:clamp(13px,1.3vw,16px);
}

/* ===== блоки-разделы ===== */
.dev-wrap{
  max-width:1200px; margin:14px auto 64px; padding:0 20px; display:grid; gap:24px;
}
.dev-pill{
  position:relative;
  background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);
  border-radius:var(--radius);
  padding: clamp(16px,2.2vw,22px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 18px 40px rgba(0,0,0,.5);
  overflow:hidden; isolation:isolate;
}
.dev-pill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(107,226,255,.14) inset;  /* тонкая кромка как в карточках отзывов */
}

.dev-content{
  display:grid;
  grid-template-columns: 300px 1fr;    /* слева рендер, справа текст */
  gap: clamp(16px,3vw,30px);
  align-items:center;
}

/* зеркальный вариант (картинка справа) */
.dev-pill--alt .dev-content{
  grid-template-columns: 1fr 300px;
}
.dev-pill--alt .dev-skin{ order:2 }
.dev-pill--alt .dev-text{ order:1 }

/* рендер — прозрачный PNG, без рамок */
.dev-skin{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.dev-skin img{
  max-width:200%; max-height:100%; display:block;
  filter:drop-shadow(0px 10px 26px rgba(0,0,0,.5));
}

/* текст */
.dev-name{ margin:0 0 6px; font-weight:800; font-size:clamp(18px,2.4vw,30px) }
.dev-role{ margin:0 0 12px; color:var(--accent); font-weight:600; letter-spacing:.2px; font-size:clamp(23px,1.4vw,15px) }
.dev-text p{ margin:0; color:var(--muted); line-height:1.6; font-size:clamp(24px,1.45vw,18px) }

/* адаптив */
@media (max-width:920px){
  .dev-content,
  .dev-pill--alt .dev-content{
    grid-template-columns:1fr;
    text-align:center;
  }
  .dev-skin{ max-width:320px; margin:0 auto }
}
@media (prefers-reduced-motion: reduce){
  .io-fade{ opacity:1; transform:none }
}

/* === Доп. переменные для свечения (необязательные, но удобно) === */
:root{
  --glow:#6be2ff;               /* бирюзовое свечение */
  --pad-dark-1:rgba(16,24,38,.85);
  --pad-dark-2:rgba(9,14,22,.85);
}

/* карточкам позволяем вылезать при масштабировании */
.dev-wrap{ overflow: visible; }

/* чтобы градиент-оверлей не перекрывал контент */
.dev-content{ position: relative; z-index: 1; }

/* Постоянный мягкий горизонтальный градиент поверх базового фона.
   Базовый background у .dev-pill не трогаем — добавляем поверх через ::before. */
.dev-pill::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; z-index:0;
  /* подгони оттенки при желании */
  background:linear-gradient(90deg,#101a2b 0%, #0f1828 42%, #0d1625 100%);
  opacity:.92;
}

/* Ховер-анимация: масштаб ×1.3 + бирюзовое свечение */
.dev-pill{
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
  transform-origin: left center;    /* увеличиваем «в сторону» свободного края */
  will-change: transform, box-shadow;
}
.dev-pill--alt{ transform-origin: right center; }

.dev-pill:hover{
  transform: scale(1.05);
  z-index: 5; /* чтобы карточка перекрывала соседей */
  box-shadow:
    0 26px 60px rgba(0,0,0,.55),
    0 0 60px rgba(107,226,255,.24);           /* внешнее бирюзовое свечение */
}
.dev-pill:hover::after{
  /* усиливаем внутреннюю кромку при наведении */
  box-shadow:
    0 0 0 2px rgba(107,226,255,.45) inset,
    0 0 90px rgba(107,226,255,.25) inset;
}

/* Подложка под рендер скина: стекло + мягкий бирюзовый «ореол».
   Картинка как и раньше без рамок поверх подложки. */
.dev-skin{ position: relative; }
.dev-skin::before{
  content:"";
  position:absolute;
  inset: clamp(4px,1.2vw,12px);      /* отступы от краёв блока скина */
  border-radius: 16px;
  background: linear-gradient(180deg,var(--pad-dark-1),var(--pad-dark-2));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,  /* еле заметная кромка */
    0 10px 30px rgba(0,0,0,.5),
    0 0 50px rgba(107, 225, 255, 0.295);         /* бирюзовый «ореол» */
  z-index: 0;
}
.dev-pill:hover .dev-skin::before{
  box-shadow:
    0 0 0 1px rgba(107,226,255,.30) inset,
    0 16px 40px rgba(0,0,0,.55),
    0 0 80px rgba(107,226,255,.35);
}

/* На мобильных отключаем масштаб, чтобы верстка не прыгала */
@media (max-width: 920px){
  .dev-pill:hover{ transform:none; box-shadow:inherit; filter:none; }
}

/* Масштаб из центра (а не слева/справа) */
.dev-pill{
  transform-origin: center center; /* 50% 50% тоже ок */
}
.dev-pill--alt{
  transform-origin: center center;
}


/* карточки растут на композиторном слое — меньше лагов */
.dev-pill{ will-change: transform, box-shadow, filter; backface-visibility: hidden; }

/* уважение к людям с ограничением анимаций */
@media (prefers-reduced-motion: reduce){
  .dev-pill{ transition: none; }
  .dev-pill:hover{ transform: none; box-shadow: none; filter: none; }
}