/* ==========================================================================
   QRBELL Store — Store composition
   Chrome (header / bottom nav / footer) and store-specific components
   (product card, category card, QR card, template card, hero, QR preview).
   ========================================================================== */

/* ==========================================================================
   HEADER
   Desktop: logo | nav | search + account + cart          (spec §10)
   Mobile:  logo | search + cart + menu                   (spec §11)
   ========================================================================== */

.qb-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--qb-navy-900);
  border-bottom: 1px solid var(--color-border-invert);
}

/* Elevation appears only once the page has scrolled */
.qb-header.is-stuck { box-shadow: var(--shadow-bar-down); }

.qb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-height-mobile);
}

@media (min-width: 992px) {
  .qb-header__inner { height: var(--header-height-desktop); gap: var(--space-6); }
}

/* -- Logo lockup ---------------------------------------------------------- */
.qb-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  color: var(--color-text-invert);
}
.qb-logo:hover { color: var(--color-text-invert); text-decoration: none; }

.qb-logo__mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex: 0 0 auto;
}

.qb-logo__text { display: flex; flex-direction: column; line-height: 1; }

.qb-logo__word {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-extra);
  letter-spacing: 0.06em;
}

/* "STORE" sits beside the wordmark so this reads as a sibling property of
   qrbell.co.in rather than a different company */
.qb-logo__badge {
  padding: 1px 5px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  align-self: center;
}

.qb-logo__tagline {
  margin-top: 2px;
  color: var(--color-text-invert-faint);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

@media (min-width: 992px) {
  .qb-logo__mark { width: 40px; height: 40px; }
  .qb-logo__word { font-size: var(--text-lg); }
}

/* -- Desktop nav ---------------------------------------------------------- */
.qb-nav { display: none; }

@media (min-width: 992px) {
  .qb-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Links keep their intrinsic width. Without this the flex row compresses
     them and the longest label ("How It Works") breaks onto a second line,
     which spec §74 forbids. */
  .qb-nav__link { flex: 0 0 auto; }
}

.qb-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-text-invert-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  /* Nav labels must never wrap — spec §74. "How It Works" is the one that
     breaks first, so the whole row is pinned to a single line and the
     crowding is solved by moving the search field and CTA up to lg instead. */
  white-space: nowrap;
  transition: color var(--transition-base), background-color var(--transition-base);
}
.qb-nav__link:hover {
  color: var(--color-primary);
  background: rgba(244, 180, 0, 0.07);
  text-decoration: none;
}
.qb-nav__link.is-active { color: var(--color-text-invert); font-weight: var(--weight-semibold); }
.qb-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* -- Header actions ------------------------------------------------------- */
.qb-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex: 0 0 auto;
}

.qb-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-sm);
  color: var(--color-text-invert-muted);
  font-size: 1.15rem;
  transition: color var(--transition-base), background-color var(--transition-base);
}
.qb-icon-btn:hover {
  color: var(--color-text-invert);
  background: rgba(255, 255, 255, 0.07);
  text-decoration: none;
}

/* -- Search: icon on narrow desktops, full field once there is room ------
   The row holds logo + 3 nav items + a 260px field + icons + the CTA in
   about 960px of content. Below 1100 that no longer fits inside the
   container, so the field collapses back to its icon and the CTA waits.
   (This threshold was 1200 while the nav carried a fourth item.) */
.qb-search-icon { display: flex; }

.qb-header__search { display: none; }

@media (min-width: 1100px) {
  .qb-search-icon { display: none; }
  .qb-header__search { display: block; width: 260px; flex: 0 0 auto; }
  .qb-header__search .qb-input {
    height: 42px;
    min-height: 42px;
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-border-invert);
    color: var(--color-text-invert);
    border-radius: var(--radius-pill);
  }
  .qb-header__search .qb-input::placeholder { color: var(--color-text-invert-faint); }
  .qb-header__search .qb-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--qb-blue-400);
  }
  .qb-header__search .qb-input-group__icon { color: var(--color-text-invert-faint); }
}

@media (min-width: 1400px) {
  .qb-header__search { width: 320px; }
}

/* The Bulk Order CTA is optional in spec §10 — show it only once the row has
   room, so it never pushes the nav into a second line. */
.qb-header__cta { display: none; }

@media (min-width: 1100px) {
  .qb-header__cta { display: inline-flex; margin-left: var(--space-2); }
}

/* -- Category rail beneath the mobile header — spec §11 -------------------- */
.qb-rail {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 992px) { .qb-rail { display: none; } }


/* ==========================================================================
   MOBILE SEARCH OVERLAY — full-width polished experience, spec §66
   ========================================================================== */

.qb-searchpane {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.qb-searchpane.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.qb-searchpane__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--gutter);
  padding-top: calc(var(--space-3) + var(--safe-top));
  background: var(--qb-navy-900);
}
.qb-searchpane__bar .qb-input { border-radius: var(--radius-pill); }
.qb-searchpane__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5) var(--gutter); }

.qb-suggest { display: flex; flex-direction: column; }
.qb-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-align: left;
  width: 100%;
}
.qb-suggest__item:hover { color: var(--color-accent); text-decoration: none; }
.qb-suggest__thumb { width: 40px; height: 40px; border-radius: var(--radius-xs); object-fit: cover; flex: 0 0 auto; }
.qb-suggest__label { flex: 1 1 auto; min-width: 0; font-size: var(--text-base); }
.qb-suggest__meta  { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Highlighted match inside a suggestion */
.qb-suggest mark { background: var(--color-primary-soft); color: inherit; padding: 0 2px; border-radius: 3px; }

/* Desktop autocomplete panel, anchored under the header search field */
.qb-suggest-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  width: min(420px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-lg);
}
.qb-suggest-pop[hidden] { display: none; }

/* The search field is the positioning context for the panel */
.qb-header__search { position: relative; }


/* ==========================================================================
   MOBILE DRAWER (menu / account)
   ========================================================================== */

.qb-drawer {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  z-index: var(--z-sheet);
  width: min(320px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--qb-navy-900);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
  overflow-y: auto;
}
.qb-drawer.is-open { transform: translateX(0); }

.qb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  padding-top: calc(var(--space-4) + var(--safe-top));
  border-bottom: 1px solid var(--color-border-invert);
}

.qb-drawer__body { flex: 1 1 auto; padding: var(--space-4) var(--space-3); }

.qb-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-invert-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.qb-drawer__link:hover,
.qb-drawer__link.is-active {
  background: rgba(244, 180, 0, 0.08);
  color: var(--color-text-invert);
  text-decoration: none;
}
.qb-drawer__link i { width: 20px; text-align: center; color: var(--color-primary); }

.qb-drawer__label {
  padding: var(--space-4) var(--space-3) var(--space-2);
  color: var(--color-text-invert-faint);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}


/* ==========================================================================
   BOTTOM NAVIGATION — spec §9. Home · Shop · My QR · Orders · Account
   ========================================================================== */

.qb-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bottomnav);
  display: flex;
  height: calc(var(--bottomnav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-bar-up);
}

@media (min-width: 992px) { .qb-bottomnav { display: none; } }

.qb-bottomnav__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
}
.qb-bottomnav__item:hover { text-decoration: none; color: var(--color-text-muted); }

.qb-bottomnav__icon { position: relative; font-size: 1.25rem; line-height: 1; }

.qb-bottomnav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 2px;
}

.qb-bottomnav__item.is-active { color: var(--color-text); font-weight: var(--weight-semibold); }
.qb-bottomnav__item.is-active .qb-bottomnav__icon { color: var(--color-accent); }

/* Active indicator sits on the top edge */
.qb-bottomnav__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 28px; height: 3px;
  background: var(--color-primary);
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}


/* ==========================================================================
   FOOTER — spec §12
   ========================================================================== */

.qb-footer {
  background: var(--qb-navy-900);
  color: var(--color-text-invert-muted);
  padding-block: var(--space-12) var(--space-6);
}

.qb-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) { .qb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .qb-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }

.qb-footer__title {
  margin-bottom: var(--space-4);
  color: var(--color-text-invert);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.qb-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.qb-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--color-text-invert-muted);
  font-size: var(--text-base);
}
.qb-footer__link:hover { color: var(--color-primary); text-decoration: none; }

.qb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-invert);
  font-size: var(--text-xs);
  color: var(--color-text-invert-faint);
}

.qb-social { display: flex; gap: var(--space-2); }
.qb-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-circle);
  color: var(--color-text-invert-muted);
}
.qb-social a:hover { color: var(--color-primary); border-color: var(--color-primary); text-decoration: none; }


/* ==========================================================================
   PRODUCT CARD — spec §15
   ========================================================================== */

.qb-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.qb-product:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: var(--lift); }
@media (hover: none) { .qb-product:hover { transform: none; box-shadow: none; } }

.qb-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.qb-product__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.qb-product:hover .qb-product__img { transform: scale(1.04); }
@media (hover: none) { .qb-product:hover .qb-product__img { transform: none; } }

.qb-product__badges {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: calc(100% - var(--space-6));
}

/* Quick view — desktop hover only; mobile reaches it by tapping the card */
.qb-product__quick {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.qb-product:hover .qb-product__quick,
.qb-product__quick:focus-visible { opacity: 1; transform: translateY(0); }

@media (hover: none) { .qb-product__quick { display: none; } }

.qb-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  padding: var(--space-4);
}

.qb-product__cat {
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.qb-product__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.qb-product__name a { color: var(--color-text); }
.qb-product__name a:hover { color: var(--color-accent); text-decoration: none; }

/* Clamp to two lines so cards in a row stay the same height */
.qb-product__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qb-product__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.qb-product__price { line-height: 1.2; }
.qb-product__price-label { display: block; color: var(--color-text-faint); font-size: var(--text-2xs); }
.qb-product__price-value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
}

.qb-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}
/* Two buttons side by side while the card is wide enough; they stack rather
   than overflow once the column is narrower than ~2×120px (shop grid at 320px,
   related rail at 320px). */
.qb-product__actions > * { flex: 1 1 120px; }

/* List view — spec §13 grid/list toggle */
.qb-grid-products.is-list { grid-template-columns: minmax(0, 1fr); }
.qb-grid-products.is-list .qb-product { flex-direction: row; }
.qb-grid-products.is-list .qb-product__media { flex: 0 0 120px; aspect-ratio: 1 / 1; }
.qb-grid-products.is-list .qb-product__actions { display: none; }

@media (min-width: 768px) {
  .qb-grid-products.is-list .qb-product__media { flex-basis: 200px; }
  .qb-grid-products.is-list .qb-product__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 180px;
    padding: var(--space-4);
  }
  .qb-grid-products.is-list .qb-product__desc { -webkit-line-clamp: 3; line-clamp: 3; }
}


/* ==========================================================================
   CATEGORY CARD — "Shop By Need", spec §12
   ========================================================================== */

.qb-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  color: var(--color-text);
  overflow: hidden;
  transition: all var(--transition-base);
}
.qb-cat:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: var(--lift);
  text-decoration: none;
  color: var(--color-text);
}

.qb-cat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  color: var(--qb-gold-700);
  font-size: 1.35rem;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.qb-cat:hover .qb-cat__icon { background: var(--color-primary); color: var(--color-on-primary); }

.qb-cat__name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.qb-cat__meta { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-snug); }


/* ==========================================================================
   QR CARD — My QR, spec §30
   ========================================================================== */

.qb-qr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: all var(--transition-base);
}
.qb-qr-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

.qb-qr-card__top { display: flex; gap: var(--space-4); align-items: flex-start; }

.qb-qr-card__preview {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-surface-alt);
}

.qb-qr-card__info { flex: 1 1 auto; min-width: 0; }
.qb-qr-card__name { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 2px; }

.qb-qr-card__id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.qb-qr-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.qb-qr-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.qb-qr-stat__label {
  display: block;
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* ==========================================================================
   QR PREVIEW placeholder
   Stands in for the render engine this phase. Uses a CSS-drawn QR-like block
   so it clearly reads as a placeholder rather than a real scannable code.
   ========================================================================== */

.qb-qr-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qb-qr-preview__code {
  width: 62%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(45deg, var(--qb-navy-900) 25%, transparent 25%, transparent 75%, var(--qb-navy-900) 75%),
    linear-gradient(45deg, var(--qb-navy-900) 25%, transparent 25%, transparent 75%, var(--qb-navy-900) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  border: 4px solid var(--color-surface);
  outline: 1px solid var(--color-border);
}

.qb-qr-preview__id {
  position: absolute;
  bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   TEMPLATE CARD — spec §18
   ========================================================================== */

.qb-template {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base);
}
.qb-template:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.qb-template.is-selected { border-color: var(--color-accent); box-shadow: var(--shadow-accent); }

.qb-template__media { aspect-ratio: 1 / 1; background: var(--color-surface-alt); }
.qb-template__img { width: 100%; height: 100%; object-fit: cover; }

.qb-template__body { padding: var(--space-3); }
.qb-template__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.qb-template__meta { font-size: var(--text-2xs); color: var(--color-text-muted); }

.qb-template__check {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-circle);
  font-size: var(--text-sm);
}
.qb-template.is-selected .qb-template__check { display: flex; }


/* ==========================================================================
   HERO — spec §12
   ========================================================================== */

.qb-hero {
  position: relative;
  background: var(--qb-navy-900);
  color: var(--color-text-invert);
  overflow: hidden;
}

/* Warm gold wash so the hero doesn't read as flat navy. Kept subtle —
   spec §71 warns against gradient overuse. */
.qb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 30%, rgba(244, 180, 0, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(37, 99, 235, 0.12), transparent 70%);
  pointer-events: none;
}

.qb-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 992px) {
  .qb-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--space-12);
    padding-block: var(--space-16);
  }
}

.qb-hero__title {
  margin-bottom: var(--space-4);
  color: var(--color-text-invert);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extra);
  line-height: 1.1;
}
.qb-hero__title em { color: var(--color-primary); font-style: normal; }

.qb-hero__lead {
  max-width: 52ch;
  margin-bottom: var(--space-6);
  color: var(--color-text-invert-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.qb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 575.98px) {
  /* Full-width stacked CTAs below 576 — spec §9 */
  .qb-hero__actions { flex-direction: column; }
  .qb-hero__actions > .qb-btn { width: 100%; }
}

/* Trust strip — real badges from QRBELL product artwork */
.qb-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-invert);
}
.qb-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-invert-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.qb-trust__item i { color: var(--color-primary); font-size: 1rem; }

.qb-hero__media { position: relative; }
.qb-hero__img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
}


/* ==========================================================================
   STAT CARD — analytics and admin dashboards
   ========================================================================== */

.qb-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
}

.qb-stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.qb-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.qb-stat__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.qb-stat__delta--up   { color: var(--color-success-strong); }
.qb-stat__delta--down { color: var(--color-danger-strong); }


/* ==========================================================================
   SECTION: HOW IT WORKS — numbered step flow
   ========================================================================== */

.qb-steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  counter-reset: qb-step;
}

.qb-step-card {
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
}
.qb-step-card::before {
  counter-increment: qb-step;
  content: counter(qb-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin-bottom: var(--space-3);
  background: var(--qb-navy-900);
  color: var(--color-primary);
  border-radius: var(--radius-circle);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.qb-step-card__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.qb-step-card__text  { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-snug); margin: 0; }