.b-steps__heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-40)}
.b-steps__target{width:24rem;height:24rem;flex-shrink:0;transform:rotate(-5deg);transition:transform .8s ease}
.b-steps__heading:hover .b-steps__target{transform:rotate(0)}
.b-steps__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-25);list-style:none;padding:0;margin:0}
.b-steps__card{position:relative;min-width:0;overflow:hidden;min-height:30rem;padding:var(--space-30) var(--space-40);border:.2rem solid var(--border-color);border-radius:var(--radius-30);background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 75%,var(--paper)));transition:border-color .35s,box-shadow .35s}
.b-steps__card:hover{border-color:var(--purple);box-shadow:0 1rem 4rem #57bf9c1a}
.b-steps__card:is(:first-child,:last-child:nth-child(even)){grid-column:1/-1;min-height:25rem;padding-right:39rem}
.b-steps__head{display:flex;align-items:flex-start;gap:var(--space-20);padding-right:13rem;min-height:9rem}
.b-steps__number{display:grid;place-items:center;flex-shrink:0;min-width:7.5rem;padding:.5rem var(--space-10);border-radius:var(--radius-16);background:linear-gradient(120deg,#5a776d,#75978c);color:var(--white);font-weight:800;font-size:3.4rem;line-height:1.2}
.b-steps__title{font-size:var(--font-size-30);line-height:1.12;font-weight:800;letter-spacing:-.05rem}
.b-steps__copy{font-size:var(--font-size-22);line-height:1.35;padding-top:var(--space-20)}
.b-steps__icon{position:absolute;right:var(--space-30);top:var(--space-25);width:12rem;height:11.3rem;object-fit:contain;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s}
.b-steps__card:hover .b-steps__icon{transform:translateY(-.4rem) rotate(-3deg);filter:drop-shadow(0 0 1rem #57bf9c4d)}
.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__head{padding-right:0;min-height:5rem}
.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__icon{width:23rem;height:21.5rem;right:var(--space-60);top:50%;translate:0 -50%}
[data-theme=light] .b-steps__card{background:linear-gradient(135deg,#ffffff,#edf1f0);box-shadow:0 1rem 3rem #2d584c08}
@media(max-width:991px){.b-steps__title{font-size:var(--font-size-24)}.b-steps__head{padding-right:10rem;gap:var(--space-15)}.b-steps__icon{width:10rem;height:9.5rem}.b-steps__number{min-width:6rem;font-size:var(--font-size-30)}.b-steps__card{padding:var(--space-25)}.b-steps__copy{font-size:var(--font-size-20)}}
@media(max-width:767px){.b-steps__target{width:16rem;height:16rem}.b-steps__heading{gap:var(--space-20)}.b-steps__grid{grid-template-columns:1fr}.b-steps__card:is(:first-child,:last-child:nth-child(even)){padding-right:var(--space-25);min-height:0}.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__head{padding-right:13rem;min-height:9rem}.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__icon{width:12rem;height:11.3rem;right:var(--space-25);top:var(--space-25);translate:none}.b-steps__card{min-height:0}.b-steps__head{padding-right:13rem}.b-steps__icon{width:12rem;height:11.3rem}}
@media(max-width:479px){.b-steps__heading{align-items:flex-start}.b-steps__target{width:7rem;height:7rem}.b-steps__heading .b-title{font-size:var(--font-size-30)}.b-steps__heading .b-text{font-size:var(--font-size-16)}.b-steps__title{font-size:var(--font-size-20)}.b-steps__number{min-width:4.2rem;font-size:var(--font-size-22);border-radius:1rem}.b-steps__card{padding:var(--space-20)}.b-steps__head,.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__head{padding-right:6rem;min-height:6rem;gap:var(--space-10)}.b-steps__icon,.b-steps__card:is(:first-child,:last-child:nth-child(even)) .b-steps__icon{width:6.2rem;height:6rem;right:var(--space-15);top:var(--space-20)}.b-steps__copy{font-size:var(--font-size-16);padding-top:var(--space-15)}}
@media(prefers-reduced-motion:reduce){.b-steps__icon,.b-steps__target,.b-steps__card{transition:none}.b-steps__card:hover .b-steps__icon{transform:none}}
/* The adjacent sections share a continuous base; only their glow fades. */
.b-approach{background:none}
.b-steps{background:none}
.b-steps__target{overflow:visible}
.b-steps__arrow{transform-box:view-box;transform-origin:82px 99px}
.b-steps__impact{opacity:0;transform-box:fill-box;transform-origin:center}
.b-steps.is-shooting .b-steps__arrow{animation:steps-arrow-flight 1.6s cubic-bezier(.18,.7,.22,1) both}
.b-steps.is-shooting .b-steps__impact{animation:steps-target-impact .85s ease-out .55s both}
@keyframes steps-arrow-flight{0%{transform:translate(120px,-120px) scale(.75);opacity:0}12%{opacity:1}43%{transform:translate(-3px,3px) scale(1.02)}54%{transform:translate(2px,-2px) rotate(3deg)}66%{transform:translate(0,0) rotate(-2deg)}80%,100%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes steps-target-impact{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(4)}}
@media(prefers-reduced-motion:reduce){.b-steps.is-shooting .b-steps__arrow,.b-steps.is-shooting .b-steps__impact{animation:none}}

.b-steps{position:relative;isolation:isolate}
.b-steps__decor{display:none}
/* Reveal without distorting geometry or clipping text. Each viewport batch has its own short stagger. */
.is-motion [data-step-reveal]{opacity:0;translate:0 3rem;scale:.985;transition:opacity .38s ease,translate .9s cubic-bezier(.16,1,.3,1),scale .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--step-delay,0ms)}
.is-motion [data-step-reveal].is-visible{opacity:1;translate:0 0;scale:1}


[data-theme=light] .b-steps__icon{filter:brightness(.52) saturate(1.15)}
@media(prefers-reduced-motion:reduce){.is-motion [data-step-reveal]{opacity:1;filter:none;transition:none}.b-steps__card.is-visible{animation:none}}
/* A soft light follows the pointer without moving the text or card. */
@property --light-x{syntax:'<length>';inherits:true;initial-value:0px}
@property --light-y{syntax:'<length>';inherits:true;initial-value:0px}
.b-steps__card{isolation:isolate}
.b-steps__card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse 32rem 25rem at var(--light-x) var(--light-y),#c7f55d45,#c7f55c2c 38%,transparent 76%);opacity:0;transition:opacity .55s ease,--light-x .18s ease-out,--light-y .18s ease-out}
.b-steps__card.is-lit::before{opacity:1}
@media(prefers-reduced-motion:reduce){.b-steps__card::before{transition:none}}

.b-steps__head,.b-steps__copy{position:relative;z-index:1}.b-steps__icon{z-index:1}
@media(prefers-reduced-motion:reduce){.is-motion [data-step-reveal]{translate:none;scale:1;opacity:1}}