.container-cards{position:relative;perspective:2000px;width:100%;height:100%}.card{--c-bg:rgba(14,17,23,0.3);--c-inner-bg:rgba(14,17,23,0.4);--c-text:#e0e0e0;--c-text-muted:#666;--c-text-muted-light:#555;--separator:rgba(255,255,255,0.06);--title:#f0f0f0;--shadow-dark:rgba(0,0,0,0.4);--shadow-light:rgba(0,0,0,0.1);--glass-border:linear-gradient(-45deg,rgba(34,34,34,0.07),rgba(255,255,255,0.10),rgba(51,51,51,0.07))}.a{position:absolute;width:33.33%;height:33.33%;z-index:19}.tl{top:0;left:0}.t{top:0;left:33.33%}.tr{top:0;right:0;left:auto}.l{left:0}.c,.l{top:33.33%}.c{left:33.33%}.r{top:33.33%;right:0;left:auto}.bl{left:0}.b,.bl{bottom:0;top:auto}.b{left:33.33%}.br{bottom:0;top:auto;right:0;left:auto}.tl:hover~.card{transform:rotateX(-12deg) rotateY(12deg)}.t:hover~.card{transform:rotateX(-12deg)}.tr:hover~.card{transform:rotateX(-12deg) rotateY(-12deg)}.l:hover~.card{transform:rotateY(12deg)}.c:hover~.card{transform:rotateX(0deg) rotateY(0deg) scale(1.02)}.r:hover~.card{transform:rotateY(-12deg)}.bl:hover~.card{transform:rotateX(12deg) rotateY(12deg)}.b:hover~.card{transform:rotateX(12deg)}.br:hover~.card{transform:rotateX(12deg) rotateY(-12deg)}.tl:hover~.card .light-shadow{box-shadow:inset 32px 32px 80px 5px var(--glow-color,rgba(255,255,255,.05)),inset -32px -32px 80px 5px var(--shadow-dark)}.t:hover~.card .light-shadow{box-shadow:inset 0 32px 80px var(--glow-color,rgba(255,255,255,.05)),inset 0 -32px 80px var(--shadow-dark)}.tr:hover~.card .light-shadow{box-shadow:inset -32px 32px 80px 5px var(--glow-color,rgba(255,255,255,.05)),inset 32px -32px 80px 5px var(--shadow-dark)}.l:hover~.card .light-shadow{box-shadow:inset 32px 0 80px var(--glow-color,rgba(255,255,255,.05)),inset -32px 0 80px var(--shadow-light)}.c:hover~.card .light-shadow{box-shadow:inset 0 0 60px var(--glow-color,rgba(255,255,255,.05)),inset 0 0 60px var(--shadow-light)}.r:hover~.card .light-shadow{box-shadow:inset -32px 0 80px var(--glow-color,rgba(255,255,255,.05)),inset 32px 0 80px var(--shadow-light)}.bl:hover~.card .light-shadow{box-shadow:inset 32px -32px 80px 5px var(--glow-color-strong,rgba(255,255,255,.1))}.b:hover~.card .light-shadow{box-shadow:inset 0 -32px 80px 5px var(--glow-color-strong,rgba(255,255,255,.1))}.br:hover~.card .light-shadow{box-shadow:inset -32px -32px 80px 5px var(--glow-color-strong,rgba(255,255,255,.1))}.a:hover~.card .svg-border .border-glow,.a:hover~.card .svg-border .border-main,.card:hover .svg-border .border-glow,.card:hover .svg-border .border-main{stroke-dasharray:0 60 200 999;stroke-dashoffset:10}.card{position:relative;min-height:360px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;color:var(--c-text);background-color:var(--c-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:1.25rem;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.25,.46,.45,.94);overflow:visible;z-index:10}.card:hover{transform:rotateX(3deg) rotateY(6deg)}.card-inner-bg{position:absolute;inset:0;border-radius:1.25rem;background:var(--c-inner-bg);overflow:hidden;z-index:-1}.card-inner-glow{position:absolute;inset:-600%;filter:blur(40px);opacity:.12;transform:translateZ(-10px);animation:card-glow-spin 20s cubic-bezier(.36,.2,.64,.8) infinite}@keyframes card-glow-spin{50%{rotate:180deg}to{rotate:1turn}}.card-glass-border{inset:0;border:2px double transparent;background-image:var(--glass-border);background-origin:border-box;border-radius:1.25rem;clip-path:inset(0 round 1.25rem);z-index:12}.card-glass-border,.svg-border{position:absolute;pointer-events:none}.svg-border{top:-8px;left:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible;z-index:0}.svg-border path{fill:none;stroke-linecap:round;stroke-width:3;transition:stroke-dasharray 1s,stroke-dashoffset 1s}.svg-border .border-dots{stroke-dasharray:10 26;stroke-dashoffset:0;animation:card-border-dots 50s linear infinite}.svg-border .border-glow{filter:blur(5px);opacity:.25}.svg-border .border-glow,.svg-border .border-main{stroke-dasharray:0 0 160 999}@keyframes card-border-dots{0%{stroke-dashoffset:360}}.card .light-shadow{position:absolute;inset:0;transition:all .6s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;border-radius:1.25rem;z-index:13}.card .card-badge{position:absolute;top:0;right:14px;z-index:14;padding:4px 12px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:white;border-radius:0 0 8px 8px}.card-float-icon{transform:translateZ(25px);position:relative;z-index:2}.card-float-meta{transform:translateZ(18px);position:relative;z-index:2}.card-float-title{transform:translateZ(30px);position:relative;z-index:2}.card-float-bottom{transform:translateZ(22px);position:relative;z-index:2}.card-float-cta{transform:translateZ(35px);position:relative;z-index:3}.card .card-icon{padding:.5rem;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;margin-bottom:.25rem}.card .card-category{display:flex;align-items:center;padding:0 .25rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;gap:.35rem}.card .card-category svg{width:14px;height:14px;opacity:.8}.card .card-info{display:flex;padding:.4rem .25rem;gap:.5rem}.card .card-info-item{width:100%;font-size:8px;text-transform:uppercase;letter-spacing:.12em}.card .card-info-item .label{color:var(--c-text-muted);font-weight:600;margin-bottom:2px}.card .card-info-item .value{color:var(--c-text);font-weight:700;font-size:10px}.card .separator-line{width:100%;border-top:2px dashed var(--separator);margin:.4rem 0}.card .card-title-section{display:flex;flex-direction:column;padding:.35rem .25rem}.card .card-title-section .card-subtitle{font-size:11px;color:var(--c-text-muted);font-weight:500}.card .card-title-section .card-title{font-size:16px;font-weight:800;color:var(--title);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card .card-bottom{display:flex;width:100%;align-items:flex-end;gap:.5rem}.card .card-bottom .card-stats{flex:1;display:flex;flex-direction:column;gap:3px}.card .card-bottom .stat-row{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--c-text-muted)}.card .card-bottom .stat-row svg{width:11px;height:11px}.card .card-bottom .card-price-section{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.card .card-bottom .original-price{font-size:10px;color:var(--c-text-muted-light);text-decoration:line-through}.card .card-bottom .current-price{font-size:18px;font-weight:900;line-height:1}.card .card-bottom .price-note{font-size:8px;color:var(--c-text-muted-light);text-transform:uppercase;letter-spacing:.1em}.card .card-cta{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.35rem .25rem;transition:all .3s ease}.card .card-cta svg{width:12px;height:12px;transition:transform .3s ease}.container-cards:hover .card-cta svg{transform:translateX(3px)}.card-progress-wrap{position:relative;padding:0 .25rem;transform:translateZ(10px);z-index:2;margin-top:.35rem}.card-progress{width:100%;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.04)}.card-progress-fill{width:65%;height:3px;border-radius:inherit;background-size:200%;animation:card-progress-anim 4s linear infinite}@keyframes card-progress-anim{0%{background-position:200%,0}}.card[data-tier=emerald]{border:1px solid rgba(16,185,129,.12);--glow-color:rgba(16,185,129,0.15);--glow-color-strong:rgba(16,185,129,0.25)}.card[data-tier=emerald]:hover{border-color:rgba(16,185,129,.3)}.card[data-tier=emerald] .card-inner-glow{background:conic-gradient(from 45deg,#10b981 5%,transparent 10% 40%,#10b981 45% 55%,transparent 60% 90%,#10b981 95%)}.card[data-tier=emerald] .svg-border .border-dots{stroke:rgba(16,185,129,.06)}.card[data-tier=emerald] .svg-border .border-glow,.card[data-tier=emerald] .svg-border .border-main{stroke:#10b981}.card[data-tier=emerald] .card-icon{background:rgba(16,185,129,.12);color:#34d399}.card[data-tier=emerald] .card-category{color:#34d399}.card[data-tier=emerald] .card-badge{background:#10b981}.card[data-tier=emerald] .card-cta,.card[data-tier=emerald] .current-price{color:#34d399}.card[data-tier=emerald] .card-progress-fill{background:linear-gradient(90deg,transparent,rgba(16,185,129,.5),transparent),linear-gradient(90deg,transparent,rgba(16,185,129,.7),transparent);background-size:200%}.card[data-tier=indigo]{border:1px solid rgba(99,102,241,.12);--glow-color:rgba(99,102,241,0.15);--glow-color-strong:rgba(99,102,241,0.25)}.card[data-tier=indigo]:hover{border-color:rgba(99,102,241,.3)}.card[data-tier=indigo] .card-inner-glow{background:conic-gradient(from 45deg,#6366f1 5%,transparent 10% 40%,#6366f1 45% 55%,transparent 60% 90%,#6366f1 95%)}.card[data-tier=indigo] .svg-border .border-dots{stroke:rgba(99,102,241,.06)}.card[data-tier=indigo] .svg-border .border-glow,.card[data-tier=indigo] .svg-border .border-main{stroke:#6366f1}.card[data-tier=indigo] .card-icon{background:rgba(99,102,241,.12);color:#818cf8}.card[data-tier=indigo] .card-category{color:#818cf8}.card[data-tier=indigo] .card-badge{background:#6366f1}.card[data-tier=indigo] .card-cta,.card[data-tier=indigo] .current-price{color:#818cf8}.card[data-tier=indigo] .card-progress-fill{background:linear-gradient(90deg,transparent,rgba(99,102,241,.5),transparent),linear-gradient(90deg,transparent,rgba(99,102,241,.7),transparent);background-size:200%}.card[data-tier=violet]{border:1px solid rgba(139,92,246,.12);--glow-color:rgba(139,92,246,0.15);--glow-color-strong:rgba(139,92,246,0.25)}.card[data-tier=violet]:hover{border-color:rgba(139,92,246,.3)}.card[data-tier=violet] .card-inner-glow{background:conic-gradient(from 45deg,#8b5cf6 5%,transparent 10% 40%,#8b5cf6 45% 55%,transparent 60% 90%,#8b5cf6 95%)}.card[data-tier=violet] .svg-border .border-dots{stroke:rgba(139,92,246,.06)}.card[data-tier=violet] .svg-border .border-glow,.card[data-tier=violet] .svg-border .border-main{stroke:#8b5cf6}.card[data-tier=violet] .card-icon{background:rgba(139,92,246,.12);color:#a78bfa}.card[data-tier=violet] .card-category{color:#a78bfa}.card[data-tier=violet] .card-badge{background:#8b5cf6}.card[data-tier=violet] .card-cta,.card[data-tier=violet] .current-price{color:#a78bfa}.card[data-tier=violet] .card-progress-fill{background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent),linear-gradient(90deg,transparent,rgba(139,92,246,.7),transparent);background-size:200%}.card[data-tier=amber]{border:1px solid rgba(245,158,11,.12);--glow-color:rgba(245,158,11,0.15);--glow-color-strong:rgba(245,158,11,0.25)}.card[data-tier=amber]:hover{border-color:rgba(245,158,11,.3)}.card[data-tier=amber] .card-inner-glow{background:conic-gradient(from 45deg,#f59e0b 5%,transparent 10% 40%,#f59e0b 45% 55%,transparent 60% 90%,#f59e0b 95%)}.card[data-tier=amber] .svg-border .border-dots{stroke:rgba(245,158,11,.06)}.card[data-tier=amber] .svg-border .border-glow,.card[data-tier=amber] .svg-border .border-main{stroke:#f59e0b}.card[data-tier=amber] .card-icon{background:rgba(245,158,11,.12);color:#fbbf24}.card[data-tier=amber] .card-category{color:#fbbf24}.card[data-tier=amber] .card-badge{background:linear-gradient(135deg,#f59e0b,#d97706)}.card[data-tier=amber] .card-cta,.card[data-tier=amber] .current-price{color:#fbbf24}.card[data-tier=amber] .card-progress-fill{background:linear-gradient(90deg,transparent,rgba(245,158,11,.5),transparent),linear-gradient(90deg,transparent,rgba(245,158,11,.7),transparent);background-size:200%}.products-3d-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width:640px){.products-3d-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}@media (min-width:1024px){.products-3d-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}