.developers-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(229,9,20,.16), transparent 31rem),
    radial-gradient(circle at 10% 48%, rgba(52,153,228,.075), transparent 25rem),
    #08090e;
}

.developers-main { width: min(100% - 28px, 880px); padding-block: 28px 110px; }
.developers-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #aaaeba; font-size: 13px; }
.developers-back:hover { color: #fff; }
.developers-back span { direction: ltr; font-size: 19px; }

.developers-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(30px,7vw,60px) 22px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 30px;
  background: linear-gradient(145deg,rgba(36,18,29,.97),rgba(18,17,27,.97));
  box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
}
.developers-hero::before { content: ''; position: absolute; z-index: -1; inset: -35% -10%; background: radial-gradient(circle at 50% 50%,rgba(239,23,49,.18),transparent 30%), repeating-linear-gradient(125deg,transparent 0 69px,rgba(255,255,255,.018) 70px 71px); }
.developer-code-mark { display: grid; place-items: center; width: 98px; height: 98px; margin-bottom: 20px; border: 1px solid rgba(255,99,111,.75); border-radius: 50%; background: linear-gradient(145deg,#ff243d,#c90721); box-shadow: 0 0 0 8px rgba(229,9,20,.06),0 17px 45px rgba(229,9,20,.32); }
.developer-code-mark svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.developers-kicker { margin-bottom: 6px; color: #ff5265; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.developers-hero h1 { font-size: clamp(1.65rem,5vw,2.7rem); line-height: 1.2; letter-spacing: -.035em; }
.developers-english { margin-top: 8px; color: #ff4357; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(9px,2.4vw,12px); font-weight: 800; letter-spacing: .22em; }
.developers-lead { margin-top: 24px; color: #c7c6ce; font-size: clamp(14px,2.5vw,17px); }
.developer-signature { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.developer-signature strong { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 15px; letter-spacing: .03em; }
.developer-signature i { color: #757784; font-style: normal; }

.developer-team { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.developer-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 112px minmax(0,1fr) auto; align-items: center; gap: 18px; min-height: 144px; padding: 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: linear-gradient(145deg,rgba(20,22,34,.96),rgba(14,15,23,.96)); box-shadow: 0 15px 45px rgba(0,0,0,.28); }
.developer-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent); transform: translateX(100%); transition: transform .6s ease; }
.developer-card:hover::before { transform: translateX(-100%); }
.shada-card { border-color: rgba(236,42,65,.4); }
.aso-card { border-color: rgba(79,170,232,.36); }
.developer-photo { width: 112px; height: 112px; overflow: hidden; border: 2px solid #e51b36; border-radius: 24px; background: #090a0f; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.aso-card .developer-photo { border-color: #499ed6; }
.developer-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform .35s ease,filter .35s ease; }
.developer-card:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.04); }
.developer-card-copy { min-width: 0; }
.developer-card-copy span { color: #ec4055; font: 800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.aso-card .developer-card-copy span { color: #62b5eb; }
.developer-card h2 { margin-top: 7px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(20px,3vw,25px); direction: ltr; text-align: right; }
.developer-card p { margin-top: 5px; color: #a9abb5; font-size: 12px; }
.developer-arrow { color: #747885; font-size: 31px; }

.developer-story { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding: clamp(28px,6vw,45px) 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: rgba(18,20,30,.86); text-align: center; }
.story-heart { color: #ff304a; font-size: 35px; filter: drop-shadow(0 8px 16px rgba(229,9,20,.4)); }
.developer-story h2 { max-width: 650px; margin-top: 12px; font-size: clamp(18px,4vw,26px); line-height: 1.5; }
.developer-story p { max-width: 660px; margin-top: 9px; color: #b0b2bc; font-size: clamp(13px,2.4vw,15px); line-height: 2; }
.developer-footer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 36px; }
.developer-footer img { width: 98px; height: 50px; object-fit: contain; }
.developer-footer span { color: #6f727f; font-size: 11px; }

@media (max-width: 760px) {
  .developer-team { grid-template-columns: 1fr; }
  .developers-main { padding-top: 18px; }
}
@media (max-width: 430px) {
  .developers-hero { border-radius: 23px; }
  .developer-card { grid-template-columns: 86px minmax(0,1fr) auto; min-height: 116px; gap: 13px; padding: 13px; border-radius: 20px; }
  .developer-photo { width: 86px; height: 86px; border-radius: 20px; }
  .developer-arrow { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .developer-card::before,.developer-photo img { transition: none; }
}