body{--background-color:#18181b;--text-color:#a1a1aa;--card-background-color:hsla(0,0%,100%,.015);--card-border-color:hsla(0,0%,100%,.1);--card-box-shadow-1:rgba(0,0,0,.05);--card-box-shadow-1-y:3px;--card-box-shadow-1-blur:6px;--card-box-shadow-2:rgba(0,0,0,.1);--card-box-shadow-2-y:8px;--card-box-shadow-2-blur:15px;--card-label-color:#fff;--card-icon-color:#d4d4d8;--card-icon-background-color:hsla(0,0%,100%,.08);--card-icon-border-color:hsla(0,0%,100%,.12);--card-shine-opacity:.1;--card-shine-gradient:conic-gradient(from 205deg at 50% 50%,rgba(var(--title-rgb),1.0) 0deg,rgb(var(--title-rgb-dark)) 25deg,rgba(var(--dark-gold),1.0) 295deg,rgba(var(--title-rgb-dark),1.0) 360deg);--card-line-color:rgb(var(--dark-gold));--card-tile-color:rgba(var(--dark-gold),0.5);--card-hover-border-color:hsla(0,0%,100%,.2);--card-hover-box-shadow-1:rgba(0,0,0,.04);--card-hover-box-shadow-1-y:5px;--card-hover-box-shadow-1-blur:10px;--card-hover-box-shadow-2:rgba(0,0,0,.3);--card-hover-box-shadow-2-y:15px;--card-hover-box-shadow-2-blur:25px;--card-hover-icon-color:rgb(var(--dark-gold));--card-hover-icon-background-color:rgba(var(--title-rgb),0.1);--card-hover-icon-border-color:rgba(var(--title-rgb-dark),0.2);--blur-opacity:.01}.grid{display:grid;grid-template-columns:repeat(2,240px);grid-gap:32px;position:relative}.card{background-color:var(--background-color);box-shadow:0 var(--card-box-shadow-1-y) var(--card-box-shadow-1-blur) var(--card-box-shadow-1),0 var(--card-box-shadow-2-y) var(--card-box-shadow-2-blur) var(--card-box-shadow-2),0 0 0 1px var(--card-border-color);padding:56px 16px 16px;border-radius:15px;cursor:pointer;transition:box-shadow .25s}.card:before{content:"";position:absolute;inset:0;border-radius:15px;background-color:var(--card-background-color)}.card .icon{position:relative;display:table;padding:.5rem}.card .icon:after{content:"";position:absolute;inset:4.5px;border-radius:50%;background-color:var(--card-icon-background-color);border:1px solid var(--card-icon-border-color);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background-color .25s,border-color .25s}.card .icon img{position:relative;display:block;transform:translateZ(0);color:var(--card-icon-color);transition:color .25s}.card h3{margin:12px 0 4px;font-family:inherit;font-weight:600;line-height:2;color:var(--card-label-color)}.card h3,.card p{z-index:2;position:relative;font-size:14px}.card p{margin:0;line-height:1.7;color:var(--text-color)}.card .shine{border-radius:inherit;position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity .5s}.card .shine:before{content:"";width:150%;padding-bottom:150%;border-radius:50%;position:absolute;left:50%;bottom:55%;filter:blur(35px);opacity:var(--card-shine-opacity);transform:translateX(-50%);background-image:var(--card-shine-gradient)}.card .background{border-radius:inherit;inset:0;overflow:hidden;-webkit-mask-image:radial-gradient(circle at 60% 5%,#000 0,#000 15%,transparent 60%);mask-image:radial-gradient(circle at 60% 5%,#000 0,#000 15%,transparent 60%)}.card .background .tiles{opacity:0;transition:opacity .25s}.card .background .tiles .tile{position:absolute;background-color:var(--card-tile-color);animation-duration:4s;animation-iteration-count:infinite;opacity:0}.card .background .tiles .tile.tile-10,.card .background .tiles .tile.tile-4,.card .background .tiles .tile.tile-6{animation-delay:-1s}.card .background .tiles .tile.tile-3,.card .background .tiles .tile.tile-5,.card .background .tiles .tile.tile-8{animation-delay:-2s}.card .background .tiles .tile.tile-2,.card .background .tiles .tile.tile-9{animation-delay:-3s}.card .background .tiles .tile.tile-1{top:0;left:0;height:10%;width:22.5%}.card .background .tiles .tile.tile-2{top:0;left:22.5%;height:10%;width:27.5%}.card .background .tiles .tile.tile-3{top:0;left:50%;height:10%;width:27.5%}.card .background .tiles .tile.tile-4{top:0;left:77.5%;height:10%;width:22.5%}.card .background .tiles .tile.tile-5{top:10%;left:0;height:22.5%;width:22.5%}.card .background .tiles .tile.tile-6{top:10%;left:22.5%;height:22.5%;width:27.5%}.card .background .tiles .tile.tile-7{top:10%;left:50%;height:22.5%;width:27.5%}.card .background .tiles .tile.tile-8{top:10%;left:77.5%;height:22.5%;width:22.5%}.card .background .tiles .tile.tile-9{top:32.5%;left:50%;height:22.5%;width:27.5%}.card .background .tiles .tile.tile-10{top:32.5%;left:77.5%;height:22.5%;width:22.5%}@keyframes tile{0%,to{opacity:1}50%{opacity:0}}.card .background .line{position:absolute;inset:0;opacity:0;transition:opacity .35s}.card .background .line:after,.card .background .line:before{content:"";position:absolute;background-color:var(--card-line-color);transition:transform .35s}.card .background .line:before{left:0;right:0;height:1px;transform-origin:0 50%;transform:scaleX(0)}.card .background .line:after{top:0;bottom:0;width:1px;transform-origin:50% 0;transform:scaleY(0)}.card .background .line.line-1:before{top:10%}.card .background .line.line-1:after{left:22.5%}.card .background .line.line-1:after,.card .background .line.line-1:before{transition-delay:.3s}.card .background .line.line-2:before{top:32.5%}.card .background .line.line-2:after{left:50%}.card .background .line.line-2:after,.card .background .line.line-2:before{transition-delay:.15s}.card .background .line.line-3:before{top:55%}.card .background .line.line-3:after{right:22.5%}.card:hover{box-shadow:0 3px 6px var(--card-hover-box-shadow-1),0 var(--card-hover-box-shadow-2-y) var(--card-hover-box-shadow-2-blur) var(--card-hover-box-shadow-2),0 0 0 1px var(--card-hover-border-color)}.card:hover .icon:after{background-color:var(--card-hover-icon-background-color);border-color:var(--card-hover-icon-border-color)}.card:hover .icon svg{color:var(--card-hover-icon-color)}.card:hover .shine{opacity:1;transition-duration:.5s;transition-delay:0s}.card:hover .background .tiles{opacity:1;transition-delay:.25s}.card:hover .background .tiles .tile{animation-name:tile}.card:hover .background .line{opacity:1;transition-duration:.15s}.card:hover .background .line:before{transform:scaleX(1)}.card:hover .background .line:after{transform:scaleY(1)}.card:hover .background .line.line-1:after,.card:hover .background .line.line-1:before{transition-delay:0s}.card:hover .background .line.line-2:after,.card:hover .background .line.line-2:before{transition-delay:.15s}.card:hover .background .line.line-3:after,.card:hover .background .line.line-3:before{transition-delay:.3s}