/* pages/process.css — vertical alternating timeline */
.timeline { position: relative; list-style: none; max-width: 980px; margin: 0 auto; padding: 0; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, var(--b-blue) 8%, var(--b-cyan) 92%, transparent); opacity: .5; }
.tl-item { position: relative; width: 50%; padding: 0 56px 46px 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 46px 56px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; top: 18px; right: -27px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 1.1rem; color: #fff; background: var(--grad-primary); box-shadow: 0 0 0 7px var(--b-white), 0 12px 26px rgba(8,124,240,.4); }
.tl-item:nth-child(even) .tl-dot { right: auto; left: -27px; }
.tl-card { position: relative; padding: 28px 30px; background: #fff; border: 1px solid var(--b-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s, border-color .3s; }
.tl-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(8,124,240,.4); }
.tl-num { position: absolute; top: 14px; right: 22px; font: 800 2.4rem/1 var(--font-head); color: rgba(8,124,240,.1); }
.tl-card h2 { margin-bottom: 8px; font-size: 1.2rem; }
.tl-card p { margin: 0; font-size: .96rem; }
.banner-sec { background: linear-gradient(180deg, #0B1730, #08112A); }
.banner-sec .section-lead { margin-bottom: 32px; }