/* Basic Reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07102a; /* deep navy */
  --surface:rgba(255,255,255,0.04);
  --muted:rgba(255,255,255,0.9);
  --muted-soft:rgba(255,255,255,0.75);
  --accent:#7c3aed; /* purple accent */
  --accent-2:#7ee2c9; /* teal accent */
  --gold:#F5B73D; /* warm gold accent */
  --glass-border:rgba(255,255,255,0.06);
}
body{font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.45;color:var(--muted);background:linear-gradient(180deg,var(--bg),#041327);min-height:100vh}
header.site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));color:var(--muted);backdrop-filter: blur(8px);box-shadow:0 6px 28px rgba(2,6,23,0.28);padding:10px 0}
header.site-header.scrolled{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));box-shadow:0 12px 34px rgba(2,6,23,0.36);backdrop-filter: blur(10px)}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
/* Navbar */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.site-header nav{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.6rem;border-radius:12px}


.logo{display:flex;align-items:center;gap:12px}
.logo .site-logo{height:70px;display:block;border-radius:10px}
.logo .brand-text{font-weight:700;font-size:1.35rem;letter-spacing:0.4px;font-family:'Playfair Display', serif;color:var(--gold)}


.nav-links{display:flex;gap:1rem}
.nav-links a{color:var(--muted-soft);text-decoration:none;padding:0.5rem;display:inline-block;border-radius:8px;font-weight:600}
.nav-links a:hover{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(124,58,237,0.12)}
.menu-toggle{display:none}
.menu-toggle{color:var(--muted-soft);font-size:1.2rem;cursor:pointer}
/* Hero */
.hero{background:linear-gradient(120deg, rgba(251, 0, 255, 0.94) 0%, rgba(243, 12, 0, 0.85) 40%, rgba(255, 0, 234, 0.56) 100%);color:#fff;padding:5rem 0;box-shadow:inset 0 -40px 120px rgba(0,0,0,0.25)}
.hero-inner{max-width:900px;margin:0 auto;text-align:center;padding:0 1rem}
.hero h1{font-size:2.8rem;margin-bottom:0.75rem;font-family:'Playfair Display', serif;letter-spacing:0.3px;color:var(--gold)}
.hero p{opacity:0.95;color:rgba(255,255,255,0.95);font-size:1.05rem}
/* Sections */
.section{padding:2rem 1rem;max-width:1100px;margin:0 auto}
h2{margin-bottom:1rem;color:var(--muted-soft);font-weight:700}
/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.product-card{border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);backdrop-filter: blur(8px);box-shadow: 0 8px 28px rgba(2,6,23,0.25);padding:1.2rem;position:relative;overflow:hidden;transition:transform 190ms ease, box-shadow 190ms ease;display:flex;flex-direction:column;gap:0.6rem}
 .product-card:hover{transform:translateY(-6px) scale(1.01);transition:all 180ms ease}
.product-card h3{font-size:1.05rem;margin:0;color:#ffffff;font-weight:700;line-height:1.3}
 .product-card .card-media{width:100%;height:160px;object-fit:cover; display:block;border-top-left-radius:14px;border-top-right-radius:14px}
 .product-card .card-content{padding:0;background:transparent}
 .product-card h3{color:#e9eef6}
 .card-content .small{color:#d7e1ea}
.product-card .meta{font-size:0.82rem;color:var(--muted-soft);margin:0;line-height:1.4}
.product-card .price{font-weight:700;color:#e6eef6;margin:0.4rem 0 0 0}
.product-card .price{font-size:1.05rem;color:var(--muted);} 
.product-card .price strong{color:var(--gold);font-size:1.2rem;margin-right:6px}
.product-card .discount-pill{display:inline-block;background:rgba(124,58,237,0.12);padding:0.18rem 0.45rem;border-radius:8px;color:var(--accent);font-weight:600;margin-left:8px}
.product-card .platform-pill{position:relative;display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:0.4rem 0.8rem;font-weight:600;border-radius:6px;font-size:0.8rem;margin-bottom:0.5rem}
.product-card .price .small{color:#bcd0dd;font-weight:500}
.product-card .buy-link{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.8rem;color:#111;text-decoration:none;font-weight:700;background:linear-gradient(90deg,var(--gold),#f5a623);padding:.5rem .85rem;border-radius:12px;width:fit-content}
.product-card .buy-link:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(245,183,61,0.18)}
.badge{position:absolute;top:10px;right:10px;background:linear-gradient(90deg,#ff7a18,#f97316);padding:0.35rem 0.6rem;border-radius:8px;color:#fff;font-size:0.85rem;box-shadow:0 4px 12px rgba(249,115,22,0.3)}
/* Search */
.search-wrap{max-width:700px;margin:0 auto;margin-bottom:1rem}
.search-wrap input{width:100%;padding: 15px 0.75rem;border-radius:8px;border:3px solid rgba(192, 0, 245, 0.84);background:transparent;color:var(--muted);}
.search-wrap input::placeholder{color:var(--muted-soft);font-weight:500}
/* Coupons */
.coupon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.coupon-card{border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);padding:1rem;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.28)}
.coupon-card .blur{filter:blur(6px);pointer-events:none}
.coupon-card .reveal{display:block;margin-top:0.75rem}
.buy-btn{background:linear-gradient(90deg,var(--gold),#f5a623);color:#111;padding:0.5rem 0.9rem;border:none;border-radius:10px;cursor:pointer;font-weight:700}
.coupon-card .coupon-code{font-size:1.2rem;font-weight:700;color:var(--gold);margin-top:0.35rem}
.coupon-card .meta{font-size:0.95rem;color:var(--muted-soft);margin-bottom:0.25rem}
.coupon-card .desc{color:var(--muted-soft);margin-top:0.3rem}
/* Sell steps */
.sell-steps{max-width:700px;margin:0 auto}
.step{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);padding:1rem;border-radius:12px;margin-bottom:1rem}
.step h3{font-size:1.05rem;margin-bottom:0.25rem}
.step input, .step select, .step textarea{width:100%;padding:0.55rem;border:1px solid rgba(255,255,255,0.06);border-radius:8px;margin-top:0.4rem;background:transparent;color:var(--muted)}
.flex-row{display:flex;gap:0.6rem}
.flex-row .col{flex:1}
button.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:0.55rem 0.8rem;border:none;border-radius:8px;cursor:pointer;font-weight:700}
.step input, .step select, .step textarea{background:transparent;color:var(--muted-soft);border:1px solid rgba(255,255,255,0.06)}
/* Utilities */
.small{font-size:0.85rem;color:var(--muted-soft)}
.center{text-align:center}
/* Pagination controls */
.pagination-controls{margin-top:1rem;display:flex;gap:0.5rem;align-items:center;justify-content:center}
.page-button{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer;font-weight:700}
.page-button:hover{background:rgba(255,255,255,0.02)}
.page-button[disabled]{opacity:0.5;cursor:not-allowed}
.page-button.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#111;border:none}
.next-page-card{display:flex;align-items:center;justify-content:center}
.next-page-card .small{color:var(--muted-soft)}
/* Responsive */
@media (max-width:720px){
  .nav-links{display:none}
  .menu-toggle{display:block;color:var(--muted-soft)}
  nav{padding:0.75rem}
  .site-header .nav-links{position:absolute;top:100%;right:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 26px rgba(0,0,0,0.5);padding:10px;border-radius:10px;flex-direction:column;width:220px}
  .site-header .nav-links a{display:block;padding:0.6rem 0.8rem}
}
@media (max-width:480px){
  .product-card .card-media{height:120px}
  .product-card h3{font-size:0.95rem}
}
/* Simple modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center}
.modal{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--muted-soft);padding:1rem;border-radius:8px;max-width:420px;width:100%}