.development-page {
  overflow: hidden;
  background:
    linear-gradient(rgba(18,63,86,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,63,86,.05) 1px, transparent 1px),
    #fff;
  background-size: 54px 54px;
}

.development-hero { position: relative; isolation: isolate; }
.development-hero::after { position: absolute; z-index: -2; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.98) 16%, rgba(255,255,255,.76) 55%, rgba(221,245,255,.58)); content: ""; }
.development-hero__glow { position: absolute; z-index: -1; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; background: var(--color-pink); filter: blur(80px); opacity: .18; }
.development-hero__content h1 { color: var(--color-black); }
.development-hero__content h1 .title-accent { color: var(--color-pink-dark); }
.development-hero__content p { color: var(--color-muted); font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.72; }
.development-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.development-progress { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.development-progress span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); background: rgba(255,255,255,.82); font-size: .76rem; font-weight: 800; box-shadow: var(--shadow-xs); }
.development-progress span::before { width: 8px; height: 8px; border-radius: 50%; background: #cbd0da; content: ""; }
.development-progress .is-complete::before { background: var(--color-blue); box-shadow: 0 0 0 5px rgba(18,63,86,.12); }
.development-progress .is-current::before { background: var(--color-pink); box-shadow: 0 0 0 5px rgba(69,184,232,.15); }
.development-hero__placeholder { display: grid; min-height: 100%; place-content: center; gap: 10px; padding: 40px; text-align: center; background: linear-gradient(135deg,#eef3f5,#ddf5ff); color: var(--color-black); }
.development-hero__placeholder span { color: var(--color-pink-dark); font-weight: 900; letter-spacing: .12em; }
.development-hero__placeholder strong { font-size: clamp(1.5rem,3vw,2.5rem); }
.development-hero__placeholder small { color: var(--color-muted); }

@media (max-width: 1100px) { .development-hero { padding-block: 42px 60px; } }
@media (max-width: 680px) { .development-hero { padding-block: 30px 50px; } .development-progress { gap: 8px; } .development-progress span { padding: 8px 10px; font-size: .7rem; } }