:root{
  --bg-dark:#0b0b10;
  --bg-darker:#08080c;
  --card-bg:#141419;
  --border-col:#24242c;
  --green:#8BC63F;
  --purple:#7C3AED;
  --teal:#22D3EE;
  --olive:#B5C946;
  --amber:#F2A83B;
  --text-light:#f5f5f7;
  --text-muted:#9a9aa5;
}

*{box-sizing:border-box;}

body{
  
  color:var(--text-light);
  font-family:'Poppins', sans-serif;
  overflow-x:hidden;
}

a{text-decoration:none;}
a:hover{text-decoration:none;}

.text-accent{color:var(--green);}

/* ---------- Buttons ---------- */
.btn-accent{
  background:var(--green);
  color:#0b0b10;
  font-weight:600;
  font-size:13px;
  letter-spacing:.5px;
  padding:12px 26px;
  border-radius:4px;
}
.btn-accent:hover{background:#9fd956; color:#0b0b10;}

.btn-outline-light{
  border:1px solid #555;
  color:#fff;
  font-weight:600;
  font-size:13px;
  letter-spacing:.5px;
  padding:12px 26px;
  border-radius:4px;
}
.btn-outline-light:hover{border-color:#fff; color:#fff;}

.btn-outline-accent, .btn-outline-purple, .btn-outline-teal, .btn-outline-olive, .btn-outline-amber{
  border:1px solid var(--green);
  color:var(--green);
  font-weight:600;
  font-size:12px;
  letter-spacing:.5px;
  padding:8px 18px;
  border-radius:4px;
  display:inline-block;
}
.btn-outline-accent:hover{background:var(--green); color:#0b0b10;}

.btn-outline-purple{border-color:var(--purple); color:var(--purple);}
.btn-outline-purple:hover{background:var(--purple); color:#fff;}

.btn-outline-teal{border-color:var(--teal); color:var(--teal);}
.btn-outline-teal:hover{background:var(--teal); color:#0b0b10;}

.btn-outline-olive{border-color:var(--olive); color:var(--olive);}
.btn-outline-olive:hover{background:var(--olive); color:#0b0b10;}

.btn-outline-amber{border-color:var(--amber); color:var(--amber);}
.btn-outline-amber:hover{background:var(--amber); color:#0b0b10;}

.btn-buy{
  background:transparent;
  border:1px solid var(--green);
  color:var(--green);
  font-size:12px;
  font-weight:600;
  padding:7px 16px;
  border-radius:4px;
}
.btn-buy:hover{background:var(--green); color:#0b0b10;}

/* ---------- Hero ---------- */
.hero-section{
  background:radial-gradient(ellipse at 70% 30%, rgba(34,211,238,0.12), transparent 60%), var(--bg-darker);
  padding:0;
}
.hero-section::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 1px;
    z-index: 10;
    background: linear-gradient(
        90deg,
        #ff0000,
        #ff6a00,
        #ffe600,
        #00ff88,
        #00d4ff,
        #0055ff,
        #7a00ff,
        #ff00cc,
        #ff0000
    );
    background-size: 35% 100%;
    animation: lianliRGB 4s linear infinite;
    box-shadow:
        0 0 8px rgba(255,255,255,.25),
        0 0 15px rgba(0,255,255,.35);
}

@keyframes lianliRGB{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-33.333%);
    }
}
.hero-section::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: inherit;
    filter: blur(12px);
    opacity: .7;
    pointer-events: none;
}
.eyebrow{
  color:var(--green);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  margin-bottom:10px;
}
.eyebrow-green{color:var(--green);}
.eyebrow-purple{color:var(--purple);}
.eyebrow-teal{color:var(--teal);}
.eyebrow-olive{color:var(--olive);}
.eyebrow-amber{color:var(--amber);}

.hero-title{
  font-size:48px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:20px;
}
.hero-desc{
  color:var(--text-muted);
  font-size:16px;
  max-width:480px;
  margin-bottom:28px;
}
.hero-btns{margin-bottom:50px;}
.hero-btns .btn{margin-right:14px; margin-bottom:10px;}

.hero-features .feature-icon{font-size:22px; margin-bottom:8px;}
.hero-features .f-title{font-size:11px; font-weight:700; letter-spacing:.5px; margin-bottom:2px;}
.hero-features .f-sub{font-size:11px; color:var(--text-muted);}

.hero-img{max-height:600px; filter:drop-shadow(0 0 60px rgba(34,211,238,.25));}

/* ---------- Category Tabs ---------- */
.category-tabs-section{
  background:var(--bg-darker);
  border-top:1px solid var(--border-col);
  border-bottom:1px solid var(--border-col);
  padding:20px 0;
}
.category-tabs{gap:0;}
.cat-tab{
  text-align:center;
  padding:18px 10px;
  border:1px solid var(--border-col);
  margin:4px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
  
}
.cat-tab:hover, .cat-tab.active{
  border-color:var(--green);
  background:rgba(139,198,63,0.06);
}
.cat-tab img{width:50px; height:50px; object-fit:contain; margin-bottom:10px;}
.cat-title{font-size:12px; font-weight:700; letter-spacing:.5px; margin-bottom:2px;}
.cat-sub{font-size:11px; color:var(--text-muted); margin-bottom:0;}

/* ---------- Sections ---------- */
.section-block{padding:60px 0;}
.section-title{font-size:32px; font-weight:800; margin-bottom:14px;}
.section-desc{color:var(--text-muted); font-size:15px; max-width:420px; margin-bottom:20px;}

.section-purple{background:linear-gradient(180deg, rgba(124,58,237,0.08), transparent);}
.section-teal{background:linear-gradient(180deg, rgba(34,211,238,0.07), transparent);}
.section-olive{background:linear-gradient(180deg, rgba(181,201,70,0.07), transparent);}
.section-amber{background:linear-gradient(180deg, rgba(242,168,59,0.07), transparent);}

.view-all{margin-top:20px;}
.view-all a{color:var(--text-muted); font-size:13px; letter-spacing:.5px;}
.view-all a:hover{color:var(--green);}

/* ---------- Product Cards (CPU Coolers) ---------- */
.product-card{
  background:var(--card-bg);
  border:1px solid var(--border-col);
  border-radius:12px;
  padding:22px;
  position:relative;
  height:100%;
}
.product-card:hover{background:unset;}
.badge-tag{
  position:absolute;
  top:16px; left:16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  padding:4px 10px;
  border-radius:4px;
  z-index:2;
}
.badge-green{background:var(--green); color:#0b0b10;}
.product-img{width:70%; }
.product-name{font-size:15px; font-weight:700; line-height:1.4; margin-bottom:12px;}
.product-specs{list-style:none; padding:0; margin:0 0 18px; font-size:12px; color:var(--text-muted);}
.product-specs li{margin-bottom:4px; padding-left:14px; position:relative;}
.product-specs li::before{content:"•"; color:var(--green); position:absolute; left:0;}
.price{font-size:18px; font-weight:700; color:#fff;}

/* ---------- Feature panel + side cards ---------- */
.feature-panel{
  background:var(--card-bg);
  border:1px solid var(--border-col);
  border-radius:12px;
  padding:24px;
}
.feature-panel img{max-width:100%; border-radius:8px;}
.feature-panel-title{margin-top:14px; font-weight:700; font-size:15px;}
.feature-panel-sub{color:var(--text-muted); font-size:12px;}

.side-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card-bg);
  border:1px solid var(--border-col);
  border-radius:10px;
  padding:14px;
  margin-bottom:16px;
}
.side-card img{
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    background: #08080c;
}
.side-card h6{font-size:14px; font-weight:700; margin-bottom:2px;}
.side-card p{font-size:12px; color:var(--text-muted); margin-bottom:0;}

/* ---------- Accessories ---------- */
.accessory-card{
  background:var(--card-bg);
  border:1px solid var(--border-col);
  border-radius:10px;
  padding:16px;
  text-align:center;
  height:100%;
}
.accessory-card img{width:100%; max-width:100px; margin-bottom:12px;}
.accessory-card p{font-size:12px; font-weight:700; margin-bottom:2px;}
.accessory-card span{font-size:11px; color:var(--text-muted);}

/* ---------- Trust bar ---------- */
.trust-bar{
  background:var(--bg-darker);
  border-top:1px solid var(--border-col);
  border-bottom:1px solid var(--border-col);
  padding:30px 0;
}
.trust-icon{font-size:24px; margin-bottom:8px;}
.t-title{font-size:12px; font-weight:700; letter-spacing:.5px; margin-bottom:2px;}
.t-sub{font-size:11px; color:var(--text-muted);}

/* ---------- Latest products ---------- */
.latest-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:40px;
  position:relative;
}
.latest-title span{
  background:var(--bg-dark);
  padding:0 20px;
  position:relative;
  z-index:2;
}
.latest-title::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:var(--border-col);
  z-index:1;
}

.mini-card{
  background:#fff;
  border-radius:10px;
  padding:14px;
  text-align:center;
  position:relative;
  height:100%;
  color:#111;
}
.mini-badge{top:8px; left:8px;}
.mini-card img{width:100%; border-radius:6px; margin-bottom:10px; background:#eee;}
.mini-name{font-size:12px; font-weight:600; color:#222; margin-bottom:4px; min-height:32px;}
.mini-price{font-size:14px; font-weight:700; color:var(--green); margin-bottom:0;}

/* ---------- CTA Banner ---------- */
.cta-banner{
  background:linear-gradient(90deg, rgba(139,198,63,0.08), rgba(34,211,238,0.08));
  border-top:1px solid var(--border-col);
  border-bottom:1px solid var(--border-col);
  padding:50px 0;
}
.cta-banner h3{font-size:26px; font-weight:800; margin-bottom:8px;}
.cta-banner p{color:var(--text-muted); margin-bottom:0;}



/*--- caousel ---*/
.hero-section{
    position:relative;
    overflow:hidden;
}

#heroCarousel{
    position:relative;
    padding:40px;
}

/* Carousel Item */
.carousel-item{
    min-height:600px;
    text-align:center;
}

/* Active & Sliding Items */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:flex !important;
    align-items:center;
    justify-content:center;
}

/* Hero Image */
.hero-img{
    display:block;
    max-height:620px;
    width:auto;
    margin:auto;
    filter:drop-shadow(0 9px 17px rgba(0,255,110,.10));
    transition:transform .5s ease;
}

/* Floating animation only on active slide */
.carousel-item.active .hero-img{
    animation:float 5s ease-in-out infinite;
}

/* Controls */
.carousel-control-prev,
.carousel-control-next{
    width:50px;
    height:50px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:50%;
    transform:translateY(-50%);
    opacity:0;
    transition:opacity .3s ease;
}

#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next{
    opacity:1;
}

.carousel-control-prev{
    left:-10px;
}

.carousel-control-next{
    right:-10px;
}

/* Indicators */
.carousel-indicators{
    bottom:-15px;
}

.carousel-indicators li{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#666;
    margin:0 6px;
}

.carousel-indicators .active{
    width:30px;
    border-radius:30px;
    background:#25d366;
}

/* Floating Animation */
@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0);
    }
}

/* ---------- Responsive ---------- */
@media (max-width:767px){
  .hero-title{font-size:32px;}
  .hero-img{max-height:340px;}
  .section-title{font-size:26px;}
  .cta-banner .text-md-right{text-align:left !important; margin-top:20px;}
  .cta-banner h3{font-size:22px;}
  .hero-text .eyebrow{margin-top:50px;}
  .carousel-item{min-height:auto;}
  .cat-tab{margin:0;}
}