:root{--n:#0b1020;--b:#4f46e5;--s:#f8f9fc;--t:#111827;--m:#374151;--w:#fff}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,sans-serif;color:var(--t);background:var(--w)}
a{color:var(--b)}:focus-visible{outline:3px solid var(--b);outline-offset:2px}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
header{position:sticky;top:0;background:var(--n);z-index:5}nav{display:flex;align-items:center;gap:20px;padding:12px 24px;flex-wrap:wrap}nav a,nav button{color:#ffffff;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}.logo{font-weight:700;font-size:20px}.logo b{color:#8b87ff}#menu{display:flex;gap:20px;align-items:center}#mb{display:none}
#mega{position:absolute;top:100%;left:0;right:0;background:#ffffff;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:20px 24px;box-shadow:0 12px 30px #0003}#mega[hidden]{display:none}#mega a{color:#111827;display:block;padding:10px;border-radius:8px}#mega a:hover{background:var(--s)}#mega i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}#mega small{display:block;color:#374151}
section{max-width:1160px;margin:auto;padding:48px 24px}.alt{background:var(--s);max-width:none}.alt>*{max-width:1112px;margin-inline:auto}
.hero{max-width:none;background:linear-gradient(135deg,var(--n),var(--c,#1e1b4b));color:#ffffff;text-align:center}.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:.2em auto;max-width:800px;color:#ffffff}.hero p{max-width:640px;margin:12px auto;color:#f3f4f6;opacity:1}
.btn{display:inline-block;background:var(--b);color:#fff;padding:12px 22px;border-radius:10px;text-decoration:none;border:0;font:600 16px system-ui;cursor:pointer}.btn:hover{filter:brightness(1.1)}.btn[disabled]{opacity:.5}.ghost{background:transparent;border:2px solid currentColor;color:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card,.ccard{border:1px solid #d1d5db;border-radius:14px;padding:20px;background:#ffffff;display:flex;flex-direction:column;gap:8px}.card h3{margin:.2em 0;font-size:18px;color:#111827}.card p{color:#374151;margin:0;flex:1;font-size:15px}.row{display:flex;justify-content:space-between;align-items:baseline}
.ccard{text-decoration:none;color:var(--t);border-top:5px solid var(--c)}.ccard:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0001}
.cover{background:linear-gradient(160deg,var(--c),var(--n));color:#fff;border-radius:10px;padding:14px;aspect-ratio:4/3;overflow:hidden}.cover h4{margin:.3em 0}.pv{background:#fff;color:var(--t);border-radius:6px;padding:8px;font-size:12px}.pv ul{list-style:none;margin:0;padding:0}.pv table{width:100%;border-collapse:collapse}.pv td,.pv th{border:1px solid #ddd;padding:2px 4px}.nt span{display:block;border-bottom:1px solid #eee;padding:2px 0}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:16px 0}label{display:flex;flex-direction:column;font-size:14px;gap:4px;color:#111827;font-weight:600}input,select{padding:10px;border:1px solid #9ca3af;border-radius:8px;font:inherit;color:#111827;background:#fff}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px}.buy{background:var(--s);padding:20px;border-radius:14px;margin-top:20px}.price{font-size:28px;color:#111827;font-weight:700}.bc{max-width:1160px;margin:16px auto;padding:0 24px;color:#374151}
.note{color:#374151;font-size:15px}.ph{background:#fef3c7;border:1px dashed #d97706;padding:12px;border-radius:8px;color:#92400e}.trust{font-size:15px;color:#e5e7eb}small{color:#4b5563}
.co{max-width:560px}.co form{display:flex;flex-direction:column;gap:14px}.chk{flex-direction:row;align-items:center}#st{padding:12px;border-radius:8px}#st:not(:empty){background:var(--s)}
footer{background:var(--n);color:#cfd3e6;padding:32px 24px;text-align:center}footer a{color:#fff}
details{border-bottom:1px solid #e3e6ee;padding:10px 0}summary{cursor:pointer;font-weight:600}
@media(max-width:760px){#mb{display:block;color:#fff}#menu{display:none;flex-direction:column;align-items:flex-start;width:100%}#menu.open{display:flex}#mega{grid-template-columns:1fr}.pd{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.ccard:hover{transform:none}}

/* Enhanced button and card visibility */
.btn {
  display: inline-block !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2) !important;
  transition: all 0.2s ease !important;
}
.btn:hover {
  background: #4338ca !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3) !important;
}
.btn.sm {
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}
.btn.ghost {
  background: transparent !important;
  color: #4f46e5 !important;
  border: 1.5px solid #4f46e5 !important;
  box-shadow: none !important;
}
.btn.ghost:hover {
  background: #eef2ff !important;
  color: #4338ca !important;
}
.card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 14px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f3f4f6 !important;
}
.brand {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: -0.5px !important;
}
.card {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
}
.price {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}
.badge {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.cat-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.cat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
}

/* Clean Header & Navigation Bar */
header {
  position: sticky !important;
  top: 0 !important;
  background: #0b1020 !important;
  z-index: 100 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
header nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 14px 24px !important;
}
.brand {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: -0.5px !important;
  margin-right: 12px !important;
}
nav a, nav button {
  color: #e2e8f0 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}
nav a:hover, nav button:hover {
  color: #ffffff !important;
}
.mob-toggle {
  display: none !important;
}
.mob-menu {
  display: none !important;
}
@media (max-width: 768px) {
  .mob-toggle {
    display: block !important;
    margin-left: auto !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 22px !important;
    cursor: pointer !important;
  }
  .mob-menu.open {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    background: #0f172a !important;
    border-top: 1px solid #1e293b !important;
  }
  .mob-menu a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
  }
}