.before,.after{height:60vh;display:grid;place-items:center;color:#8aa;font:600 14px 'Manrope',sans-serif}
.sdlc{--teal:#14909d;--teal-d:#0e6f79;--pink:#e8265e;--ink:#16323a;--mute:#5d7279;--tint:#f2fafb;
  position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(900px 500px at 50% 50%,var(--tint),#fff 70%);
  padding:48px 20px 56px;color:var(--ink);text-align:center;overflow:hidden}
.sdlc *{box-sizing:border-box}
.sdlc h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.sdlc__sub{max-width:520px;margin:0 auto 28px;color:var(--mute);font-size:16px;line-height:1.5}
.sdlc__ring{position:relative;width:min(100%,600px,calc(100vh - 270px));min-width:300px;aspect-ratio:1;margin:0 auto}
.sdlc__ring>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sdlc .base{fill:none;stroke:#b9dfe3;stroke-width:.35;stroke-dasharray:1.2 1.8}
.sdlc .arc{fill:none;stroke:var(--teal);stroke-width:.7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.sdlc .dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 0 6px rgba(232,38,94,.15),0 0 18px rgba(232,38,94,.5);z-index:2}
.sdlc .node{position:absolute;width:15%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;z-index:3;font:inherit;color:inherit}
.sdlc .c{position:absolute;inset:0;border-radius:50%;background:#fff;border:2.5px solid var(--teal);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(20,144,157,.14);
  transition:transform .3s,background .3s,border-color .3s}
.sdlc .c svg{display:block;width:46%;height:46%;fill:none;stroke:var(--pink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.sdlc .node:hover .c{transform:scale(1.07)}
.sdlc .node:focus-visible .c{outline:3px solid var(--pink);outline-offset:3px}
.sdlc .node.done .c{border-color:var(--teal-d)}
.sdlc .node.on .c{background:var(--teal);border-color:var(--teal-d);transform:scale(1.1)}
.sdlc .node.on .c svg{stroke:#fff}
.sdlc .node.on .c::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--pink);opacity:0;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.88);opacity:.7}100%{transform:scale(1.2);opacity:0}}
.sdlc .lbl{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-weight:700;font-size:clamp(11px,1.8vw,15px);color:var(--mute);transition:color .3s}
.sdlc .node.on .lbl,.sdlc .node.done .lbl{color:var(--ink)}
.sdlc__card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;text-align:center}
.sdlc__card .step{font-size:13px;font-weight:700;color:var(--pink);margin-bottom:8px}
.sdlc__card h3{font-size:clamp(22px,3.2vw,30px);margin:0 0 10px;font-weight:800;letter-spacing:-.01em}
.sdlc__card p{margin:0 0 14px;font-size:clamp(13px,1.8vw,15.5px);line-height:1.55;color:var(--mute)}
.sdlc__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sdlc__chips span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;background:#fff;border:1px solid #cfe7ea;color:var(--teal-d)}
.sdlc__hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--mute);display:flex;align-items:center;gap:8px;transition:opacity .3s}
.sdlc__hint i{width:14px;height:22px;border:2px solid var(--teal);border-radius:9px;position:relative}
.sdlc__hint i::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:5px;margin-left:-1.5px;border-radius:2px;background:var(--pink);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(7px);opacity:0}}
.sdlc__loop{margin-top:26px;font-size:14px;font-weight:600;color:var(--mute);opacity:.45;transition:color .4s,opacity .4s}
.sdlc__loop.on{color:var(--pink);opacity:1}
@media(max-width:720px){
  .sdlc{padding-top:32px}
  .sdlc__sub{margin-bottom:18px;font-size:14px}
  .sdlc__ring{width:min(86vw,44vh);min-width:260px;margin-bottom:190px}
  .sdlc__card{left:0;top:100%;transform:none;width:100%;padding-top:40px}
  .sdlc__loop{display:none}
}
@media(prefers-reduced-motion:reduce){.sdlc .node.on .c::after,.sdlc__hint i::after{animation:none}}