/* ═══ KZSTREAM SHOP PAGE STYLESHEET ═══ */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .08) transparent; }
::selection { background: #00e676; color: #000; }
html, body { background: #050507; overflow-x: hidden; max-width: 100vw; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 230, 118, .3), 0 0 60px rgba(0, 230, 118, .1), 0 0 100px rgba(0, 230, 118, .05); } 50% { box-shadow: 0 0 30px rgba(0, 230, 118, .5), 0 0 80px rgba(0, 230, 118, .2), 0 0 120px rgba(0, 230, 118, .08); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes text-glow { 0%, 100% { text-shadow: 0 0 20px rgba(0, 230, 118, .3), 0 0 60px rgba(0, 230, 118, .1); } 50% { text-shadow: 0 0 30px rgba(0, 230, 118, .5), 0 0 80px rgba(0, 230, 118, .2); } }
@keyframes border-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0, 230, 118, .1), inset 0 0 20px rgba(0, 230, 118, .03); } 50% { box-shadow: 0 0 40px rgba(0, 230, 118, .2), inset 0 0 30px rgba(0, 230, 118, .05); } }
@keyframes gradient-x { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes card-shine { 0% { transform: translateX(-100%) rotate(25deg); } 100% { transform: translateX(200%) rotate(25deg); } }

[data-aos] { will-change: transform, opacity; }

.tilt-card { transform-style: preserve-3d; transform: perspective(1000px); }
.tilt-card .tilt-inner { transform: translateZ(30px); }

.pricing-card .glow-follow { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 230, 118, .15) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .3s; filter: blur(20px); }
.pricing-card:hover .glow-follow { opacity: 1; }

.btn-glow { background: #00e676; color: #000; font-weight: 800; border-radius: 14px; transition: all .2s; position: relative; overflow: hidden; animation: glow-pulse 3s ease-in-out infinite; letter-spacing: -.01em; }
.btn-glow:hover { background: #00ff7f; transform: translateY(-2px) scale(1.02); }
.btn-glow:active { transform: scale(.96); }
.btn-glow::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation: shimmer 2.5s linear infinite; background-size: 200% 100%; }

.card-depth { background: linear-gradient(145deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .01) 100%); border: 1px solid rgba(255, 255, 255, .07); border-radius: 20px; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.4, 0, .2, 1); }
.card-depth::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(0, 230, 118, .06) 0%, transparent 50%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.card-depth:hover { border-color: rgba(0, 230, 118, .2); transform: translateY(-4px); }
.card-depth:hover::before { opacity: 1; }

.pricing-card { background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; padding: 36px 28px; position: relative; overflow: hidden; transition: all .4s cubic-bezier(.4, 0, .2, 1); }
.pricing-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .15); }
.pricing-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent); transform: rotate(25deg); transition: left .6s; }
.pricing-card:hover::after { left: 150%; }

.pricing-pop { background: linear-gradient(180deg, rgba(0, 230, 118, .06) 0%, rgba(0, 230, 118, .02) 40%, rgba(255, 255, 255, .02) 100%); border: 1.5px solid #00e676; animation: border-glow 3s ease-in-out infinite; padding: 0; }
.pricing-pop:hover { transform: translateY(-6px); }
.pricing-pop-ribbon { display: block; width: 100%; text-align: center; color: #000; font-size: 0.65rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; padding: 0.65rem 1rem; margin: 0; border-radius: calc(24px - 1.5px) calc(24px - 1.5px) 0 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.pricing-pop-inner { padding: 1.25rem 28px 36px; display: flex; flex-direction: column; flex: 1; min-height: 0; }

.stat-num { font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -.03em; }

#particles { position: absolute; inset: 0; z-index: 0; }

.faq-item { background: linear-gradient(145deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .01) 100%); border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; transition: border-color .3s; }
.faq-item:hover { border-color: rgba(0, 230, 118, .2); }
details summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
details[open] { border-color: rgba(0, 230, 118, .15); }

.check-icon { width: 18px; height: 18px; flex-shrink: 0; }
.cross-icon { width: 18px; height: 18px; flex-shrink: 0; color: #333; }

.swiper { overflow: visible !important; padding-bottom: 50px; }
.swiper-pagination-bullet { background: #fff !important; opacity: .2 !important; width: 10px !important; height: 10px !important; }
.swiper-pagination-bullet-active { background: #00e676 !important; opacity: 1 !important; width: 28px !important; border-radius: 5px !important; }
.swiper-slide { height: auto !important; }