@font-face { font-family: 'cgtone'; src: url('assets/fonts/cgtone.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
:root {
    --accent-purple: #8961ff;
    --variant-hue: var(--accent-purple);
    --bg-color: #0a0a0a; --text-primary: #ffffff; --text-secondary: #888888;
    --glass-bg: rgba(18, 18, 18, 0.35); --glass-border: rgba(255, 255, 255, 0.06); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}
[data-theme="light"] {
    --bg-color: #f2f2f2; --text-primary: #0a0a0a; --text-secondary: #555555;
    --glass-bg: rgba(255, 255, 255, 0.45); --glass-border: rgba(0, 0, 0, 0.08); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--bg-color); color: var(--text-primary); overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; }
h1, h2, h3, h4, h5, h6, .tab-link, .product-title, .cart-header h2 { font-family: 'Jost', sans-serif; }
.font-brand { font-family: 'cgtone', sans-serif; font-weight: normal; letter-spacing: 1px; }

/* System Locks */
body.scroll-locked { overflow: hidden; touch-action: none; }
#particle-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.liquid-glass { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.hidden { opacity: 0 !important; pointer-events: none !important; display: none !important; }

/* Header & Overlays */
#global-header { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1200px; height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; border-radius: 32px; z-index: 90; }
.header-logo { position: relative; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#logo-img { width: 100%; height: 100%; transition: opacity 0.3s ease; z-index: 2; }
.header-logo.anomaly-active #logo-img { opacity: 0; }
#logo-text { position: absolute; font-size: 14px; text-align: center; opacity: 0; z-index: 2; color: var(--variant-hue); }
.header-logo.anomaly-active #logo-text { opacity: 1; }
.header-tabs { display: flex; gap: 2rem; height: 100%; align-items: center; }
.tab-link { background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; position: relative; }
.tab-link.active { color: var(--text-primary); }
.tab-link.active::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--variant-hue); border-radius: 50%; transition: background 0.3s; }
.header-capsule { display: flex; align-items: center; border-radius: 20px; height: 40px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--glass-border); }
.capsule-left, .capsule-right { background: none; border: none; color: var(--text-primary); padding: 0 16px; cursor: pointer; height: 100%; font-weight:600;}
.capsule-divider { width: 1px; height: 20px; background: var(--glass-border); }

/* Banners & Track */
.banner-zone { display: flex; align-items: center; justify-content: center; width: 100vw; min-height: 70vh; margin-top: 100px; }
.banner-2 { min-height: 40vh; }
.banner-text-jost { font-size: clamp(24px, 4vw, 48px); font-weight: 700; text-transform: uppercase; letter-spacing: 6px; opacity: 0.8; }
.banner-text-cgtone { font-size: clamp(48px, 8vw, 96px); color: var(--variant-hue); text-shadow: 0 0 16px rgba(137, 97, 255, 0.4); transition: color 0.4s ease; }
.track-container { width: 100vw; padding: 4rem 0; overflow: hidden; }
.product-track { display: flex; gap: 2rem; padding: 0 50vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.product-track::-webkit-scrollbar { display: none; }
.product-card { flex: 0 0 320px; height: 480px; scroll-snap-align: center; border-radius: 20px; display: flex; flex-direction: column; padding: 12px; opacity: 0.3; transform: scale(0.9); transition: opacity 0.4s ease, transform 0.4s ease; }
.product-card.active-center { opacity: 1; transform: scale(1); }
.mockup-zone { flex: 1; border-radius: 12px; background: rgba(0,0,0,0.2); margin-bottom: 16px; }
.rupee { color: var(--variant-hue); transition: color 0.3s; }
.var-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--var-color); cursor: pointer; }

/* Morphing Footer */
#global-footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; height: 48px; border-radius: 24px; z-index: 90; transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; }
#global-footer.state-home { width: 340px; }
#global-footer.state-catalogue { width: 200px; }
#global-footer.state-tiers { width: 140px; }
.footer-state-content { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 1rem; transition: opacity 0.3s ease; }
.footer-link, .filter-action { background: none; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; }
.footer-link:hover { color: var(--text-primary); }
.accent-glow { color: var(--variant-hue); text-shadow: 0 0 8px var(--variant-hue); font-weight:bold; }

/* Validation & Cart */
@keyframes doubleBlink { 0%, 100% { border-color: var(--glass-border); } 25%, 75% { border-color: var(--variant-hue); box-shadow: 0 0 8px var(--variant-hue); } }
.validation-blink { animation: doubleBlink 0.6s ease; }
#cart-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 1000; }
#cart-drawer { position: fixed; top: 0; right: -420px; width: 100%; max-width: 400px; height: 100vh; z-index: 1001; display: flex; flex-direction: column; transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 24px 0 0 24px; }
#cart-drawer.open { right: 0; }

@media (max-width: 768px) {
    .header-tabs { width: 160px; overflow-x: auto; scroll-snap-type: x mandatory; mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }
    .tab-link { scroll-snap-align: center; white-space: nowrap; }
}