html {
  scroll-behavior: smooth;
}

body {
  background: #0f1924;
  color: #dbe7f3;
  font-family: "Noto Sans SC", system-ui, sans-serif;
}

.steam-shell {
  background:
    radial-gradient(circle at 18% 14%, rgba(102, 192, 244, 0.16), transparent 32rem),
    linear-gradient(180deg, #1b2838 0%, #0f1924 58%, #171a21 100%);
}

.glass-nav {
  background: rgba(23, 26, 33, 0.86);
  border-bottom: 1px solid rgba(102, 192, 244, 0.18);
  backdrop-filter: blur(16px);
}

.panel {
  background: rgba(23, 26, 33, 0.88);
  border: 1px solid rgba(102, 192, 244, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.soft-panel {
  background: rgba(27, 40, 56, 0.78);
  border: 1px solid rgba(102, 192, 244, 0.14);
}

.tag {
  background: rgba(102, 192, 244, 0.13);
  color: #66c0f4;
  border: 1px solid rgba(102, 192, 244, 0.2);
}

.cta {
  position: relative;
  overflow: hidden;
  color: #101820;
  background: linear-gradient(90deg, #a4d007, #c7ec42 46%, #75a80d);
  box-shadow: 0 0 28px rgba(164, 208, 7, 0.3);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.62) 45%, transparent 70%);
  animation: sheen 2.8s infinite;
}

.cta span {
  position: relative;
  z-index: 1;
}

@keyframes sheen {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(140%); }
}

.feature-card,
.review-card,
.gallery-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-card:hover,
.review-card:hover,
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(164, 208, 7, 0.42);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}

.active-tab {
  background: linear-gradient(90deg, #66c0f4, #a4d007);
  color: #101820;
}

.hero-bg {
  background-image:
    linear-gradient(90deg, rgba(15, 25, 36, 0.96) 0%, rgba(15, 25, 36, 0.82) 42%, rgba(15, 25, 36, 0.48) 100%),
    url("../images/tiaojiaonvjing-hero-01.webp");
  background-size: cover;
  background-position: center;
}

.table-cell {
  border-bottom: 1px solid rgba(102, 192, 244, 0.14);
  padding: 0.85rem 1rem;
}