:root{
  --bg:#ffffff;
  --text:#0b0b0b;
  --muted:rgba(0,0,0,.70);

  --blue:#00D4FF;
  --purple:#7B2CFF;
  --black:#0B0B0B;

  --card:#ffffff;
  --border:rgba(0,0,0,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.12);
  --shadow2: 0 10px 30px rgba(0,0,0,.10);
  --radius: 18px;

  --fontHead: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontBody: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--fontBody);
  background: var(--bg);
  color: var(--text);
  line-height: 1.35;
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

.topbar{
  background: linear-gradient(90deg, var(--blue), var(--purple));
  color:#000;
  font-weight:600;
  font-size:14px;
}
.topbar__inner{
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:10px 0;
  flex-wrap:wrap;
}
.dot{opacity:.55}

.header{
  position:sticky;top:0;z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.80);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo__mark{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display:grid;place-items:center;
  color:#000;
  font-family:var(--fontHead);
  font-weight:800;
}
.logo__text{
  font-family:var(--fontHead);
  font-weight:800;
  letter-spacing:.2px;
}

.nav{display:flex;gap:16px;align-items:center}
.nav a{
  color: var(--muted);
  font-weight:600;
}
.nav a:hover{color: var(--text)}

.header__actions{display:flex;gap:10px;align-items:center}

.iconBtn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.iconBtn:hover{transform: translateY(-1px)}
.cartCount{
  background: var(--black);
  color:#fff;
  border-radius:999px;
  padding:2px 7px;
  font-size:12px;
  margin-left:6px;
}

.ghost{
  border:1px dashed rgba(0,0,0,.20);
  background: rgba(0,0,0,.02);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}
.ghost:hover{background: rgba(0,0,0,.04)}

.hero{
  padding:48px 0 22px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr}
  .nav{display:none}
}

.pill{
  display:inline-flex;
  gap:10px;
  background: rgba(0,212,255,.12);
  border:1px solid rgba(0,212,255,.25);
  color:#000;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}

h1{
  font-family: var(--fontHead);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.02;
  margin:14px 0 12px;
}
@media (max-width: 500px){ h1{font-size:36px} }

.glow{
  background: linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  color: var(--muted);
  font-size: 16px;
  max-width: 55ch;
}

.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 16px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  padding: 12px 16px;
  border:1px solid transparent;
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px)}
.btn.small{padding:10px 12px;border-radius:14px}
.btn.full{width:100%}

.primary{
  background: var(--blue);
  color:#000;
  box-shadow: 0 14px 40px rgba(0,212,255,.30);
}
.primary:hover{
  background: var(--purple);
  color:#fff;
  box-shadow: 0 14px 40px rgba(123,44,255,.28);
}
.secondary{
  background: #fff;
  border-color: rgba(0,0,0,.12);
  color:#000;
}
.secondary:hover{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.18);
}

.trustRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top: 18px;
}
@media (max-width: 700px){
  .trustRow{grid-template-columns:1fr}
}
.trustCard{
  display:flex;gap:12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow2);
}
.trustIcon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(0,0,0,.04);
}

.hero__media{display:flex;flex-direction:column;gap:14px}

.mediaCard{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mediaCard__top{
  display:flex;gap:8px;justify-content:flex-end;
  padding:12px;
}
.badge{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.80);
}
.badge.hot{
  border-color: rgba(0,212,255,.35);
  background: rgba(0,212,255,.14);
}
.fakeVideo{
  height: 260px;
  background: radial-gradient(circle at 30% 20%, rgba(0,212,255,.25), transparent 45%),
              radial-gradient(circle at 80% 40%, rgba(123,44,255,.22), transparent 50%),
              #0B0B0B;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:18px;
}
.fakeVideo__pulse{
  position:absolute;inset:-40px;
  background: radial-gradient(circle, rgba(0,212,255,.14), transparent 55%);
  filter: blur(10px);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform: scale(1)}
  50%{transform: scale(1.06)}
}
.fakeVideo__text{position:relative;color:#fff}
.fakeVideo__text p{margin:0}
.mediaCard__bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 16px;
}
.title{margin:0;font-weight:800}
.muted{color:var(--muted)}
.fine{color:var(--muted);font-size:13px}
.center{text-align:center}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.stat{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow2);
  padding: 14px;
}
.stat__big{
  font-family: var(--fontHead);
  font-weight: 800;
  font-size: 24px;
}

.section{padding:46px 0}
.section.alt{background: #F5F7FA;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:18px;flex-wrap:wrap;
}
h2{
  margin:0;
  font-family: var(--fontHead);
  font-size: 30px;
}
.timerCard{
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding: 12px 14px;
  background:#fff;
  box-shadow: var(--shadow2);
  min-width: 170px;
}
.timer{
  font-family: var(--fontHead);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .5px;
}

.dropCard{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  background:#fff;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  padding:18px;
}
@media (max-width: 900px){ .dropCard{grid-template-columns:1fr} }

.dropBadges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bullets{margin:12px 0 16px;padding-left:18px}
.bullets li{margin:6px 0}
.priceRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.price{display:flex;gap:10px;align-items:baseline}
.was{text-decoration:line-through;color:rgba(0,0,0,.45)}
.now{font-family:var(--fontHead);font-weight:800;font-size:26px}
.save{font-weight:800;color:rgba(0,0,0,.65)}

.imgFrame{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  height: 240px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(0,212,255,.10), rgba(123,44,255,.10));
}
.imgFrame__placeholder{font-weight:800;color:rgba(0,0,0,.60)}
.miniGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.miniCard{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding:12px;
  background:#fff;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .grid{grid-template-columns:1fr} }

.card{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 20px;
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card__media{
  position: relative;
  height: 160px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;

  /* Always show a placeholder “box” even if image fails */
  background: radial-gradient(circle at 20% 20%, rgba(0,212,255,.22), transparent 55%),
              radial-gradient(circle at 80% 40%, rgba(123,44,255,.20), transparent 55%),
              #0B0B0B;
}
.card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__body{padding:14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stars{font-size:14px}
.kicker{font-weight:800;color:rgba(0,0,0,.65)}
.card__title{font-weight:900}
.card__desc{color:var(--muted);font-size:14px;margin:0}
.card__price{display:flex;gap:10px;align-items:baseline}
.card__price .now{font-size:20px}
.tag{
  display:inline-flex;
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}

.videoStrip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){ .videoStrip{grid-template-columns:1fr} }
.vid{
  height: 240px;
  border-radius: 22px;
  border:1px solid rgba(0,0,0,.10);
  background: #0B0B0B;
  color:#fff;
  display:grid;place-items:center;
  font-weight:900;
  box-shadow: var(--shadow2);
}

.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){ .reviews{grid-template-columns:1fr} }
.review{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  background:#fff;
  box-shadow: var(--shadow2);
  padding: 16px;
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:12px}

.faq details{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background:#fff;
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  margin: 10px 0;
}
.faq summary{cursor:pointer;font-weight:900}
.faq p{margin:10px 0 0;color:var(--muted)}

.footer{
  padding: 40px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.footer__grid{
  display:flex;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
}
.footerCols{display:flex;gap:40px}
.footerCols a{display:block;color:var(--muted);margin-top:10px;font-weight:600}
.footerCols a:hover{color:var(--text)}
.footerLogo{margin-bottom:8px}

/* Drawer + Modal */
.drawer,.modal{
  position:fixed;inset:0;
  display:none;
  z-index:50;
}
.drawer.open,.modal.open{display:block}
.drawer__backdrop,.modal__backdrop{
  position:absolute;inset:0;background: rgba(0,0,0,.45);
}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(420px, 92vw);
  background:#fff;border-left:1px solid rgba(0,0,0,.10);
  box-shadow: var(--shadow);
  display:flex;flex-direction:column;
}
.drawer__head{
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:space-between;
}
.drawer__body{padding:14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.drawer__foot{
  padding:14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;flex-direction:column;gap:10px;
}

.cartItem{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 12px;
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
}
.cartItem__left{display:flex;gap:12px;align-items:flex-start}
.thumb{
  width:54px;height:54px;border-radius:14px;
  background: linear-gradient(135deg, rgba(0,212,255,.22), rgba(123,44,255,.18)), #0B0B0B;
}
.qty{
  display:flex;align-items:center;gap:8px;margin-top:8px
}
.qty button{
  width:32px;height:32px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}
.qty button:hover{background: rgba(0,0,0,.03)}

.modal__panel{
  position:absolute;left:50%;top:50%;
  transform: translate(-50%, -50%);
  width:min(520px, 92vw);
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:space-between;
}
.wheelWrap{
  padding:18px 16px 20px;
  display:flex;flex-direction:column;gap:12px;
  align-items:center;
}
.wheel{
  width:260px;height:260px;border-radius:999px;
  border:8px solid rgba(0,0,0,.10);
  background: conic-gradient(
    var(--blue) 0 25%,
    rgba(0,0,0,.06) 25% 50%,
    var(--purple) 50% 75%,
    rgba(0,0,0,.10) 75% 100%
  );
  position:relative;
  box-shadow: var(--shadow2);
}
.wheel::after{
  content:"";
  position:absolute;
  top:-14px;left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:16px solid #0B0B0B;
}