.tiles-wrap{display:grid;gap:20px;grid-template-columns:1fr 1fr 1fr;margin:0 auto;max-width:560px;width:100%}.tile{align-items:center;animation:tileIn .5s ease forwards;background:#fff;border:1px solid rgba(75,53,230,.06);border-radius:18px;box-shadow:0 4px 16px rgba(75,53,230,.08),0 1px 4px rgba(0,0,0,.03);cursor:default;display:flex;flex-direction:column;gap:12px;opacity:0;overflow:hidden;padding:32px 24px;position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.tile:hover{border-color:rgba(75,53,230,.2);box-shadow:0 12px 32px rgba(75,53,230,.18),0 2px 8px rgba(0,0,0,.04);transform:translateY(-6px)}.tile:first-child{animation-delay:.1s}.tile:nth-child(2){animation-delay:.2s}.tile:nth-child(3){animation-delay:.3s}.tile:nth-child(4){animation-delay:.4s}.tile:nth-child(5){animation-delay:.5s}.tile:nth-child(6){animation-delay:.6s}@keyframes tileIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.tile-icon{align-items:center;border-radius:16px;display:flex;font-size:32px;height:68px;justify-content:center;transition:transform .3s ease;width:68px}.tile:hover .tile-icon{transform:scale(1.1)}.tile-name{color:#1a1145;font-size:14.5px;font-weight:700;letter-spacing:.2px;text-align:center}.tile-bar{border-radius:2px;height:3px;opacity:0;transition:opacity .3s ease,width .3s ease;width:36px}.tile:hover .tile-bar{opacity:1;width:36px}.tile:first-child .tile-icon{background:rgba(59,130,246,.1)}.tile:first-child .tile-bar{background:#3b82f6}.tile:nth-child(2) .tile-icon{background:rgba(16,185,129,.1)}.tile:nth-child(2) .tile-bar{background:#10b981}.tile:nth-child(3) .tile-icon{background:rgba(239,68,68,.08)}.tile:nth-child(3) .tile-bar{background:#ef4444}.tile:nth-child(4) .tile-icon{background:rgba(75,53,230,.08)}.tile:nth-child(4) .tile-bar{background:#4b35e6}.tile:nth-child(5) .tile-icon{background:rgba(245,158,11,.08)}.tile:nth-child(5) .tile-bar{background:#f59e0b}.tile:nth-child(6) .tile-icon{background:rgba(6,182,212,.08)}.tile:nth-child(6) .tile-bar{background:#06b6d4}.tile:before{background:linear-gradient(90deg,transparent,rgba(75,53,230,.03),transparent);content:"";height:100%;left:-75%;position:absolute;top:0;transform:skewX(-20deg);transition:left .6s ease;width:50%}.tile:hover:before{left:125%}@media(max-width:500px){.tiles-wrap{grid-template-columns:1fr 1fr;max-width:500px}}