:root {
    --primary-blue: #00d4ff;
    --primary-cyan: #00b8d4;
    --primary-green: #c8ff00;
    --primary-lime: #76ff03;
    --dark-bg: #0a0a0a;
    --dark-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan), var(--primary-lime), var(--primary-green));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:focus:not(:focus-visible) { outline: none; }
* { -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Poppins', sans-serif;
    background: var(--dark-bg);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}
.bg-animation {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
    pointer-events: none;
}
.bg-animation::before {
    content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: transparent;
    box-shadow:
        120px 340px #fff, 450px 80px rgba(0,212,255,0.8), 780px 210px #fff,
        230px 560px rgba(200,255,0,0.6), 900px 430px #fff, 60px 700px rgba(0,212,255,0.5),
        1100px 150px #fff, 670px 620px rgba(200,255,0,0.7), 350px 90px #fff,
        820px 380px rgba(0,212,255,0.6), 140px 480px #fff, 990px 260px rgba(200,255,0,0.5),
        500px 750px #fff, 280px 320px rgba(0,212,255,0.7), 1200px 500px #fff,
        75px 190px rgba(200,255,0,0.4), 630px 440px #fff, 1050px 680px rgba(0,212,255,0.6),
        400px 160px #fff, 760px 540px rgba(200,255,0,0.8), 180px 640px #fff,
        920px 90px rgba(0,212,255,0.5), 540px 290px #fff, 310px 720px rgba(200,255,0,0.6),
        1150px 370px #fff, 700px 130px rgba(0,212,255,0.7), 85px 400px #fff,
        1300px 220px #fff, 1400px 600px rgba(0,212,255,0.5), 1250px 750px rgba(200,255,0,0.4),
        30px 850px #fff, 1350px 450px #fff, 600px 900px rgba(0,212,255,0.6);
    animation: starPulse 6s ease-in-out infinite alternate;
}
.bg-animation::after {
    content: ''; position: absolute; width: 1px; height: 1px; border-radius: 50%;
    background: transparent;
    box-shadow:
        200px 450px rgba(255,255,255,0.4), 580px 120px rgba(0,212,255,0.3),
        840px 290px rgba(255,255,255,0.5), 110px 600px rgba(200,255,0,0.3),
        1000px 350px rgba(255,255,255,0.4), 440px 670px rgba(0,212,255,0.4),
        720px 200px rgba(255,255,255,0.3), 960px 510px rgba(200,255,0,0.4),
        330px 780px rgba(255,255,255,0.5), 650px 40px rgba(0,212,255,0.3),
        1180px 420px rgba(255,255,255,0.4), 490px 340px rgba(200,255,0,0.5),
        1320px 180px rgba(255,255,255,0.3), 870px 760px rgba(0,212,255,0.4),
        260px 920px rgba(255,255,255,0.4), 1100px 850px rgba(200,255,0,0.3);
    animation: starPulse 9s ease-in-out infinite alternate-reverse;
}
@keyframes starPulse { 0%{opacity:0.3} 100%{opacity:1} }

.shooting-star {
    position: absolute; top: 0; left: 0;
    width: 180px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(0,212,255,0.6), transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(0,212,255,0.8));
    opacity: 0;
    transform: rotate(-45deg);
}
.shooting-star:nth-child(1) { top: 8%;  left: 20%; animation: shoot 9s  linear 2s   infinite; }
.shooting-star:nth-child(2) { top: 20%; left: 65%; animation: shoot 11s linear 6s   infinite; width: 220px; }
.shooting-star:nth-child(3) { top: 5%;  left: 80%; animation: shoot 8s  linear 11s  infinite; width: 140px; }
.shooting-star:nth-child(4) { top: 40%; left: 10%; animation: shoot 10s linear 16s  infinite; width: 200px; }
@keyframes shoot {
    0%   { transform: translateX(0)    translateY(0)    rotate(-45deg); opacity: 0; }
    5%   { opacity: 0.65; }
    60%  { opacity: 0.4; }
    100% { transform: translateX(700px) translateY(700px) rotate(-45deg); opacity: 0; }
}

header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; background: rgba(10,10,10,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,212,255,0.1);
    transition: all 0.3s ease;
}
header.scrolled { background: rgba(10,10,10,0.98); box-shadow: 0 10px 30px rgba(0,212,255,0.1); }
nav {
    max-width: 1400px; margin: 0 auto; padding: 1rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
.logo-text {
    font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700;
    background: var(--gradient-primary); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease;
}
.logo-text:hover { filter: drop-shadow(0 0 10px rgba(0,212,255,0.5)); transform: scale(1.05); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
    color: var(--text-secondary); text-decoration: none;
    font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; position: relative;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 0; height: 2px; background: var(--gradient-primary); transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }
.mobile-menu-btn {
    display: none; background: none; border: none;
    cursor: pointer; padding: 0.4rem;
    z-index: 1100; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 36px; height: 36px;
}
.mobile-menu-btn span {
    display: block; width: 22px; height: 2px;
    background: var(--text-primary); border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.mobile-menu-btn:hover span { background: var(--primary-cyan); }
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; width: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 8rem 2rem 4rem; overflow: hidden;
}
.hero-content { position: relative; z-index: 10; max-width: 1200px; text-align: center; }
.hero-logo {
    width: 480px; max-width: 85vw; height: auto;
    margin: 0 auto 3rem; display: block;
    filter: drop-shadow(0 0 40px rgba(0,212,255,0.5));
    animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)} }
.hero .tagline {
    font-size: clamp(1.2rem,3.5vw,2rem); color: var(--text-secondary);
    margin-bottom: 2rem; font-weight: 300; letter-spacing: 3px;
    text-transform: uppercase; animation: slideUp 1s ease-out 0.3s backwards;
}
.hero > .hero-content > p {
    font-size: clamp(1rem,2vw,1.2rem); color: var(--text-secondary);
    max-width: 700px; margin: 0 auto 3rem; line-height: 1.8;
    animation: slideUp 1s ease-out 0.5s backwards;
}
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.cta-buttons {
    display: flex; gap: 1.5rem; justify-content: center;
    flex-wrap: wrap; animation: slideUp 1s ease-out 0.6s backwards;
}
.btn {
    padding: 1rem 2.5rem; font-size: 1rem; font-weight: 600;
    text-decoration: none; border-radius: 50px;
    transition: all 0.3s ease; cursor: pointer; border: none;
    font-family: 'Poppins', sans-serif; display: inline-block;
}
.btn-primary { background: var(--gradient-primary); color: var(--dark-bg); box-shadow: 0 10px 30px rgba(0,212,255,0.3); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,212,255,0.5); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--primary-cyan); }
.btn-secondary:hover { background: rgba(0,212,255,0.1); transform: translateY(-3px); }

section {
    position: relative; z-index: 10;
    padding: 6rem 2rem; max-width: 1400px; margin: 0 auto;
}
.section-title {
    font-family: 'Orbitron', sans-serif; font-size: clamp(2rem,5vw,3.5rem); font-weight: 700;
    text-align: center; margin-bottom: 1rem;
    background: var(--gradient-primary); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
}
.section-subtitle {
    text-align: center; color: var(--text-secondary); font-size: 1.1rem;
    margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto;
}

.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 2rem; margin-top: 3rem;
}
.service-card {
    background: var(--dark-card); padding: 2.5rem; border-radius: 20px;
    border: 1px solid rgba(0,212,255,0.1); transition: all 0.4s ease;
    position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.4s ease;
}
.service-card:hover { transform: translateY(-10px); border-color: var(--primary-cyan); box-shadow: 0 20px 40px rgba(0,212,255,0.2); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon { font-size: 3.5rem; margin-bottom: 1.5rem; display: block; line-height: 1; }
.service-card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-primary); }
.service-card p { color: var(--text-secondary); line-height: 1.6; }

.products-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-top: 3rem;
}
.product-showcase {
    background: var(--dark-card); padding: 2.5rem; border-radius: 20px;
    border: 1px solid rgba(0,212,255,0.1); transition: all 0.4s ease;
    position: relative; overflow: hidden;
}
.product-showcase::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.4s ease;
}
.product-showcase:hover { border-color: var(--primary-cyan); box-shadow: 0 20px 40px rgba(0,212,255,0.2); }
.product-showcase:hover::before { transform: scaleX(1); }

.product-content { position: relative; z-index: 2; }
.product-badge {
    display: inline-block; background: var(--gradient-primary); color: var(--dark-bg);
    padding: 0.4rem 1.2rem; border-radius: 50px; font-weight: 700; font-size: 0.75rem;
    margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: 1px;
}
.product-showcase h3 {
    font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 0.8rem; color: var(--text-primary);
}
.product-showcase > .product-content > p {
    color: var(--text-secondary); font-size: 0.92rem; line-height: 1.75; margin-bottom: 1.5rem;
}
.product-features {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem; margin: 1.5rem 0;
}
.feature-item { display: flex; align-items: flex-start; gap: 0.7rem; }
.feature-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.feature-item p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

.contact-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap: 3rem; margin-top: 3rem;
}
.contact-info {
    background: var(--dark-card); padding: 3rem; border-radius: 20px;
    border: 1px solid rgba(0,212,255,0.1);
    position: relative; overflow: hidden; transition: all 0.4s ease;
}
.contact-info::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.4s ease;
}
.contact-info:hover { border-color: var(--primary-cyan); box-shadow: 0 20px 40px rgba(0,212,255,0.2); }
.contact-info:hover::before { transform: scaleX(1); }
.contact-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.contact-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.contact-details h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.contact-details p, .contact-details a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
.contact-details a:hover { color: var(--primary-cyan); }

footer {
    position: relative; z-index: 10; background: var(--dark-card);
    padding: 1.2rem; text-align: center; border-top: 1px solid rgba(0,212,255,0.1);
}
footer p { color: var(--text-secondary); font-size: 0.95rem; }

.scroll-top {
    position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px;
    background: var(--gradient-primary); border: none; border-radius: 50%;
    color: var(--dark-bg); font-size: 1.5rem; cursor: pointer;
    opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.scroll-top.visible { opacity: 1; visibility: visible; }
.scroll-top:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,212,255,0.5); }

@media (max-width: 1024px) {
    .nav-links {
        position: absolute; top: 100%; left: 0; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0; list-style: none;
        background: rgba(10,10,10,0.97); backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0,212,255,0.12);
        border-bottom: 1px solid rgba(0,212,255,0.08);
        padding: 0.4rem 0;
        opacity: 0; transform: translateY(-6px); pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
        z-index: 999;
    }
    .nav-links.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.04); }
    .nav-links li:last-child { border-bottom: none; }
    .nav-links a { display: block; padding: 0.85rem 1.5rem; font-size: 0.92rem; color: var(--text-secondary); transition: color 0.2s, background 0.2s, padding-left 0.2s; }
    .nav-links a:hover { color: var(--primary-cyan); background: rgba(0,212,255,0.06); padding-left: 2rem; }
    .nav-links a::after { display: none; }
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    nav { padding: 0.9rem 1.8rem; }
    .hero { padding: 8rem 2.5rem 5rem; }
    .hero-logo { width: 360px; }
    section { padding: 5rem 2.5rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
    .products-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .product-features { grid-template-columns: repeat(2, 1fr); }
    .contact-container { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .contact-info { padding: 2.5rem; }
}
@media (max-width: 768px) {
    .hero { padding: 6rem 1.2rem 3rem; }
    .hero-logo { width: 240px; }
    section { padding: 4rem 1.5rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .products-grid { grid-template-columns: 1fr; }
    .contact-container { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; text-align: center; }
    .product-showcase { padding: 2.5rem 1.8rem; }
    .product-features { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .service-card { padding: 2rem 1.5rem; }
    .contact-info { padding: 2rem 1.5rem; }
}
@media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; gap: 1rem; }
    .product-features { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .logo-text { font-size: 1.2rem; }
    nav { padding: 0.8rem 1rem; }
    .hero { padding: 5.5rem 1rem 2.5rem; }
    .hero-logo { width: 200px; }
    section { padding: 3.5rem 1rem; }
    .service-card { padding: 1.8rem 1.2rem; }
    .service-icon { font-size: 2.8rem; }
    .contact-info { padding: 1.8rem 1.2rem; }
    .product-showcase { padding: 2rem 1.2rem; }
    .contact-item { gap: 1rem; }
    footer p { font-size: 0.82rem; }
    .scroll-top { width: 44px; height: 44px; font-size: 1.3rem; bottom: 1.2rem; right: 1.2rem; }
}
@media (max-width: 374px) {
    nav { padding: 0.7rem 0.8rem; }
    .logo-text { font-size: 1rem; letter-spacing: 0; }
    .hero { padding: 5rem 0.8rem 2rem; }
    .hero-logo { width: 170px; }
    .hero .tagline { font-size: 0.8rem; letter-spacing: 1px; }
    section { padding: 3rem 0.8rem; }
    .service-card { padding: 1.5rem 1rem; }
    .service-card h3 { font-size: 1.1rem; }
    .btn { padding: 0.85rem 1.2rem; font-size: 0.88rem; }
    .contact-info { padding: 1.5rem 1rem; }
    .product-showcase { padding: 1.5rem 0.8rem; }
    .scroll-top { width: 40px; height: 40px; font-size: 1.1rem; bottom: 1rem; right: 0.8rem; }
}

.store-badge-link {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 12px;
}
.store-badge-link:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 20px rgba(0,212,255,0.5));
}

.clients-section { padding: 5rem 2rem; overflow: hidden; }
.clients-section .section-subtitle { margin-bottom: 3rem; }
.marquee-wrapper {
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.marquee-track {
    display: flex; align-items: center;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.client-logo-item {
    display: flex; align-items: center; justify-content: center;
    width: 170px; height: 85px; margin: 0 1.2rem; flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,212,255,0.12);
    border-radius: 12px; padding: 0.8rem 1.2rem;
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.client-logo-item:hover {
    border-color: rgba(0,212,255,0.7);
    box-shadow: 0 0 30px rgba(0,212,255,0.3);
    background: rgba(0,212,255,0.06);
}
.client-logo-item img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    mix-blend-mode: lighten;
}