.card{background-color:var(--color-bg-primary);border-radius:var(--radius-2xl);flex-direction:column;transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative;overflow:hidden}.card-clickable{cursor:pointer}.card-p-none{padding:0}.card-p-sm{padding:var(--space-4)}.card-p-md{padding:var(--space-6)}.card-p-lg{padding:var(--space-8)}.card-p-none .card-content,.card-p-sm .card-content,.card-p-md .card-content,.card-p-lg .card-content{padding:0}.card-p-none:has(.card-image) .card-content{padding:var(--space-4)}.card-p-sm:has(.card-image) .card-content{padding:var(--space-4)}.card-p-md:has(.card-image) .card-content{padding:var(--space-5)}.card-p-lg:has(.card-image) .card-content{padding:var(--space-6)}.card-default{box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)}.card-elevated{box-shadow:var(--shadow-lg)}.card-outlined{border:1px solid var(--color-border);box-shadow:none}.card-glass{-webkit-backdrop-filter:blur(20px);background:#fffc;border:1px solid #ffffff4d}.card-dark{background:var(--gradient-dark);border:none}.card-dark .card-title,.card-dark .card-description{color:#fff}.card-dark .card-description{color:var(--color-text-on-dark-secondary)}.card-hover:hover{transform:translateY(-6px)scale(1.01);box-shadow:0 20px 50px #0000001f}.card-hover.card-outlined:hover{border-color:var(--color-brand-primary)}.card-hover:hover .card-image img{transform:scale(1.05)}.card-image{flex-shrink:0;width:100%;position:relative;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform var(--duration-slow)var(--ease-out)}.card-image-overlay:after{content:"";pointer-events:none;background:linear-gradient(#0000 50%,#0009 100%);position:absolute;top:0;bottom:0;left:0;right:0}.card-content{flex-direction:column;flex:1;display:flex}.card-icon{margin-bottom:var(--space-4);transition:all var(--duration-normal)var(--ease-out);flex-shrink:0;justify-content:center;align-items:center;display:flex}.card-icon-sm{width:48px;height:48px;font-size:var(--text-xl);border-radius:var(--radius-lg)}.card-icon-md{width:64px;height:64px;font-size:var(--text-2xl);border-radius:var(--radius-xl)}.card-icon-lg{width:80px;height:80px;font-size:var(--text-3xl);border-radius:var(--radius-2xl)}.card-icon-default{background-color:var(--color-brand-primary-light);color:var(--color-brand-primary)}.card-icon-gradient{background:var(--gradient-brand);color:#fff}.card-icon-outlined{border:2px solid var(--color-brand-primary);color:var(--color-brand-primary);background-color:#0000}.card-hover:hover .card-icon-default{background:var(--gradient-brand);color:#fff}.card-title{font-size:var(--heading-card);font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:var(--space-2);line-height:var(--leading-snug)}.card-description{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed);flex:1;margin:0}@media (min-width:768px){.card-description{font-size:var(--text-md)}}.card-footer{padding-top:var(--space-4);align-items:center;gap:var(--space-3);margin-top:auto;display:flex}.card-badge{background:var(--gradient-brand);color:#fff;padding:var(--space-1)var(--space-3);font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:var(--tracking-wide);z-index:10;position:absolute}.card-badge-top-right{top:var(--space-4);right:var(--space-4)}.card-badge-top-left{top:var(--space-4);left:var(--space-4)}.card-badge-top-center{top:calc(var(--space-4)*-1);left:50%;transform:translate(-50%)}.card-tags{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.card-tag{background-color:var(--color-bg-secondary);color:var(--color-text-secondary);padding:var(--space-1)var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-sm)}.card-grid{gap:var(--space-6);display:grid}.card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:repeat(1,1fr)}@media (min-width:640px){.card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.card-grid-3{grid-template-columns:repeat(3,1fr)}.card-grid-4{grid-template-columns:repeat(4,1fr)}}