:root{
  --bg:#0b1220;        /* header/footer background */
  --ink:#0f172a;       /* dark text */
  --ink-muted:#475569; /* muted text */
  --paper:#ffffff;     /* page background */
  --brand:#2563eb;     /* primary */
  --brand-ink:#e2e8f0; /* on-primary */
  --section:#f8fafc;   /* alt section */
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:6px}

.site-header{background:var(--bg);color:#fff;position:sticky;top:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header{background:var(--bg);color:#fff;position:sticky;top:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}

main{flex:1}

.active-tab {
  font-weight: 600; /* bold */
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

.brand{color:#fff;text-decoration:none;font-weight:600;letter-spacing:0.2px;display:inline-flex;align-items:center;gap:10px}
.brand .logo{display:block;height:24px;width:auto;border-radius:6px}
.nav a{color:#cbd5e1;text-decoration:none;margin-left:20px}
.nav a:hover{color:#fff}

.container{max-width:1240px;margin:0 auto;padding:0 20px}

.section{padding:48px 0}
.section.alt{background:var(--section)}
.section h2{margin-top:0}

.site-footer{background:var(--bg);color:#94a3b8;padding:20px 0;margin-top:24px}
.site-footer p{margin:0}

.product-container {
  max-width: 650px;
  margin:0 auto;
  padding:0 20px;
  width:80vw;
}


.card {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:5px 15px 7px rgba(0,0,0,0.04);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  margin-bottom: 5em;
}

.card h3{margin-top:0;margin-bottom:8px}
.card p{margin:0}
.card:not(.muted):hover,.card:not(.muted):focus-within {
  transform:translateY(-2px);
  box-shadow:10px 15px 16px rgba(0,0,0,0.08);
  border-color:#dbe2ea;
}

.card.muted{opacity:0.9;filter:grayscale(0.25);border-color:#eceff3}
.card.muted h3{color:#64748b}
.card.muted p{color:#94a3b8}
.card.muted:hover,
.card.muted:focus-within{
  opacity:0.75;
  filter:grayscale(0.5) saturate(0.9) brightness(0.98);
  border-color:#f1f5f9;
  box-shadow:none;
  transform:none;
}
.card.muted:hover,
.card.muted:focus-within{
  opacity:0.6;
  filter:grayscale(0.6) saturate(0.85) brightness(0.97);
}

.badge {
  display:inline-block;
  font-size:12px;
  font-weight:600;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  margin-bottom:8px;
  background:#eef2ff;
  color:#3730a3
}
.badge.soon {
  background:#fef3c7;
  color:#92400e;
  border-color:#f59e0b
}
.badge.available {
  background:#dcfce7;
  color:#166534;
  border-color:#86efac
}

@media (min-width: 801px){
  main{display:flex;flex-direction:column}
  #products{flex:1 0 auto;display:flex;align-items:center}
}

@media (max-width: 1000px) {
  .product-container {
    padding: 10px;
    width:100%;
  }
}