.steps{background:var(--green-deep);border-block:1px solid var(--line)}
.steps__grid{display:flex;gap:clamp(12px,1.2vw,18px);margin-top:clamp(44px,5vw,68px)}
.step{
  position:relative;flex:1 1 0;min-width:0;min-height:clamp(300px,40vh,380px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,2vw,30px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(165deg,var(--green-soft),var(--green));
  transition:flex-grow .6s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.step::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:.6s var(--ease);
  background:radial-gradient(90% 70% at 50% 0%,rgba(197,197,197,.16),transparent 70%)}
.step::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--metal);
  transition:width .6s var(--ease)}
.step:hover{flex-grow:2.6;border-color:rgba(197,197,197,.45);box-shadow:0 24px 60px -28px rgba(0,0,0,.8)}
.step:hover::before{opacity:1}
.step:hover::after{width:100%}
.step .no{position:absolute;top:clamp(22px,2vw,30px);left:clamp(24px,2vw,30px);z-index:2;
  font-family:var(--t-display);font-weight:300;font-size:clamp(2.4rem,3vw,3.2rem);line-height:1;
  color:transparent;background:var(--metal);-webkit-background-clip:text;background-clip:text;
  opacity:.4;transition:opacity .5s var(--ease)}
.step:hover .no{opacity:1}
.step__body{position:relative;z-index:2}
.step h3{font-family:var(--t-display);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.15;
  letter-spacing:-.01em}
.step p{color:var(--gray);font-size:.92rem;margin-top:0;max-height:0;opacity:0;transform:translateY(10px);
  overflow:hidden;transition:max-height .55s var(--ease),opacity .45s var(--ease),
  transform .55s var(--ease),margin-top .55s var(--ease)}
.step:hover p{max-height:160px;opacity:1;transform:none;margin-top:.8rem}
.step__more{display:inline-flex;align-items:center;gap:.5em;margin-top:1rem;max-height:0;opacity:0;overflow:hidden;
  font-family:var(--t-display);font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--gray-2);
  transition:.55s var(--ease)}
.step:hover .step__more{max-height:40px;opacity:1}
.step__more svg{width:14px;height:14px}
@media(max-width:900px){
  .steps__grid{flex-direction:column}
  .step{flex:1 1 auto;min-height:0}
  .step:hover{flex-grow:1}
  .step .no{position:static;opacity:1;margin-bottom:.6rem}
  .step::after{width:100%;height:2px}
  .step p{max-height:160px;opacity:1;transform:none;margin-top:.8rem}
  .step__more{max-height:40px;opacity:1}
}