@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
--bg:#f3f3f6;--bg2:#ffffff;--bg3:#eaeaea;
--glass:rgba(0,0,0,.03);--gb:rgba(0,0,0,.15);
--nb:#ff9900;--np:#146eb4;--no:#cc0c39;--ng:#007600;
--t:#0f1111;--tm:#565959;--ts:#888888;
--card:#ffffff;--radius:8px;
--shadow:0 3px 16px rgba(0,0,0,.08);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--t);font-family:'Inter',sans-serif;overflow-x:hidden;min-height:100vh;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;object-fit:cover;}
ul{list-style:none;}
button{cursor:pointer;border:none;font-family:inherit;}
input,textarea{font-family:inherit;}

/* PARTICLES */
#particles{display:none;}
.particle{position:absolute;border-radius:50%;animation:float linear infinite;opacity:.15;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 5%;height:70px;display:flex;align-items:center;justify-content:space-between;transition:all .4s;background:#131921;color:#fff;border-bottom:1px solid #19222d;}
nav.scrolled{background:#131921;backdrop-filter:none;border-bottom:1px solid #19222d;}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;color:#ffffff;}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#ff9900,#ffb74d);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 0 20px rgba(255,153,0,.3);color:#000;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{color:#cccccc;font-size:.9rem;font-weight:500;transition:.3s;position:relative;}
.nav-links a:hover,.nav-links a.active{color:#ffffff;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#ff9900;transition:.3s;}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.btn-nav{padding:8px 20px;border-radius:4px;font-size:.85rem;font-weight:600;background:#f0c14b;border:1px solid #a88734;color:#111;transition:.3s;box-shadow:0 1px 2px rgba(0,0,0,0.05);}
.btn-nav:hover{background:#eeb933;border-color:#846a29;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger span{width:24px;height:2px;background:#ffffff;border-radius:2px;transition:.3s;}

/* AMAZON INLINE SEARCH BAR */
.nav-search-bar {
    display: flex;
    flex: 1;
    max-width: 600px;
    margin: 0 30px;
    height: 40px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: 0.2s;
}
.nav-search-bar:focus-within {
    border-color: #ff9900;
    box-shadow: 0 0 5px rgba(255,153,0,0.5);
}
.nav-search-select {
    background: #f3f3f3;
    color: #555;
    border: none;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border-right: 1px solid #ddd;
    outline: none;
    cursor: pointer;
}
.nav-search-select:hover {
    background: #dadada;
    color: #111;
}
.nav-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 0.95rem;
    color: #111;
}
.nav-search-submit {
    background: #febd69;
    color: #111;
    border: none;
    width: 45px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.nav-search-submit:hover {
    background: #f3a847;
}

@media(max-width: 992px) {
    .nav-search-bar { display: none; }
}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:100px 5% 60px;overflow:hidden;text-align:center;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,58,237,.25) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 80% 50%,rgba(0,212,255,.12) 0%,transparent 60%);pointer-events:none;}
.hero-content{position:relative;z-index:2;max-width:900px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:50px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);font-size:.8rem;font-weight:600;color:var(--nb);margin-bottom:24px;animation:fadeInUp .8s ease;}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--nb);animation:pulse 1.5s infinite;}
h1.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:24px;animation:fadeInUp 1s .2s both;}
.hero-title .gradient{background:linear-gradient(135deg,var(--nb),var(--np),var(--no));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--tm);max-width:600px;margin:0 auto 36px;line-height:1.7;animation:fadeInUp 1s .4s both;}
.hero-search{display:flex;align-items:center;background:var(--glass);border:1px solid var(--gb);border-radius:50px;padding:6px 6px 6px 20px;max-width:520px;margin:0 auto 40px;animation:fadeInUp 1s .6s both;backdrop-filter:blur(10px);}
.hero-search input{flex:1;background:none;border:none;outline:none;color:var(--t);font-size:1rem;padding-right:10px;}
.hero-search input::placeholder{color:var(--ts);}
.hero-search button{padding:10px 24px;border-radius:50px;background:linear-gradient(135deg,var(--nb),var(--np));color:#fff;font-weight:600;font-size:.9rem;transition:.3s;}
.hero-search button:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(0,212,255,.4);}
.hero-stats{display:flex;gap:40px;justify-content:center;animation:fadeInUp 1s .8s both;}
.hero-stat{text-align:center;}
.hero-stat strong{display:block;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,var(--nb),var(--np));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-stat span{font-size:.8rem;color:var(--tm);}
.floating-cards{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:1;}
.float-card{position:absolute;background:var(--card);border:1px solid var(--gb);border-radius:12px;padding:12px;display:flex;align-items:center;gap:8px;font-size:.75rem;backdrop-filter:blur(10px);animation:floatCard 6s ease-in-out infinite;}
.float-card:nth-child(1){top:20%;left:5%;animation-delay:0s;}
.float-card:nth-child(2){top:30%;right:5%;animation-delay:-2s;}
.float-card:nth-child(3){bottom:25%;left:8%;animation-delay:-4s;}
.float-card .fc-img{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--nb),var(--np));display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.fc-info strong{display:block;font-size:.8rem;}
.fc-info .price{color:var(--ng);font-weight:600;}

/* SECTION BASE */
section{position:relative;padding:80px 5%;z-index:2;}
.section-header{text-align:center;margin-bottom:50px;}
.section-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;font-size:.75rem;font-weight:600;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em;}
.badge-blue{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);color:var(--nb);}
.badge-purple{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.3);color:#a78bfa;}
.badge-orange{background:rgba(255,107,43,.1);border:1px solid rgba(255,107,43,.3);color:var(--no);}
.badge-green{background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.3);color:var(--ng);}
h2.section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;line-height:1.2;margin-bottom:12px;}
.section-sub{color:var(--tm);font-size:1rem;max-width:500px;margin:0 auto;}
.section-divider{width:60px;height:3px;background:linear-gradient(90deg,var(--nb),var(--np));border-radius:3px;margin:16px auto 0;}

/* CATEGORIES */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;}
.cat-card{background:var(--bg2);border:1px solid #d5d9d9;border-radius:var(--radius);padding:24px 16px;text-align:center;cursor:pointer;transition:.3s;position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.cat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--nb),var(--np));opacity:0;transition:.3s;}
.cat-card:hover::before{opacity:.05;}
.cat-card:hover{transform:translateY(-4px);border-color:#ff9900;box-shadow:0 6px 15px rgba(0,0,0,0.08);}
.cat-icon{font-size:2.2rem;margin-bottom:10px;position:relative;z-index:1;}
.cat-name{font-size:.85rem;font-weight:600;position:relative;z-index:1;}
.cat-count{font-size:.72rem;color:var(--tm);margin-top:4px;position:relative;z-index:1;}

/* PRODUCT GRIDS */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:30px;}
.product-card{background:var(--card);border:1px solid #d5d9d9;border-radius:var(--radius);overflow:hidden;transition:.3s;position:relative;display:flex;flex-direction:column;height:100%;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.product-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,153,0,.02),transparent);opacity:0;transition:.3s;z-index:0;pointer-events:none;}
.product-card:hover{transform:translateY(-4px);border-color:#ff9900;box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.product-card:hover::before{opacity:1;}
.product-badge{position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:4px;font-size:.7rem;font-weight:700;letter-spacing:.05em;z-index:10;}
.badge-viral{background:#ff9900;color:#000;box-shadow:0 2px 6px rgba(255,153,0,.3);}
.badge-ai{background:#146eb4;color:#fff;box-shadow:0 2px 6px rgba(20,110,180,.3);}
.badge-deal{background:#cc0c39;color:#fff;box-shadow:0 2px 6px rgba(204,12,57,.3);}
.product-actions{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:10;opacity:0;transform:translateX(10px);transition:.3s;}
.product-card:hover .product-actions{opacity:1;transform:translateX(0);}
.p-action-btn{width:32px;height:32px;border-radius:50%;background:#ffffff;border:1px solid #d5d9d9;display:flex;align-items:center;justify-content:center;color:#0f1111;font-size:.9rem;box-shadow:0 2px 5px rgba(0,0,0,0.1);transition:.3s;}
.p-action-btn:hover{background:#f0f2f2;border-color:#a88734;color:#ff9900;transform:scale(1.1);}
.product-img-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--bg2);display:flex;align-items:center;justify-content:center;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:.6s;}
.product-card:hover .product-img-wrap img{transform:scale(1.08);}
.brand-logo{position:absolute;bottom:12px;left:12px;width:32px;height:32px;border-radius:6px;background:#fff;padding:4px;box-shadow:0 4px 10px rgba(0,0,0,.4);z-index:2;}
.product-info{padding:20px;flex:1;display:flex;flex-direction:column;position:relative;z-index:2;}
.p-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.p-category{font-size:.75rem;color:var(--tm);text-transform:uppercase;letter-spacing:.05em;}
.p-rating{display:flex;align-items:center;gap:4px;font-size:.8rem;color:#ffb800;font-weight:600;}
.p-rating span{color:var(--tm);font-weight:400;font-size:.7rem;}
.p-title{font-size:1.1rem;font-weight:600;line-height:1.4;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:.3s;}
.product-card:hover .p-title{color:var(--nb);}
.p-price-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:16px;margin-top:auto;}
.p-price{font-size:1.3rem;font-weight:700;color:var(--t);}
.p-old-price{font-size:.85rem;color:var(--ts);text-decoration:line-through;margin-bottom:2px;}
.p-discount{font-size:.75rem;color:var(--ng);font-weight:600;margin-bottom:2px;}
.btn-buy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:8px;font-size:.9rem;font-weight:600;background:#ffd814;border:1px solid #fcd200;color:#0f1111;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,0.05);cursor:pointer;}
.btn-buy:hover{background:#f7ca00;border-color:#f2c200;}
.product-card:hover .btn-buy{background:#ffd814;border-color:#fcd200;}
.product-card:hover .btn-buy:hover{background:#f7ca00;border-color:#f2c200;}

/* DEALS SECTION */
.deals-section{background:linear-gradient(180deg,var(--bg),var(--bg2),var(--bg));border-top:1px solid var(--gb);border-bottom:1px solid var(--gb);}
.deals-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px;}
.countdown-box{display:flex;align-items:center;gap:12px;}
.countdown-label{font-size:.85rem;color:var(--tm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.timer{display:flex;gap:8px;}
.time-block{background:var(--glass);border:1px solid var(--gb);border-radius:8px;width:50px;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.time-block span.num{font-size:1.2rem;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--no);}
.time-block span.txt{font-size:.6rem;color:var(--tm);text-transform:uppercase;}
.deal-card{background:linear-gradient(135deg,rgba(255,107,43,.05),rgba(124,58,237,.05));border:1px solid rgba(255,107,43,.2);}
.deal-card .p-title{font-size:1.2rem;}
.deal-progress{margin:12px 0 16px;}
.dp-info{display:flex;justify-content:space-between;font-size:.75rem;color:var(--tm);margin-bottom:6px;}
.dp-info span{color:var(--no);font-weight:600;}
.dp-bar{width:100%;height:6px;background:var(--glass);border-radius:3px;overflow:hidden;}
.dp-fill{height:100%;background:linear-gradient(90deg,var(--no),var(--np));border-radius:3px;width:0;transition:1s ease-out;}

/* FEATURES / WHY US */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.feature-card{background:var(--glass);border:1px solid var(--gb);border-radius:var(--radius);padding:30px 24px;transition:.4s;position:relative;overflow:hidden;}
.feature-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--nb),var(--np));transform:scaleX(0);transform-origin:left;transition:.4s;}
.feature-card:hover{background:rgba(12,12,22,.95);transform:translateY(-5px);}
.feature-card:hover::before{transform:scaleX(1);}
.f-icon{width:50px;height:50px;border-radius:12px;background:rgba(0,212,255,.1);color:var(--nb);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px;}
.feature-card:nth-child(2) .f-icon{background:rgba(124,58,237,.1);color:var(--np);}
.feature-card:nth-child(3) .f-icon{background:rgba(255,107,43,.1);color:var(--no);}
.feature-card:nth-child(4) .f-icon{background:rgba(0,255,136,.1);color:var(--ng);}
.f-title{font-size:1.1rem;font-weight:600;margin-bottom:10px;}
.f-desc{font-size:.85rem;color:var(--tm);line-height:1.6;}

/* CTA BANNER */
.cta-banner{margin:60px 5%;padding:60px 40px;border-radius:24px;background:linear-gradient(135deg,rgba(0,102,255,.12),rgba(255,153,0,.08)),var(--bg2);position:relative;overflow:hidden;text-align:center;border:1px solid var(--gb);}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,5,8,.9),rgba(12,12,22,.8));backdrop-filter:blur(5px);}
.cta-content{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.cta-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;margin-bottom:16px;color:#ffffff;}
.cta-desc{font-size:1.05rem;color:#cbd5e0;margin-bottom:32px;font-weight:500;}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:12px 32px;border-radius:50px;background:#ffa41c;border:1px solid #ff8f00;color:#0f1111;font-weight:700;font-size:1rem;transition:.2s;box-shadow:0 2px 5px rgba(213,217,217,0.3);cursor:pointer;}
.btn-primary:hover{background:#e49317;border-color:#d68710;transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.15);}

/* FOOTER */
footer{background:#232f3e;border-top:1px solid #131921;padding:60px 5% 30px;position:relative;overflow:hidden;color:#eaeded;}
.footer-glow{display:none;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;position:relative;z-index:1;}
.footer-col h4{font-size:1.05rem;font-weight:700;margin-bottom:20px;color:#ffffff;font-family:'Space Grotesk',sans-serif;}
.footer-brand .logo-text{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px;color:#ffffff;}
.footer-desc{font-size:.85rem;color:#a0aec0;line-height:1.6;margin-bottom:24px;max-width:300px;}
.social-links{display:flex;gap:12px;}
.social-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:#ffffff;transition:.3s;}
.social-btn:hover{background:#ffa41c;color:#111;transform:translateY(-3px);}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-links a{font-size:.85rem;color:#cbd5e0;transition:.3s;text-decoration:none;}
.footer-links a:hover{color:#ffa41c;padding-left:4px;}
.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid #3a4f66;font-size:.8rem;color:#718096;position:relative;z-index:1;}

/* ANIMATIONS */
@keyframes float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-20px) scale(1.1);}}
@keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,212,255,.4);}70%{box-shadow:0 0 0 6px rgba(0,212,255,0);}100%{box-shadow:0 0 0 0 rgba(0,212,255,0);}}


/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--nb); }

/* SCROLL REVEAL ANIMATIONS */
.reveal { opacity: 0; transform: translateY(40px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: 0.8s ease-out; }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: 0.8s ease-out; }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: 0.6s ease-out; }
.reveal-scale.active { opacity: 1; transform: scale(1); }

/* MOBILE MENU & RESPONSIVE FIXES */
.nav-links { transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger { z-index: 1001; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media(max-width: 992px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { flex-wrap: wrap; }
  .product-page { grid-template-columns: 1fr; }
}

@media(max-width: 768px) {
  .nav-links { 
    position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; 
    background: rgba(10, 10, 15, 0.98); backdrop-filter: blur(20px); 
    flex-direction: column; justify-content: center; align-items: center; 
    border-left: 1px solid var(--gb); z-index: 1000; box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  }
  .nav-links.active { right: 0; }
  .nav-links a { font-size: 1.2rem; margin: 15px 0; }
  .btn-nav { display: none; }
  .hamburger { display: flex; }
  
  .hero { padding-top: 120px; }
  h1.hero-title { font-size: 2.5rem; }
  .hero-search { flex-direction: column; background: transparent; border: none; padding: 0; }
  .hero-search input { width: 100%; background: var(--glass); border: 1px solid var(--gb); padding: 15px 20px; border-radius: 50px; margin-bottom: 10px; }
  .hero-search button { width: 100%; padding: 15px; }
  
  .floating-cards { display: none; }
  .deals-header { flex-direction: column; align-items: flex-start; }
  .deals-banner { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* DISCOVERY SECTION */
.tag-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 50px;
    background: var(--glass); border: 1px solid var(--gb);
    color: var(--t); font-size: 0.9rem; font-weight: 500;
    transition: 0.3s; cursor: pointer; text-decoration: none;
}
.tag-pill:hover {
    background: linear-gradient(135deg, var(--nb), var(--np));
    border-color: transparent; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,212,255,0.3);
}
.scrolling-tags:hover {
    animation-play-state: paused !important;
}
@keyframes scrollTags {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* AMAZON STYLE SUB-NAV */
.sub-nav {
    position: fixed; top: 70px; left: 0; right: 0; z-index: 999;
    background: #232f3e; border-bottom: 1px solid #1a2430;
    display: flex; align-items: center; padding: 0 5%; gap: 20px;
    height: 40px; overflow-x: auto; white-space: nowrap;
    transition: all 0.4s;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav a { color: #eeeeee; font-size: 0.85rem; font-weight: 500; transition: 0.3s; display: flex; align-items: center; gap: 5px; }
.sub-nav a:hover { color: #ff9900; }
nav.scrolled + .sub-nav { transform: translateY(-110%); }

/* HERO SLIDER (AMAZON STYLE) */
.hero-slider { position: relative; width: 100%; height: 75vh; min-height: 500px; overflow: hidden; margin-top: 110px; }
.slider-container { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; height: 100%; position: relative; display: flex; align-items: center; padding: 0 5%; }
.slide-bg { position: absolute; inset: 0; z-index: -1; }
.slide-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.slide-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, var(--bg) 95%); }
.slide-content { max-width: 600px; z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.slide-content h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; color: #ffffff; }
.slide-content p { font-size: 1.1rem; color: #f0f0f0; margin-bottom: 30px; font-weight: 500; }

.slider-btn { position: absolute; top: 40%; transform: translateY(-50%); width: 50px; height: 80px; background: rgba(0,0,0,0.5); border: 1px solid var(--gb); color: white; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; z-index: 10; border-radius: 8px; backdrop-filter: blur(5px); }
.slider-btn:hover { background: rgba(0,212,255,0.2); border-color: var(--nb); color: var(--nb); }
.slider-prev { left: 2%; }
.slider-next { right: 2%; }

/* HORIZONTAL SCROLLER */
.horizontal-scroll-wrapper { position: relative; width: 100%; padding: 0 20px; }
.horizontal-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0 30px; }
.horizontal-scroll::-webkit-scrollbar { height: 6px; }
.horizontal-scroll::-webkit-scrollbar-track { background: var(--glass); border-radius: 10px; }
.horizontal-scroll::-webkit-scrollbar-thumb { background: var(--gb); border-radius: 10px; }
.horizontal-scroll .product-card { width: 280px; flex: 0 0 auto; }
.scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--gb); color: var(--t); font-size: 1.2rem; z-index: 5; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.scroll-arrow:hover { background: var(--nb); color: #000; }
.scroll-arrow.left { left: -10px; }
.scroll-arrow.right { right: -10px; }

/* QUICK VIEW MODAL */
#quickview-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5,5,8,0.85); backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.4s ease;
    padding: 20px;
}
#quickview-overlay.active {
    opacity: 1; pointer-events: auto;
}
.qv-modal-container {
    background: rgba(10, 10, 15, 0.95); border: 1px solid var(--gb);
    border-radius: 24px; width: 100%; max-width: 850px;
    position: relative; padding: 40px; box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    transform: translateY(30px); transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#quickview-overlay.active .qv-modal-container {
    transform: translateY(0);
}
.qv-close-btn {
    position: absolute; top: 20px; right: 25px;
    background: none; font-size: 2.2rem; color: var(--tm);
    transition: 0.3s; cursor: pointer;
}
.qv-close-btn:hover { color: var(--nb); transform: rotate(90deg); }
.qv-modal-content {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px;
}
.qv-gallery-side {
    display: flex; flex-direction: column; gap: 15px;
}
.qv-main-img-wrap {
    width: 100%; aspect-ratio: 1.1; background: var(--bg2);
    border: 1px solid var(--gb); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qv-main-img {
    width: 100%; height: 100%; object-fit: cover;
}
.qv-thumbs-row {
    display: flex; gap: 10px; overflow-x: auto;
}
.qv-thumb {
    width: 60px; height: 60px; border-radius: 8px;
    object-fit: cover; border: 1px solid var(--gb);
    cursor: pointer; transition: 0.3s;
}
.qv-thumb:hover, .qv-thumb.active {
    border-color: var(--nb); transform: scale(1.05);
}
.qv-info-side {
    display: flex; flex-direction: column; justify-content: center;
}
.qv-category {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--nb); margin-bottom: 8px; font-weight: 600;
}
.qv-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem;
    line-height: 1.3; margin-bottom: 12px;
}
.qv-rating-row {
    display: flex; align-items: center; gap: 6px; font-size: 0.9rem;
    color: #ffb800; margin-bottom: 20px;
}
.qv-rating-row .qv-reviews { color: var(--tm); font-size: 0.8rem; }
.qv-desc {
    color: var(--tm); font-size: 0.92rem; line-height: 1.6;
    margin-bottom: 25px;
}
.qv-price-row {
    display: flex; align-items: flex-end; gap: 12px; margin-bottom: 30px;
}
.qv-price { font-size: 2rem; font-weight: 700; color: var(--t); }
.qv-old-price {
    font-size: 1.1rem; color: var(--ts); text-decoration: line-through;
    margin-bottom: 3px;
}
.qv-buy-btn {
    align-self: flex-start; padding: 14px 35px;
}

@media(max-width: 768px) {
    .qv-modal-content { grid-template-columns: 1fr; gap: 20px; }
    .qv-modal-container { padding: 30px 20px; max-height: 90vh; overflow-y: auto; }
}

/* =========================================
   BLOG & ARTICLE SYSTEM
   ========================================= */
.blog-hero { padding-top: 130px; padding-bottom: 40px; }
.blog-featured-card {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
    background: var(--card); border: 1px solid var(--gb);
    border-radius: 24px; padding: 24px; align-items: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
.bf-image {
    width: 100%; height: 400px; border-radius: 16px; overflow: hidden;
    position: relative;
}
.bf-image img { width: 100%; height: 100%; object-fit: cover; }
.bf-placeholder {
    width: 100%; height: 100%; background: var(--bg);
    display: flex; align-items: center; justify-content: center; color: var(--tm);
}
.bf-content { padding: 20px; }
.blog-cat-badge {
    display: inline-flex; align-items: center; padding: 6px 14px;
    border-radius: 50px; color: #fff; font-size: 0.75rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 16px;
}
.bf-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem;
    line-height: 1.2; font-weight: 800; margin-bottom: 16px; color: var(--t);
}
.bf-excerpt { color: var(--tm); font-size: 1.05rem; line-height: 1.6; margin-bottom: 24px; }
.bf-meta {
    display: flex; gap: 20px; color: var(--ts); font-size: 0.85rem; font-weight: 500;
}
.bf-meta i { color: var(--nb); margin-right: 5px; }

/* Blog Page Layout */
.blog-page { padding-top: 40px; }
.blog-page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 30px; flex-wrap: wrap; gap: 20px;
}
.blog-search-form {
    display: flex; background: var(--card); border: 1px solid var(--gb);
    border-radius: 50px; padding: 5px 5px 5px 20px; max-width: 400px; width: 100%;
}
.blog-search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--t); }
.blog-search-form button {
    width: 40px; height: 40px; border-radius: 50%; background: var(--nb);
    color: #fff; display: flex; align-items: center; justify-content: center;
}

.blog-cat-pills {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px;
}
.cat-pill {
    padding: 10px 20px; border-radius: 50px; background: var(--card);
    border: 1px solid var(--gb); color: var(--t); font-size: 0.85rem;
    font-weight: 600; transition: 0.3s;
}
.cat-pill sup { margin-left: 4px; color: var(--tm); }
.cat-pill:hover, .cat-pill.active {
    background: var(--t); color: var(--bg); border-color: var(--t);
}

.blog-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 40px;
}
.blog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.blog-card {
    background: var(--card); border: 1px solid var(--gb); border-radius: 16px;
    overflow: hidden; transition: 0.3s; display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); border-color: var(--nb); }
.blog-card-img-link { position: relative; display: block; aspect-ratio: 1.6; overflow: hidden; }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-cat-overlay {
    position: absolute; top: 12px; left: 12px; padding: 4px 10px;
    border-radius: 4px; color: #fff; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; z-index: 2;
}
.blog-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { display: flex; gap: 15px; font-size: 0.75rem; color: var(--ts); margin-bottom: 12px; }
.blog-card-meta i { color: var(--nb); }
.blog-card-title {
    font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px;
}
.blog-card-title a { transition: 0.2s; }
.blog-card-title a:hover { color: var(--nb); }
.blog-card-excerpt {
    font-size: 0.9rem; color: var(--tm); line-height: 1.6; margin-bottom: 20px;
    flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-read-more {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem;
    font-weight: 700; color: var(--t); transition: 0.2s; text-transform: uppercase;
}
.blog-read-more i { color: var(--nb); transition: 0.2s; }
.blog-read-more:hover i { transform: translateX(5px); }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 30px; }
.sidebar-widget {
    background: var(--card); border: 1px solid var(--gb);
    border-radius: 16px; padding: 24px;
}
.widget-title {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem;
    font-weight: 700; margin-bottom: 20px; padding-bottom: 12px;
    border-bottom: 1px solid var(--gb); display: flex; align-items: center; gap: 10px;
}

.popular-post-item {
    display: flex; gap: 15px; margin-bottom: 16px; transition: 0.2s;
}
.popular-post-item:last-child { margin-bottom: 0; }
.popular-post-item:hover { transform: translateX(5px); }
.pp-rank {
    width: 28px; height: 28px; background: var(--bg); border: 1px solid var(--gb);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; color: var(--t); flex-shrink: 0;
}
.pp-info strong { display: block; font-size: 0.9rem; line-height: 1.4; margin-bottom: 4px; transition: 0.2s; }
.popular-post-item:hover .pp-info strong { color: var(--nb); }
.pp-info span { font-size: 0.75rem; color: var(--ts); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.sidebar-product-item {
    display: flex; gap: 15px; margin-bottom: 16px;
}
.sidebar-product-item:last-child { margin-bottom: 0; }
.sidebar-product-item img {
    width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gb);
}
.sidebar-product-item strong {
    display: block; font-size: 0.85rem; line-height: 1.4; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-price { font-weight: 700; color: var(--t); display: block; margin-bottom: 4px; }
.sp-stars { font-size: 0.75rem; color: #ffb800; }

/* Single Blog Post */
.blog-post-wrapper {
    max-width: 1200px; margin: 0 auto; padding: 120px 5% 60px;
    display: grid; grid-template-columns: 1fr 340px; gap: 50px;
}
.post-header { margin-bottom: 30px; text-align: center; }
.breadcrumb-nav { margin-bottom: 24px; display: flex; justify-content: center; }
.breadcrumb {
    display: flex; align-items: center; gap: 10px; font-size: 0.85rem;
    font-weight: 500; color: var(--ts); list-style: none; padding: 0; flex-wrap: wrap;
}
.breadcrumb a { color: var(--t); transition: 0.2s; }
.breadcrumb a:hover { color: var(--nb); }
.breadcrumb i { font-size: 0.6rem; }
.post-title {
    font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800; line-height: 1.2; margin-bottom: 24px; color: var(--t);
}
.post-meta {
    display: flex; justify-content: center; gap: 20px; font-size: 0.9rem;
    color: var(--tm); flex-wrap: wrap;
}
.post-meta i { color: var(--nb); margin-right: 6px; }

.post-featured-img {
    width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden;
    margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.post-featured-img img { width: 100%; height: 100%; object-fit: cover; }

.post-excerpt {
    font-size: 1.2rem; line-height: 1.7; color: var(--tm); font-weight: 500;
    margin-bottom: 40px; padding-left: 20px; border-left: 4px solid var(--nb);
}

.post-toc {
    background: var(--card); border: 1px solid var(--gb); border-radius: 12px;
    padding: 24px; margin-bottom: 40px;
}
.toc-header {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; font-size: 1.1rem; margin-bottom: 16px;
}
.toc-toggle {
    background: none; color: var(--nb); font-size: 0.85rem; font-weight: 600;
}
.toc-list { list-style: none; padding: 0; }
.toc-item { margin-bottom: 10px; }
.toc-item:last-child { margin-bottom: 0; }
.toc-item a {
    color: var(--tm); text-decoration: none; font-size: 0.95rem; transition: 0.2s;
}
.toc-item a:hover, .toc-item a.active { color: var(--nb); font-weight: 600; }
.toc-level-3 { padding-left: 20px; }
.toc-level-4 { padding-left: 40px; }

.post-content {
    font-size: 1.1rem; line-height: 1.8; color: var(--t); margin-bottom: 50px;
}
.post-content h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem;
    margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gb);
}
.post-content h3 {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; margin: 30px 0 15px;
}
.post-content p { margin-bottom: 20px; }
.post-content img { border-radius: 12px; margin: 30px 0; max-height: 500px; width: auto; max-width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.post-content ul, .post-content ol { margin-bottom: 20px; padding-left: 20px; }
.post-content li { margin-bottom: 10px; }
.post-content blockquote {
    background: var(--bg); border-left: 4px solid var(--nb); padding: 20px;
    border-radius: 0 8px 8px 0; font-style: italic; color: var(--tm); margin: 30px 0;
}

.post-share {
    display: flex; align-items: center; gap: 20px; padding: 24px;
    background: var(--bg); border-radius: 12px; margin-bottom: 40px;
}
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn-icon {
    padding: 10px 20px; border-radius: 50px; font-size: 0.9rem; font-weight: 600;
    color: #fff; display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.share-btn-icon.twitter { background: #1da1f2; }
.share-btn-icon.facebook { background: #4267B2; }
.share-btn-icon.whatsapp { background: #25D366; }
.share-btn-icon.copy-link { background: var(--t); }
.share-btn-icon:hover { transform: translateY(-2px); opacity: 0.9; }

.author-bio {
    display: flex; gap: 24px; background: var(--card); border: 1px solid var(--gb);
    border-radius: 16px; padding: 30px; margin-bottom: 50px; align-items: center;
}
.author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.author-bio h4 { font-size: 1.2rem; margin-bottom: 8px; }
.author-bio p { color: var(--tm); font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; }
.author-posts-link { font-size: 0.85rem; font-weight: 600; color: var(--nb); display: inline-flex; align-items: center; gap: 5px; }

.related-posts h3 { margin-bottom: 24px; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-post-card { display: block; background: var(--card); border: 1px solid var(--gb); border-radius: 12px; overflow: hidden; transition: 0.3s; }
.related-post-card:hover { transform: translateY(-5px); border-color: var(--nb); }
.related-post-card img, .rp-placeholder { width: 100%; height: 160px; object-fit: cover; }
.rp-placeholder { background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--tm); }
.rp-info { padding: 15px; }
.rp-cat { font-size: 0.7rem; text-transform: uppercase; color: var(--nb); font-weight: 700; margin-bottom: 6px; display: block; }
.rp-info h4 { font-size: 1rem; line-height: 1.4; margin-bottom: 10px; color: var(--t); }
.rp-info span { font-size: 0.8rem; color: var(--ts); }

/* =========================================
   STATIC PAGES (About, Contact, Disclosure)
   ========================================= */
.static-page-section { padding: 120px 5% 80px; }
.static-page-container { max-width: 800px; margin: 0 auto; }
.static-page-header { text-align: center; margin-bottom: 50px; }
.static-page-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin-bottom: 15px; }
.last-updated { color: var(--ts); font-size: 0.9rem; font-style: italic; }
.static-page-content {
    background: var(--card); border: 1px solid var(--gb); border-radius: 20px;
    padding: 50px; font-size: 1.1rem; line-height: 1.8; color: var(--tm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}
.static-page-content h2 { color: var(--t); font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; margin: 40px 0 20px; }
.static-page-content p { margin-bottom: 20px; }
.static-page-content ul { padding-left: 20px; margin-bottom: 20px; }
.static-page-content li { margin-bottom: 10px; }
.disclosure-highlight {
    background: var(--bg); padding: 30px; border-radius: 12px; margin-bottom: 40px;
    border-left: 4px solid var(--nb);
}

/* =========================================
   PRODUCT DETAILS UPGRADES
   ========================================= */
.product-page {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-top: 40px;
}
.product-gallery { position: sticky; top: 100px; align-self: flex-start; }
.main-img-container {
    width: 100%; aspect-ratio: 1; background: var(--bg2); border: 1px solid var(--gb);
    border-radius: 20px; overflow: hidden; position: relative; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
}
.main-img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: transform 0.3s; }
.img-zoom-hint { position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.5); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.thumbnail-list { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
.thumbnail-list::-webkit-scrollbar { height: 4px; }
.thumb {
    width: 80px; height: 80px; border-radius: 12px; object-fit: cover;
    border: 2px solid transparent; cursor: pointer; transition: 0.3s;
    background: var(--bg2); padding: 5px;
}
.thumb.active, .thumb:hover { border-color: var(--nb); transform: translateY(-3px); }

.trust-badges { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.trust-badge { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--tm); background: var(--bg); padding: 10px 15px; border-radius: 8px; border: 1px solid var(--gb); }

.product-info-panel { display: flex; flex-direction: column; }
.p-category-tag a {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: var(--bg); border: 1px solid var(--gb); border-radius: 50px;
    font-size: 0.8rem; font-weight: 600; color: var(--tm); margin-bottom: 20px; transition: 0.3s;
}
.p-category-tag a:hover { color: var(--nb); border-color: var(--nb); }
.prod-title { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; line-height: 1.2; font-weight: 700; margin-bottom: 20px; }
.prod-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--gb); flex-wrap: wrap; }
.stars { display: flex; align-items: center; gap: 6px; font-size: 1.1rem; color: #ffb800; }
.stars span { color: var(--t); font-size: 0.95rem; margin-left: 5px; }
.stock-status { font-weight: 600; font-size: 0.95rem; }

.prod-price-box { background: var(--bg); border: 1px solid var(--nb); border-radius: 16px; padding: 24px; margin-bottom: 30px; position: relative; overflow: hidden; }
.prod-price-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--nb); }
.price-main { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.price-old { font-size: 1.2rem; color: var(--ts); text-decoration: line-through; margin-bottom: 10px; }
.discount-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(204,12,57,0.1); color: var(--no); border-radius: 8px; font-size: 0.85rem; font-weight: 700; }

.ai-summary { background: linear-gradient(135deg, rgba(20,110,180,0.05), transparent); border: 1px solid rgba(20,110,180,0.2); border-radius: 16px; padding: 20px; margin-bottom: 30px; }
.ai-header { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--np); margin-bottom: 12px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ai-summary p { font-size: 1rem; line-height: 1.6; color: var(--tm); }

.product-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.tag-chip { padding: 6px 14px; background: var(--bg); border: 1px solid var(--gb); border-radius: 50px; font-size: 0.8rem; color: var(--tm); font-weight: 500; transition: 0.2s; }
.tag-chip:hover { background: var(--nb); color: #000; border-color: var(--nb); }

.action-group { display: flex; gap: 15px; margin-bottom: 20px; }
.btn-large { flex: 1; padding: 18px 24px; font-size: 1.1rem; justify-content: center; }
.btn-buy-main { background: linear-gradient(180deg, #f8e38c 0%, #f0c14b 100%); border-color: #a88734; color: #111; box-shadow: 0 4px 15px rgba(240,193,75,0.4); }
.btn-buy-main:hover { background: linear-gradient(180deg, #f5d76e 0%, #eab22c 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,193,75,0.6); }
.btn-secondary { background: var(--card); border: 1px solid var(--gb); color: var(--t); transition: 0.3s; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; padding: 12px 24px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: var(--bg); border-color: var(--nb); color: var(--nb); }

.affiliate-notice { font-size: 0.8rem; color: var(--ts); display: flex; gap: 8px; align-items: flex-start; }
.affiliate-notice a { text-decoration: underline; }

.product-countdown { display: flex; align-items: center; justify-content: space-between; background: rgba(204,12,57,0.05); border: 1px solid rgba(204,12,57,0.2); padding: 15px 20px; border-radius: 12px; margin-top: 30px; }
.product-countdown span { color: var(--no); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cd-timer { display: flex; gap: 8px; }
.cd-block { background: var(--no); color: #fff; padding: 6px 12px; border-radius: 6px; text-align: center; display: flex; flex-direction: column; min-width: 50px; }
.cd-block span { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; }
.cd-block small { font-size: 0.6rem; }
.cd-sep { color: var(--no); font-size: 1.5rem; font-weight: 700; align-self: center; }

/* Specs Table */
.specs-section { padding: 60px 5%; max-width: 1000px; margin: 0 auto; }
.specs-table-wrapper { background: var(--card); border: 1px solid var(--gb); border-radius: 16px; overflow: hidden; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { padding: 16px 24px; border-bottom: 1px solid var(--gb); text-align: left; }
.specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
.specs-table th { width: 35%; background: var(--bg); color: var(--tm); font-weight: 600; font-size: 0.95rem; }
.specs-table td { font-size: 0.95rem; color: var(--t); }

/* FAQs */
.faqs-section { padding: 60px 5%; max-width: 900px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 15px; }
.faq-item { background: var(--card); border: 1px solid var(--gb); border-radius: 12px; overflow: hidden; }
.faq-question { width: 100%; padding: 20px; text-align: left; background: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; font-weight: 600; color: var(--t); transition: 0.3s; }
.faq-question:hover { color: var(--nb); }
.faq-icon { color: var(--nb); transition: 0.3s; }
.faq-question[aria-expanded="true"] { background: var(--bg); border-bottom: 1px solid var(--gb); }
.faq-answer { padding: 20px; font-size: 0.95rem; line-height: 1.6; color: var(--tm); background: var(--card); }

/* Reviews */
.reviews-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }
.reviews-layout { display: grid; grid-template-columns: 350px 1fr; gap: 50px; }
.rating-summary { position: sticky; top: 100px; }
.big-rating { font-family: 'Space Grotesk', sans-serif; font-size: 4rem; font-weight: 800; line-height: 1; color: var(--t); margin-bottom: 10px; }
.rating-count { font-size: 0.9rem; color: var(--tm); margin: 10px 0 24px; }
.rating-bar-row { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; font-size: 0.85rem; color: var(--tm); }
.rating-bar-bg { flex: 1; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; border: 1px solid var(--gb); }
.rating-bar-fill { height: 100%; border-radius: 5px; }
.reviews-list { display: flex; flex-direction: column; gap: 24px; }
.review-card { background: var(--card); border: 1px solid var(--gb); border-radius: 16px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.review-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.verified-badge { display: block; font-size: 0.75rem; color: var(--ng); font-weight: 600; margin-top: 4px; }
.review-stars { margin-bottom: 10px; }
.review-title { display: block; font-size: 1.1rem; margin-bottom: 10px; color: var(--t); }
.review-content { font-size: 0.95rem; line-height: 1.6; color: var(--tm); margin-bottom: 20px; }
.review-meta { font-size: 0.8rem; color: var(--ts); border-top: 1px solid var(--gb); padding-top: 15px; }

/* Responsive Adjustments */
@media(max-width: 992px) {
    .blog-post-wrapper { grid-template-columns: 1fr; }
    .blog-sidebar { margin-top: 40px; border-top: 1px solid var(--gb); padding-top: 40px; }
    .product-page { grid-template-columns: 1fr; gap: 40px; }
    .reviews-layout { grid-template-columns: 1fr; gap: 40px; }
    .rating-summary { position: static; }
}
@media(max-width: 768px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-layout { grid-template-columns: 1fr; }
    .action-group { flex-direction: column; }
    .specs-table th { width: 40%; }
    .static-page-content { padding: 30px 20px; }
    .static-page-header h1 { font-size: 2rem; }
}

/* ==========================================
   PAGE HERO SECTIONS
   ========================================== */
.page-hero {
    padding: 140px 5% 60px;
    text-align: center;
    background: var(--bg2);
    border-bottom: 1px solid var(--gb);
    position: relative;
    overflow: hidden;
}
.page-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    margin: 20px 0 15px;
    line-height: 1.1;
    color: var(--t);
    letter-spacing: -1px;
}
.page-hero-sub {
    font-size: 1.1rem;
    color: var(--tm);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==========================================
   TRENDING PAGE
   ========================================== */
.trending-hero {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(255,107,43,0.05) 100%);
}
.trending-ticker {
    margin-top: 40px;
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--no);
    border-radius: 50px;
    padding: 5px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(255,107,43,0.1);
}
.ticker-label {
    background: linear-gradient(135deg, var(--no), #ff3366);
    color: #fff;
    padding: 8px 20px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
}
.ticker-inner {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
    gap: 20px;
    padding-left: 20px;
    font-size: 0.95rem;
    color: var(--t);
    font-weight: 500;
}
.ticker-inner span:not(.ticker-dot) {
    cursor: pointer;
    transition: color 0.2s;
}
.ticker-inner span:not(.ticker-dot):hover {
    color: var(--no);
}
.ticker-dot {
    color: var(--no);
}
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================
   DEALS PAGE
   ========================================== */
.deals-page-hero {
    padding: 140px 5% 60px;
    background: linear-gradient(135deg, #131921 0%, #0a0d11 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    overflow: hidden;
}
.deals-page-hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,255,136,0.1) 0%, transparent 70%);
    border-radius: 50%;
}
.deals-hero-content {
    flex: 1;
    max-width: 600px;
    text-align: left;
    position: relative;
    z-index: 2;
}
.deals-hero-content .page-hero-title {
    color: #fff;
    text-align: left;
}
.deals-hero-content .page-hero-sub {
    color: #a0aab2;
    text-align: left;
    margin: 0;
}
.deals-countdown-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    min-width: 350px;
    position: relative;
    z-index: 2;
}
.countdown-label {
    color: #a0aab2;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.ct-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.4);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,255,136,0.2);
}
.ct-block span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ng);
    line-height: 1;
}
.ct-block small {
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    letter-spacing: 1px;
}
.ct-sep {
    font-size: 2.5rem;
    color: rgba(255,255,255,0.2);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
}
.deals-stats-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 25px 5%;
    background: var(--bg2);
    border-bottom: 1px solid var(--gb);
}
.deal-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tm);
    font-size: 0.95rem;
}
.deal-stat i {
    color: var(--ng);
    font-size: 1.2rem;
}
.deal-stat strong {
    color: var(--t);
}

/* ==========================================
   FILTERS BAR
   ========================================== */
.filters-bar {
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gb);
    position: sticky;
    top: 70px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    z-index: 90;
}
body.dark-mode .filters-bar {
    background: rgba(19, 25, 33, 0.9);
}
.filter-cats {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
}
.filter-cats::-webkit-scrollbar { display: none; }
.filter-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg2);
    border: 1px solid var(--gb);
    border-radius: 40px;
    color: var(--t);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}
.filter-cat i { color: var(--tm); }
.filter-cat:hover {
    border-color: var(--nb);
    color: var(--nb);
}
.filter-cat.active {
    background: var(--nb);
    border-color: var(--nb);
    color: #fff;
}
.filter-cat.active i { color: #fff; }
.sort-select {
    appearance: none;
    background: var(--bg2) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat right 15px center;
    background-size: 10px;
    padding: 10px 40px 10px 20px;
    border: 1px solid var(--gb);
    border-radius: 40px;
    color: var(--t);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.sort-select:focus {
    outline: none;
    border-color: var(--nb);
}

/* ==========================================
   PRODUCT GRID OVERRIDES FOR PAGES
   ========================================== */
.trending-page .product-grid,
.deals-page .product-grid {
    padding: 50px 5%;
}
.empty-state {
    text-align: center;
    padding: 80px 20px;
}
.empty-state h3 {
    font-size: 1.5rem;
    margin: 20px 0 10px;
}
.empty-state p {
    color: var(--tm);
    margin-bottom: 25px;
}

/* ==========================================
   RESPONSIVE FIXES
   ========================================== */
@media (max-width: 991px) {
    .deals-page-hero {
        flex-direction: column;
        text-align: center;
        padding-top: 120px;
    }
    .deals-hero-content {
        text-align: center;
    }
    .deals-hero-content .page-hero-title,
    .deals-hero-content .page-hero-sub {
        text-align: center;
    }
    .deals-stats-bar {
        flex-wrap: wrap;
        gap: 20px;
    }
    .filters-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .filter-cats {
        width: 100%;
    }
    .filter-sort {
        width: 100%;
    }
    .sort-select {
        width: 100%;
    }
    .page-hero-title {
        font-size: 2.8rem;
    }
}
@media (max-width: 768px) {
    .ct-block {
        padding: 10px 15px;
    }
    .ct-block span {
        font-size: 1.8rem;
    }
    .ct-sep {
        font-size: 1.8rem;
    }
    .deals-countdown-box {
        min-width: 100%;
    }
}

/* Ad placement device visibility */
@media (max-width: 768px) {
    .ad-desktop-only { display: none !important; }
}
@media (min-width: 769px) {
    .ad-mobile-only { display: none !important; }
}

/* Wishlist active state */
.wishlist-btn.active i { color: #e11d48; }