.hero .benefit-row{gap:20px;padding-bottom:38px;perspective:1000px}
.hero .benefit-row>.hero-benefit-card{--benefit-color:151,103,233;--benefit-light:#f9f4ff;position:relative;isolation:isolate;display:flex;align-items:center;gap:17px;min-width:0;min-height:116px;padding:24px 22px;border:1px solid rgba(var(--benefit-color),.15);border-radius:19px;background:linear-gradient(120deg,#fff 15%,var(--benefit-light));box-shadow:0 6px 22px rgba(var(--benefit-color),.055),inset 0 1px 0 #fff;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;animation:hero-enter .8s .2s both}
.hero .benefit-row>.benefit-mint{--benefit-color:50,176,137;--benefit-light:#effcf6;animation-delay:.3s}.hero .benefit-row>.benefit-orange{--benefit-color:247,151,51;--benefit-light:#fff7ec;animation-delay:.4s}
.hero-benefit-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(190px circle at var(--benefit-x,15%) var(--benefit-y,100%),rgba(var(--benefit-color),.13),transparent 75%);opacity:.55;transition:opacity .3s;pointer-events:none}
.hero-benefit-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,#ffffffa0 48%,transparent 61%);background-size:300% 100%;background-position:150% 0;animation:benefit-card-shine 9s ease-in-out infinite}.hero-benefit-card:nth-child(2)::after{animation-delay:1.3s}.hero-benefit-card:nth-child(3)::after{animation-delay:2.6s}
.hero .hero-benefit-card .benefit-icon{position:relative;flex:0 0 48px;width:48px;height:48px;border-radius:15px;box-shadow:0 7px 14px rgba(var(--benefit-color),.2),inset 0 1px 0 #ffffff80;border:1px solid #ffffff80;animation:benefit-icon-float 5s ease-in-out infinite;transition:transform .35s,box-shadow .35s;color:#fff}.hero .hero-benefit-card:nth-child(2) .benefit-icon{animation-delay:-1.5s}.hero .hero-benefit-card:nth-child(3) .benefit-icon{animation-delay:-3s}.hero .hero-benefit-card .benefit-icon svg{width:25px;height:25px;transition:transform .35s}.hero .hero-benefit-card .benefit-icon::after{content:"";position:absolute;inset:-5px;border-radius:19px;border:1px solid rgba(var(--benefit-color),.17);opacity:0;transform:scale(.9);transition:opacity .35s,transform .35s}
.hero .hero-benefit-card .benefit-card-copy{position:relative;min-width:0;z-index:1;padding-right:2px}.hero .hero-benefit-card h3{font-size:14px;font-weight:700;line-height:1.45;color:#3b2b50;margin:0 0 5px;letter-spacing:-.15px}.hero .hero-benefit-card p{font-size:12px;line-height:1.65;margin:0;color:#897b98}.benefit-card-number{position:absolute;right:14px;top:9px;font-size:10px;line-height:1;font-weight:700;letter-spacing:1px;color:rgba(var(--benefit-color),.35);transition:color .3s}
@media(hover:hover) and (pointer:fine){.hero .benefit-row>.hero-benefit-card:hover{transform:translateY(-6px);border-color:rgba(var(--benefit-color),.42);box-shadow:0 15px 32px rgba(var(--benefit-color),.15),inset 0 1px 0 #fff}.hero-benefit-card:hover::before{opacity:1}.hero .hero-benefit-card:hover .benefit-icon{box-shadow:0 10px 22px rgba(var(--benefit-color),.3)}.hero .hero-benefit-card:hover .benefit-icon svg{transform:rotate(-8deg) scale(1.07)}.hero .hero-benefit-card:hover .benefit-icon::after{opacity:1;transform:scale(1)}.hero-benefit-card:hover .benefit-card-number{color:rgba(var(--benefit-color),.8)}}
@keyframes benefit-card-shine{0%,72%{background-position:150% 0}91%,100%{background-position:-100% 0}}@keyframes benefit-icon-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(max-width:1000px) and (min-width:801px){.hero .benefit-row{gap:14px}.hero .benefit-row>.hero-benefit-card{gap:12px;padding:23px 16px}.hero .hero-benefit-card .benefit-icon{width:42px;height:42px;flex-basis:42px}.hero .hero-benefit-card h3{font-size:13px}.hero .hero-benefit-card p{font-size:11px}}
@media(max-width:800px){.hero .benefit-row{grid-template-columns:1fr;gap:13px}.hero .benefit-row>.hero-benefit-card{min-height:100px;padding:23px 22px}.hero .hero-benefit-card h3{font-size:15px}.hero .hero-benefit-card p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hero .benefit-row>.hero-benefit-card,.hero-benefit-card::after,.hero .hero-benefit-card .benefit-icon{animation:none!important;translate:none!important}.hero-benefit-card,.hero-benefit-card::before,.hero .hero-benefit-card .benefit-icon,.hero .hero-benefit-card .benefit-icon svg,.hero .hero-benefit-card .benefit-icon::after{transition:none!important}.hero .benefit-row>.hero-benefit-card:hover{transform:none}}
