/* Reset & Body */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: #000;
    color: #fff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* 3D Floating Elements */
.floating-cube {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #0066ff, #00ccff);
    animation: float 6s ease-in-out infinite;
    opacity: 0.1;
}

.floating-cube:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-cube:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
.floating-cube:nth-child(3) { top: 60%; left: 5%; animation-delay: 4s; }
.floating-cube:nth-child(4) { top: 80%; right: 10%; animation-delay: 1s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
    25% { transform: translateY(-20px) rotateX(90deg) rotateY(45deg); }
    50% { transform: translateY(-40px) rotateX(180deg) rotateY(90deg); }
    75% { transform: translateY(-20px) rotateX(270deg) rotateY(135deg); }
}

/* Blinking Light Effects */
.light-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.blinking-light {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00ccff;
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 15px #00ccff, 0 0 30px #00ccff;
}

/* Individual light animations */
.light-1 { animation: orbit1 15s linear infinite, blink 2s ease-in-out infinite, fly3d 8s ease-in-out infinite; }
.light-2 { animation: orbit2 18s linear infinite, blink 2.5s ease-in-out infinite, fly3d 10s ease-in-out infinite; animation-delay: -2s; }
/* … repeat for all 20 lights as in your original CSS */

/* Orbit Animations */
@keyframes orbit1 { 0% { left:10%;top:10%; }25%{left:90%;top:20%;}50%{left:80%;top:80%;}75%{left:20%;top:90%;}100%{left:10%;top:10%;} }
@keyframes orbit2 { 0% { left:90%;top:30%; }25%{left:70%;top:10%;}50%{left:10%;top:40%;}75%{left:30%;top:90%;}100%{left:90%;top:30%;} }
/* orbit3 to orbit6 same as original */

/* Blink and Fly3D */
@keyframes blink { 0%,100%{opacity:0.3;}50%{opacity:0.5;} }
@keyframes fly3d {
    0%,100% { transform: translateZ(0px) scale(1); filter: blur(0px); }
    25% { transform: translateZ(100px) scale(1.2); filter: blur(1px); }
    50% { transform: translateZ(-50px) scale(0.8); filter: blur(0.5px); }
    75% { transform: translateZ(80px) scale(1.1); filter: blur(1.2px); }
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 50px;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

nav { display:flex; justify-content:space-between; align-items:center; }

.logo {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.nav-links {
    display:flex;
    list-style:none;
    gap:30px;
}

.nav-links a {
    color:#fff;
    text-decoration:none;
    font-weight:500;
    position:relative;
    transition:all 0.3s ease;
}

.nav-links a:hover { color:#0066ff; transform:translateY(-2px); }
.nav-links a::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:#0066ff; transition: width 0.3s ease; }
.nav-links a:hover::after { width:100%; }

/* Hero Section */
.hero { height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; background:#000; }
.hero-content { z-index:10; animation: fadeInUp 1s ease-out; }
.hero h1 { font-size:4rem; margin-bottom:20px; color:#fff; }
.hero p { font-size:1.3rem; color:#fff; margin:0 auto 30px auto; max-width:600px; }
.cta-button {
    display:inline-block;
    padding:15px 40px;
    background:linear-gradient(45deg,#0066ff,#00ccff);
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:bold;
    transition:all 0.3s ease;
    transform:perspective(1000px) rotateX(0deg);
}
.cta-button:hover {
    transform:perspective(1000px) rotateX(-10deg) translateY(-5px);
    box-shadow:0 20px 40px rgba(0,102,255,0.3);
}

/* Product Marquee */
.product-marquee { position:absolute; bottom:0; left:0; width:100%; height:150px; overflow:hidden; pointer-events:none; }
.marquee-track { display:flex; align-items:center; height:100%; animation:marqueeScroll 60s linear infinite; width:200%; }
.product-icon {
    width:60px; height:60px; background:linear-gradient(45deg,#0066ff,#00ccff); border-radius:15px;
    display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff;
    margin-right:80px; flex-shrink:0; animation:float3d 3s ease-in-out infinite;
    box-shadow:0 10px 30px rgba(0,102,255,0.4);
}
.product-icon:nth-child(1){animation-delay:0s;}
.product-icon:nth-child(2){animation-delay:-0.5s;}
/* continue for remaining product icons */

@keyframes marqueeScroll { 0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
@keyframes float3d {0%,100%{transform:translateY(0) scale(1);}33%{transform:translateY(-10px) scale(1.05);}66%{transform:translateY(-20px) scale(1.1);}}

/* Categories Section */
.categories { padding:100px 50px; background:#000; }
.section-title { text-align:center; font-size:3rem; margin-bottom:60px; color:#fff; }
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; max-width:1200px; margin:0 auto; }
.category-card {
    background:#000;
    border:2px solid #0066ff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    transition:all 0.3s ease;
    transform:perspective(1000px) rotateX(0deg);
    cursor:pointer;
}
.category-card:hover {
    transform:perspective(1000px) rotateX(-5deg) translateY(-10px);
    box-shadow:0 20px 40px rgba(0,102,255,0.2);
}
.category-icon { font-size:3rem; margin-bottom:20px; display:block; }
.category-card h3 { font-size:1.5rem; margin-bottom:15px; color:#fff; }
.category-card p { color:#fff; line-height:1.6; }

/* About Section */
.about { padding:100px 50px; background:#000; text-align:center; }
.about h2 { font-size:3rem; margin-bottom:30px; color:#fff; }
.about p { font-size:1.2rem; color:#fff; margin-bottom:20px; }

/* Contact Section */
.contact {
    padding: 100px 50px; 
    background: #000; 
}
.contact-content { 
    max-width: 800px; 
    margin: 0 auto; 
    text-align: center; 
    color: #fff; 
}
.contact-form { 
    display: grid; 
    gap: 20px; 
    margin-top: 40px; 
}
.form-group { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}
.contact-form input,
.contact-form textarea { 
    padding: 15px; 
    background: #000; 
    border: 2px solid #0066ff; 
    border-radius: 10px; 
    color: #fff; 
    font-size: 1rem; 
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { 
    color: #fff; 
}
.contact-form textarea { 
    grid-column: 1 / -1; 
    min-height: 120px; 
    resize: vertical; 
}
.submit-btn { 
    padding: 15px 40px; 
    background: linear-gradient(45deg, #0066ff, #00ccff); 
    color: #fff; 
    border: none; 
    border-radius: 50px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    justify-self: center; 
}
.submit-btn:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.3); 
}

/* Footer */
footer { 
    padding: 50px; 
    background: #000; 
    text-align: center; 
    border-top: 1px solid #333; 
}
.footer-content { 
    max-width: 1200px; 
    margin: 0 auto; 
}
.footer-links { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    margin-bottom: 30px; 
}
.footer-links a { 
    color: #00ccff; 
    text-decoration: none; 
    transition: color 0.3s ease; 
}
.footer-links a:hover { 
    color: #0066ff; 
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-links { display: none; }
    
    .hero h1 { font-size: 2.5rem; }
    
    .product-marquee { display: none; }
    
    .form-group { grid-template-columns: 1fr; }
    
    header { padding: 15px 20px; }
    
    .categories, .about, .contact { padding: 50px 20px; }
}