.development-process{--process-bg:var(--bg,#020b12);--process-card:#071627;--process-card-active:#082848;--process-border:#285579;--process-ink:var(--text,#f4f6fb);--process-muted:#b4c6df;--process-accent:var(--cyan,#00c8ff);--process-line:#174567;position:relative;isolation:isolate;margin:40px auto 12px;padding:42px 16px 36px;max-width:1640px;color:var(--process-ink);background:radial-gradient(ellipse at 50% 48%,#06396735,transparent 68%),var(--process-bg)}
.development-process::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.22;background-image:linear-gradient(#16466c40 1px,transparent 1px),linear-gradient(90deg,#16466c40 1px,transparent 1px);background-size:92px 92px;mask-image:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000);pointer-events:none}
.development-process__header{text-align:center;max-width:1380px;margin:0 auto 54px}.development-process__title{font-size:clamp(27px,2.6vw,44px);line-height:1.22;letter-spacing:-1px;font-weight:750;text-wrap:balance}.development-process__title span{color:var(--process-accent)}.development-process__subtitle{color:var(--process-muted);font-size:clamp(14px,1.2vw,19px);line-height:1.65;max-width:1100px;margin:18px auto 0;text-wrap:balance}.development-process__light{display:block;width:30px;height:2px;background:var(--process-accent);box-shadow:0 0 10px #00c8ff80;margin:20px auto 0}.development-process__icons{width:0;height:0;position:absolute;overflow:hidden}
.process-track{position:relative;padding:0 65px 10px;max-width:1510px;margin:auto}.process-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 46px;list-style:none;margin:0;padding:0}.process-step{min-width:0;position:relative;filter:drop-shadow(0 8px 20px #0003);transition:filter .35s,transform .35s}.process-step:nth-child(4){grid-column:3;grid-row:2}.process-step:nth-child(5){grid-column:2;grid-row:2}.process-step:nth-child(6){grid-column:1;grid-row:2}
.process-card{--shape:polygon(6% 0,64% 0,68% 5%,94% 5%,100% 12%,100% 91%,94% 100%,26% 100%,23% 97%,9% 97%,0 84%,0 9%);position:relative;height:100%;padding:25px 25px 30px;clip-path:var(--shape);background:var(--process-border);outline:none}.process-card::before{content:'';position:absolute;inset:1px;clip-path:var(--shape);background:linear-gradient(140deg,#0c1c30,var(--process-card));z-index:0;transition:background .35s}.process-number,.process-card__body{position:relative;z-index:1}.process-number{display:block;font-size:36px;font-weight:700;line-height:1;color:#9db4d7;margin-bottom:19px;transition:color .35s}.process-card__body{display:flex;gap:18px;align-items:flex-start}.process-icon{width:59px;height:62px;flex-shrink:0;border:1px solid #456e99;border-radius:11px;display:grid;place-items:center;background:linear-gradient(140deg,#112a43,#081324);box-shadow:inset 0 0 12px #609be31c;color:#a7c9f6;transition:color .35s,border-color .35s}.process-icon svg{width:32px;height:32px;stroke-width:1.8}.process-content{min-width:0}.process-content h3{font-size:clamp(17px,1.35vw,22px);line-height:1.3;margin:0 0 14px;letter-spacing:-.3px;color:var(--process-ink)}.process-content p{font-size:clamp(12px,1vw,15px);line-height:1.65;color:var(--process-muted);margin:0}
.process-step.is-active{transform:translateY(-4px);filter:drop-shadow(0 0 3px #00c8ffa0) drop-shadow(0 0 17px #00b7ff40)}.process-step.is-active .process-card{background:var(--process-accent)}.process-step.is-active .process-card::before{background:linear-gradient(135deg,var(--process-card-active),var(--process-card))}.process-step.is-active .process-number,.process-step.is-active h3{color:var(--process-accent)}.process-step.is-active .process-icon{border-color:var(--process-accent);color:var(--process-accent);box-shadow:inset 0 0 20px #00aaff22,0 0 12px #00c8ff22}.process-card:focus-visible::after{content:'';position:absolute;inset:6px;clip-path:var(--shape);border:2px solid var(--process-accent);pointer-events:none}.process-step:has(.process-card:focus-visible){filter:drop-shadow(0 0 4px var(--process-accent)) drop-shadow(0 0 16px #00c8ff60)}
.process-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-width:1.8;z-index:0}.process-connector{stroke:var(--process-line)}.process-connector.is-current{stroke:var(--process-accent);filter:drop-shadow(0 0 4px #00c8ff60)}.process-pulse{stroke:var(--process-accent);stroke-width:3.5;filter:drop-shadow(0 0 5px #00c8ff);opacity:0}.process-pulse.is-current{opacity:1}.process-arrow{stroke:#2376a6}.process-arrow.is-current{stroke:var(--process-accent)}.process-node{fill:var(--process-bg);stroke:#3180ac;stroke-width:2}.process-return{position:absolute;left:0;top:calc(50% - 26px);font-size:11px;line-height:1.5;text-align:center;color:#7fa1c4;background:var(--process-bg);padding:7px 0;width:58px;z-index:2;transition:color .3s}.development-process.is-returning .process-return{color:var(--process-accent)}
@media(max-width:1200px){.process-track{padding:0 45px 10px}.process-steps{gap:36px 28px}.process-card{padding:22px 18px 26px}.process-card__body{gap:12px}.process-icon{width:43px;height:48px}.process-icon svg{width:27px;height:27px}.process-content h3{font-size:17px}.process-content p{font-size:12px}.process-return{width:40px;font-size:9px}.process-number{font-size:32px}}
@media(max-width:850px){.development-process{padding:30px 14px;margin-top:28px}.development-process__header{margin-bottom:34px}.development-process__title{font-size:clamp(25px,4.7vw,34px);letter-spacing:-.6px}.development-process__subtitle{font-size:14px;max-width:620px}.process-track{padding:0 24px 50px;max-width:680px}.process-steps{display:flex;flex-direction:column;gap:32px}.process-step{width:calc(100% - 34px);align-self:flex-start}.process-step:nth-child(even){align-self:flex-end}.process-card{padding:22px 24px 26px;height:auto}.process-number{font-size:30px;margin-bottom:16px}.process-card__body{gap:16px}.process-icon{width:47px;height:50px}.process-content h3{font-size:19px;margin-bottom:10px}.process-content p{font-size:14px;line-height:1.65}.process-return{top:auto;bottom:8px;left:auto;right:0;width:auto;padding:4px 10px;font-size:10px}.process-return br{display:none}}
@media(max-width:420px){.development-process{padding-left:8px;padding-right:8px}.development-process__header{padding:0 10px}.development-process__subtitle{font-size:13px}.process-track{padding-left:13px;padding-right:18px}.process-step{width:calc(100% - 17px)}.process-card{padding:20px 18px 26px}.process-card__body{gap:11px}.process-icon{width:37px;height:42px;border-radius:8px}.process-icon svg{width:24px;height:24px}.process-content h3{font-size:16px}.process-content p{font-size:12px}.process-number{font-size:28px}}
/* The same component can be included in the later light-mode page. */
[data-theme="light"] .development-process,.development-process[data-theme="light"]{--process-bg:#f1f6fb;--process-card:#fff;--process-card-active:#e9f6ff;--process-border:#a7c2d7;--process-ink:#10283d;--process-muted:#465f76;--process-accent:#007db7;--process-line:#a0c3db;background:radial-gradient(ellipse at center,#d7edfb66,transparent 70%),var(--process-bg)}
[data-theme="light"] .process-card::before{background:linear-gradient(140deg,#f7fbff,var(--process-card))}[data-theme="light"] .process-icon{background:#edf5fc;color:#386a8c;border-color:#9bb8ce}[data-theme="light"] .process-number{color:#5a7893}
@media(prefers-reduced-motion:reduce){.development-process .process-step{transform:none;transition:none}.development-process .process-pulse{display:none}.development-process *{transition:none!important}}