.process { overflow: hidden; }
.process-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.process-intro { position: sticky; top: 130px; }
.process-intro h2 { margin-bottom: 22px; }
.process-intro p { max-width: 400px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.process-note { width: fit-content; display: flex; align-items: center; gap: 12px; margin-top: 35px; padding: 12px 17px 12px 12px; border: 1px solid #dfe3ef; border-radius: 13px; background: #f8f9ff; }
.process-note > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #e7ebff; color: var(--blue); font: 700 14px "Manrope"; }
.process-note div { display: flex; flex-direction: column; }
.process-note strong { font-size: 11px; }
.process-note small { margin-top: 3px; color: #8a91a4; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.process-steps { border-top: 1px solid #dfe3ee; }
.process-steps article { --pointer-x: 50%; --pointer-y: 50%; position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 25px; padding: 34px 18px 36px 0; border-bottom: 1px solid #dfe3ee; transition: padding .5s var(--ease-out), background .4s ease; overflow: hidden; }
.process-steps article::before { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); transition: right .65s var(--ease-out); }
.process-steps article::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--pointer-x) var(--pointer-y),rgba(244,63,94,.07),transparent 62%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.process-steps article:hover { padding-left: 15px; background: linear-gradient(90deg, rgba(245,247,255,.9), transparent); }
.process-steps article:hover::before { right: 0; }
.process-steps article:hover::after { opacity: 1; }
.process-steps article > span { position: relative; z-index: 1; display: grid; place-items: center; align-self: start; width: 38px; height: 38px; border-radius: 10px; background: #f0f3ff; color: var(--blue); font: 600 10px "Manrope"; transition: transform .45s var(--ease-out), background .35s ease, color .35s ease; }
.process-steps article:hover > span { color: #fff; background: var(--blue); transform: rotate(-6deg) scale(1.06); }
.process-steps article > div, .process-steps article > i { position: relative; z-index: 1; }
.process-steps article small { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.process-steps h3 { margin: 8px 0 9px; font: 600 23px "Manrope"; letter-spacing: -.9px; }
.process-steps p { max-width: 500px; margin: 0; color: #6c748a; font-size: 13px; line-height: 1.6; }
.process-steps article > i { align-self: center; color: #b8bed0; font: 500 20px "Manrope"; font-style: normal; transition: .3s ease; }
.process-steps article:hover > i { color: var(--blue); transform: rotate(10deg) scale(1.15); }