/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#020617;color:#e2e8f0;overflow-x:hidden;transition:background .5s,color .5s}
body.light-mode{background:#f8fafc;color:#1e293b}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0f172a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#7c3aed);border-radius:3px}
body.light-mode ::-webkit-scrollbar-track{background:#e2e8f0}

/* ===== CURSOR GLOW ===== */
.cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
body.light-mode .cursor-glow{opacity:.5}

/* ===== GLASSMORPHISM ===== */
.glass{background:rgba(15,23,42,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.15)}
body.light-mode .glass{background:rgba(255,255,255,.7);border-color:rgba(99,102,241,.2)}
.glass-card{background:rgba(15,23,42,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(99,102,241,.1);border-radius:20px;transition:all .4s cubic-bezier(.4,0,.2,1)}
body.light-mode .glass-card{background:rgba(255,255,255,.6);border-color:rgba(99,102,241,.15)}
.glass-card:hover{transform:translateY(-8px);border-color:rgba(99,102,241,.4);box-shadow:0 20px 60px rgba(99,102,241,.15)}

/* ===== GRADIENTS ===== */
.gradient-text{background:linear-gradient(135deg,#00d4ff,#6366f1,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-gold{background:linear-gradient(135deg,#facc15,#eab308,#ca8a04);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.animated-gradient{background:linear-gradient(-45deg,#020617,#1e1b4b,#312e81,#0f172a);background-size:400% 400%;animation:gs 15s ease infinite}
@keyframes gs{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body.light-mode .animated-gradient{background:linear-gradient(-45deg,#f8fafc,#e0e7ff,#c7d2fe,#eef2ff);background-size:400% 400%;animation:gs 15s ease infinite}

/* ===== FLOATING ===== */
@keyframes float{0%,100%{transform:translateY(0)}33%{transform:translateY(-15px)}66%{transform:translateY(-8px)}}
.float-1{animation:float 6s ease-in-out infinite}
.float-2{animation:float 8s ease-in-out infinite 1s}
.float-3{animation:float 7s ease-in-out infinite 2s}
#particles-canvas{position:absolute;inset:0;pointer-events:none;z-index:1}

/* ===== BUTTONS ===== */
.btn-primary{background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;padding:14px 32px;border-radius:14px;font-weight:600;font-size:.95rem;border:none;cursor:pointer;position:relative;overflow:hidden;transition:all .3s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(99,102,241,.4)}
.btn-primary .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:rippleAnim .6s linear;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
.btn-secondary{background:transparent;color:#e2e8f0;padding:14px 32px;border-radius:14px;font-weight:600;font-size:.95rem;border:1px solid rgba(99,102,241,.4);cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
body.light-mode .btn-secondary{color:#1e293b}
.btn-secondary:hover{background:rgba(99,102,241,.1);border-color:#6366f1;transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,#facc15,#eab308);color:#0f172a;padding:14px 32px;border-radius:14px;font-weight:700;border:none;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(250,204,21,.4)}
.btn-sm{padding:10px 20px;font-size:.85rem;border-radius:10px}

/* ===== NAVBAR ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:all .4s}
.navbar.scrolled{padding:10px 0;background:rgba(2,6,23,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(99,102,241,.1)}
body.light-mode .navbar.scrolled{background:rgba(248,250,252,.85)}
.nav-link{position:relative;color:#94a3b8;font-weight:500;font-size:.9rem;transition:color .3s;padding:6px 0;text-decoration:none}
body.light-mode .nav-link{color:#475569}
.nav-link:hover{color:#fff}
body.light-mode .nav-link:hover{color:#1e293b}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,#6366f1,#7c3aed);transition:width .3s}
.nav-link:hover::after{width:100%}

/* ===== MOBILE MENU ===== */
.mobile-menu{position:fixed;top:0;right:-100%;width:80%;max-width:400px;height:100vh;background:rgba(2,6,23,.95);backdrop-filter:blur(30px);z-index:1001;transition:right .4s;padding:80px 40px 40px;border-left:1px solid rgba(99,102,241,.15)}
body.light-mode .mobile-menu{background:rgba(248,250,252,.95)}
.mobile-menu.active{right:0}
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;pointer-events:none;transition:opacity .4s}
.mobile-overlay.active{opacity:1;pointer-events:all}

/* ===== MOCKUPS ===== */
.mockup-card{background:rgba(15,23,42,.7);backdrop-filter:blur(16px);border:1px solid rgba(99,102,241,.2);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
body.light-mode .mockup-card{background:rgba(255,255,255,.8);box-shadow:0 20px 60px rgba(0,0,0,.1)}

/* ===== TABS ===== */
.tab-btn{padding:12px 28px;border-radius:12px;font-weight:600;font-size:.9rem;color:#94a3b8;background:transparent;border:none;cursor:pointer;transition:all .3s}
.tab-btn.active{background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.4)}
.tab-btn:hover{color:#fff;background:rgba(99,102,241,.1)}
.tab-content{display:none}.tab-content.active{display:grid}

/* ===== PRODUCT CARDS ===== */
.product-card{background:rgba(15,23,42,.5);backdrop-filter:blur(16px);border:1px solid rgba(99,102,241,.1);border-radius:20px;overflow:hidden;transition:all .4s}
body.light-mode .product-card{background:rgba(255,255,255,.6)}
.product-card:hover{transform:translateY(-8px);border-color:rgba(99,102,241,.4);box-shadow:0 20px 60px rgba(99,102,241,.15)}
.product-img{width:100%;height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(2,6,23,.8))}
body.light-mode .product-img::after{background:linear-gradient(180deg,transparent 50%,rgba(248,250,252,.8))}

/* ===== COUNTERS ===== */
.counter-value{font-family:'Outfit',sans-serif;font-size:3.5rem;font-weight:800;line-height:1}
@media(max-width:768px){.counter-value{font-size:2rem}}

/* ===== TESTIMONIALS ===== */
.testimonial-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.testimonial-slide{min-width:100%;padding:0 20px}
.slider-dot{width:10px;height:10px;border-radius:50%;background:rgba(99,102,241,.3);cursor:pointer;transition:all .3s}
.slider-dot.active{background:#6366f1;width:30px;border-radius:5px}

/* ===== GALLERY ===== */
.gallery-item{border-radius:16px;overflow:hidden;position:relative;cursor:pointer}
.gallery-item .g-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item:hover .g-img{transform:scale(1.1)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,6,23,.8));opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:20px}
.gallery-item:hover .gallery-overlay{opacity:1}

/* ===== FULLSCREEN PREVIEW ===== */
.fullscreen-preview{position:fixed;inset:0;z-index:2000;background:rgba(2,6,23,.95);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;opacity:0;pointer-events:none;transition:opacity .4s}
.fullscreen-preview.active{opacity:1;pointer-events:all}

/* ===== LANGUAGE DROPDOWN ===== */
.lang-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:rgba(15,23,42,.9);backdrop-filter:blur(20px);border:1px solid rgba(99,102,241,.2);border-radius:12px;padding:8px;opacity:0;pointer-events:none;transform:translateY(-10px);transition:all .3s;min-width:120px;z-index:100}
body.light-mode .lang-dropdown{background:rgba(255,255,255,.9)}
.lang-dropdown.active{opacity:1;pointer-events:all;transform:translateY(0)}
.lang-option{padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:background .2s;color:#e2e8f0}
body.light-mode .lang-option{color:#1e293b}
.lang-option:hover{background:rgba(99,102,241,.15)}

/* ===== MISC ===== */
.reveal{opacity:0;transform:translateY(40px)}
.section-divider{width:60px;height:4px;background:linear-gradient(90deg,#6366f1,#7c3aed);border-radius:2px;margin:0 auto 16px}
.newsletter-input{background:rgba(15,23,42,.6);border:1px solid rgba(99,102,241,.2);border-radius:12px;padding:14px 20px;color:#e2e8f0;font-size:.9rem;outline:none;transition:border-color .3s;width:100%}
body.light-mode .newsletter-input{background:rgba(255,255,255,.6);color:#1e293b}
.newsletter-input:focus{border-color:#6366f1}
.newsletter-input::placeholder{color:#64748b}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.4}
body.light-mode .orb{opacity:.15}

/* ===== LIGHT MODE TEXT OVERRIDES ===== */
body.light-mode .lm-dark{color:#1e293b !important}
body.light-mode .lm-muted{color:#64748b !important}