:root{
  --bg1:#120a16; --bg2:#1a0f22; --bg3:#0b1020;
  --text:#fff7fb; --muted:rgba(255,247,251,.72);
  --glass: rgba(255,255,255,.08); --glass2: rgba(255,255,255,.11); --ring: rgba(255,255,255,.14);
  --card: 24px; --shadow: 0 18px 50px rgba(0,0,0,.38); --shadow2: 0 12px 30px rgba(0,0,0,.26);
  --pink:#ec4899; --pink2:#f472b6; --violet:#8b5cf6; --blue:#60a5fa; --gold:#fbbf24; --gold2:#f59e0b;
  --cta: linear-gradient(90deg, var(--gold2) 0%, var(--gold) 100%);
  --cta2: linear-gradient(90deg, var(--pink) 0%, var(--violet) 55%, var(--blue) 110%);
  --stroke: rgba(255,255,255,.10);
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  min-height:100vh; color: var(--text);
  background:
    radial-gradient(900px 520px at 8% 6%, rgba(236,72,153,.24), transparent 55%),
    radial-gradient(900px 620px at 88% 10%, rgba(139,92,246,.20), transparent 58%),
    radial-gradient(900px 540px at 70% 90%, rgba(96,165,250,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 40%, var(--bg3) 100%);
}
a{ text-decoration:none; color: inherit; }
.muted{ color: var(--muted); }

.rounded-xxl{ border-radius: var(--card); }
.glass{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.shadow-soft{ box-shadow: var(--shadow); }
.shadow-soft-2{ box-shadow: var(--shadow2); }

/* ✅ LOGO */
.logo-wrap{ display:flex; align-items:center; flex:0 0 auto; }
.logo-wrap img{
  height: 36px; width:auto; max-width: 140px;
  display:block; border-radius: 10px; object-fit: contain;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px;
}
@media (min-width: 768px){ .logo-wrap img{ height:42px; } }

/* Top */
.topbar{
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-blur{
  position: sticky; top:0; z-index: 999;
  background: rgba(18,10,22,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Buttons */
.btn-soft{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,247,251,.92);
  padding: 10px 12px;
  font-weight: 700;
}
.btn-soft:hover{ background: rgba(255,255,255,.10); }
.btn-cta{
  border-radius: 14px;
  border: 0;
  padding: 10px 14px;
  font-weight: 900;
  color: #111827;
  background: var(--cta);
  box-shadow: 0 16px 30px rgba(251,191,36,.18);
}
.btn-cta:active{ transform: translateY(1px); }

/* HERO */
.hero{
  border-radius: var(--card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  position: relative;
}
.hero::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(420px 220px at 20% 20%, rgba(236,72,153,.35), transparent 55%),
    radial-gradient(520px 280px at 80% 30%, rgba(139,92,246,.30), transparent 60%),
    linear-gradient(135deg, rgba(96,165,250,.14), rgba(236,72,153,.10));
  filter: blur(10px);
  opacity: .85;
}
.hero .content{ position: relative; z-index: 2; }
.hero-video{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  font-size: 12px;
  color: rgba(255,247,251,.88);
}
.spark{
  width:8px; height:8px; border-radius:999px;
  background: #f472b6;
  box-shadow: 0 0 0 6px rgba(244,114,182,.18);
}
.hero-title{
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.1;
  margin: 10px 0 10px 0;
  font-weight: 900;
  letter-spacing: .2px;
}
.hero-sub{ color: rgba(255,247,251,.80); margin:0; }

.trust-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.trust{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,247,251,.86);
  font-size: 13px;
}
.dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.88); opacity:.85; }

/* PRIME BOX */
.prime{
  border-radius: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
}
.mini{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 12px;
}
.btn-prime{
  border-radius: 16px;
  border: 0;
  padding: 14px 16px;
  font-weight: 900;
  color: #111827;
  background: var(--cta);
  box-shadow: 0 18px 36px rgba(251,191,36,.18);
}
.btn-prime:active{ transform: translateY(1px); }

/* SECTION HEAD */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  margin-top: 20px;
}
.section-head h2{ margin:0; font-size: 20px; font-weight: 900; letter-spacing:.2px; }
.section-head .sub{ margin-top:2px; font-size: 13px; color: var(--muted); }
.pill{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,247,251,.90);
  font-size: 13px;
  font-weight: 800;
  display:inline-flex; gap:8px; align-items:center;
}

/* ✅ PRODUCT CARD (FIRST CLASS) */
.p-card{
  position: relative;
  height: 100%;
  border-radius: var(--card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.p-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(420px 180px at 18% 8%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(420px 220px at 92% 15%, rgba(139,92,246,.14), transparent 62%),
    radial-gradient(420px 260px at 70% 90%, rgba(96,165,250,.10), transparent 62%);
  pointer-events:none;
  opacity:.9;
}
.p-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}
.p-media{
  aspect-ratio: 1/1;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:
    radial-gradient(520px 240px at 18% 20%, rgba(236,72,153,.28), transparent 58%),
    radial-gradient(520px 260px at 80% 38%, rgba(139,92,246,.24), transparent 62%),
    linear-gradient(135deg, rgba(96,165,250,.12), rgba(236,72,153,.08));
}
.p-media::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.25));
  z-index:2;
}
.p-top{
  position:absolute; left:12px; right:12px; top:12px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  z-index: 3;
}
.badge-soft{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,247,251,.92);
}
.rank{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: rgba(255,247,251,.88);
}
.p-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  transform: scale(1.02);
  transition: transform .25s ease;
}
.p-card:hover .p-img{ transform: scale(1.07); }

.p-body{
  padding: 14px;
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-title{ font-size: 14px; font-weight: 900; margin:0; letter-spacing:.15px; }

.p-note{
  font-size: 12px;
  color: var(--muted);
  margin:0;
  line-height:1.45;
}

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.chip{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,247,251,.86);
}

/* ✅ Details toggle (Premium) */
.p-details{ border:0; background:transparent; }
details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }

.details-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  color: rgba(255,247,251,.92);
  cursor:pointer;
}
.details-btn .arrow{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  transition: transform .18s ease, background .18s ease;
}
details[open] .details-btn .arrow{ transform: rotate(90deg); background: rgba(255,255,255,.08); }

.details-content{
  margin-top:10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

/* ✅ View on Amazon button OUTSIDE details (strong CTA) */
.p-btn{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 900;
  border: 0;
  color: #111827;
  background: var(--cta2);
  box-shadow: 0 18px 34px rgba(236,72,153,.14);
  text-align:center;
}
.p-btn:hover{ filter: brightness(1.03); }
.p-btn:active{ transform: translateY(1px); }

.footer{ color: rgba(255,247,251,.55); font-size: 12px; }

/* Sticky CTA */
.sticky-cta{
  position: sticky; bottom: 0; z-index: 999;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, rgba(18,10,22,0) 0%, rgba(18,10,22,.60) 30%, rgba(18,10,22,.92) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* A11y + reduce motion */
:focus-visible{ outline: 2px solid rgba(251,191,36,.65); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}