.page-products {
  --page-bg-card: #112836;
  --page-bg-dark: #071521;
  --page-border-gold: rgba(226, 192, 126, 0.35);
  --page-gold-bright: #E2C07E;
  --page-gold-shadow: #B8863B;
  --page-emerald: #1E9B77;
  --page-text-dim: #A5B0AC;
  --page-text-light: #EFE7D8;
  --page-font-headings: 'Source Han Serif SC', 'Songti SC', Georgia, serif;
  --page-font-body: 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --page-font-data: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}
.page-products .breadcrumb { margin-bottom: 2rem; }
.page-products .products-hero { border-bottom: 1px solid var(--page-border-gold); padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
.page-products .products-hero__content { max-width: 880px; }
.page-products .products-hero h1 { font-family: var(--page-font-headings); font-size: 1.8rem; line-height: 1.3; color: var(--page-text-light); margin: 0.5rem 0 0.8rem; }
.page-products .products-hero__desc { font-size: 0.95rem; line-height: 1.7; color: var(--page-text-dim); }
.page-products .kicker { font-family: var(--page-font-data); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--page-gold-bright); margin-bottom: 0.6rem; }
.page-products .kicker::before { display: inline-block; content: ""; width: 1.5rem; height: 1px; background: var(--page-gold-bright); vertical-align: middle; margin-right: 0.6rem; }
.page-products .tab-switch { display: flex; gap: 0.4rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--page-border-gold); padding-bottom: 0; flex-wrap: wrap; }
.page-products .tab-switch__item { font-family: var(--page-font-body); font-size: 0.9rem; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0.7rem 0.8rem; color: var(--page-text-dim); cursor: pointer; transition: color 0.25s ease-out, border-color 0.25s ease-out; }
.page-products .tab-switch__item:hover { color: var(--page-text-light); }
.page-products .tab-switch__item.is-active { color: var(--page-gold-bright); border-bottom-color: var(--page-gold-bright); }
.page-products .tab-panel { display: none; }
.page-products .tab-panel.is-active { display: block; animation: page-fade-in 0.35s ease-out; }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-products .section { display: block; padding: 2rem 0; border-bottom: 1px solid var(--page-border-gold); }
.page-products .section:last-of-type { border-bottom: none; }
.page-products .grid-12 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.page-products .span-4, .page-products .span-5, .page-products .span-7, .page-products .span-8 { grid-column: span 1; }
.page-products .section-title { font-family: var(--page-font-headings); font-size: 1.5rem; line-height: 1.3; color: var(--page-text-light); margin: 0 0 0.8rem; }
.page-products .grid-12 p { font-size: 0.9rem; line-height: 1.7; color: var(--page-text-dim); }
.page-products .note { background: rgba(30, 155, 119, 0.12); border-left: 3px solid var(--page-emerald); padding: 0.8rem 1rem; font-size: 0.85rem; color: var(--page-text-light); line-height: 1.6; }
.page-products img { max-width: 100%; height: auto; object-fit: cover; display: block; border-radius: 8px; }
.page-products .products-platform__meta img { margin-bottom: 1rem; }
.page-products .products-platform__meta h3 { font-family: var(--page-font-headings); font-size: 1rem; color: var(--page-text-light); margin: 1.2rem 0 0.6rem; }
.page-products .products-platform__meta ul { list-style: none; padding-left: 0; }
.page-products .products-platform__meta li { font-size: 0.85rem; color: var(--page-text-dim); padding-left: 1.2rem; position: relative; margin-bottom: 0.4rem; }
.page-products .products-platform__meta li::before { content: "—"; position: absolute; left: 0; color: var(--page-gold-bright); }
.page-products .timeline-list { list-style: none; padding-left: 0; }
.page-products .timeline-list li { font-size: 0.9rem; color: var(--page-text-dim); padding-left: 5rem; position: relative; padding-bottom: 1rem; border-left: 1px solid var(--page-border-gold); margin-left: 1.2rem; }
.page-products .timeline-list li:last-child { border-left-color: transparent; }
.page-products .timeline-list li span { position: absolute; left: 0; top: -0.2rem; width: 4rem; font-family: var(--page-font-data); font-size: 0.7rem; color: var(--page-gold-bright); text-align: left; }
.page-products .products-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0; }
.page-products .products-stats__item { background: var(--page-bg-card); padding: 1rem 1rem; border-radius: 8px; border: 1px solid var(--page-border-gold); }
.page-products .products-stats__item dt { font-size: 0.75rem; color: var(--page-text-dim); margin-bottom: 0.3rem; }
.page-products .products-stats__item dd { font-family: var(--page-font-data); font-size: 1.4rem; color: var(--page-gold-bright); margin-left: 0; }
.page-products .products-benefits__intro { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.5rem; }
.page-products .products-benefits__intro img { width: 100%; max-width: 280px; }
.page-products .benefits-note { font-size: 0.8rem; color: var(--page-text-dim); margin-top: 1rem; }
.page-products .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; border: 1px solid var(--page-border-gold); border-radius: 8px; }
.page-products table.benefits-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 0.85rem; }
.page-products .benefits-table th, .page-products .benefits-table td { padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--page-border-gold); }
.page-products .benefits-table thead th { background: var(--page-gold-bright); color: #0A1E2C; font-family: var(--page-font-body); font-weight: 600; }
.page-products .benefits-table tbody tr:last-child th, .page-products .benefits-table tbody tr:last-child td { border-bottom: none; }
.page-products .benefits-table tbody tr:hover { background: rgba(226, 192, 126, 0.04); }
.page-products .benefits-table th[scope="row"] { color: var(--page-text-light); font-weight: 500; white-space: nowrap; }
.page-products .benefits-table td { color: var(--page-text-dim); }
.page-products .benefits-table td:first-child, .page-products .benefits-table th:first-child { border-left: none; }
.page-products .benefits-table td:last-child, .page-products .benefits-table th:last-child { border-right: none; }
.page-products .download-card { display: flex; align-items: center; gap: 1.5rem; background: var(--page-bg-card); border: 1px solid var(--page-border-gold); border-radius: 8px; padding: 1.2rem; margin: 1.2rem 0; flex-wrap: wrap; }
.page-products .download-card img { width: 100px; height: 100px; }
.page-products .download-card__btn { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; background: linear-gradient(135deg, #E2C07E 0%, #B8863B 100%); color: #0A1E2C; border: none; border-radius: 999px; padding: 0.8rem 1.6rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: var(--page-font-body); transition: box-shadow 0.3s ease-out, transform 0.2s ease-out; }
.page-products .download-card__btn:hover { box-shadow: 0 0 0 4px rgba(226, 192, 126, 0.35); transform: translateY(-1px); }
.page-products .download-card__btn:active { transform: translateY(1px); }
.page-products .download-card__door-handle { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.page-products .download-card__door-handle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.page-products .download-card__stamp { position: absolute; top: -0.6rem; right: -0.6rem; background: transparent; border: 2px solid #0A1E2C; color: #0A1E2C; font-size: 0.6rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; transform: rotate(12deg); font-family: var(--page-font-data); }
.page-products .download-note { font-family: var(--page-font-data); font-size: 0.75rem; color: var(--page-text-dim); background: rgba(226,192,126,0.08); padding: 0.7rem 0.9rem; border-radius: 6px; border-left: 3px solid var(--page-gold-bright); }
.page-products .download-sys-list { list-style: none; padding-left: 0; margin: 0; }
.page-products .download-sys-list li { font-family: var(--page-font-data); font-size: 0.9rem; color: var(--page-text-light); padding: 0.5rem 0 0.5rem 1.6rem; border-bottom: 1px solid var(--page-border-gold); position: relative; }
.page-products .download-sys-list li::before { content: "✔"; position: absolute; left: 0; color: var(--page-emerald); font-weight: 700; }
.page-products .download-sys-list li:last-child { border-bottom: none; }
.page-products .products-guide img { width: 100%; max-width: 280px; margin-bottom: 1rem; }
.page-products .guide-steps { list-style: none; counter-reset: guide-step; padding-left: 0; margin: 0; }
.page-products .guide-steps li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--page-border-gold); }
.page-products .guide-steps li:last-child { border-bottom: none; }
.page-products .guide-steps__icon { font-family: var(--page-font-data); font-size: 0.8rem; color: var(--page-gold-bright); border: 1px solid var(--page-border-gold); border-radius: 50%; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.page-products .guide-steps h3 { font-family: var(--page-font-headings); font-size: 0.95rem; color: var(--page-text-light); margin: 0 0 0.3rem; }
.page-products .guide-steps p { font-size: 0.85rem; line-height: 1.6; color: var(--page-text-dim); margin: 0; }
.page-products .login-check-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem; }
.page-products .login-check-list li { font-size: 0.9rem; color: var(--page-text-dim); padding: 0.5rem 0 0.5rem 1.4rem; position: relative; border-bottom: 1px dashed rgba(226,192,126,0.15); }
.page-products .login-check-list li:last-child { border-bottom: none; }
.page-products .login-check-list li::before { content: "→"; position: absolute; left: 0; color: var(--page-gold-bright); font-family: var(--page-font-body); }
.page-products .btn-group { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.page-products .btn { display: inline-block; padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.85rem; text-decoration: none; transition: box-shadow 0.3s ease-out, transform 0.2s ease-out; }
.page-products .btn--primary { background: linear-gradient(135deg, #E2C07E 0%, #B8863B 100%); color: #0A1E2C; font-weight: 600; border: 1px solid transparent; }
.page-products .btn--primary:hover { box-shadow: 0 0 0 4px rgba(226, 192, 126, 0.3); transform: translateY(-2px); }
.page-products .btn--outline { background: transparent; color: var(--page-gold-bright); border: 1px solid var(--page-gold-bright); }
.page-products .btn--outline:hover { background: rgba(226, 192, 126, 0.1); transform: translateY(-2px); }
.page-products .products-aside { background: var(--page-bg-card); border: 1px solid var(--page-border-gold); border-radius: 8px; padding: 1.2rem; }
.page-products .products-aside h3 { font-family: var(--page-font-headings); font-size: 0.95rem; color: var(--page-text-light); margin: 0 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--page-border-gold); }
.page-products .products-aside ul { list-style: none; padding-left: 0; margin: 0; }
.page-products .products-aside li { margin-bottom: 0.3rem; }
.page-products .products-aside a { font-size: 0.85rem; color: var(--page-text-dim); text-decoration: none; display: block; padding: 0.35rem 0; transition: color 0.2s ease-out; }
.page-products .products-aside a:hover { color: var(--page-gold-bright); }
@media (min-width: 640px) {
  .page-products .products-hero h1 { font-size: 2.2rem; }
  .page-products .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
  .page-products .span-7 { grid-column: span 7; }
  .page-products .span-5 { grid-column: span 5; }
  .page-products .span-4 { grid-column: span 4; }
  .page-products .span-8 { grid-column: span 8; }
  .page-products .products-benefits__intro { grid-template-columns: 1fr auto; gap: 2rem; }
  .page-products .download-card img { width: 200px; height: 200px; }
  .page-products .products-stats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .page-products .guide-steps { padding-left: 0; }
  .page-products .guide-steps li { padding-left: 0.5rem; }
}
@media (min-width: 1024px) {
  .page-products .tab-switch { gap: 1rem; }
  .page-products .tab-switch__item { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
  .page-products .section { padding: 3.5rem 0; }
  .page-products .products-hero { padding-bottom: 3.5rem; }
}
.page-products .tab-switch { position: relative; }
.page-products .tab-panel:target { display: block; }
.page-products .btn:focus, .page-products .tab-switch__item:focus, .page-products .download-card__btn:focus, .page-products .benefits-table a:focus { outline: 2px solid var(--page-gold-bright); outline-offset: 2px; }
.page-products a { color: var(--page-gold-bright); transition: color 0.2s ease-out; }
.page-products a:hover { color: var(--page-gold-bright); text-decoration: underline; }
.page-products .products-platform .grid-12 { align-items: start; }
.page-products .products-platform__note { font-size: 0.8rem; }