.cards{counter-reset:bring-card;background:0 0;border:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid;position:relative}.cards .card{counter-increment:bring-card;isolation:isolate;background:linear-gradient(145deg,#121a27f5,#090d15fa);border:1px solid #ffffff16;border-radius:20px;min-height:285px;padding:26px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s,background .35s;position:relative;overflow:hidden;box-shadow:0 12px 35px #0000002e}.cards .card:before{content:"0" counter(bring-card);color:#59677b;letter-spacing:.14em;z-index:3;font:9px DM Mono,monospace;position:absolute;top:18px;right:18px}.cards .card:after{content:"";background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform-origin:50%;opacity:.45;height:2px;transition:all .35s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(.25)}.cards .card:hover{background:linear-gradient(145deg,#111d2d,#0a1019);border-color:#5ee7f552;transform:translateY(-9px);box-shadow:0 24px 55px #00000057,0 0 35px #5ee7f50f}.cards .card:hover:after{opacity:1;transform:scaleX(1)}.cards .card .number{display:none}.cards .card .symbol{width:54px;height:54px;color:var(--cyan);background:#5ee7f50e;border:1px solid #5ee7f533;border-radius:15px;place-items:center;margin:34px 0 24px;font-size:25px;transition:all .35s;display:grid;box-shadow:inset 0 0 25px #5ee7f506}.cards .card:hover .symbol{background:#5ee7f51a;transform:translateY(-3px)rotate(-3deg);box-shadow:0 0 25px #5ee7f51a}.cards .card h3{letter-spacing:-.035em;color:var(--text);margin:0 0 11px;font-size:19px}.cards .card p{color:#8490a2;max-width:31ch;margin:0;font-size:12px;line-height:1.8}@media (width<=900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cards .card{min-height:250px}.cards .card .symbol{margin-top:30px}}@media (width<=620px){.cards{grid-template-columns:1fr;gap:12px}.cards .card{border-radius:17px;min-height:0;padding:22px}.cards .card .symbol{width:48px;height:48px;margin:28px 0 18px}.cards .card h3{font-size:18px}.cards .card p{max-width:none;font-size:11px}.cards .card:before{top:15px;right:15px}}@media (hover:none){.cards .card:hover{transform:none}.cards .card:active{border-color:#5ee7f54d;transform:scale(.985)}}
