@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&display=swap');

/* =========================
GLOBAL
========================= */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Exo 2",sans-serif; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body { background:#070b14; color:#fff; overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
a, button, [role="button"], .btn, .menu-icon, .close-btn, select { -webkit-tap-highlight-color:transparent; outline:none; -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-tap-highlight-color:transparent; }
a:focus, button:focus, input:focus, textarea:focus, select:focus, [role="button"]:focus { outline:none; -webkit-tap-highlight-color:transparent; }

/* =========================
SCROLLBAR (site-wide + inside modals)
========================= */
/* Firefox */
* { scrollbar-width:thin; scrollbar-color:rgba(var(--color-primary-rgb),0.5) rgba(255,255,255,0.04); }

/* Chrome / Edge / Safari / mobile WebKit */
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:10px; }
*::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--color-primary),#4f35cc);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));
  background-clip:content-box;
}
*::-webkit-scrollbar-corner { background:transparent; }

/* The USDT modal uses gold, not the site's purple primary — its own
   scrollbar matches that theme instead of the global one above. */
#usdtModal *::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#fbbf24,#f59e0b); background-clip:content-box; }
#usdtModal { scrollbar-color:rgba(251,191,36,0.55) rgba(255,255,255,0.04); }

/* =========================
PRELOADER
========================= */
#preloader { position:fixed; width:100%; height:100vh; background:#070b14; z-index:99999; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.loader { width:70px; height:70px; border:6px solid rgba(255,255,255,0.08); border-top:6px solid var(--color-primary); border-radius:50%; animation:spin 1s linear infinite; }
.loading-text { margin-top:20px; font-size:22px; font-weight:700; color:var(--color-primary); }
@keyframes spin { 100% { transform:rotate(360deg); } }

/* =========================
PAYMENT MODAL
========================= */
.payment-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); display:none; justify-content:center; align-items:center; z-index:999999; padding:20px; backdrop-filter:blur(6px); }
.payment-box { width:100%; max-width:900px; height:90vh; background:#fff; border-radius:18px; overflow:hidden; position:relative; animation:popupAnim .3s ease; box-shadow:0 0 40px rgba(0,0,0,0.3); }
.payment-header { height:60px; background:#111827; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:16px; font-weight:600; }
.payment-header i { margin-right:8px; color:var(--color-primary); }
.close-btn { font-size:24px; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; }
.close-btn:hover { background:rgba(255,255,255,0.1); color:var(--color-primary); }
.payment-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:600; color:var(--color-primary); z-index:2; }
.payment-loading i { margin-right:8px; }
#paymentFrame { width:100%; height:calc(100% - 60px); border:none; background:#fff; }
@keyframes popupAnim { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

/* =========================
HEADER
========================= */
header { width:100%; padding:18px 8%; display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; background:rgba(7,11,20,0.88); backdrop-filter:blur(14px); z-index:1000; border-bottom:1px solid rgba(255,255,255,0.05); }
.logo { display:flex; align-items:center; gap:10px; font-size:26px; font-weight:700; text-decoration:none; color:#fff; }
.logo-icon { color:var(--color-primary); font-size:28px; }
.logo span { background:linear-gradient(90deg,#fff,var(--color-primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:flex; flex-direction:column; line-height:1.15; }
.logo-tagline {font-size: 10px;font-weight:500;letter-spacing:0.3px;background:none;-webkit-background-clip:initial;-webkit-text-fill-color:#8a8a8a;color:#8a8a8a;margin-top:2px;}
.menu { display:flex; align-items:center; gap:26px; }
.menu a { text-decoration:none; color:#c7c7c7; font-weight:500; transition:0.3s; display:flex; align-items:center; gap:7px; font-size:14px; }
.menu a i { font-size:13px; }
.menu a:hover { color:var(--color-primary); }
.menu-icon { display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; cursor:pointer; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); font-size:20px; color:#fff; }
.menu-backdrop { display:none; }
.mobile-menu-close { display:none; }
.mobile-menu-divider { display:none; } /* desktop nav has no section divider; shown only in the mobile drawer */

/* =========================
HERO
========================= */
.hero { width:100%; min-height:100vh; padding:140px 8% 90px; display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:center; background:radial-gradient(circle at top right,rgba(var(--color-primary-rgb),0.15),transparent 40%); }
.premium-badge { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:50px; background:rgba(var(--color-primary-rgb),0.10); border:1px solid rgba(var(--color-primary-rgb),0.35); color:#ece7ff; font-size:13px; font-weight:600; box-shadow:0 0 18px rgba(var(--color-primary-rgb),0.18); transition:0.3s ease; margin-bottom:20px; }
.premium-badge:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(var(--color-primary-rgb),0.28); }
.badge-icon { width:22px; height:22px; min-width:22px; min-height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-primary); color:#fff; font-size:11px; font-weight:bold; line-height:1; }
.badge-icon i { line-height:1; }
.hero-left h1 { font-size:62px; line-height:0.95; font-weight:800; margin-bottom:18px; text-transform:uppercase; }
.hero-left h1 span { color:var(--color-primary); }
.hero-desc { color:#a3a3a3; line-height:1.9; margin-bottom:26px; max-width:580px; }
.hero-buttons { display:flex; gap:16px; margin-bottom:45px; flex-wrap:wrap; }
.btn { padding:14px 30px; border-radius:14px; text-decoration:none; font-weight:600; transition:0.3s; display:inline-flex; align-items:center; gap:8px; font-size:15px; }
.primary-btn { background:var(--color-primary); color:#fff; box-shadow:0 8px 24px rgba(var(--color-primary-rgb),0.35); }
.secondary-btn { border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#fff; }
.btn:hover { transform:translateY(-3px); }
.hero-stats { display:flex; gap:40px; flex-wrap:wrap; }
.stat-box h2 { font-size:52px; font-weight:800; display:flex; align-items:center; gap:12px; }
.stat-icon { font-size:36px; color:var(--color-primary); }
.stat-box p {margin-top: 5px;color:#919191;font-size: 13px;}
.hero-right { display:flex; flex-direction:column; gap:20px; }
.hero-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:24px; padding:28px; transition:0.35s; }
.hero-card:hover { transform:translateY(-8px); border-color:rgba(var(--color-primary-rgb),0.25); box-shadow:0 15px 40px rgba(0,0,0,0.35); }
.card-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); margin-bottom:16px; }
.hero-card h3 { font-size:22px; margin-bottom:6px; }
.hero-card p { color:#919191; line-height:1.8; font-size:14px; }

/* =========================
SECTION
========================= */
.section { padding:100px 8%; }
.section-title { text-align:center; margin-bottom:55px; }
.section-title h2 { font-size:46px; margin-bottom:12px; }
.section-title p { color:#999; font-size:15px; }

/* =========================
CATEGORY TAB BAR
========================= */
.tab-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:50px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { padding:11px 24px; border-radius:50px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:#aaa; font-size:14px; font-weight:600; cursor:pointer; transition:0.3s; font-family:"Exo 2",sans-serif; display:flex; align-items:center; gap:8px; }
.tab-btn i { font-size:13px; }
.tab-btn:hover { border-color:rgba(var(--color-primary-rgb),0.4); color:#fff; }
.tab-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; box-shadow:0 6px 20px rgba(var(--color-primary-rgb),0.35); }

/* =========================
PRODUCT SEARCH BAR
========================= */
.product-search-bar { max-width:480px; margin:0 auto 30px; position:relative; display:flex; align-items:center; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:50px; padding:0 18px; transition:0.3s; }
.product-search-bar:focus-within { border-color:rgba(var(--color-primary-rgb),0.5); box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.12); }
.product-search-bar .search-icon { color:var(--color-primary); font-size:15px; flex-shrink:0; }
.product-search-bar input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-family:"Exo 2",sans-serif; font-size:14.5px; padding:13px 12px; }
.product-search-bar input::placeholder { color:#777; }
.search-clear-btn { background:transparent; border:none; color:#777; cursor:pointer; font-size:14px; padding:6px; display:none; align-items:center; justify-content:center; flex-shrink:0; transition:0.2s; }
.search-clear-btn:hover { color:#fff; }
.search-clear-btn.visible { display:flex; }
.search-no-results { text-align:center; color:#919191; font-size:15px; margin-bottom:30px; }
.product-card.search-hidden { display:none !important; }

/* =========================
SEARCH + SORT ROW
========================= */
.search-sort-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; max-width:700px; margin:0 auto 30px; }
.search-sort-row .product-search-bar { margin:0; flex:1 1 320px; }
.product-search-bar { height:50px !important; box-sizing:border-box !important; }
.sort-bar select { height:50px !important; box-sizing:border-box !important; }
.sort-bar { position:relative; flex:0 0 auto; }
.sort-bar select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  height:50px; box-sizing:border-box; min-width:190px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:50px;
  color:#fff; font-family:"Exo 2",sans-serif; font-size:14px; font-weight:600;
  padding:0 38px 0 20px; cursor:pointer; outline:none; transition:0.3s;
}
.sort-bar select:focus { border-color:rgba(var(--color-primary-rgb),0.5); box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.12); }
.sort-bar select option { background:#111827; color:#fff; }
.sort-bar::after {
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px;
  position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#777; pointer-events:none;
}
@media (max-width:600px) {
  .search-sort-row { flex-direction:column !important; align-items:stretch !important; gap:12px !important; margin-bottom:24px !important; }
  .search-sort-row .product-search-bar { flex:none !important; width:100% !important; max-width:none !important; }
  .sort-bar, .sort-bar select { width:100% !important; }
}

/* =========================
TRUST BADGE / SOCIAL PROOF POPUP
========================= */
.trust-popup { position:fixed; left:20px; bottom:20px; max-width:330px; background:rgba(15,18,30,0.95); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:14px 16px; display:flex; align-items:center; gap:12px; backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:9000; transform:translateY(120%); opacity:0; transition:transform 0.45s cubic-bezier(.22,1,.36,1), opacity 0.45s ease; pointer-events:none; }
.trust-popup.show { transform:translateY(0); opacity:1; }
.trust-popup-icon { width:40px; height:40px; border-radius:50%; background:rgba(var(--color-primary-rgb),0.15); border:1px solid rgba(var(--color-primary-rgb),0.4); color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.trust-popup-text { font-size:13.5px; line-height:1.4; color:#e6e6e6; }
.trust-popup-text strong { color:#fff; font-weight:700; }
.trust-popup-text .tp-product { color:var(--color-primary-light); font-weight:600; }
.trust-popup-time { font-size:11.5px; color:#919191; margin-top:2px; display:block; }
@media (max-width:600px) {
  .trust-popup { left:12px; right:12px; bottom:12px; max-width:none; }
}

/* =========================
CATEGORY SECTION
========================= */
.cat-section { margin-bottom:65px; }
.cat-header { margin-bottom:24px; }
.cat-label { display:inline-flex; align-items:center; gap:9px; padding:10px 22px; border-radius:50px; font-size:15px; font-weight:700; }
.themes-label   { background:rgba(124,58,237,0.12);  border:1px solid rgba(124,58,237,0.35);  color:#c4b5fd; }
.safelinks-label{ background:rgba(13,148,136,0.12);  border:1px solid rgba(13,148,136,0.35);  color:#5eead4; }
.codes-label    { background:rgba(2,132,199,0.12);   border:1px solid rgba(2,132,199,0.35);   color:#7dd3fc; }
.tools-label    { background:rgba(234,108,0,0.12);   border:1px solid rgba(234,108,0,0.35);   color:#fdba74; }

/* =========================
PRODUCTS GRID
========================= */
.products { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
.product-card { background:#111827; border-radius:22px; transition:0.35s; position:relative; border:1px solid rgba(255,255,255,0.05); overflow:visible; height:100%; display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-10px); box-shadow:0 15px 35px rgba(var(--color-primary-rgb),0.12); }
.product-card img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:0.4s; border-radius:22px 22px 0 0; display:block; }
.product-card:hover img { transform:scale(1.04); border-radius:22px;}
.product-content { padding:15px; display:flex; flex-direction:column; flex:1; }
.product-content h3 { font-size:19px; margin-bottom:5px; line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.product-content p { color:#999; font-size:12px; margin-bottom:8px; line-height:1.5; min-height:3em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.product-content p.prod-desc { min-height:0; }
.price-box { display:flex; gap:10px; align-items:center; margin-bottom:14px; min-height:32px; }
.mrp { color:#919191; text-decoration:line-through; font-size:13px; }
.price { color:var(--color-primary); font-size:22px; font-weight:700; }
.already-purchased-text { display:inline-flex; align-items:center; gap:6px; color:var(--color-secondary); font-size:13px; font-weight:700; }
.product-buttons { display:flex; gap:10px; }
.demo-btn, .buy-btn { flex:1; padding:11px 8px; border-radius:12px; text-decoration:none; text-align:center; font-weight:600; transition:0.3s; display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; }
.demo-btn { background:#1f2937; color:#fff; }
.buy-btn { background:var(--color-primary); color:#fff; }
.download-btn { background:linear-gradient(135deg,var(--color-secondary),#16a34a) !important; color:#fff !important; }
.download-btn:hover { background:linear-gradient(135deg,#16a34a,#15803d) !important; transform:translateY(-3px); }
.purchased-badge { position:absolute; top:14px; left:14px; background:var(--color-secondary); color:#fff; font-size:12px; font-weight:700; padding:5px 13px; border-radius:50px; display:flex; align-items:center; gap:5px; z-index:10; box-shadow:0 5px 20px rgba(var(--color-secondary-rgb),0.35); }

/* =========================
WISHLIST BUTTON
========================= */
.wishlist-btn { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(7,11,20,0.65); border:1px solid rgba(255,255,255,0.12); color:#cbd5e1; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; backdrop-filter:blur(6px); transition:0.25s; z-index:3; }
.wishlist-btn:hover { border-color:rgba(239,68,68,0.5); color:#f87171; transform:scale(1.08); }
.wishlist-btn.active { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.5); color:#ef4444; }
.wishlist-btn.active i { font-weight:900; }
.wishlist-btn.pulse { animation:wishlistPulse 0.4s ease; }
@keyframes wishlistPulse { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } }
.already-bought { border-color:rgba(var(--color-secondary-rgb),0.25) !important; }
.already-bought::before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(var(--color-secondary-rgb),0.04),transparent); pointer-events:none; }
.demo-btn:hover, .buy-btn:hover { transform:translateY(-3px); }

/* PRODUCT CATEGORY TAGS */
.prod-cat-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:50px; align-self:flex-start; flex:0 0 auto; font-size:11px; font-weight:700; margin-bottom:8px; }
.prod-rating { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12.5px; color:#8b94a7; }
.prod-rating i { color:#f59e0b; font-size:12px; }
.prod-rating strong { color:#c3c9d6; font-weight:700; }
.themes-tag { background:rgba(var(--color-primary-rgb),0.15); color:var(--color-primary-light); }
.codes-tag { background:rgba(0,180,216,0.12); color:#67e8f9; }
.plugins-tag { background:rgba(245,158,11,0.12); color:#fcd34d; }
.tools-tag { background:rgba(var(--color-secondary-rgb),0.12); color:#86efac; }

/* BADGES */
.free-badge, .discount-badge { position:absolute; top:14px; left:14px; color:#fff; padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700; z-index:10; display:flex; align-items:center; gap:5px; }
.free-badge { background:var(--color-secondary); box-shadow:0 5px 20px rgba(var(--color-secondary-rgb),0.35); }
.discount-badge { background:#ef4444; box-shadow:0 5px 20px rgba(239,68,68,0.35); }

/* COMING SOON */
.coming-soon-card { position:relative; }
.coming-soon-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(7,11,20,0.45); border-radius:22px; display:flex; align-items:flex-start; justify-content:flex-end; padding:14px; z-index:5; pointer-events:none; }
.coming-soon-overlay span { background:rgba(var(--color-primary-rgb),0.85); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:50px; display:flex; align-items:center; gap:5px; }
[data-cat="safelinks"] .coming-soon-overlay span { background:rgba(var(--color-primary-rgb),0.85); }

/* =========================
WHY CHOOSE US
========================= */
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.feature-card { position:relative; padding:30px; border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06); overflow:hidden; transition:0.4s; }
.feature-card::before { content:""; position:absolute; top:-80px; right:-80px; width:180px; height:180px; background:rgba(var(--color-primary-rgb),0.08); border-radius:50%; filter:blur(20px); }
.feature-card:hover { transform:translateY(-10px); border-color:rgba(var(--color-primary-rgb),0.25); box-shadow:0 15px 40px rgba(0,0,0,0.35); }
.feature-icon { width:65px; height:65px; border-radius:20px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); margin-bottom:18px; border:1px solid rgba(255,255,255,0.05); }
.feature-card h3 { font-size:22px; font-weight:700; margin-bottom:8px; }
.feature-card p { font-size:14px; line-height:1.9; color:#b3b3b3; }

/* =========================
CONTACT SECTION
========================= */
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.contact-card { background:#111827; border:1px solid rgba(255,255,255,0.06); border-radius:22px; padding:36px 24px; text-align:center; text-decoration:none; color:#fff; transition:0.35s; display:flex; flex-direction:column; align-items:center; gap:14px; }
.contact-card:hover { transform:translateY(-8px); border-color:rgba(var(--color-primary-rgb),0.3); box-shadow:0 15px 35px rgba(0,0,0,0.3); }
.contact-card h3 { font-size:18px; font-weight:700; }
.contact-card p { color:#999; font-size:13px; }

/* =========================
FOOTER
========================= */
footer { background:#0b1120; padding:80px 8% 30px; margin-top:40px; border-top:1px solid rgba(255,255,255,0.05); }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; }
.footer-box h3 { margin-bottom:20px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.footer-text { color:#919191; margin-top:10px; line-height:1.9; font-size:14px; }
.footer-links { display:flex; flex-direction:column; gap:12px; }
.footer-links a { color:#919191; text-decoration:none; font-size:14px; display:flex; align-items:center; gap:8px; transition:0.3s; }
.footer-links a i { font-size:10px; color:var(--color-primary); }
.footer-links a:hover { color:var(--color-primary); padding-left:4px; }
.social-links { display:flex; gap:14px; margin-top:20px; }
.social-links a { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:#aaa; font-size:17px; text-decoration:none; transition:0.3s; }
.social-links a:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; transform:translateY(-3px); }
.bottom-footer { margin-top:50px; padding-top:25px; border-top:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.copyright { color:#919191; font-size:13px; display:flex; align-items:center; gap:6px; }
.payment-icons { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pay-box { min-width:70px; height:38px; padding:0 14px; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:#ccc; border-radius:10px; font-size:13px; font-weight:600; transition:0.3s; }
.pay-box:hover { background:rgba(var(--color-primary-rgb),0.15); border-color:rgba(var(--color-primary-rgb),0.3); }
.pay-box i { font-size:12px; color:var(--color-primary); }

/* =========================
BACK TO TOP
========================= */
#topBtn { position:fixed; right:24px; bottom:24px; width:52px; height:52px; border:none; outline:none; border-radius:16px; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:999; opacity:0; visibility:hidden; transition:0.3s; box-shadow:0 10px 30px rgba(var(--color-primary-rgb),0.35); font-size:17px; }
#topBtn.show { opacity:1; visibility:visible; }
#topBtn:hover { transform:translateY(-5px); }

/* =========================
RESPONSIVE — TABLET
========================= */
@media(max-width:1100px) {
  .products { grid-template-columns:repeat(2,1fr); }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:repeat(2,1fr); }
}

/* =========================
RESPONSIVE — MOBILE
========================= */
@media(max-width:768px) {
  header { padding:15px 20px; }
  .logo { font-size:21px; }
  .menu-icon { display:flex; z-index:997; }
  body.menu-open { overflow:hidden; }

  .menu-backdrop {
    display:block; position:fixed; inset:0; background:rgba(6,10,18,0.7); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    z-index:998; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
  }
  .menu-backdrop.active { opacity:1; visibility:visible; }

  .menu {
    position:fixed; top:0; right:0; bottom:0; width:min(300px, 82vw); height:100vh;
    background:linear-gradient(165deg,#131b2e 0%,#0a0f1c 100%);
    border-radius:0; border-left:1px solid rgba(255,255,255,0.08);
    box-shadow:-24px 0 60px rgba(0,0,0,0.55);
    padding:80px 20px 30px; flex-direction:column; align-items:stretch; gap:5px;
    opacity:0; visibility:hidden; transform:translateX(100%);
    transition:transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, visibility 0.35s;
    overflow-y:auto; z-index:999;
  }
  .menu.active { opacity:1; visibility:visible; transform:translateX(0); }

  .mobile-menu-close {
    display:flex; position:absolute; top:20px; right:20px; width:38px; height:38px;
    align-items:center; justify-content:center; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1); border-radius:10px; color:#fff; font-size:15px; cursor:pointer;
    transition:background 0.2s;
  }
  .mobile-menu-close:hover { background:rgba(255,255,255,0.12); }

  .menu a { padding:13px 14px; border-radius:12px; transition:background 0.2s, opacity 0.3s ease, transform 0.3s ease; }
  .menu a:hover, .menu a:active { background:rgba(255,255,255,0.05); }
  .menu a i { width:18px; text-align:center; color:var(--color-primary-light,#9d8cff); }

  .menu-account-link { margin-top:4px; }

  .mobile-menu-divider { display:block; height:1px; background:rgba(255,255,255,0.08); margin:10px 4px; }

  .menu .currency-switch { margin:14px 4px 0; align-self:stretch; }
  .menu .currency-switch .currency-btn { flex:1; text-align:center; }

  /* Staggered entrance for nav links only (nth-of-type ignores the close
     button / divider / currency-switch siblings, so numbering stays clean) */
  .menu a { opacity:0; transform:translateX(16px); }
  .menu.active a { opacity:1; transform:translateX(0); }
  .menu.active a:nth-of-type(1) { transition-delay:.05s; }
  .menu.active a:nth-of-type(2) { transition-delay:.09s; }
  .menu.active a:nth-of-type(3) { transition-delay:.13s; }
  .menu.active a:nth-of-type(4) { transition-delay:.17s; }
  .menu.active a:nth-of-type(5) { transition-delay:.21s; }
  .menu.active a:nth-of-type(6) { transition-delay:.25s; }
  .menu.active a:nth-of-type(7) { transition-delay:.29s; }
  .menu.active a:nth-of-type(8) { transition-delay:.33s; }

  .hero { grid-template-columns:1fr; padding:120px 20px 70px; gap:50px; }
  .hero-left h1 { font-size:38px; }
  .hero-buttons { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
  .hero-stats { gap:15px; justify-content:center; }
  .stat-box h2 {font-size: 20px;}
  .stat-icon { font-size:25px; }
  .section { padding:70px 20px; }
  .section-title h2 { font-size:32px; }
  .tab-bar { gap:8px; }
  .tab-btn { padding:9px 16px; font-size:13px; }
  .products { grid-template-columns:repeat(2,1fr); gap:14px; }
  .product-content h3 { font-size:14px; }
  .product-content p { font-size:11px; }
  .price { font-size:18px; }
  .demo-btn, .buy-btn { font-size:11px; padding:9px 6px; }
  .features-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:repeat(2,1fr); }
  .footer-content { grid-template-columns:1fr; }
  .bottom-footer { flex-direction:column; text-align:center; }
  .premium-badge { padding:8px 14px; font-size:11px; }
  .badge-icon { width:18px; height:18px; min-width:18px; min-height:18px; flex-shrink:0; font-size:9px; }
}

@media(max-width:500px) {
  .products { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .hero-right { display:none; }
}

/* NEW / HOT badges */
.new-badge { position:absolute; top:14px; left:14px; background:#10b981; color:#fff; padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700; z-index:10; display:flex; align-items:center; gap:5px; box-shadow:0 5px 20px rgba(16,185,129,0.35); }
.hot-badge { position:absolute; top:14px; left:14px; background:#f97316; color:#fff; padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700; z-index:10; display:flex; align-items:center; gap:5px; box-shadow:0 5px 20px rgba(249,115,22,0.35); }

/* Payment loading flex fix */
.payment-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:17px; font-weight:600; color:var(--color-primary); z-index:2; display:flex; align-items:center; gap:10px; }


/* =========================
REVIEWS — MARQUEE SLIDER
========================= */
.marquee-wrap {
  overflow: hidden;
  position: relative;
  margin-bottom: 36px;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee-slide 38s linear infinite;
}
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* =========================
FEATURED REVIEWS (admin-highlighted spotlight)
========================= */
.featured-reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; max-width:1100px; margin:0 auto 45px; }
.featured-review-card {
  position: relative;
  background: linear-gradient(160deg, rgba(var(--color-primary-rgb),0.08), rgba(17,24,39,0.6));
  border: 1px solid rgba(var(--color-primary-rgb),0.3);
  border-radius: 22px;
  padding: 28px 26px 24px;
  box-shadow: 0 14px 40px rgba(var(--color-primary-rgb),0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fr-quote-icon { color: rgba(var(--color-primary-rgb),0.35); font-size: 26px; }
.fr-stars { display:flex; gap:3px; }
.fr-stars i { color:#f59e0b; font-size:13px; }
.fr-text { color:#dbe1ea; font-size:14.5px; line-height:1.75; flex:1; }
.fr-top { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); }
.fr-top .reviewer-info span { color:var(--color-primary-light); }

.review-card {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 24px;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.review-card:hover {
  border-color: rgba(var(--color-primary-rgb),0.3);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.review-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviewer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--color-primary-rgb),0.15);
  color: var(--color-primary-light);
}
.reviewer-info { flex: 1; min-width: 0; overflow: hidden; }
.reviewer-info h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reviewer-info span { font-size: 11px; color: #919191; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.review-stars { display: flex; gap: 3px; margin-left: auto; }
.review-stars i { color: #f59e0b; font-size: 12px; }
.review-text {
  color: #999;
  font-size: 13px;
  line-height: 1.8;
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(var(--color-primary-rgb),0.1);
  border: 1px solid rgba(var(--color-primary-rgb),0.18);
  border-radius: 50px;
  color: var(--color-primary-light);
  font-size: 11px;
  font-weight: 600;
  align-self: flex-start;
}
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(var(--color-primary-rgb),0.06);
  border: 1px solid rgba(var(--color-primary-rgb),0.15);
  border-radius: 16px;
  padding: 16px 28px;
}
.reviews-summary .summary-stars { display: flex; gap: 4px; }
.reviews-summary .summary-stars i { color: #f59e0b; font-size: 17px; }
.reviews-summary .summary-text { color: #aaa; font-size: 14px; }
.reviews-summary .summary-text strong { color: #fff; }
}

/* Per-tab active colors */
.tab-btn[data-tab="all"].active      { background:var(--color-primary); border-color:var(--color-primary); box-shadow:0 6px 20px rgba(var(--color-primary-rgb),0.35); }
.tab-btn[data-tab="themes"].active   { background:#7c3aed; border-color:#7c3aed; box-shadow:0 6px 20px rgba(124,58,237,0.35); }
.tab-btn[data-tab="safelinks"].active{ background:#0d9488; border-color:#0d9488; box-shadow:0 6px 20px rgba(13,148,136,0.35); }
.tab-btn[data-tab="codes"].active    { background:#0284c7; border-color:#0284c7; box-shadow:0 6px 20px rgba(2,132,199,0.35); }
.tab-btn[data-tab="tools"].active    { background:#ea6c00; border-color:#ea6c00; box-shadow:0 6px 20px rgba(234,108,0,0.35); }

/* =========================
SAFELINKS TAG
========================= */
.safelinks-tag {
  background: rgba(var(--color-primary-rgb),0.15);
  color: var(--color-primary-light);
}
/* All prod-cat-tags unified purple */
.themes-tag, .safelinks-tag, .codes-tag, .plugins-tag, .tools-tag {
  background: rgba(var(--color-primary-rgb),0.15) !important;
  color: var(--color-primary-light) !important;
}

/* =========================
SAFELINKS SUB-FILTER
========================= */
.sub-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.sub-btn {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #919191;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  font-family: 'Exo 2', sans-serif;
}
.sub-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #ccc;
}
.sub-btn.active {
  color: #fff;
}
/* =========================
MAINTENANCE MODE — popup overlay modal
========================= */
.maintenance-overlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,6,12,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: maintFadeIn 0.4s ease;
}
@keyframes maintFadeIn { from { opacity: 0; } to { opacity: 1; } }
.maintenance-modal {
  width: 100%; max-width: 440px;
  background: #111827;
  border: 1px solid rgba(var(--color-primary-rgb),0.25);
  border-radius: 24px;
  padding: 40px 34px 34px;
  text-align: center;
  box-shadow: 0 25px 70px rgba(0,0,0,0.5), 0 0 40px rgba(var(--color-primary-rgb),0.15);
  animation: maintPopIn 0.45s cubic-bezier(.22,1,.36,1);
}
@keyframes maintPopIn { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.maintenance-icon {
  width: 68px; height: 68px; margin: 0 auto 20px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 10px 30px rgba(var(--color-primary-rgb),0.4);
  animation: maintIconFloat 2.4s ease-in-out infinite;
}
@keyframes maintIconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.maintenance-modal h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.maintenance-modal p { color: #a3a3a3; font-size: 14.5px; line-height: 1.75; margin-bottom: 22px; }
.maintenance-progress {
  width: 100%; height: 6px; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,0.08); margin-bottom: 18px;
}
.maintenance-progress-bar {
  height: 100%; width: 40%; border-radius: 10px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  animation: maintProgress 1.8s ease-in-out infinite;
}
@keyframes maintProgress {
  0%   { width: 10%; margin-left: 0; }
  50%  { width: 60%; margin-left: 20%; }
  100% { width: 10%; margin-left: 90%; }
}
.maintenance-note { display: inline-flex; align-items: center; gap: 8px; color: #6b7280; font-size: 12.5px; font-weight: 600; }
@media (max-width: 480px) {
  .maintenance-modal { padding: 32px 22px 26px; border-radius: 20px; }
}