@keyframes logoGlow{0%{filter:drop-shadow(0 0 3px #707070) drop-shadow(0 0 3px #707070) drop-shadow(0 0 3px #707070)}to{filter:drop-shadow(0 0 6px rgba(255,255,255,.7)) drop-shadow(0 0 12px rgba(255,255,255,.4)) drop-shadow(0 0 24px rgba(255,255,255,.1))}}.hero__grid{padding-inline:5rem;display:grid;grid-template-columns:1fr 1fr}.hero__content{padding-left:4rem;max-width:570px}.hero__title{font-family:var(--font-title);font-size:65px;text-transform:uppercase;line-height:130%;letter-spacing:.2em}.hero__description{font-size:20px;line-height:200%;letter-spacing:.05em;max-width:1024px}.hero .circle__grid{margin-block:5rem;display:flex;justify-content:center;gap:5rem}.hero .circle__grid-item{width:220px;height:220px}.hero .circle__button{position:relative;display:inline-block;width:220px;aspect-ratio:1;text-align:center;line-height:220px;border-radius:50%;overflow:hidden;border:1px solid red;transition:transform .2s ease-out}.hero .circle__button-color-blue{border:1px solid var(--color-text-blue)}.hero .circle__button-color-blue:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(234,236,246,.2) 30deg,rgba(234,236,246,.8) 60deg,rgba(234,236,246,.2) 90deg,transparent 360deg)}.hero .circle__button-color-blue:hover{border:2px solid #79D3F5;filter:drop-shadow(0 0 6px #1432B1) drop-shadow(0 0 20px #1432B1)}.hero .circle__button-color-blue:hover:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,#415cbb 30deg,rgba(30,108,255,.8) 60deg,rgba(83,102,255,.44) 90deg,transparent 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 8px),black);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 20px),black)}.hero .circle__button-color-violet{border:1px solid var(--color-violet)}.hero .circle__button-color-violet:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(234,236,246,.2) 30deg,rgba(234,236,246,.8) 60deg,rgba(234,236,246,.2) 90deg,transparent 360deg)}.hero .circle__button-color-violet:hover{border:2px solid #a279f5;filter:drop-shadow(0 0 6px var(--color-violet)) drop-shadow(0 0 20px var(--color-violet))}.hero .circle__button-color-violet:hover:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,#415cbb 30deg,rgb(129,0,255) 60deg,rgba(83,102,255,.44) 90deg,transparent 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 8px),black);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 20px),black)}.hero .circle__button-color-accent{border:1px solid var(--color-accent)}.hero .circle__button-color-accent:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(234,236,246,.2) 30deg,rgba(234,236,246,.8) 60deg,rgba(234,236,246,.2) 90deg,transparent 360deg)}.hero .circle__button-color-accent:hover{border:2px solid #79D3F5;filter:drop-shadow(0 0 6px #4efff6) drop-shadow(0 0 20px #4efff6)}.hero .circle__button-color-accent:hover:before{background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(46,224,255,.44) 30deg,rgba(78,255,246,.76) 60deg,rgba(46,224,255,.44) 90deg,transparent 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 8px),black);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 20px),black)}.hero .circle__button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black);transition:mask-position .2s ease-out,mask-size .2s ease-out}.hero .circle__button:hover{transform:scale(1.3)}
