.page-products{
  --pp-gap: clamp(14px,2vw,26px);
  --pp-cut: 14px;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 18px var(--pad-x) 80px;
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-products *,
.page-products *::before,
.page-products *::after{ box-sizing: border-box; }

.page-products h1,
.page-products h2,
.page-products h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.page-products p{ margin: 0 0 12px; }
.page-products p:last-child{ margin-bottom: 0; }
.page-products ul,
.page-products ol{ margin: 0; padding: 0; list-style: none; }
.page-products img{ max-width: 100%; height: auto; display: block; }
.page-products a{ color: inherit; }

.page-products .numeric{
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.page-products .caption{
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

.page-products .sec-head{ margin-bottom: 22px; }
.page-products .sec-head h2{ font-size: clamp(22px,4.2vw,32px); }
.page-products .sec-head p{ max-width: 66ch; font-size: 15px; line-height: 1.72; color: var(--muted); }

.page-products .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--cyan);
  border: 1px solid var(--cyan);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.page-products .btn:hover{ background: var(--orange); border-color: var(--orange); }
.page-products .btn--ghost{
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan-dim);
}
.page-products .btn--ghost:hover{
  background: var(--glass);
  color: var(--orange);
  border-color: var(--orange);
}

/* ---------- breadcrumb ---------- */
.page-products .breadcrumb{ padding: 6px 0 18px; }
.page-products .breadcrumb ol{ display: flex; flex-wrap: wrap; gap: 0; }
.page-products .breadcrumb__item{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-display);
}
.page-products .breadcrumb__item + .breadcrumb__item::before{
  content: "/";
  color: var(--cyan-dim);
  padding: 0 8px;
}
.page-products .breadcrumb__item a{ text-decoration: none; border-bottom: 1px solid transparent; }
.page-products .breadcrumb__item a:hover{ color: var(--cyan); border-bottom-color: var(--cyan); }
.page-products .breadcrumb__item[aria-current="page"]{ color: var(--orange); }

/* ---------- page head ---------- */
.page-products .proj-head{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--pp-gap);
  padding-bottom: 8px;
}
.page-products .proj-head__kicker{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--glass);
  padding: 6px 10px;
  margin: 0 0 14px;
}
.page-products .proj-head__title{
  font-size: clamp(28px,6.4vw,50px);
  margin: 0 0 16px;
}
.page-products .proj-head .lede{
  font-size: 16px;
  line-height: 1.72;
  color: var(--text);
  max-width: 62ch;
}
.page-products .proj-head .caption{ margin-top: 14px; max-width: 60ch; }
.page-products .proj-head__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.page-products .proj-head__media{
  position: relative;
  margin: 0;
  background: var(--panel);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%);
}
.page-products .proj-head__media img{
  width: 100%;
  aspect-ratio: 1200 / 760;
  object-fit: cover;
  filter: brightness(.8) saturate(.9);
}
.page-products .proj-head__media figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 10px;
  font-size: 12px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(10,13,16,0), rgba(10,13,16,.92));
}

/* ---------- board ---------- */
.page-products .board{ margin-top: clamp(44px,6vw,84px); }
.page-products .board__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--pp-gap);
}
.page-products .board__item{
  padding: 22px 20px 20px;
  background: var(--panel);
  clip-path: polygon(var(--pp-cut) 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%, 0 var(--pp-cut));
}
.page-products .board__tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}
.page-products .board__title{
  font-size: 20px;
  margin: 0 0 10px;
}
.page-products .board__item > p.body-text{
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.page-products .board__facts{
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.page-products .board__facts li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.page-products .board__facts b{
  color: var(--text);
  font-size: 16px;
}
.page-products .board__link{
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-dim);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.page-products .board__link:hover{ color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- score side ---------- */
.page-products .score-side{ margin-top: clamp(48px,7vw,96px); }
.page-products .group-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}
.page-products .segmented__btn{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 16px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.page-products .segmented__btn:hover{ color: var(--text); border-color: var(--cyan-dim); }
.page-products .segmented__btn[aria-selected="true"]{
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
}

.page-products .matrix{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
}
.page-products .matrix__cell{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--text);
  background: var(--panel);
  border-left: 3px solid var(--cyan-dim);
}
.page-products .matrix__cell--on{
  border-left-color: var(--orange);
  background: rgba(255,122,47,.12);
  color: var(--orange);
}
.page-products .matrix__cell--cup{
  border-left-color: var(--orange-dim);
  background: rgba(255,122,47,.05);
}
.page-products .score-side > .caption{ margin-top: 12px; }

/* ---------- timeline band ---------- */
.page-products .timeline-band{
  margin-top: clamp(40px,5vw,72px);
  padding: 28px 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 22px;
  background: linear-gradient(158deg, rgba(47,230,200,.08), rgba(18,23,29,.94) 58%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-products .timeline-band__media{
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%);
}
.page-products .timeline-band__media img{
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(.72) saturate(.85);
}
.page-products .timeline-band__body h3{ font-size: clamp(18px,3vw,22px); }
.page-products .timeline-band__body p{ font-size: 14px; line-height: 1.72; color: var(--muted); }

.page-products .tl{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 14px 2px 6px;
  margin-top: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.page-products .tl__node{
  position: relative;
  flex: 0 0 auto;
  width: 156px;
  padding: 24px 12px 14px;
  background: var(--panel);
  border-top: 2px solid var(--cyan-dim);
  scroll-snap-align: start;
}
.page-products .tl__node::before{
  content: "";
  position: absolute;
  top: -7px;
  left: 12px;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  transform: rotate(45deg);
}
.page-products .tl__node--on{ border-top-color: var(--orange); background: rgba(255,122,47,.08); }
.page-products .tl__node--on::before{ background: var(--orange); }
.page-products .tl__lap{
  display: block;
  font-size: 12px;
  color: var(--cyan);
  margin-bottom: 6px;
}
.page-products .tl__node--on .tl__lap{ color: var(--orange); }
.page-products .tl__txt{
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- fields ---------- */
.page-products .fields{ margin-top: clamp(48px,7vw,96px); }
.page-products .field-split{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--pp-gap);
}
.page-products .field-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-products .field{
  background: var(--panel);
  border-left: 3px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.page-products .field:hover,
.page-products .field:focus-within{
  border-left-color: var(--orange);
  background: rgba(47,230,200,.05);
}
.page-products .field__trigger{
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.page-products .field__no{
  display: block;
  font-size: 12px;
  color: var(--orange);
}
.page-products .field__name{
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
}
.page-products .field__val{
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.page-products .field__layer{
  padding: 0 16px 16px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--muted);
}
.page-products .field__layer[hidden]{ display: none; }

.page-products .demo-card{
  position: relative;
  padding: 24px 20px 20px;
  background: var(--panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%);
}
.page-products .demo-card__tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cyan);
  margin: 0 0 10px;
}
.page-products .demo-card h3{ font-size: 20px; }
.page-products .demo-card__teams{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--cyan-dim);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-products .demo-card__vs{ color: var(--orange); font-size: 13px; }
.page-products .demo-card__rows li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.page-products .demo-card__rows li:last-child{ border-bottom: 0; }
.page-products .demo-card__rows span{ color: var(--muted); }
.page-products .demo-card__rows b{ color: var(--text); font-size: 15px; }
.page-products .demo-card > .caption{ margin-top: 14px; }

/* ---------- slash band ---------- */
.page-products .slash-band{
  position: relative;
  margin: clamp(44px,6vw,84px) 0;
  padding: 22px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(96deg, rgba(47,230,200,.11), rgba(18,23,29,.6) 60%, rgba(255,122,47,.09));
  border-left: 3px solid var(--cyan);
  overflow: hidden;
}
.page-products .slash-band::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(96deg, rgba(47,230,200,.06) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
.page-products .slash-band__note{
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}
.page-products .slash-band__value{
  position: relative;
  font-size: 30px;
  color: var(--cyan);
}

/* ---------- player side ---------- */
.page-products .player-side{
  position: relative;
  margin-top: clamp(52px,8vw,104px);
  isolation: isolate;
}
.page-products .player-side__bg{
  position: absolute;
  top: 0;
  right: 0;
  width: min(58%, 420px);
  height: auto;
  opacity: .14;
  z-index: -1;
  object-fit: cover;
  filter: brightness(.7) saturate(.7);
  pointer-events: none;
}
.page-products .team-card{
  position: relative;
  margin-top: 18px;
  padding: 20px 16px 16px;
  background: var(--panel);
  clip-path: polygon(var(--pp-cut) 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%, 0 var(--pp-cut));
}
.page-products .team-card__head{
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cyan-dim);
  margin-bottom: 4px;
}
.page-products .team-card__title{ font-size: 18px; margin: 0 0 6px; }
.page-products .team-card__meta{
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.page-products .roster{ border-bottom: 1px solid var(--line); }
.page-products .roster:last-child{ border-bottom: 0; }
.page-products .roster__row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  width: 100%;
  padding: 13px 4px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.page-products .roster__row:hover,
.page-products .roster__row:focus-visible{
  border-left-color: var(--orange);
  background: rgba(47,230,200,.05);
}
.page-products .roster__no{ font-size: 14px; color: var(--orange); min-width: 26px; }
.page-products .roster__pos{
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.page-products .roster__way{ font-size: 12px; color: var(--muted); }
.page-products .roster__apps{ margin-left: auto; font-size: 15px; }
.page-products .roster__goals{
  font-size: 15px;
  color: var(--cyan);
  min-width: 62px;
  text-align: right;
}
.page-products .roster__goals::before{
  content: "进球 ";
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.page-products .roster__layer{
  padding: 0 4px 14px 30px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--muted);
}
.page-products .roster__layer[hidden]{ display: none; }
.page-products .team-card > .caption{ margin-top: 14px; }

/* ---------- review ---------- */
.page-products .review{ margin-top: clamp(52px,8vw,104px); }
.page-products .review__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: var(--pp-gap);
}
.page-products .review__text h2{ font-size: clamp(22px,4.2vw,32px); }
.page-products .review__text p{ font-size: 15px; line-height: 1.72; color: var(--muted); max-width: 62ch; }
.page-products .review__media{
  margin: 18px 0 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pp-cut)), calc(100% - var(--pp-cut)) 100%, 0 100%);
}
.page-products .review__media img{
  width: 100%;
  aspect-ratio: 9 / 7;
  object-fit: cover;
  filter: brightness(.72) saturate(.85);
}
.page-products .review__media figcaption{
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  background: var(--ink);
}
.page-products .review__table{
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-products .data-table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}
.page-products .data-table caption{
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
}
.page-products .data-table th,
.page-products .data-table td{
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}
.page-products .data-table thead th{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid var(--cyan-dim);
  white-space: nowrap;
}
.page-products .data-table tbody tr:nth-child(even){ background: rgba(47,230,200,.04); }
.page-products .data-table tbody td:first-child{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--orange);
  width: 46px;
}
.page-products .data-table tbody td:last-child{ color: var(--muted); }

/* ---------- scenes ---------- */
.page-products .scenes{
  position: relative;
  margin-top: clamp(52px,8vw,104px);
  padding: 32px 20px;
  overflow: hidden;
  isolation: isolate;
}
.page-products .scenes__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  z-index: -1;
  filter: brightness(.6) saturate(.7);
  pointer-events: none;
}
.page-products .scenes h2{ font-size: clamp(22px,4.2vw,32px); }
.page-products .scenes__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px;
  margin-top: 22px;
}
.page-products .scene{
  padding: 18px 16px;
  background: rgba(10,13,16,.74);
  border-left: 3px solid var(--cyan);
}
.page-products .scene__no{
  font-size: 12px;
  color: var(--orange);
  margin: 0 0 8px;
}
.page-products .scene__title{ font-size: 18px; margin: 0 0 8px; }
.page-products .scene p:last-child{
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
  margin: 0;
}
.page-products .scene a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-dim);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.page-products .scene a:hover{ color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- question teaser ---------- */
.page-products .q-teaser{ margin-top: clamp(48px,7vw,88px); }
.page-products .q-teaser h2{ font-size: clamp(22px,4.2vw,32px); }
.page-products .q-list{ margin-top: 16px; }
.page-products .q-list li{ border-bottom: 1px solid var(--line); }
.page-products .q-list li:first-child{ border-top: 1px solid var(--line); }
.page-products .q-list a{
  display: block;
  position: relative;
  padding: 14px 30px 14px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t-fast);
}
.page-products .q-list a::after{
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan-dim);
  transition: color var(--t-fast), transform var(--t-fast);
}
.page-products .q-list a:hover,
.page-products .q-list a:focus-visible{ color: var(--orange); }
.page-products .q-list a:hover::after,
.page-products .q-list a:focus-visible::after{
  color: var(--orange);
  transform: translateY(-50%) translateX(4px);
}
.page-products .q-teaser > .body-text{
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 66ch;
}
.page-products .q-teaser > .body-text a{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan-dim);
}
.page-products .q-teaser > .body-text a:hover{ color: var(--orange); border-bottom-color: var(--orange); }

/* ---------- responsive ---------- */
@media (min-width: 640px){
  .page-products .board__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-products .matrix{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .page-products .matrix__cell{ padding: 16px 6px; }
  .page-products .timeline-band{
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    align-items: center;
    padding: 34px 26px;
  }
  .page-products .scenes__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-products .scenes{ padding: 40px 28px; }
  .page-products .slash-band{ padding: 26px 28px; }
}

@media (min-width: 900px){
  .page-products .proj-head{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    align-items: end;
    gap: clamp(24px,3vw,52px);
  }
  .page-products .board__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .page-products .scenes__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .page-products .field-split{
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
    align-items: start;
    gap: clamp(24px,3vw,44px);
  }
  .page-products .demo-card{
    transform: translateX(-30px);
    margin-top: 44px;
  }
  .page-products .review__grid{
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    align-items: start;
    gap: clamp(24px,3vw,48px);
  }
  .page-products .team-card{ padding: 24px 24px 18px; }
}

@media (min-width: 1180px){
  .page-products .matrix{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .page-products .matrix__cell{ padding: 20px 4px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce){
  .page-products *{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
<<<END>>>