.page-products {
  --prd-panel: #ffffff;
  --prd-panel-soft: rgba(255, 255, 255, .06);
  --prd-radius-lg: 4px;
  --prd-gap: clamp(16px, 2.6vw, 30px);
  background: var(--mdb-paper);
  color: var(--mdb-ink);
}

/* ---------- HERO ---------- */
.page-products .prd-hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 84px);
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(184, 255, 60, .18), transparent 58%),
    linear-gradient(180deg, var(--mdb-qing) 0%, var(--mdb-qing-deep) 100%);
  color: var(--mdb-paper);
  overflow: hidden;
}
.page-products .prd-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -1px -10%;
  height: 120px;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(244, 241, 234, .07) 22px 44px);
  pointer-events: none;
}
.page-products .prd-hero .mdb-crumbs__link { color: var(--mdb-lime-soft); }
.page-products .prd-hero .mdb-crumbs__current { color: var(--mdb-paper); }
.page-products .prd-hero .mdb-crumbs__item + .mdb-crumbs__item::before { color: rgba(244, 241, 234, .5); }

.page-products .prd-hero__collage {
  display: grid;
  gap: var(--prd-gap);
  margin-top: clamp(24px, 4vw, 48px);
  align-items: end;
}
.page-products .prd-hero__title {
  color: var(--mdb-paper);
  margin: 12px 0 0;
  letter-spacing: -.01em;
}
.page-products .prd-hero__lead {
  color: rgba(244, 241, 234, .82);
  max-width: 40em;
  margin-top: 18px;
}
.page-products .prd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .prd-console {
  position: relative;
  border-radius: var(--prd-radius-lg);
  padding: 0;
  overflow: hidden;
}
.page-products .prd-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(43, 30, 74, .55);
  border-bottom: 1px solid var(--mdb-line-dark);
}
.page-products .prd-console__bar .mdb-index { color: var(--mdb-lime); }
.page-products .prd-console__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mdb-lime);
  box-shadow: 0 0 0 4px rgba(184, 255, 60, .2);
}
.page-products .prd-console__body {
  background: var(--mdb-purple);
  border: 1px solid var(--mdb-line-dark);
  border-top: 0;
  padding: clamp(20px, 3vw, 28px);
  color: var(--mdb-paper);
}
.page-products .prd-console__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--mdb-qing-soft);
}
.page-products .prd-console__big {
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1;
  margin: 8px 0 6px;
  color: var(--mdb-lime);
}
.page-products .prd-console__sub {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 241, 234, .72);
  max-width: 30em;
}
.page-products .prd-console__list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--mdb-line-dark);
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.page-products .prd-console__list li { display: flex; gap: 12px; align-items: baseline; }
.page-products .prd-console__list .mdb-mono { color: var(--mdb-orange); min-width: 3.4em; }

/* ---------- SECTION 01 ROUNDS ---------- */
.page-products .prd-rounds { background: var(--mdb-paper); }
.page-products .prd-split { align-items: center; row-gap: var(--prd-gap); }
.page-products .prd-split__text .mdb-index { display: block; margin-bottom: 12px; }
.page-products .prd-split__text .mdb-h1 { margin: 0 0 20px; }

.page-products .prd-path {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-products .prd-path__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mdb-surface);
  border-left: 3px solid var(--mdb-qing);
}
.page-products .prd-path__item:last-child { border-left-color: var(--mdb-orange); }
.page-products .prd-path__text { font-size: 15px; color: var(--mdb-gray); }

.page-products .prd-photo { margin: 0; }
.page-products .prd-photo .mdb-figure__frame {
  border-radius: var(--prd-radius-lg);
  background: linear-gradient(150deg, var(--mdb-qing-deep), var(--mdb-purple));
  overflow: hidden;
}
.page-products .prd-photo .mdb-figure__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}
.page-products .prd-photo .mdb-figure__caption {
  font-size: 13px;
  color: var(--mdb-gray);
  margin-top: 10px;
  max-width: 40em;
}
.page-products .prd-photo .mdb-figure__data {
  font-family: var(--mdb-font-mono);
  letter-spacing: .04em;
}

/* ---------- SECTION 02 BOARD ---------- */
.page-products .prd-board { background: var(--mdb-purple); color: var(--mdb-paper); }
.page-products .prd-board .mdb-index { color: var(--mdb-orange); display: block; margin-bottom: 12px; }
.page-products .prd-board .mdb-h1 { color: var(--mdb-paper); margin: 0 0 16px; }
.page-products .prd-board__lead { color: rgba(244, 241, 234, .78); max-width: 42em; }
.page-products .prd-board__head { margin-bottom: clamp(26px, 4vw, 48px); }

.page-products .prd-board__layout {
  display: grid;
  gap: var(--prd-gap);
  align-items: start;
}
.page-products .prd-board__filter {
  background: rgba(244, 241, 234, .05);
  border: 1px solid var(--mdb-line-dark);
  border-radius: var(--prd-radius-lg);
  padding: clamp(16px, 2.4vw, 22px);
  display: grid;
  gap: 18px;
}
.page-products .prd-board__group { display: grid; gap: 10px; }
.page-products .prd-board__groupTitle {
  font-family: var(--mdb-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mdb-qing-soft);
}
.page-products .prd-chipRow { display: flex; flex-wrap: wrap; gap: 8px; }
.page-products .prd-chip {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--mdb-line-dark);
  color: rgba(244, 241, 234, .7);
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.page-products .prd-chip:hover,
.page-products .prd-chip:focus-visible {
  border-color: var(--mdb-lime);
  color: var(--mdb-paper);
}
.page-products .prd-chip.is-active {
  background: var(--mdb-lime);
  border-color: var(--mdb-lime);
  color: var(--mdb-purple);
  font-weight: 700;
}

.page-products .prd-board__figure .mdb-figure__caption { color: rgba(244, 241, 234, .6); }

.page-products .prd-rows {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 24px);
  background: rgba(244, 241, 234, .04);
  border: 1px solid var(--mdb-line-dark);
  border-radius: var(--prd-radius-lg);
}
.page-products .prd-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) minmax(60px, 3fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mdb-line-dark-soft);
}
.page-products .prd-row:last-of-type { border-bottom: 0; }
.page-products .prd-row__team { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.page-products .prd-row__rank { font-size: 12px; color: var(--mdb-orange); }
.page-products .prd-row__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mdb-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-products .prd-row__track {
  position: relative;
  height: 10px;
  background: rgba(244, 241, 234, .12);
  border-radius: 999px;
  overflow: hidden;
}
.page-products .prd-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--mdb-lime), var(--mdb-lime-soft));
  border-radius: 999px;
  transition: filter 160ms ease-out;
}
.page-products .prd-row__track:hover .prd-row__fill { filter: brightness(1.12); }
.page-products .prd-row__num { font-size: 13px; color: var(--mdb-lime); }
.page-products .prd-row__num--out { color: var(--mdb-qing-soft); }
.page-products .prd-rows__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(244, 241, 234, .58);
}

/* ---------- SECTION 03 VENUE ---------- */
.page-products .prd-venue { background: var(--mdb-surface); }
.page-products .prd-venue__grid {
  display: grid;
  gap: var(--prd-gap);
  align-items: center;
}
.page-products .prd-venue__text .mdb-index { display: block; margin-bottom: 12px; }
.page-products .prd-venue__text .mdb-h1 { margin: 0 0 20px; }

.page-products .prd-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: prd-step;
}
.page-products .prd-steps__item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--mdb-line);
}
.page-products .prd-steps__item:last-child { border-bottom: 1px solid var(--mdb-line); }
.page-products .prd-steps__num {
  color: var(--mdb-orange);
  font-size: 13px;
  padding-top: 4px;
  min-width: 1.6em;
}
.page-products .prd-steps__body h3 { margin: 0 0 6px; }
.page-products .prd-steps__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mdb-gray);
  max-width: 34em;
}
.page-products .prd-venue__src {
  display: inline-block;
  margin: 22px 0 0;
  border: 0;
}

/* ---------- SECTION 04 CLUB ---------- */
.page-products .prd-club {
  background: var(--mdb-ink);
  color: var(--mdb-paper);
}
.page-products .prd-club .mdb-index { color: var(--mdb-lime); display: block; margin-bottom: 12px; }
.page-products .prd-club .mdb-h1 { color: var(--mdb-paper); margin: 0 0 16px; }
.page-products .prd-club__lead { color: rgba(244, 241, 234, .76); max-width: 42em; }
.page-products .prd-club__head { margin-bottom: clamp(26px, 4vw, 44px); }

.page-products .prd-club__flow {
  display: grid;
  gap: var(--prd-gap);
  align-items: start;
  grid-template-columns: 1fr;
}
.page-products .prd-club__card {
  background: #1C2029;
  border: 1px solid var(--mdb-line-dark);
  border-radius: var(--prd-radius-lg);
  padding: clamp(18px, 2.6vw, 26px);
}
.page-products .prd-club__card .mdb-card__meta {
  color: var(--mdb-orange);
  font-size: 12px;
  letter-spacing: .08em;
}
.page-products .prd-club__card .mdb-card__title { color: var(--mdb-paper); }
.page-products .prd-club__card .mdb-card__text { color: rgba(244, 241, 234, .7); }
.page-products .prd-club__card.mdb-card--accent {
  background: var(--mdb-lime);
  border-color: var(--mdb-lime);
}
.page-products .prd-club__card.mdb-card--accent .mdb-card__meta { color: rgba(43, 30, 74, .7); }
.page-products .prd-club__card.mdb-card--accent .mdb-card__title,
.page-products .prd-club__card.mdb-card--accent .mdb-card__text { color: var(--mdb-purple); }

.page-products .prd-club__figure { margin: clamp(28px, 4vw, 48px) 0 0; }
.page-products .prd-club__figure .mdb-figure__caption { color: rgba(244, 241, 234, .6); }

/* ---------- SECTION 05 INDEX ---------- */
.page-products .prd-index {
  position: relative;
  background: var(--mdb-qing-deep);
  color: var(--mdb-paper);
  overflow: hidden;
}
.page-products .prd-index__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-products .prd-index__bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  max-width: 100%;
}
.page-products .prd-index__weave {
  position: absolute;
  inset: 0;
  opacity: .35;
}
.page-products .prd-index__inner { position: relative; z-index: 1; }
.page-products .prd-index .mdb-index { color: var(--mdb-lime); display: block; margin-bottom: 12px; }
.page-products .prd-index .mdb-h1 { color: var(--mdb-paper); margin: 0 0 18px; }
.page-products .prd-index__prose { color: rgba(244, 241, 234, .82); }
.page-products .prd-index__head { margin-bottom: clamp(26px, 4vw, 44px); }

.page-products .prd-index__demo {
  background: rgba(20, 23, 28, .72);
  border: 1px solid var(--mdb-line-dark);
  border-radius: var(--prd-radius-lg);
  padding: clamp(18px, 2.6vw, 28px);
}
.page-products .prd-index__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--mdb-line-dark);
  border-radius: var(--prd-radius-lg);
  background: rgba(244, 241, 234, .05);
  margin-bottom: 20px;
}
.page-products .prd-index__cursor { color: var(--mdb-lime); }
.page-products .prd-index__query {
  font-family: var(--mdb-font-mono);
  font-size: 15px;
  color: var(--mdb-paper);
  letter-spacing: .02em;
}
.page-products .prd-index__hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.page-products .prd-index__hit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(244, 241, 234, .05);
  border-left: 3px solid var(--mdb-lime);
  border-radius: 0 var(--prd-radius-lg) var(--prd-radius-lg) 0;
}
.page-products .prd-index__hitText {
  flex: 1 1 200px;
  font-size: 15px;
  color: var(--mdb-paper);
}
.page-products .prd-index__hitNum { font-size: 13px; color: var(--mdb-lime); }
.page-products .prd-index__hint {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(244, 241, 234, .6);
}

.page-products .prd-more { margin-top: clamp(30px, 4.4vw, 52px); }
.page-products .prd-more__title { color: var(--mdb-lime-soft); margin: 0 0 14px; }
.page-products .prd-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.page-products .prd-more__list li { border-top: 1px solid var(--mdb-line-dark); }
.page-products .prd-more__list li:last-child { border-bottom: 1px solid var(--mdb-line-dark); }
.page-products .prd-more__link {
  display: block;
  padding: 15px 6px 15px 0;
  color: var(--mdb-paper);
  text-decoration: none;
  font-size: 15px;
  transition: color 160ms ease-out, padding-left 160ms ease-out;
}
.page-products .prd-more__link::before {
  content: "→";
  font-family: var(--mdb-font-mono);
  color: var(--mdb-orange);
  margin-right: 12px;
}
.page-products .prd-more__link:hover,
.page-products .prd-more__link:focus-visible {
  color: var(--mdb-lime);
  padding-left: 8px;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 720px) {
  .page-products .prd-hero__collage {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  }
  .page-products .prd-board__layout {
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
  }
  .page-products .prd-board__figure { grid-column: 2; }
  .page-products .prd-rows { grid-column: 1 / -1; }
  .page-products .prd-venue__grid {
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1fr);
  }
  .page-products .prd-club__flow { grid-template-columns: repeat(3, 1fr); }
  .page-products .prd-row {
    grid-template-columns: minmax(150px, 1.6fr) minmax(120px, 4fr) 4.2em 4.2em;
  }
}

@media (min-width: 1024px) {
  .page-products .prd-hero__collage {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr);
    gap: clamp(28px, 4vw, 56px);
  }
  .page-products .prd-split { column-gap: clamp(28px, 5vw, 72px); }
  .page-products .prd-venue__grid { column-gap: clamp(28px, 5vw, 72px); }
  .page-products .prd-board__layout {
    grid-template-columns: minmax(250px, .45fr) minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .page-products .prd-row {
    grid-template-columns: 1fr auto auto;
    row-gap: 6px;
  }
  .page-products .prd-row__team { grid-column: 1 / -1; }
  .page-products .prd-row__track { grid-column: 1 / -1; }
  .page-products .prd-row__num { justify-self: start; }
  .page-products .prd-index__hitText { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .prd-chip,
  .page-products .prd-row__fill,
  .page-products .prd-more__link { transition: none; }
}
<<<END>>>

.page-products {
  --w: 1rem;
}