.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; animation: float 25s infinite alternate linear; }
.orb-1 { width: 700px; height: 700px; background: var(--c-purple); top: -20%; left: -10%; }
.orb-2 { width: 600px; height: 600px; background: var(--c-cyan); bottom: -10%; right: -10%; animation-delay: -5s; }
.orb-3 { width: 500px; height: 500px; background: var(--c-gold); top: 30%; left: 30%; animation-delay: -10s; }
.noise { position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E'); opacity: 0.4; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(150px, 100px) scale(1.3); } }

.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: rgba(3,3,5,0.85); backdrop-filter: blur(25px); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; padding: 0 4rem; z-index: 100; }
.nav-brand { display: flex; align-items: center; gap: 1.5rem; }
.logo { font-family: var(--f-tech); font-size: 2.2rem; font-weight: 900; letter-spacing: 3px; border: 2px solid var(--c-cyan); padding: 5px 12px; border-radius: var(--rad-sm); box-shadow: inset 0 0 10px rgba(0,243,255,0.2), 0 0 10px rgba(0,243,255,0.2); }
.badge-sys { font-family: var(--f-tech); font-size: 0.75rem; color: var(--c-cyan); background: rgba(0,243,255,0.1); padding: 4px 10px; border: 1px solid var(--c-cyan); border-radius: 100px; box-shadow: 0 0 10px rgba(0,243,255,0.2); }

.nav-menu { display: flex; gap: 3rem; }
.nav-link { font-family: var(--f-tech); font-size: 1rem; color: var(--t-dim); transition: var(--trans); position: relative; padding: 1rem 0; letter-spacing: 1px; }
.nav-link:hover { color: var(--t-main); text-shadow: 0 0 15px rgba(255,255,255,0.5); }
.nav-link.active { color: var(--t-main); }
.nav-link.active.text-purple { color: var(--c-purple); text-shadow: 0 0 20px var(--c-purple); }
.nav-link.active.text-gold { color: var(--c-gold); text-shadow: 0 0 20px var(--c-gold); }
.nav-link.active.text-red { color: var(--c-red); text-shadow: 0 0 20px var(--c-red); }

.btn-cart { display: flex; align-items: center; gap: 15px; padding: 12px 28px; border: 1px solid var(--c-cyan); border-radius: 100px; font-family: var(--f-tech); font-size: 1.1rem; transition: var(--trans); background: rgba(0,243,255,0.05); color: var(--c-cyan); box-shadow: 0 0 20px rgba(0,243,255,0.15); }
.btn-cart:hover { background: var(--c-cyan); color: #000; box-shadow: 0 0 40px rgba(0,243,255,0.5); transform: scale(1.05); }
.cart-count { background: #000; color: var(--c-cyan); padding: 4px 14px; border-radius: 12px; font-weight: 900; }
.btn-cart:hover .cart-count { background: #000; color: var(--c-cyan); }
.cart-pulse { animation: blink-slow 2s infinite; }
@keyframes blink-slow { 50% { opacity: 0.5; } }

.marquee { background: var(--bg-panel); color: var(--c-cyan); padding: 12px 0; font-family: var(--f-tech); font-size: 0.85rem; overflow: hidden; white-space: nowrap; margin-top: 90px; border-top: 1px solid rgba(0,243,255,0.2); border-bottom: 1px solid rgba(0,243,255,0.2); }
.marquee-track { display: inline-block; animation: scroll 20s linear infinite; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--c-cyan); border-radius: 50%; margin: 0 4rem; vertical-align: middle; box-shadow: 0 0 10px var(--c-cyan); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(15px); z-index: 999; opacity: 0; pointer-events: none; transition: var(--trans); }
.overlay.active { opacity: 1; pointer-events: auto; }

.drawer { position: fixed; top: 0; right: -600px; width: 500px; height: 100vh; background: rgba(10,10,15,0.98); border-left: 2px solid var(--c-cyan); z-index: 1000; display: flex; flex-direction: column; transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -20px 0 100px rgba(0,243,255,0.15); }
.drawer.active { right: 0; }
.drawer-hdr { padding: 3rem; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.btn-close { font-size: 2rem; color: var(--c-cyan); transition: var(--trans); }
.btn-close:hover { transform: rotate(180deg) scale(1.2); text-shadow: 0 0 20px var(--c-cyan); }
.drawer-body { flex-grow: 1; padding: 2.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.cart-row { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid var(--c-cyan); border-radius: var(--rad-md); box-shadow: inset 0 0 20px rgba(0,243,255,0.05); }
.cr-info h4 { font-family: var(--f-sans); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.cr-del { font-size: 0.85rem; color: var(--c-red); font-family: var(--f-tech); cursor: pointer; transition: 0.2s; }
.cr-del:hover { text-shadow: 0 0 15px var(--c-red); }
.cr-price { font-family: var(--f-tech); font-size: 1.6rem; color: var(--c-cyan); }
.drawer-ftr { padding: 3rem; border-top: 1px solid rgba(255,255,255,0.05); background: #000; }
.drawer-total { display: flex; justify-content: space-between; font-family: var(--f-tech); font-size: 2rem; margin-bottom: 2rem; }
.btn-checkout { width: 100%; padding: 1.5rem; background: var(--c-cyan); color: #000; font-family: var(--f-tech); font-size: 1.2rem; font-weight: 900; border-radius: var(--rad-sm); transition: var(--trans); box-shadow: 0 0 30px rgba(0,243,255,0.3); }
.btn-checkout:hover { box-shadow: 0 0 50px rgba(0,243,255,0.6); transform: translateY(-3px); }

.wrapper { max-width: 1700px; margin: 0 auto; padding: 4rem; width: 100%; flex-grow: 1; position: relative; z-index: 10; }

@media (max-width: 1200px) { .nav-menu { display: none; } .navbar { padding: 0 2rem; } .wrapper { padding: 2rem; } }
@media (max-width: 600px) { .drawer { width: 100%; right: -100%; } }