@media (min-width: 992px) {
  .logo-center-desktop { position: absolute; left: 50%; transform: translateX(-50%); }
  .navbar .container { position: relative; }
}
body { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex: 1; }

.skeleton-nav { display: flex; gap: 8px; align-items: center; }
.skeleton-nav .sk-btn {
  height: 36px; border-radius: 8px;
  background: linear-gradient(90deg, #d4d4d4 25%, #ebebeb 50%, #d4d4d4 75%);
  background-size: 200% 100%; animation: sk-shimmer 1.2s infinite;
}
.skeleton-nav .sk-btn:first-child { width: 130px; }
.skeleton-nav .sk-btn:last-child  { width: 90px; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.hub-hero {
  position: relative; overflow: hidden;
  background: #0b0f0d;
  padding: 7.5rem 0 5rem;
}
.hub-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(22,163,74,.30) 0, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(45,206,137,.18) 0, transparent 50%);
}
.hub-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(203,213,225,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,213,225,.06) 1px, transparent 1px);
  background-size: 46px 46px;
}
.hub-hero > .container { position: relative; z-index: 2; }

.hub-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(203,213,225,.10);
  border: 1px solid rgba(203,213,225,.24);
  color: #cbd5e1; font-size: .72rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: .45rem 1rem; border-radius: 999px;
}
.hub-title {
  color: #cbd5e1; font-weight: 800; line-height: 1.06;
  font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 1.3rem 0 1rem;
}
.hub-title .accent { color: #f9fafb; }
.hub-sub { color: #9ca3af; font-size: 1.05rem; max-width: 640px; }

.hub-stat { display: flex; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hub-stat .num { color: #f9fafb; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.hub-stat .cap {
  color: #6b7280; font-size: .7rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; margin-top: .35rem;
}

.promo-grid { margin-top: -3.5rem; position: relative; z-index: 5; }

.promo-card {
  background: #fff; border: 1px solid #eef1ef; border-radius: 20px;
  box-shadow: 0 6px 30px rgba(0,0,0,.08);
  height: 100%; display: flex; flex-direction: column;
  overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.promo-card:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,.12); }
.promo-card-body { padding: 1.85rem 1.7rem; flex: 1; display: flex; flex-direction: column; }

.promo-kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: #16a34a; margin-bottom: .5rem;
}
.promo-name { font-size: 1.28rem; font-weight: 800; color: #1f2937; margin-bottom: .6rem; }
.promo-blurb { font-size: .87rem; color: #6b7280; line-height: 1.65; flex: 1; }

.promo-card.is-featured { background: #0f1512; border-color: #1c2620; }
.promo-card.is-featured .promo-name  { color: #f3f4f6; }
.promo-card.is-featured .promo-blurb { color: #9ca3af; }
.promo-card.is-featured .promo-kicker { color: #4ade80; }

.promo-card.is-muted { box-shadow: none; background: #fbfcfb; border-style: dashed; }
.promo-card.is-muted:hover { transform: none; box-shadow: none; }
.promo-card.is-muted .promo-kicker { color: #9ca3af; }
.promo-card.is-muted .promo-name   { color: #6b7280; }

.promo-status {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.promo-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { background: #eaf7ed; color: #15803d; }
.status-ending { background: #fff6e5; color: #a05e00; }
.status-ended  { background: #f3f4f6; color: #6b7280; }
.status-soon   { background: #eef2ff; color: #4f46e5; }

.promo-price { display: flex; align-items: baseline; gap: .5rem; margin: 1.2rem 0 .2rem; }
.promo-price .was { color: #9ca3af; text-decoration: line-through; font-size: .95rem; }
.promo-price .now { font-size: 2rem; font-weight: 800; color: #1f2937; line-height: 1; }
.promo-price .per { font-size: .78rem; color: #9ca3af; font-weight: 600; }
.is-featured .promo-price .now { color: #f9fafb; }
.is-featured .promo-price .was { color: #6b7280; }

.promo-code-row { display: flex; align-items: stretch; gap: .5rem; margin-top: 1.2rem; }
.promo-code {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 1rem; font-weight: 800; letter-spacing: 1.5px;
  background: #111816; color: #e5e7eb;
  border: 1px dashed rgba(203,213,225,.3); border-radius: 11px;
  padding: .7rem .9rem; word-break: break-all;
}
.is-featured .promo-code { background: #060907; }
.promo-copy {
  border: 1px solid rgba(203,213,225,.3); background: transparent; color: #9ca3af;
  border-radius: 11px; padding: 0 .95rem; font-size: .8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .16s, color .16s;
}
.promo-copy:hover  { background: rgba(203,213,225,.12); color: #e5e7eb; }
.promo-copy.copied { background: #16a34a; color: #fff; border-color: #16a34a; }
.promo-card:not(.is-featured) .promo-copy { color: #6b7280; border-color: #e0e5e2; }
.promo-card:not(.is-featured) .promo-copy:hover { background: #f3f4f6; color: #374151; }

.promo-foot {
  padding: 1.1rem 1.7rem; border-top: 1px solid #eef1ef;
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1rem; flex-wrap: wrap;
}
.is-featured .promo-foot { border-color: #1c2620; }
.promo-expiry { font-size: .74rem; color: #9ca3af; white-space: nowrap; }

.how-card {
  background: #fff; border-radius: 16px; padding: 1.5rem 1.4rem; height: 100%;
  border: 1px solid #eef1ef;
}
.how-icon {
  width: 40px; height: 40px; border-radius: 11px; background: #eaf7ed; color: #16a34a;
  display: flex; align-items: center; justify-content: center; margin-bottom: .9rem;
}

.section-badge {
  display: inline-block; font-size: .7rem !important; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: .5rem 1rem !important; border-radius: 999px;
}
.fine-print { font-size: .78rem; color: #9ca3af; line-height: 1.65; }