.apps-showcase { padding: 145px 0; }
.apps-heading { text-align: center; margin-bottom: 50px; }
.apps-heading span { color: #00bfa5; font-weight: 500; letter-spacing: -0.75px; }
.apps-heading h2 { margin-top: 12px; font-size: clamp(2rem,5vw,4rem); color: #002121; letter-spacing: -1px; }
.apps-list { max-width: 90%; margin: 0 auto; padding: 0 21px; display: grid; grid-template-columns: repeat(auto-fit,minmax(321px,1fr)); gap: 30px; }
.app-card { position: relative; display: flex; flex-direction: column; align-items: center; background: #fff; border: 1.75px solid #eee; border-radius: 30px; padding: 30px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.app-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,191,165,.04),transparent 50%); pointer-events: none; }
.app-card:hover { border-color: #00bfa5; }
.app-image { width: 212px; height: 212px; margin-bottom: 30px; border-radius: 45px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.app-image img { width: 90%; height: 90%; object-fit: contain; }
.app-content { width: 100%; text-align: center; }
.app-role { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15.75px; border-radius: 999px; color: #00bfa5; font-size: .9rem; font-weight: 300; margin-bottom: 15px; }
.app-content h3 { color: #002121; font-size: 2.1rem; font-weight: 300; letter-spacing: -1px; line-height: 1.12; margin-bottom: 15px; }
.app-content p { color: #757575; line-height: 1.75; margin-bottom: 30px; min-height: 55px; }
.app-action { width: 100%; margin-top: auto; }
.app-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; background: #00bfa5; color: #002121; padding: 15.75px 21.75px; border-radius: 999px; font-size: .95rem; font-weight: 400; transition: .21s ease; }
.app-btn:hover { background: #002121; color: #fff; }
.app-btn svg { width: 21px; height: 21px; }
.app-btn svg path { stroke: currentColor; }
.apps-empty,.apps-error { grid-column: 1/-1; text-align: center; padding: 75px 21px; border-radius: 32px; background: #fff; border: 1px solid rgba(0,191,165,.12); color: #002121; }
@media (max-width:1200px) { .apps-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width:755px) { .apps-list { grid-template-columns: 1fr; gap: 21px; padding: 0 15px; } .app-card { padding: 30px 21.75px; border-radius: 30px; } .app-image { width: 145px; height: 145px; border-radius: 30px; } .app-content h3 { font-size: 1.75rem; } .app-content p { min-height: auto; } .app-btn { width: 100%; } }
.app-card:nth-child(1) .app-image { background: #00bfa5; box-shadow: 0 15px 35px rgba(0,191,165,.5),0 0 30px rgba(0,191,165,.3); }
.app-card:nth-child(2) .app-image { background: #002121; box-shadow: 0 15px 35px rgba(0,33,33,.5),0 0 30px rgba(0,33,33,.3); }
.app-card:nth-child(3) .app-image { background: #006eb7; box-shadow: 0 15px 35px rgba(55,171,255,0.5),0 0 30px rgba(55,171,255,.3); }