.project-page .hero { align-items: center; }
.project-page .hero-copy > p:not(.eyebrow) { max-width: 560px; }
.status-chip { background: rgba(174, 250, 124, .12); border: 2px solid var(--lime); color: var(--lime); display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; margin: 0 0 22px; padding: 8px 10px; text-transform: uppercase; }
.project-hero-art { align-self: center; background: #081630; border: 4px solid var(--cyan); box-shadow: 8px 8px 0 var(--coral); height: 440px; overflow: hidden; position: relative; }
.project-hero-art::before { background-image: linear-gradient(rgba(105, 228, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 228, 255, .13) 1px, transparent 1px); background-size: 25px 25px; content: ''; inset: 0; position: absolute; }
.project-hero-art > * { position: absolute; z-index: 1; }
.project-art-label { background: var(--lime); color: var(--night); font-family: var(--mono); font-size: 10px; font-weight: 700; left: 24px; letter-spacing: .1em; padding: 8px 10px; text-transform: uppercase; top: 24px; }
.project-art-footer { bottom: 24px; color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; right: 24px; text-transform: uppercase; }

.signal-art { background: radial-gradient(circle at 50% 50%, rgba(58, 128, 195, .48), transparent 34%), #061127; }
.signal-radar { border: 3px solid var(--lime); border-radius: 50%; height: 250px; left: calc(50% - 125px); top: 96px; width: 250px; }
.signal-radar::before, .signal-radar::after { background: rgba(105, 228, 255, .7); content: ''; left: 50%; position: absolute; top: 0; transform-origin: bottom; }
.signal-radar::before { height: 125px; transform: rotate(42deg); width: 3px; }.signal-radar::after { height: 100%; transform: translateX(-50%); width: 1px; }
.signal-ring { border: 1px solid rgba(105, 228, 255, .66); border-radius: 50%; height: 154px; left: calc(50% - 77px); top: 144px; width: 154px; }
.signal-ring::before { background: var(--coral); box-shadow: 0 0 18px var(--coral); content: ''; height: 13px; position: absolute; right: 11px; top: 38px; width: 13px; }
.signal-lock { border: 3px solid var(--coral); height: 94px; left: calc(50% - 47px); top: 174px; transform: rotate(45deg); width: 94px; }
.signal-lock::after { background: var(--lime); content: ''; height: 19px; left: 35px; position: absolute; top: 35px; width: 19px; }
.signal-code { bottom: 62px; color: var(--ink); font-family: var(--pixel); font-size: 28px; left: 0; letter-spacing: .03em; text-align: center; width: 100%; }

.alarm-art { background: radial-gradient(circle at 72% 22%, rgba(255, 227, 109, .2), transparent 24%), #0a1835; }
.alarm-clock-face { background: linear-gradient(145deg, #112a5c, #061127); border: 4px solid var(--lime); box-shadow: 7px 7px 0 #020613; color: var(--lime); font-family: var(--pixel); font-size: 84px; left: calc(50% - 166px); letter-spacing: -.09em; padding: 58px 15px; text-align: center; top: 128px; width: 332px; }
.alarm-clock-face::after { color: var(--cyan); content: 'WAKE / 07:00'; display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; margin-top: 15px; }
.alarm-sun { background: var(--gold); box-shadow: 0 0 24px rgba(255, 227, 109, .8); height: 21px; right: 55px; top: 70px; width: 21px; }
.alarm-sun::before, .alarm-sun::after { background: var(--gold); content: ''; position: absolute; }.alarm-sun::before { height: 3px; left: -12px; top: 9px; width: 45px; }.alarm-sun::after { height: 45px; left: 9px; top: -12px; width: 3px; }
.alarm-line { background: var(--coral); bottom: 69px; height: 4px; left: 45px; transform: rotate(-14deg); width: 72%; }

.development-card { background: radial-gradient(circle at 88% 18%, rgba(174, 250, 124, .15), transparent 24%), linear-gradient(145deg, #112b60, #08142e); border: 4px solid var(--cyan); box-shadow: 8px 8px 0 var(--coral); display: grid; gap: 38px; grid-template-columns: 1.1fr .9fr; padding: 48px; }
.development-card h2 { margin-bottom: 22px; }.development-card p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 570px; }
.development-list { display: grid; gap: 12px; margin: 0; padding: 0; }.development-list li { background: rgba(4, 12, 29, .65); border-left: 4px solid var(--lime); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 700; list-style: none; padding: 13px; text-transform: uppercase; }

@media (max-width: 820px) { .project-hero-art { height: 410px; }.development-card { grid-template-columns: 1fr; padding: 34px 28px; } }
@media (max-width: 520px) { .project-hero-art { height: 340px; }.signal-radar { height: 190px; left: calc(50% - 95px); top: 79px; width: 190px; }.signal-radar::before { height: 95px; }.signal-ring { height: 116px; left: calc(50% - 58px); top: 116px; width: 116px; }.signal-lock { height: 72px; left: calc(50% - 36px); top: 139px; width: 72px; }.signal-lock::after { height: 14px; left: 26px; top: 26px; width: 14px; }.signal-code { bottom: 51px; font-size: 23px; }.alarm-clock-face { font-size: 64px; left: calc(50% - 135px); padding: 47px 12px; top: 104px; width: 270px; }.alarm-sun { right: 37px; top: 53px; }.project-art-label { left: 17px; top: 17px; }.project-art-footer { bottom: 18px; right: 18px; } }