/* Development roadmap: static content remains visible without JavaScript. */
.dev-section{position:relative;isolation:isolate;max-width:none;overflow:clip;padding:100px max(7%,calc((100vw - 1380px)/2));border-top:1px solid #ffffff14;background:radial-gradient(ellipse at 6% 35%,#f99d500c,transparent 52%),#11140f}
.dev-grid{position:absolute;inset:0;z-index:-1;opacity:.15;background-image:linear-gradient(#a8b99a18 1px,transparent 1px),linear-gradient(90deg,#a8b99a18 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,#000,transparent 80%);pointer-events:none}
.dev-section>.section-label{display:flex;align-items:center;gap:16px;color:#b5bba9;line-height:1.8}
.dev-label-rule{width:48px;height:1px;background:#788469}
.dev-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:70px;align-items:start}
.dev-intro{position:sticky;top:45px;padding-top:12px}
.dev-intro .status-pill{font-size:9px;letter-spacing:1.5px;margin-bottom:28px}
.dev-intro h2{font-size:clamp(44px,4.7vw,73px);font-weight:800;line-height:1.02;letter-spacing:-.4px}
.dev-intro h2>span{color:var(--orange)}
.dev-intro>p{font-size:14px;line-height:1.9;color:#afb7a4;max-width:420px;margin:26px 0}
.dev-focus{display:flex;gap:25px;align-items:center;margin:35px 0;padding:22px 0;border-top:1px solid #a7b49c2b;border-bottom:1px solid #a7b49c2b}
.dev-focus-number{font:800 76px/.9 var(--display);color:var(--orange);letter-spacing:-2px}
.dev-focus-number>span{font-size:29px;color:#7d886f;letter-spacing:0}
.dev-focus-label{display:block;font-size:8px;color:#a2ad96;letter-spacing:2px;margin-bottom:9px}
.dev-focus strong{font-size:15px;line-height:1.6;font-weight:500}
.dev-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:10px;color:#b7bfaf}
.dev-legend>span{display:flex;gap:7px;align-items:center}
.dev-legend i{width:6px;height:6px;border:1px solid #8a947d;border-radius:50%}
.dev-legend i.done{background:#9ebd7b;border-color:#9ebd7b}
.dev-legend i.active{background:var(--orange);border-color:var(--orange)}
.dev-intro .dev-note{font-size:11px;color:#909b83;line-height:1.8;margin-bottom:15px}
.dev-motion{background:none;border:0;border-bottom:1px solid #667359;padding:8px 0;color:#b5c2a6;font-size:11px}
.dev-timeline{position:relative;list-style:none;padding:0;margin:0}
.dev-timeline:before{content:'';position:absolute;left:18px;top:24px;bottom:50px;width:1px;background:linear-gradient(#9ebd7b 0%,#9ebd7b 46%,#f99d50 58%,#49513f 65%)}
.dev-step{position:relative;padding-left:57px;margin-bottom:16px}
.dev-step:last-child{margin-bottom:0}
.dev-node{position:absolute;left:0;top:27px;width:37px;height:37px;border:1px solid #4c5741;border-radius:50%;background:#161c12;display:grid;place-items:center;font-size:11px;font-weight:600;color:#a4af97;z-index:1}
.dev-step--done .dev-node{color:#b5d493;border-color:#729257;background:#202d18}
.dev-step--active .dev-node{color:#12150e;background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 7px #f99d5012;animation:dev-beacon 2.8s ease-in-out infinite}
.dev-card{position:relative;border:1px solid #a5b98e24;border-radius:12px;padding:24px;background:linear-gradient(120deg,#21281c,#171d14);transition:border-color .2s,transform .2s;overflow:hidden}
.dev-card:hover{border-color:#a5b98e66;transform:translateX(4px)}
.dev-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dev-phase{font-size:9px;line-height:1.7;letter-spacing:1px;color:#9da98f;text-transform:uppercase}
.dev-badge{white-space:nowrap;font-size:8px;letter-spacing:1px;color:#b6cf9a}
.dev-card h3{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:.1px;margin:0 0 9px;line-height:1.12}
.dev-card p{font-size:12px;line-height:1.8;color:#aeb8a2;margin:0;max-width:440px}
.dev-step--active{margin-top:24px;margin-bottom:24px}
.dev-step--active .dev-card{padding:29px 24px;border-color:#f99d5099;background:radial-gradient(ellipse at 100% 0%,#f99d5021,transparent 80%),#24261c;box-shadow:0 8px 45px #0003,0 0 40px #f99d5008}
.dev-step--active .dev-card:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.dev-step--active .dev-badge,.dev-step--active .dev-phase{color:var(--orange)}
.dev-step--active h3{font-size:36px;color:#ffe5c7}
.dev-current-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.dev-current-tags span{padding:6px 9px;border:1px solid #f99d5033;border-radius:4px;font-size:9px;color:#e2bd91}
.dev-activity{display:flex;align-items:end;gap:5px;height:21px;margin-top:23px}
.dev-activity i{height:100%;width:5px;background:var(--orange);opacity:.6;transform-origin:bottom;animation:dev-signal 1.4s ease-in-out infinite alternate}
.dev-activity i:nth-child(3n){animation-delay:-.7s;height:65%}.dev-activity i:nth-child(3n + 1){animation-delay:-.3s;height:40%}
.dev-step--planned .dev-card{background:#161b13;border-style:dashed}
.dev-step--planned .dev-badge{color:#919c86}.dev-step--planned h3{color:#c1c8b8}
.dev-outro{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:50px;padding-top:24px;border-top:1px solid #a4b58f26}
.dev-outro p{font-size:9px;letter-spacing:1.6px;color:#bbc5af}.dev-outro>span:last-child{margin-left:auto;font-size:11px;color:#909d83}
.dev-reveal{animation:dev-enter .7s both;animation-delay:calc(var(--step-index) * 35ms)}
.dev-paused *{animation-play-state:paused!important}
@keyframes dev-enter{from{opacity:.15;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes dev-beacon{50%{box-shadow:0 0 0 12px #f99d5005,0 0 25px #f99d5035}}
@keyframes dev-signal{to{transform:scaleY(.3);opacity:.3}}
@media(min-width:1500px){.dev-layout{gap:110px}}
@media(max-width:950px){.dev-layout{gap:32px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.dev-card{padding:20px}.dev-card-top{align-items:start;flex-direction:column;gap:5px}.dev-intro h2{font-size:45px}.dev-focus{gap:15px}.dev-focus-number{font-size:62px}}
@media(max-width:700px){.dev-section{padding:65px 6%}.dev-layout{grid-template-columns:1fr;gap:35px}.dev-intro{position:static}.dev-intro h2{font-size:clamp(43px,10vw,64px)}.dev-intro>p{max-width:none}.dev-focus{margin:25px 0}.dev-card-top{flex-direction:row}.dev-step{padding-left:46px}.dev-node{width:31px;height:31px;top:25px}.dev-timeline:before{left:15px}.dev-card{padding:20px 17px}.dev-step--active .dev-card{padding:25px 17px}.dev-card h3{font-size:27px}.dev-step--active h3{font-size:32px}.dev-section>.section-label{font-size:8px;gap:10px}.dev-label-rule{width:20px}.dev-outro>span:last-child{margin-left:19px}.dev-outro{gap:8px}}
@media(max-width:380px){.dev-card-top{flex-direction:column}.dev-current-tags{gap:5px}.dev-legend{gap:13px}}
@media(prefers-reduced-motion:reduce){.dev-section *{animation:none!important;transition:none!important}.dev-motion{display:none}}

/* Scroll progress stops at the current phase; future phases stay neutral. */
.dev-timeline:before{background:#414a36}
.dev-scroll-track{position:absolute;left:18px;top:45px;width:2px;height:var(--dev-limit,0px);pointer-events:none;transform-origin:top;transform:scaleY(var(--dev-progress,0));background:linear-gradient(to bottom,#94ba6e 0%,#aaca82 78%,#f99d50 100%);box-shadow:0 0 12px #a5ce7045;z-index:0}
.dev-scroll-enabled .dev-step--done .dev-node{color:#929d85;border-color:#4c5741;background:#161c12;transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.dev-scroll-enabled .dev-step--done .dev-badge{color:#8f9c82;transition:color .35s}
.dev-scroll-enabled .dev-step--done .dev-card{background:#171d14;transition:border-color .4s,background .4s,transform .2s}
.dev-scroll-enabled .dev-step--done.dev-reached .dev-node{color:#daf4bd;border-color:#9abb76;background:#304525;box-shadow:0 0 0 5px #a4cf7410,0 0 20px #a4cf7425}
.dev-scroll-enabled .dev-step--done.dev-reached .dev-badge{color:#bddc9d}
.dev-scroll-enabled .dev-step--done.dev-reached .dev-card{border-color:#9dbf6755;background:linear-gradient(115deg,#293421,#192114)}
.dev-scroll-enabled .dev-step--active.dev-reached .dev-card{border-color:#f99d50;box-shadow:0 0 35px #f99d501b,0 8px 45px #0003}
@media(max-width:700px){.dev-scroll-track{left:15px;top:40px}}
@media(prefers-reduced-motion:reduce){.dev-scroll-enabled .dev-step *{transition:none!important}}