.how-to-use{padding-top:100px;background:var(--bg-light)}.page-title{font-size:3rem;font-weight:700;text-align:center;margin-bottom:20px;color:var(--text)}.page-subtitle{font-size:1.5rem;text-align:center;color:var(--text-secondary);margin-bottom:60px}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:40px;gap:40px;margin-top:60px}.step-card{background:#fff;padding:50px 40px;border-radius:16px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:all .4s cubic-bezier(.4,0,.2,1);animation:fadeInUp .6s ease-out both;position:relative;overflow:hidden}.step-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(28,168,168,.1),transparent);transition:left .5s ease}.step-card:hover:before{left:100%}.step-card:first-child{animation-delay:.1s}.step-card:nth-child(2){animation-delay:.3s}.step-card:nth-child(3){animation-delay:.5s}.step-card:nth-child(4){animation-delay:.7s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.step-card{transition:var(--transition-smooth)}.step-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(28,168,168,.15);border-top:3px solid var(--primary);background:linear-gradient(180deg,#fff,#fafafa)}.step-icon{margin-bottom:20px;transition:var(--transition-smooth);display:flex;justify-content:center;align-items:center;color:var(--primary)}.step-card:hover .step-icon{transform:scale(1.1);color:var(--primary-hover)}.step-title{font-size:1.75rem;font-weight:600;margin-bottom:20px;color:var(--text)}.step-description{font-size:1.1rem;color:var(--text-secondary);line-height:1.8}@media (max-width:768px){.how-to-use{padding-top:80px}.steps-grid{grid-template-columns:1fr}}