html{scroll-behavior:smooth}body{margin:0;font-family:Arial;background:#111;color:#fff}
.header{position:fixed;top:0;left:0;width:100%;background:linear-gradient(262deg, rgb(39 117 147 / 0%) 0%, rgb(30 74 113 / 76%) 100%); backdrop-filter:blur(10px);z-index:1000}
.container{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.logo,.menu a{color:#fff;text-decoration:none}.menu{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.menu a:hover{color:#0A84FF}
.hero{position:relative;padding-top:120px;height:85vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.btn{background:#fff;color:#000;padding:12px 24px;border-radius:30px;text-decoration:none;margin-top:20px}
.section{max-width:1100px;margin:auto;padding:70px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.card{background:#1d1d1f;padding:20px;border-radius:16px}.ph{font-size:48px}
.slide{display:none}.slide.active{display:block}
iframe{width:100%;height:320px;border:0;border-radius:12px}
footer{
background:linear-gradient(262deg, rgb(39 117 147 / 0%) 0%, rgb(30 74 113 / 76%) 100%);
border-top:1px solid #111;
padding:50px 20px;
color:#777;
text-align:center;
}
.slider-controls{display:flex;gap:10px;margin:20px 0}
.slider-controls button{
width:48px;height:48px;border:none;border-radius:50%;
background:rgba(255,255,255,.15);color:#fff;font-size:24px;
cursor:pointer;transition:.3s}
.slider-controls button:hover{background:#12617fe3}

.logo img{
height:56px;
width:auto;
display:block;
}

.product-img{
display:block;
width:100%;
height:240px;
object-fit:contain;
margin:0 auto 15px;
}

.card{display:flex;flex-direction:column}.product-img{width:100%;height:240px;object-fit:contain;display:block;margin:0 auto 12px}.ph{display:none!important}
.hero{position:relative;position:relative;overflow:hidden;height:85vh;padding-top:90px}
.slide{display:none;position:absolute;inset:0}
.slide.active{display:block}
.hero-img{width:100%;height:100%;object-fit:cover;filter:brightness(.90)}
.caption{position:absolute;left:8%;top:45%;transform:translateY(-50%);max-width:500px;color:#fff}
.slider-controls{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.btn{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);z-index:10}

.logo img{height:60px;width:auto;display:block}
.center-caption{
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
text-align:center;
width:min(90%,700px);
background-color:#12617fe3; 
border-radius: 5px;
}
.center-caption h1{font-size:2.5rem;margin-bottom:12px}
.center-caption p{font-size:1.2rem}

.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:16px;cursor:pointer}
@media(max-width:768px){
.menu-toggle{display:block}
nav{position:fixed;top:0;right:-260px;width:250px;height:100vh;background:#111;transition:.3s;padding-top:80px;z-index:999}
nav.open{right:0}
.menu{flex-direction:column;gap:10px;padding-left:25px}
}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:998}
.overlay.show{display:block}
.close-menu{display:none}
@media(max-width:768px){
.close-menu{display:block;background:none;border:0;color:#fff;font-size:36px;position:absolute;top:15px;right:20px;cursor:pointer}
body.menu-open{overflow:hidden}
}

#backToTop{
position:fixed;
right:20px;
bottom:20px;
width:36px;height:36px;
border:none;border-radius:50%;
background:#0A84FF;color:#fff;
font-size:26px;font-weight:bold;
cursor:pointer;
display:none;
z-index:99999;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
#backToTop.show{display:block;}

.social-icons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;}
.social-icons a{
width:48px;height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
font-size:24px;
transition:.3s;
color:#fff;
}
.fb{background:#1877F2;}
.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);}
.tt{background:#000;border:1px solid #444;}
.sc{background:#FFFC00;color:#000;}
.social-icons a:hover{
transform:translateY(-4px) scale(1.08);
}

.social-banner{text-align:center;margin:10px 0 18px}
.social-banner img{max-width:320px;width:90%;border-radius:16px;display:inline-block}
.copyright{text-align:center;color:#ffffff;margin-top:10px}

.social-icons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.social-icons a{width:36px;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;
font-size:16px;color:#fff;text-decoration:none;transition:.3s;box-shadow:0 10px 25px rgba(0,0,0,.35)}
.social-icons a:hover{transform:translateY(-6px) scale(1.08)}
.fb{background:#1877F2}
.ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4)}
.tt{background:#111}
.yt{background:#FF0000}
.sc{background:#FFFC00;color:#111!important}
.copyright{text-align:center;margin-top:15px}

.copyright{margin-bottom:10px;margin-top:0;text-align:center;}

.slide-loader{
position:absolute;
left:0;right:0;bottom:0;
height:4px;
background:rgba(255,255,255,.15);
z-index:20;
}
.slide-progress{
height:100%;
width:0%;

transition:width .1s linear;
}

.slider-progress-wrap{
position:absolute;top:0;left:0;width:100%;height:4px;
background:rgba(255,255,255,.15);z-index:50}
#sliderProgressBar{
height:100%;width:0%;
background:#0A84FF;
transition:width .05s linear;
}

.slider-progress-wrap{
position:absolute;
top:0;left:0;
width:100%;
height:4px;
background:rgba(255,255,255,.18);
z-index:999;
overflow:hidden;
}
#sliderProgressBar{
width:0%;
height:100%;
background:#0A84FF;
}

#slideCircleLoader{
position:absolute;
top:18px;
right:20px;
width:32px;
height:32px;
z-index:99999;
pointer-events:none;
}
#slideCircleLoader svg{width:100%;height:100%;transform:rotate(-90deg)}
#slideCircleLoader .bg{
fill:none;stroke:rgba(255,255,255,.25);stroke-width:3;
}
#slideCircleLoader .fg{
fill:none;stroke:#0A84FF;stroke-width:3;stroke-linecap:round;
stroke-dasharray:97.4;stroke-dashoffset:97.4;
}

.hero{position:relative!important;}
#slideCircleLoader{position:absolute!important;top:95px!important;left:20px!important;
right:auto!important;width:30px!important;height:30px!important;z-index:999999!important}
#slideCircleLoader svg{width:100%;height:100%;transform:rotate(-90deg)}
#slideCircleLoader .bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:3}
#slideCircleLoader .fg{fill:none;stroke:#0A84FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:97.4}

@media(max-width:768px){
nav .menu,
nav ul{
display:flex;
flex-direction:column;
gap:18px!important;
}
nav .menu a,
nav ul li{
margin:8px 0!important;
}
}

@media(max-width:768px){
nav .menu li:not(:last-child),
nav ul li:not(:last-child){
border-bottom:1px solid rgba(255,255,255,.12);
padding-bottom:14px;
}
}

/* Desktop menu separators */
@media (min-width:769px){
nav .menu,
nav ul{
display:flex;
align-items:center;
}
nav .menu li:not(:last-child),
nav ul li:not(:last-child){
border-right:1px solid rgba(255,255,255,.12);
padding-right:18px;
margin-right:18px;
}
}


/* Product hover zoom */
.card,
.product-card{
transition:transform .35s ease, box-shadow .35s ease;
overflow:hidden;
}
.product-img,
.card img,
.product-card img{
transition:transform .35s ease;
}
.card:hover,
.product-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,0,0,.18);
}
.card:hover .product-img,
.card:hover img,
.product-card:hover img{
transform:scale(1.08);
}


/* Full-width background only */
#products{
  position:relative;
  isolation:isolate;
}
#products::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  background:
    radial-gradient(circle at center, rgba(0,180,255,.18), transparent 70%),
    linear-gradient(180deg,#121212,#0a0a0a);
}


/* Full-width background only */
#accessories{
  position:relative;
  isolation:isolate;
}
#accessories::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  z-index:-1;
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 18%), #393838 70%), linear-gradient(180deg, #adadad, #0a0a0a)
}


/* Active navigation link */
nav a.active,
.navbar a.active,
.menu a.active{
    color:#1da1ff !important;
}


/* Active menu + back to top color */
nav a.active,
.navbar a.active,
.menu a.active{
  color:#00bbe1 !important;
}
#backToTop,
.back-to-top{
  background:#0ac6ff80 !important;
  border-color:#00bbe1 !important;
}
#backToTop:hover,
.back-to-top:hover{
  filter:brightness(1.08);
}

.accessories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:25px}
.acc-card{background:#1b1b1f;border-radius:16px;padding:18px;text-align:center}
.acc-card img{width:100%;aspect-ratio:1;object-fit:contain;transition:.35s}
.acc-card img:hover{transform:scale(1.08)}
.acc-card h4{color:#fff;font-size:15px;margin-top:12px}
@media(max-width:992px){.accessories-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.accessories-grid{grid-template-columns:repeat(2,1fr)}}

.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;align-items:center;justify-content:center}
.lightbox.show{display:flex}
#lb-img{max-width:90vw;max-height:90vh;border-radius:10px}
.lb-close{position:absolute;top:20px;right:30px;color:#fff;font-size:42px;cursor:pointer}