.how{position:relative;isolation:isolate;overflow:hidden;padding:104px max(7vw,24px) 112px;background:linear-gradient(135deg,#ff5f9d 0%,#d447bc 34%,#773fda 68%,#3658c5 100%);border-top:8px solid #28135e;text-align:center}
.how:before{position:absolute;z-index:-1;inset:-35%;content:"";opacity:.82;pointer-events:none;background:conic-gradient(from 210deg at 32% 50%,transparent 0 22%,#ffb6d855 28%,transparent 36% 48%,#66f5df66 56%,transparent 64% 77%,#ffe45c44 84%,transparent 91%);filter:blur(28px);animation:auroraWave 16s ease-in-out infinite alternate}
.how:after{position:absolute;z-index:-1;inset:0;content:"✦     ·       ✧          ·      ✦        ·       ✧          ·       ✦";padding:38px 7%;color:#fff;opacity:.5;pointer-events:none;font-size:18px;letter-spacing:34px;line-height:3.6;white-space:pre-wrap}
.how>span{position:relative;color:#ffe45c;font-weight:1000}.how h2{position:relative;color:#fff;text-shadow:3px 4px 0 #8d245f;font-size:clamp(35px,4vw,58px)}
.how>div{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:940px;margin:45px auto 0}
.how article{padding:27px 22px 25px;border:2px solid #ffffff80;border-radius:28px;background:#ffffff1c;box-shadow:inset 0 1px #fff8,0 16px 35px #3a145c38;backdrop-filter:blur(9px);transition:transform .25s,background .25s}.how article:hover{transform:translateY(-9px) rotate(-1deg);background:#ffffff30}
.how article b{position:absolute;top:16px;right:18px;width:30px;height:30px;border:3px solid #fff;border-radius:50%;background:#ffe449;color:#342052;line-height:24px;font-weight:1000}.how article i{display:block;margin:0 auto 15px;font-style:normal;font-size:62px;filter:drop-shadow(0 8px 7px #33105c55)}.how article h3{margin:0;color:#fff;font-size:22px}.how article p{margin:9px 0 0;color:#fbe8ff;font-size:15px}
footer{position:relative;overflow:hidden;border-top:8px solid #261155;background:linear-gradient(135deg,#171043,#282078 62%,#234d9c);color:#fff;text-align:left;padding:58px max(7vw,24px) 22px}footer:before{position:absolute;right:-100px;bottom:-170px;width:460px;height:340px;border-radius:50%;content:"";background:radial-gradient(circle,#ff5f9d66,transparent 67%);filter:blur(14px);pointer-events:none}footer .footer-top,footer .footer-bottom{position:relative;max-width:1240px;margin-right:auto;margin-left:auto}footer .brand{color:#fff}footer p,footer small{color:#ded8ff}footer .footer-links span{color:#ffe449}footer .footer-links a{color:#fff;opacity:.9}footer .footer-links a:hover{color:#66f5df}footer .footer-bottom{border-color:#ffffff33}
@keyframes auroraWave{from{transform:translateX(-3%) rotate(-2deg) scale(1)}to{transform:translateX(5%) rotate(3deg) scale(1.08)}}
@media(max-width:700px){.how{padding:76px 18px 84px}.how>div{grid-template-columns:1fr;gap:14px;margin-top:30px}.how article{padding:23px}.how article i{font-size:50px}.how:after{letter-spacing:18px}.footer-top{gap:35px}}
@media(prefers-reduced-motion:reduce){.how:before{animation:none}}