/* roulang page: index */
:root {
  --bg-deep: #060B18;
  --bg-deep-2: #0A1428;
  --bg-glass: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.12);
  --primary-neon: #29F3C7;
  --accent-warm: #FF7A00;
  --cool-purple: #7B61FF;
  --text-white: #F5F8FF;
  --text-muted: #9AA7BD;
  --radius-card: 20px;
  --radius-btn: 50px;
  --shadow-glow: 0 0 24px rgba(41, 243, 199, 0.32);
  --space-section: 6rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", 微软雅黑, "Segoe UI", Roboto, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-white);
  line-height: 1.75;
  background:
    radial-gradient(1100px 680px at 88% -10%, rgba(123, 97, 255, 0.13), transparent 58%),
    radial-gradient(900px 600px at 5% 12%, rgba(41, 243, 199, 0.08), transparent 50%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deep-2) 45%, #050A16 100%);
  background-attachment: fixed;
  padding-top: 136px;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: inherit;
}
img {
  max-width: 100%;
}
ul,
ol,
dl,
p {
  margin-top: 0;
}
button {
  font-family: inherit;
}
.container {
  max-width: 1320px;
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
section {
  overflow: hidden;
}
::selection {
  background: rgba(41, 243, 199, 0.22);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--primary-neon);
  outline-offset: 3px;
}
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0A101E;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50px;
}
::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1080;
  background: rgba(6, 11, 24, 0.74);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.header-row {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.logo-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
}
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-neon), #0FC7A5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #061018;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  box-shadow: 0 0 20px rgba(41, 243, 199, 0.25);
  flex-shrink: 0;
}
.logo-text {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-white);
  letter-spacing: .02em;
  white-space: nowrap;
}
.logo-text small {
  display: block;
  font-weight: 500;
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.2;
  letter-spacing: .08em;
  margin-top: 2px;
}
.search-wrap {
  flex: 1;
  max-width: 40%;
  margin: 0 auto;
}
.search-form {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50px;
  overflow: hidden;
  transition: border .25s ease, box-shadow .25s ease, background .25s ease;
}
.search-form:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(41, 243, 199, 0.55);
  box-shadow: 0 0 0 3px rgba(41, 243, 199, 0.2);
}
.search-icon {
  display: inline-flex;
  padding: 0 6px 0 16px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-white);
  font-size: .95rem;
  padding: 0 6px 0 8px;
}
.search-submit {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 18px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  transition: color .2s ease;
}
.search-submit:hover,
.search-submit:focus {
  color: var(--primary-neon);
}
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--primary-neon), #0FCEA8);
  color: #061018;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .02em;
  box-shadow: var(--shadow-glow);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.header-cta:hover {
  color: #061018;
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(41, 243, 199, 0.4);
}
.header-cta:focus {
  color: #061018;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: var(--text-white);
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-left: auto;
}
.pill-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.pill-bar::-webkit-scrollbar {
  display: none;
}
.pill-nav {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.pill-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 17px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all .2s ease;
}
.pill-nav a:hover,
.pill-nav a:focus,
.pill-nav a.active {
  color: var(--primary-neon);
  border-color: var(--primary-neon);
  background: rgba(41, 243, 199, 0.06);
}
.pill-nav .nav-verify {
  color: var(--text-muted);
  font-size: .76rem;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pill-nav .nav-verify i {
  color: var(--primary-neon);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  border: 0;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  transition: all .25s ease;
}
.btn-neon {
  background: linear-gradient(135deg, var(--primary-neon), #13D3AA);
  color: #061018;
  box-shadow: var(--shadow-glow);
}
.btn-neon:hover,
.btn-neon:focus {
  color: #061018;
  background: linear-gradient(135deg, #43F8D4, #20DDB4);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(41, 243, 199, 0.42);
}
.btn-neon:active {
  transform: translateY(1px);
}
.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-white);
  backdrop-filter: blur(8px);
}
.btn-glass:hover,
.btn-glass:focus {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-cta-xl {
  min-height: 56px;
  padding: 14px 44px;
  font-size: 1.08rem;
  font-weight: 800;
}

/* Hero */
.hero-section {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(113deg, rgba(6, 11, 24, 0.94) 0%, rgba(6, 11, 24, 0.78) 55%, rgba(10, 20, 40, 0.48) 100%),
    url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
  padding: 80px 0 70px;
}
.hero-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    radial-gradient(560px 280px at 75% 10%, rgba(41, 243, 199, 0.14), transparent 70%),
    radial-gradient(480px 280px at 5% 80%, rgba(255, 122, 0, 0.08), transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 16px;
  border-radius: 50px;
  background: rgba(41, 243, 199, 0.08);
  border: 1px solid rgba(41, 243, 199, 0.35);
  color: var(--primary-neon);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 28px;
}
.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.hero-sub {
  font-size: 1.08rem;
  color: rgba(245, 248, 255, 0.78);
  max-width: 680px;
  margin-bottom: 22px;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 50px;
  padding: 7px 16px;
  font-size: .8rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-white);
}
.chip i {
  color: var(--primary-neon);
  font-size: .72rem;
}
.hero-action {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero-legal {
  position: absolute;
  right: 30px;
  bottom: 26px;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 300px;
  text-align: right;
  z-index: 2;
}
@media (max-width: 991px) {
  .hero-legal {
    position: static;
    text-align: left;
    margin-top: 28px;
  }
}

/* Section head */
.sec-head {
  margin-bottom: 3rem;
}
.sec-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 8px;
}
.sec-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 12px;
}
.sec-desc {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 760px;
}
.section-space {
  padding: var(--space-section) 0;
}

/* Glass + cards */
.glass-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(41, 243, 199, 0.55);
}
.glass-card:active {
  transform: translateY(-1px);
}

/* Entry */
.section-entry {
  padding-top: var(--space-section);
}
.entry-card {
  min-height: 220px;
  max-height: 220px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.entry-bg {
  height: 82px;
  border-radius: 14px;
  background: #0C1630 center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: block;
}
.entry-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.entry-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  font-size: 1.02rem;
}
.entry-name i {
  color: var(--accent-warm);
  font-size: .9rem;
}
.entry-safe {
  color: var(--primary-neon);
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: rgba(41, 243, 199, 0.08);
  border: 1px solid rgba(41, 243, 199, 0.22);
  border-radius: 50px;
  padding: 3px 10px;
}
.entry-safe i {
  font-size: .58rem;
}
.entry-desc {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.4;
  flex: 1;
}
.entry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: .86rem;
  transition: color .2s ease, gap .2s ease;
  align-self: flex-start;
}
.entry-link:hover,
.entry-link:focus {
  color: var(--primary-neon);
}
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  font-size: .84rem;
  transition: all .2s ease;
}
.tag-pill:hover,
.tag-pill:focus,
.tag-pill.active {
  color: var(--primary-neon);
  border-color: var(--primary-neon);
  background: rgba(41, 243, 199, 0.06);
}

/* Hot */
.section-hot {
  background:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, #050A16, #040A16);
  background-size: 48px 48px, 48px 48px, auto;
}
.hot-card {
  display: flex;
  border-radius: 1rem;
}
.hot-thumb {
  width: 45%;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
  flex-shrink: 0;
}
.hot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 8 / 5;
  transition: transform .45s ease;
  border-radius: inherit;
}
.hot-card:hover .hot-thumb img {
  transform: scale(1.04);
}
.hot-body {
  padding: 24px;
}
.hot-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--cool-purple);
  background: rgba(123, 97, 255, 0.1);
  border: 1px solid rgba(123, 97, 255, 0.24);
  border-radius: 50px;
  padding: 3px 12px;
  letter-spacing: .04em;
  font-weight: 600;
}
.hot-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 12px 0 6px;
}
.hot-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.hot-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-neon);
  box-shadow: 0 0 0 3px rgba(41, 243, 199, 0.1);
}
.hot-desc {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .hot-card {
    flex-direction: column;
  }
  .hot-thumb,
  .hot-thumb img {
    width: 100%;
    border-radius: 1rem 1rem 0 0;
    aspect-ratio: 16 / 9;
  }
}

/* Features */
.features-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.feature-main {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  height: 100%;
  min-height: 360px;
}
.feature-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(6, 11, 24, 0.9));
}
.feature-tagline {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  color: #fff;
}
.feature-tagline span {
  display: block;
  color: var(--primary-neon);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.feature-tagline strong {
  font-size: 1.26rem;
  font-weight: 800;
}
.feature-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 28px;
  border-radius: var(--radius-card);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 243, 199, 0.12);
  border: 1px solid rgba(41, 243, 199, 0.34);
  color: var(--primary-neon);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.feature-card:nth-child(2) .feature-icon {
  background: rgba(255, 122, 0, 0.12);
  border-color: rgba(255, 122, 0, 0.34);
  color: var(--accent-warm);
}
.feature-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.feature-desc {
  color: var(--text-muted);
  font-size: .92rem;
  margin-bottom: 0;
}
.feature-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.feature-mini-tags span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 50px;
  font-size: .72rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.66);
}
@media (max-width: 991px) {
  .feature-main {
    min-height: 240px;
  }
}

/* News sections */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.news-card {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  gap: 18px;
}
.news-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}
.news-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 16px;
}
.news-body {
  flex: 1;
  min-width: 0;
}
.news-body h3 {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
.news-body h3 a {
  color: #fff;
  transition: color .2s ease;
}
.news-body h3 a:hover {
  color: var(--primary-neon);
}
.news-summary {
  color: var(--text-muted);
  font-size: .9375rem;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.news-meta .time {
  color: rgba(255, 255, 255, 0.44);
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cat-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 50px;
  background: rgba(123, 97, 255, 0.12);
  border: 1px solid rgba(123, 97, 255, 0.28);
  color: #ACA6F8;
  font-size: .72rem;
  font-weight: 600;
}
.news-more {
  margin-left: auto;
  font-size: .8rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color .2s ease;
  white-space: nowrap;
}
.news-more:hover {
  color: var(--primary-neon);
}
.news-empty {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 50px 24px;
  text-align: center;
  color: var(--text-muted);
}
.news-empty .btn {
  margin-top: 18px;
}
@media (max-width: 576px) {
  .news-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-meta,
  .news-more {
    width: 100%;
  }
}

/* CTA blocks */
.cta-main-zone {
  padding: var(--space-section) 0;
}
.cta-inner {
  position: relative;
  border-radius: 28px;
  padding: 76px 32px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(circle at 50% 0%, rgba(41, 243, 199, 0.18), transparent 72%),
    linear-gradient(135deg, #0A1832, #0B1326);
  overflow: hidden;
}
.cta-inner h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.cta-inner p {
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 34px;
}
.footer-cta-zone {
  padding: 0 0 var(--space-section);
}
.footer-cta-box {
  border-radius: 24px;
  padding: 48px 24px;
  text-align: center;
}
.footer-cta-box p {
  color: var(--text-muted);
  margin-bottom: 22px;
}
.footer-cta-box .btn {
  min-width: 220px;
}

/* FAQ */
.faq-left {
  position: sticky;
  top: 150px;
}
.faq-nav-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.faq-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: .9rem;
  line-height: 1.5;
  transition: all .2s ease;
}
.faq-nav-link .idx {
  color: var(--cool-purple);
  font-size: .76rem;
  font-weight: 700;
  width: 24px;
  flex-shrink: 0;
}
.faq-nav-link:hover,
.faq-nav-link.active {
  background: rgba(41, 243, 199, 0.06);
  border-color: rgba(41, 243, 199, 0.35);
  color: var(--primary-neon);
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq-item:hover {
  border-color: rgba(41, 243, 199, 0.35);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 20px 24px;
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  border-left: 3px solid transparent;
  transition: all .2s ease;
}
.faq-question .qi {
  color: var(--accent-warm);
  font-size: .8rem;
  font-weight: 800;
}
.faq-question:not(.collapsed) {
  color: var(--primary-neon);
  border-left-color: var(--primary-neon);
}
.faq-question:hover {
  color: var(--primary-neon);
}
.faq-answer {
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.85;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  background: #050A16;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 60px 0 0;
}
.footer-row {
  padding-bottom: 36px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.footer-logo .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: .95rem;
}
.footer-brand-desc {
  color: var(--text-muted);
  font-size: .9rem;
  max-width: 330px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  padding: 5px 13px;
  border-radius: 50px;
  background: rgba(41, 243, 199, 0.08);
  border: 1px solid rgba(41, 243, 199, 0.2);
  color: rgba(255, 255, 255, 0.76);
}
.footer-title {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-list a {
  color: var(--text-muted);
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .2s ease, padding-left .2s ease;
}
.footer-list a:hover,
.footer-list a:focus {
  color: var(--primary-neon);
}
.footer-notice {
  color: rgba(255, 255, 255, 0.42);
  font-size: .78rem;
  line-height: 1.8;
  margin-bottom: 8px;
}
.footer-icp {
  color: rgba(255, 255, 255, 0.34);
  font-size: .78rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 0;
}
.footer-copy {
  color: rgba(255, 255, 255, 0.32);
  font-size: .76rem;
}
.footer-security {
  background: rgba(6, 11, 24, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 0;
  text-align: center;
}
.footer-security p {
  color: rgba(255, 255, 255, 0.34);
  font-size: 12px;
  margin: 0;
  letter-spacing: .02em;
}
.footer-security i {
  color: var(--accent-warm);
  margin-right: 5px;
}

/* Float CTA */
.float-entry {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(10, 20, 40, 0.86);
  border: 1px solid rgba(41, 243, 199, 0.45);
  border-radius: 50px;
  padding: 8px 10px 8px 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: all .4s ease;
}
.float-entry.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.float-timer {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: rgba(41, 243, 199, 0.12);
  border: 1px solid rgba(41, 243, 199, 0.28);
  border-radius: 50px;
  padding: 4px 10px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.float-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-neon);
  font-weight: 800;
  font-size: .92rem;
  padding: 8px 14px;
  border-radius: 50px;
  transition: background .2s ease;
  white-space: nowrap;
}
.float-link:hover,
.float-link:focus {
  background: rgba(41, 243, 199, 0.1);
  color: var(--primary-neon);
}

/* Responsive */
@media (max-width: 991px) {
  .search-wrap {
    max-width: 55%;
  }
}
@media (max-width: 768px) {
  body {
    padding-top: 112px;
  }
  .header-row {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0 10px;
  }
  .logo-text {
    font-size: .98rem;
  }
  .search-wrap {
    order: 3;
    flex: 1 0 100%;
    max-width: 100%;
  }
  .header-cta {
    margin-left: auto;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .pill-bar {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 0 14px;
    overflow: visible;
  }
  .pill-bar.open {
    display: flex;
  }
  .pill-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .pill-nav a {
    justify-content: center;
  }
  .pill-nav .nav-verify {
    display: none;
  }
  .section-space,
  section {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
  .hero-section {
    min-height: auto;
    padding: 54px 0 44px;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }
  .entry-info {
    flex-wrap: wrap;
  }
  .cta-inner {
    padding: 48px 20px;
  }
  .footer-cta-box .btn {
    min-width: 100%;
  }
  .faq-left {
    position: static;
    top: auto;
  }
  .float-entry {
    right: 1rem;
    bottom: 1rem;
  }
  .float-link span {
    display: none;
  }
}
@media (max-width: 520px) {
  .logo-text small {
    font-size: .6rem;
  }
  .header-cta {
    min-width: 84px;
    padding: 0 14px;
    font-size: .82rem;
  }
  .tag-pill {
    padding: 0 16px;
    font-size: .8rem;
  }
  .news-thumb,
  .news-thumb img {
    width: 84px;
    height: 84px;
  }
  .news-card {
    padding: 16px;
  }
  .entry-card {
    min-height: auto;
    max-height: 300px;
  }
  .hero-action .btn {
    width: 100%;
  }
}

/* roulang page: article */
:root {
            --bg-deep: #060B18;
            --bg-glass: rgba(255, 255, 255, 0.06);
            --bg-glass-2: rgba(255, 255, 255, 0.045);
            --bg-line: rgba(255, 255, 255, 0.12);
            --bg-line-soft: rgba(255, 255, 255, 0.08);
            --primary-neon: #29F3C7;
            --primary-rgb: 41, 243, 199;
            --accent-warm: #FF7A00;
            --accent-violet: #7B61FF;
            --text-white: #F4F8FF;
            --text-muted: rgba(235, 244, 255, 0.66);
            --text-dim: rgba(235, 244, 255, 0.42);
            --radius-card: 20px;
            --radius-btn: 50px;
            --shadow-card: 0 14px 44px rgba(0, 0, 0, 0.36);
            --shadow-glow: 0 0 38px rgba(41, 243, 199, 0.24);
            --space-section: 6rem;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", 微软雅黑, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-deep);
            background-image:
                radial-gradient(circle at 85% 18%, rgba(41, 243, 199, 0.07), transparent 36%),
                radial-gradient(circle at 12% 90%, rgba(123, 97, 255, 0.06), transparent 32%);
            color: var(--text-white);
            line-height: 1.75;
            overflow-x: hidden;
            letter-spacing: 0.01em;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
            line-height: 1.3;
            color: #fff;
        }

        p {
            margin: 0.8rem 0;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }

        a:hover {
            color: var(--primary-neon);
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .container {
            max-width: 1320px;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        section {
            overflow: hidden;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(6, 11, 24, 0.84);
            -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        }

        .site-header .container {
            padding-top: 0.5rem;
        }

        .header-row {
            display: flex;
            align-items: center;
            min-height: 76px;
            gap: 1rem;
        }

        .logo-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            flex-shrink: 0;
            color: var(--text-white);
        }

        .logo-brand:hover {
            color: var(--text-white);
        }

        .logo-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            font-size: 1.25rem;
            font-weight: 900;
            color: #001D17;
            background: linear-gradient(135deg, #29F3C7, #12C7A4);
            border-radius: 14px;
            box-shadow: 0 0 22px rgba(41, 243, 199, 0.18);
            letter-spacing: -0.01em;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            font-size: 1.08rem;
            font-weight: 800;
            line-height: 1.28;
            white-space: nowrap;
        }

        .logo-text small {
            font-size: 0.72rem;
            font-weight: 400;
            line-height: 1.2;
            color: var(--text-muted);
        }

        .search-wrap {
            flex: 1 1 auto;
            display: flex;
            justify-content: center;
            min-width: 0;
        }

        .search-form {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 620px;
            height: 42px;
            border-radius: var(--radius-btn);
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.14);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .search-form:focus-within {
            border-color: rgba(41, 243, 199, 0.45);
            box-shadow: 0 0 0 3px rgba(41, 243, 199, 0.2);
        }

        .search-icon {
            display: inline-flex;
            align-items: center;
            width: 42px;
            justify-content: center;
            color: var(--text-dim);
        }

        .search-input {
            flex: 1;
            min-width: 0;
            height: 100%;
            background: transparent;
            border: 0;
            outline: none;
            color: var(--text-white);
            font-size: 0.9rem;
            padding: 0 0.4rem;
        }

        .search-input::placeholder {
            color: var(--text-dim);
        }

        .search-input::-webkit-search-cancel-button {
            display: none;
        }

        .search-submit {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            height: 32px;
            padding: 0 1rem;
            margin-right: 5px;
            border-radius: var(--radius-btn);
            border: 0;
            background: linear-gradient(105deg, #29F3C7, #1ACAB0);
            color: #001A14;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .header-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            min-width: 96px;
            height: 38px;
            padding: 0 1.1rem;
            border-radius: var(--radius-btn);
            background: linear-gradient(105deg, #FF7A00, #FF9D3C);
            color: #171206;
            font-weight: 700;
            font-size: 0.9rem;
            box-shadow: 0 0 24px rgba(255, 122, 0, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .header-cta:hover {
            background: linear-gradient(105deg, #FF8A1E, #FFB05A);
            color: #171206;
            box-shadow: 0 0 30px rgba(255, 122, 0, 0.35);
        }

        .nav-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--bg-line);
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-white);
            border-radius: 14px;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .pill-bar {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 0.72rem 0 0.78rem;
        }

        .pill-nav {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.2rem;
        }

        .pill-nav a {
            display: inline-flex;
            align-items: center;
            padding: 0.3rem 0.85rem;
            border-radius: 50px;
            font-size: 0.875rem;
            color: rgba(235, 244, 255, 0.75);
            border: 1px solid transparent;
        }

        .pill-nav a:hover {
            color: var(--primary-neon);
            border-color: rgba(41, 243, 199, 0.18);
            background: rgba(41, 243, 199, 0.05);
        }

        .pill-nav a.active {
            color: var(--primary-neon);
            background: rgba(41, 243, 199, 0.1);
            border-color: rgba(41, 243, 199, 0.26);
        }

        .nav-verify {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--accent-violet);
            font-size: 0.78rem;
            padding: 0.2rem 0.6rem;
            border: 1px solid rgba(123, 97, 255, 0.25);
            border-radius: 50px;
            background: rgba(123, 97, 255, 0.08);
            white-space: nowrap;
        }

        .nav-verify i {
            color: var(--accent-violet);
        }

        .article-page {
            position: relative;
            min-height: 70vh;
            padding: 0 0 var(--space-section);
            background:
                linear-gradient(180deg, rgba(6, 11, 24, 0.65), rgba(6, 11, 24, 0.92) 180px, var(--bg-deep) 100%),
                url('/assets/images/backpic/back-2.png') top center / cover no-repeat;
        }

        .article-wrap {
            padding-top: 2rem;
        }

        .breadcrumb-route {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.45rem;
            font-size: 0.86rem;
            color: var(--text-muted);
            margin: 0 0 1.2rem;
        }

        .breadcrumb-route a {
            color: rgba(255, 255, 255, 0.55);
        }

        .breadcrumb-route a:hover {
            color: var(--primary-neon);
        }

        .breadcrumb-route i {
            color: var(--text-dim);
            font-size: 0.7rem;
        }

        .article-main {
            position: relative;
        }

        .article-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-card);
            padding: 2.4rem 2.6rem 2.6rem;
            box-shadow: var(--shadow-card);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            margin-bottom: 2rem;
        }

        .article-title {
            font-size: clamp(1.75rem, 3vw, 2.2rem);
            font-weight: 800;
            line-height: 1.32;
            letter-spacing: 0.01em;
            margin: 0.35rem 0 0;
            color: #fff;
        }

        .article-abstract {
            background: rgba(41, 243, 199, 0.06);
            border-left: 3px solid var(--primary-neon);
            border-radius: 0 12px 12px 0;
            padding: 1rem 1.2rem;
            color: rgba(235, 244, 255, 0.72);
            font-size: 0.95rem;
            line-height: 1.85;
            margin-top: 1.3rem;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.9rem 1.35rem;
            margin-top: 1.2rem;
            padding-top: 1.15rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.86rem;
            color: var(--text-muted);
        }

        .article-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .meta-cat {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(255, 122, 0, 0.1);
            border: 1px solid rgba(255, 122, 0, 0.28);
            color: #FFB27A;
            padding: 0.16rem 0.65rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .meta-cat:hover {
            color: #FFC897;
            border-color: rgba(255, 122, 0, 0.42);
        }

        .article-content {
            margin-top: 2rem;
            font-size: 17px;
            line-height: 1.9;
            color: rgba(255, 255, 255, 0.84);
            word-break: break-word;
        }

        .article-content p {
            margin: 1.4em 0;
        }

        .article-content h2,
        .article-content h3 {
            font-weight: 700;
            line-height: 1.35;
            margin: 2.4em 0 0.8em;
            position: relative;
            color: #fff;
        }

        .article-content h2 {
            font-size: 1.45rem;
            padding-left: 1rem;
            border-left: 4px solid var(--primary-neon);
            border-radius: 2px;
        }

        .article-content h3 {
            font-size: 1.18rem;
            padding-left: 0.8rem;
            border-left: 3px solid rgba(123, 97, 255, 0.6);
        }

        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            margin: 1.2rem 0;
        }

        .article-content ul,
        .article-content ol {
            margin: 1.2rem 0;
            padding-left: 0.2rem;
        }

        .article-content ul {
            list-style: none;
        }

        .article-content ul li {
            position: relative;
            padding-left: 1.4rem;
            margin: 0.45rem 0;
        }

        .article-content ul li::before {
            content: "◆";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 0.62rem;
            line-height: 1.9rem;
            color: var(--primary-neon);
        }

        .article-content ol {
            padding-left: 1.4rem;
        }

        .article-content blockquote {
            margin: 2rem 0;
            padding: 1.1rem 1.4rem;
            background: rgba(255, 255, 255, 0.05);
            border-left: 4px solid var(--accent-warm);
            border-radius: 0 14px 14px 0;
            color: rgba(255, 255, 255, 0.76);
        }

        .article-content blockquote p {
            margin: 0;
        }

        .article-content a {
            color: var(--primary-neon);
            border-bottom: 1px solid rgba(41, 243, 199, 0.28);
        }

        .article-content a:hover {
            border-bottom-color: var(--primary-neon);
        }

        .article-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.4rem 0;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .article-content table th,
        .article-content table td {
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.7rem 0.9rem;
            font-size: 0.94rem;
        }

        .article-content table th {
            background: rgba(41, 243, 199, 0.05);
            color: #fff;
        }

        .article-tags-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-top: 2rem;
        }

        .tag-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.26rem 0.9rem;
            border-radius: 50px;
            font-size: 0.78rem;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.62);
        }

        .article-back {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--primary-neon);
            font-size: 0.9rem;
        }

        .article-back i {
            transition: transform 0.2s ease;
        }

        .article-back:hover i {
            transform: translateX(-4px);
        }

        .article-empty {
            min-height: 320px;
        }

        .article-missing {
            text-align: center;
            padding: 4.2rem 2rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px dashed rgba(255, 255, 255, 0.22);
            border-radius: var(--radius-card);
        }

        .article-missing .missing-num {
            font-size: 3rem;
            font-weight: 800;
            color: var(--accent-warm);
        }

        .article-missing h1.article-title {
            font-size: 1.6rem;
        }

        .btn-main,
        .btn-glass {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            height: 46px;
            padding: 0 1.8rem;
            border-radius: var(--radius-btn);
            font-size: 0.92rem;
            font-weight: 700;
            border: 0;
            transition: all 0.25s ease;
        }

        .btn-main {
            background: linear-gradient(105deg, var(--primary-neon), #1ACBB1);
            color: #001D17;
            box-shadow: var(--shadow-glow);
        }

        .btn-main:hover {
            background: linear-gradient(105deg, #7BF8DE, #29F3C7);
            color: #001D17;
            transform: translateY(-2px);
        }

        .btn-glass {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: rgba(255, 255, 255, 0.9);
        }

        .btn-glass:hover {
            border-color: rgba(41, 243, 199, 0.5);
            color: var(--primary-neon);
            transform: translateY(-2px);
        }

        .side-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-card);
            padding: 1.5rem 1.35rem;
            margin-bottom: 1.35rem;
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }

        .side-card .side-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #fff;
        }

        .side-title::after {
            content: "";
            width: 6px;
            height: 6px;
            background: var(--primary-neon);
            border-radius: 50%;
            box-shadow: 0 0 12px var(--primary-neon);
        }

        .side-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .side-list li {
            margin-bottom: 0.7rem;
        }

        .side-list li:last-child {
            margin-bottom: 0;
        }

        .side-list a {
            display: flex;
            gap: 0.7rem;
            align-items: flex-start;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.88rem;
            line-height: 1.55;
        }

        .side-list a:hover {
            color: var(--primary-neon);
        }

        .side-thumb {
            flex-shrink: 0;
            width: 58px;
            height: 58px;
            border-radius: 12px;
            object-fit: cover;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .side-article-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .side-article-date {
            display: block;
            color: var(--text-dim);
            font-size: 0.74rem;
            margin-top: 0.2rem;
        }

        .toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .toc-list li a {
            display: block;
            font-size: 0.84rem;
            line-height: 2;
            color: rgba(255, 255, 255, 0.62);
            border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
        }

        .toc-list li a:hover {
            color: var(--primary-neon);
            padding-left: 0.4rem;
        }

        .article-side-sticky {
            position: sticky;
            top: 140px;
        }

        .related-area {
            margin-top: 0.5rem;
        }

        .related-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2rem;
        }

        .related-header h2 {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0;
        }

        .related-header a {
            color: var(--primary-neon);
            font-size: 0.84rem;
        }

        .related-card {
            height: 100%;
            display: flex;
            align-items: stretch;
            gap: 0;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .related-card:hover {
            transform: translateY(-6px);
            border-color: rgba(41, 243, 199, 0.45);
            box-shadow: var(--shadow-card);
        }

        .related-card .img-link {
            display: block;
            width: 108px;
            flex-shrink: 0;
        }

        .related-card .img-link img {
            width: 100%;
            height: 100%;
            min-height: 100%;
            object-fit: cover;
            display: block;
        }

        .related-card .related-body {
            padding: 0.8rem 1rem 0.7rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }

        .related-body .kicker {
            color: var(--accent-warm);
            font-size: 0.68rem;
            margin-bottom: 0.25rem;
        }

        .related-body .headline {
            font-size: 0.88rem;
            line-height: 1.5;
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: rgba(255, 255, 255, 0.92);
        }

        .related-body .headline:hover {
            color: var(--primary-neon);
        }

        .article-bottom-cta {
            margin-top: 3rem;
            background:
                radial-gradient(circle at 50% 0%, rgba(41, 243, 199, 0.13), transparent 50%),
                rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(41, 243, 199, 0.12);
            border-radius: var(--radius-card);
            padding: 2.2rem 1.5rem;
            text-align: center;
        }

        .article-bottom-cta h2 {
            font-size: 1.5rem;
            font-weight: 800;
        }

        .article-bottom-cta p {
            color: var(--text-muted);
            max-width: 600px;
            margin: 0.6rem auto 1.4rem;
        }

        .site-footer {
            background: #050A16;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 4rem 0 0;
            color: rgba(255, 255, 255, 0.72);
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 1.05rem;
            font-weight: 800;
            margin-bottom: 0.8rem;
        }

        .footer-logo .logo-mark {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
            border-radius: 13px;
        }

        .footer-brand-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            max-width: 340px;
        }

        .footer-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 1rem;
        }

        .footer-badges span {
            color: var(--text-muted);
            font-size: 0.74rem;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.03);
            border-radius: 50px;
            padding: 0.25rem 0.6rem;
        }

        .footer-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #fff;
            margin: 0 0 0.8rem;
            position: relative;
            padding-bottom: 0.45rem;
        }

        .footer-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 24px;
            height: 2px;
            background: var(--primary-neon);
        }

        .footer-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-list li {
            margin-bottom: 0.5rem;
        }

        .footer-list a {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.88rem;
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        .footer-list a:hover {
            color: var(--primary-neon);
            padding-left: 0.25rem;
        }

        .footer-notice {
            color: var(--text-dim);
            font-size: 0.8rem;
            line-height: 1.7;
            margin: 0.5rem 0;
        }

        .footer-icp {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding: 1rem 0;
            margin-top: 3rem;
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.76rem;
        }

        .footer-icp .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 0.4rem;
        }

        .footer-security {
            background: rgba(255, 255, 255, 0.025);
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            padding: 0.8rem 0;
        }

        .footer-security p {
            margin: 0;
            color: rgba(235, 244, 255, 0.38);
            font-size: 0.74rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .footer-security i {
            color: rgba(255, 122, 0, 0.75);
        }

        .footer-logo .logo-mark {
            color: #002019;
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 2px solid var(--primary-neon);
            outline-offset: 3px;
            border-radius: 6px;
        }

        @media (min-width: 992px) {
            .article-side-sticky {
                display: block;
            }
        }

        @media (max-width: 1199.98px) {
            .related-card {
                flex-direction: column;
            }

            .related-card .img-link {
                width: 100%;
                height: 130px;
            }

            .related-card .img-link img {
                width: 100%;
                height: 100%;
            }
        }

        @media (max-width: 991.98px) {
            .article-card {
                padding: 1.8rem 1.6rem;
            }

            .article-side {
                margin-top: 1rem;
            }

            .side-card {
                margin-bottom: 1rem;
            }

            .related-card .img-link {
                width: 110px;
                height: auto;
            }
        }

        @media (max-width: 767.98px) {
            .site-header .container {
                padding-top: 0;
            }

            .header-row {
                flex-wrap: wrap;
                min-height: auto;
                padding: 0.7rem 0;
                row-gap: 0.7rem;
            }

            .logo-brand {
                order: 1;
            }

            .header-cta {
                order: 2;
                margin-left: auto;
            }

            .nav-toggle {
                order: 3;
                display: inline-flex;
            }

            .search-wrap {
                order: 4;
                flex-basis: 100%;
                max-width: 100%;
                margin: 0;
            }

            .search-form {
                max-width: 100%;
            }

            .pill-bar {
                display: none;
                padding: 0.6rem 0 0.8rem;
            }

            .pill-bar.open {
                display: flex;
                flex-direction: column;
            }

            .pill-nav {
                flex-wrap: wrap;
            }

            .pill-nav a {
                padding: 0.45rem 0.85rem;
            }

            .nav-verify {
                margin-left: 0;
                margin-top: 0.2rem;
            }

            .article-page {
                padding-bottom: 4rem;
            }

            .article-wrap {
                padding-top: 1rem;
            }

            .article-card {
                padding: 1.4rem 1.2rem;
            }

            .article-title {
                font-size: 1.55rem;
                line-height: 1.35;
            }

            .article-content {
                font-size: 16px;
                line-height: 1.85;
            }
        }

        @media (max-width: 575.98px) {
            .header-row {
                gap: 0.55rem;
            }

            .logo-brand {
                gap: 0.45rem;
            }

            .logo-mark {
                width: 42px;
                height: 42px;
                font-size: 1.15rem;
            }

            .logo-text {
                font-size: 1rem;
            }

            .logo-text small {
                display: none;
            }

            .header-cta {
                min-width: 84px;
                height: 36px;
                padding: 0 0.8rem;
                font-size: 0.82rem;
            }

            .search-submit {
                padding: 0 0.75rem;
            }

            .search-submit span {
                display: none;
            }

            .breadcrumb-route {
                font-size: 0.8rem;
            }

            .article-abstract {
                font-size: 0.88rem;
                padding: 0.85rem 1rem;
            }

            .related-card {
                flex-direction: row;
            }

            .related-card .img-link {
                width: 92px;
                height: 100%;
            }

            .footer-list {
                margin-bottom: 1.5rem;
            }

            .footer-title {
                margin-top: 0.6rem;
            }

            .footer-icp .container {
                flex-direction: column;
            }
        }

        @media (max-width: 400px) {
            .logo-text {
                display: none;
            }

            .search-wrap {
                margin-top: 0.1rem;
            }

            .search-submit {
                padding: 0 0.65rem;
            }

            .pill-nav a {
                font-size: 0.82rem;
                padding: 0.4rem 0.65rem;
            }

            .article-meta {
                gap: 0.55rem 0.9rem;
            }
        }

/* roulang page: category1 */
:root {
  --bg-deep: #060B18;
  --bg-glass: rgba(255,255,255,0.06);
  --border-glass: rgba(255,255,255,0.12);
  --primary-neon: #29F3C7;
  --accent-warm: #FF7A00;
  --aux-purple: #7B61FF;
  --text-white: #ffffff;
  --text-muted: rgba(255,255,255,0.66);
  --radius-card: 20px;
  --radius-btn: 50px;
  --shadow-glow: 0 0 28px rgba(41,243,199,0.28);
  --space-section: 6rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "微软雅黑", "Segoe UI", Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-white);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

section {
  overflow: hidden;
  position: relative;
}

.container {
  max-width: 1320px;
}

body {
  background:
    radial-gradient(circle at 88% 0%, rgba(41,243,199,0.05), transparent 28rem),
    radial-gradient(circle at 10% 30%, rgba(123,97,255,0.05), transparent 24rem),
    linear-gradient(180deg, #060B18 0%, #0A1428 100%);
}

/* ============ 设计变量与主题层 ============ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 12px;
}

.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-neon);
  box-shadow: 0 0 8px var(--primary-neon);
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-white);
}

.section-desc {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 720px;
}

/* ============ 主 Header ============ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1080;
  background: rgba(6,11,24,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .container {
  padding-left: 20px;
  padding-right: 20px;
}

.header-row {
  display: flex;
  align-items: center;
  min-height: 76px;
  gap: 24px;
  padding: 0;
}

.logo-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 4px;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(41,243,199,0.15), rgba(123,97,255,0.12));
  border: 1px solid rgba(41,243,199,0.35);
  color: var(--primary-neon);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.logo-text {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 18px;
  color: var(--text-white);
  letter-spacing: 0.01em;
}

.logo-text small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.search-wrap {
  flex: 1 1 auto;
  max-width: 46%;
  margin: 0 auto;
}

.search-form {
  display: flex;
  align-items: center;
  height: 42px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-glass);
  padding: 0 6px 0 16px;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.search-form:focus-within {
  border-color: rgba(41,243,199,0.5);
  box-shadow: 0 0 0 3px rgba(41,243,199,0.2);
}

.search-icon {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  line-height: 1;
}

.search-input {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-white);
  font-size: 14px;
  outline: none;
  padding: 0 8px;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.48);
}

.search-input::-webkit-search-cancel-button {
  display: none;
}

.search-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,0.08);
  color: var(--text-white);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.search-submit:hover {
  background: rgba(41,243,199,0.16);
  color: var(--primary-neon);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 38px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 600;
  padding: 0 20px;
  color: #060B18;
  background: var(--primary-neon);
  border: 1px solid var(--primary-neon);
  box-shadow: 0 0 20px rgba(41,243,199,0.22);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.header-cta:hover {
  background: #8CF5DD;
  border-color: #8CF5DD;
  box-shadow: 0 0 28px rgba(41,243,199,0.38);
  transform: translateY(-2px);
}

.header-cta:focus-visible {
  outline: 2px solid var(--primary-neon);
  outline-offset: 3px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-white);
  cursor: pointer;
  font-size: 18px;
}

.nav-toggle:hover {
  border-color: var(--primary-neon);
  color: var(--primary-neon);
}

.pill-bar {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px 0;
}

.pill-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}

.pill-nav::-webkit-scrollbar {
  display: none;
}

.pill-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 50px;
  font-size: 14px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all .2s ease;
}

.pill-nav a:hover {
  color: var(--primary-neon);
  border-color: rgba(41,243,199,0.35);
  background: rgba(41,243,199,0.08);
}

.pill-nav a.active {
  color: var(--primary-neon);
  border-color: var(--primary-neon);
  background: rgba(41,243,199,0.1);
  font-weight: 600;
}

.nav-verify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(41,243,199,0.75);
  padding: 0 12px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  margin-left: auto;
}

.site-main {
  padding-top: 120px;
}

/* ============ 分类 Hero ============ */
.page-hero {
  position: relative;
  min-height: 320px;
  padding: 76px 0 64px;
  background:
    linear-gradient(120deg, rgba(6,11,24,0.98) 10%, rgba(6,11,24,0.88) 48%, rgba(16,26,52,0.75) 100%),
    url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.page-hero .hero-inner {
  max-width: 900px;
}

.page-hero .hero-eyebrow {
  display: inline-block;
  border-radius: 50px;
  padding: 5px 14px;
  border: 1px solid rgba(41,243,199,0.3);
  color: var(--primary-neon);
  font-size: 13px;
  background: rgba(41,243,199,0.08);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 18px;
}

.page-hero .hero-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 760px;
  margin-bottom: 22px;
}

.hero-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-mini-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
}

.hero-mini-badges i {
  color: var(--primary-neon);
}

.hero-mini-badges .badge-warm {
  color: #FFC49A;
}

.hero-mini-badges .badge-warm i {
  color: var(--accent-warm);
}

.hero-legal {
  position: absolute;
  right: 24px;
  bottom: 16px;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 300px;
  text-align: right;
}

/* ============ 通用按钮 ============ */
.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding: 0 30px;
  height: 48px;
  border: 1px solid transparent;
  transition: all .22s ease;
  cursor: pointer;
  user-select: none;
}

.btn-custom:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-neon);
  outline-offset: 3px;
}

.btn-neon {
  background: var(--primary-neon);
  border-color: var(--primary-neon);
  color: #060B18;
  box-shadow: var(--shadow-glow);
}

.btn-neon:hover {
  background: #8CF5DD;
  border-color: #8CF5DD;
  color: #060B18;
  box-shadow: 0 0 32px rgba(41,243,199,0.38);
  transform: translateY(-2px);
}

.btn-neon:active {
  background: var(--primary-neon);
  transform: translateY(0) scale(0.98);
}

.btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-glass);
  color: var(--text-white);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--primary-neon);
  color: var(--primary-neon);
  transform: translateY(-2px);
}

.btn-ghost:active {
  transform: translateY(0);
}

a.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-neon);
  font-weight: 500;
}

a.btn-arrow i {
  transition: transform .2s ease;
}

a.btn-arrow:hover i {
  transform: translateX(4px);
}

/* ============ 四步访问指引 ============ */
.access-steps {
  padding: var(--space-section) 0 5rem;
  position: relative;
}

.section-head {
  margin-bottom: 40px;
}

.step-card {
  height: 100%;
  border-radius: var(--radius-card);
  padding: 32px 26px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  overflow: hidden;
}

.step-card::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  opacity: 0;
  background: linear-gradient(145deg, rgba(41,243,199,0.03), transparent 60%);
  transition: opacity .25s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-neon);
}

.step-card:hover::after {
  opacity: 1;
}

.step-card.first-step {
  background: rgba(41,243,199,0.07);
  border-color: rgba(41,243,199,0.5);
  box-shadow: 0 0 20px rgba(41,243,199,0.08);
}

.step-number {
  display: block;
  font-size: 80px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.06);
  margin-bottom: -12px;
  position: relative;
  z-index: 0;
}

.first-step .step-number {
  color: rgba(41,243,199,0.22);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-glass);
  color: var(--primary-neon);
  line-height: 1;
}

.first-step .step-icon {
  background: rgba(41,243,199,0.12);
  border-color: rgba(41,243,199,0.5);
}

.step-order {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-weight: 600;
}

.step-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 14px 0 10px;
}

.step-card p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============ 注意事项 ============ */
.notice-area {
  padding: calc(var(--space-section) * 0.7) 0 calc(var(--space-section) * 0.7);
  background: linear-gradient(180deg, rgba(10,20,40,0.7) 0%, rgba(10,20,40,0.3) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notice-area .notice-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.notice-card {
  height: 100%;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 26px 26px;
  display: flex;
  gap: 16px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.notice-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,122,0,0.3);
  background: rgba(255,122,0,0.06);
}

.notice-card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(255,122,0,0.14);
  border: 1px solid rgba(255,122,0,0.35);
  color: #FFA14D;
  font-size: 17px;
}

.notice-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.notice-card p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ============ 联系辅助条 ============ */
.support-strip {
  background: rgba(255,184,77,0.06);
  border: 1px solid rgba(255,184,77,0.22);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 52px;
}

.support-strip .support-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,184,77,0.14);
  border: 1px solid rgba(255,184,77,0.3);
  color: #FFC887;
  font-size: 15px;
  flex-shrink: 0;
}

.support-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 260px;
}

.support-copy .support-text strong {
  display: block;
  font-size: 16px;
  color: var(--text-white);
  margin-bottom: 3px;
}

.support-copy .support-text span {
  color: var(--text-muted);
  font-size: 14px;
}

.support-action {
  flex-shrink: 0;
}

.support-action .btn-ghost {
  height: 40px;
  padding: 0 22px;
  font-size: 14px;
}

/* ============ 主 CTA 区块 ============ */
.main-cta {
  padding: calc(var(--space-section) * 0.85) 0;
  position: relative;
}

.cta-glow-box {
  position: relative;
  text-align: center;
  border-radius: calc(var(--radius-card) + 6px);
  padding: 72px 32px 64px;
  border: 1px solid rgba(41,243,199,0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(41,243,199,0.16) 0%, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(123,97,255,0.10) 0%, transparent 24%),
    rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.cta-glow-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(41,243,199,0.25), transparent 70%);
  pointer-events: none;
}

.cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-neon);
  font-size: 13px;
  background: rgba(41,243,199,0.08);
  border: 1px solid rgba(41,243,199,0.28);
  padding: 5px 15px;
  border-radius: 50px;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}

.cta-glow-box h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--text-white);
  margin: 22px 0 16px;
  letter-spacing: 0.01em;
}

.cta-glow-box > p {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto 36px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.cta-actions .btn-neon,
.cta-actions .btn-ghost {
  min-width: 200px;
  height: 56px;
}

/* ============ Footer ============ */
.site-footer {
  padding: 70px 0 0;
  background: rgba(4,8,17,0.9);
  border-top: 1px solid rgba(255,255,255,0.07);
}

.footer-row {
  padding-bottom: 45px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--text-white);
  margin-bottom: 16px;
}

.footer-logo .logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 19px;
}

.footer-brand-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
  margin: 14px 0 16px;
  max-width: 360px;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.footer-badges i {
  color: var(--primary-neon);
}

.footer-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-left: 14px;
}

.footer-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 16px;
  border-radius: 3px;
  background: var(--accent-warm);
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li + li {
  margin-top: 10px;
}

.footer-list a {
  font-size: 14px;
  color: var(--text-muted);
  position: relative;
}

.footer-list a:hover {
  color: var(--primary-neon);
  padding-left: 4px;
}

.footer-notice {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin-top: 14px;
}

.footer-icp {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

.footer-security {
  background: rgba(2,5,12,0.65);
  padding: 14px 0;
}

.footer-security p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-security i {
  color: #FFC887;
}

/* ============ 焦点 / 通用状态 ============ */
a:active,
button:active {
  transform: scale(0.98);
}

.card-clickable {
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease;
}

.card-clickable:hover {
  transform: translateY(-4px);
}

.card-clickable:focus-visible {
  outline: 2px solid var(--primary-neon);
  outline-offset: 3px;
}

/* ============ 响应式 ============ */
@media (max-width: 1199.98px) {
  .search-wrap {
    max-width: 44%;
  }

  .logo-text {
    font-size: 16px;
  }
}

@media (max-width: 991.98px) {
  .site-main {
    padding-top: 126px;
  }

  .header-row {
    gap: 12px;
    flex-wrap: wrap;
    min-height: 0;
    padding: 12px 0 0;
  }

  .logo-mark {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .search-wrap {
    order: 3;
    max-width: 100%;
    flex-basis: 100%;
    margin: 0 0 12px;
  }

  .header-cta {
    margin-left: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .pill-bar {
    display: none;
    padding: 0 0 14px;
    background: rgba(6,11,24,0.96);
  }

  .pill-bar.open {
    display: block;
  }

  .pill-nav {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0;
    gap: 0;
  }

  .pill-nav a {
    border-radius: 12px;
    height: 42px;
    padding: 0 18px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    width: 100%;
  }

  .pill-nav a.active {
    background: rgba(41,243,199,0.1);
    border-color: rgba(41,243,199,0.3);
  }

  .nav-verify {
    display: flex;
    height: 40px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 0 14px;
    margin-top: 8px;
  }

  .section-title {
    font-size: 26px;
  }

  .notice-card,
  .step-card {
    padding: 22px 18px;
  }

  .main-cta {
    padding: 4.5rem 0;
  }
}

@media (max-width: 767.98px) {
  .site-main {
    padding-top: 118px;
  }

  .section-space {
    padding: 4rem 0;
  }

  .access-steps {
    padding: 4rem 0 3rem;
  }

  .notice-area {
    padding: 3.5rem 0;
  }

  .section-head {
    margin-bottom: 28px;
  }

  .section-label {
    font-size: 11px;
  }

  .logo-text small {
    display: none;
  }

  .header-row {
    gap: 10px;
    padding-top: 8px;
  }

  .header-cta {
    min-width: 88px;
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
  }

  .footer-support-notice {
    padding: 20px 16px;
  }

  .notice-area .notice-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .support-strip {
    padding: 18px;
  }

  .hero-legal {
    display: none;
  }

  .cta-glow-box {
    padding: 50px 20px 40px;
  }

  .cta-actions .btn-neon,
  .cta-actions .btn-ghost {
    min-width: 160px;
    height: 50px;
    font-size: 14px;
  }
}

@media (max-width: 575.98px) {
  .header-cta {
    min-width: auto;
    padding: 0 16px;
  }

  .search-input {
    font-size: 13px;
  }

  .header-cta {
    font-size: 13px;
  }

  .page-hero {
    padding: 56px 0 50px;
    min-height: auto;
  }

  .page-hero h1 {
    font-size: 30px;
  }

  .cta-glow-box h2 {
    font-size: 28px;
  }
}

/* roulang page: category2 */
:root{
  --bg-deep:#060B18;
  --bg-deep-2:#0A1428;
  --bg-glass:rgba(255,255,255,0.06);
  --border-glass:rgba(255,255,255,0.12);
  --primary-neon:#29F3C7;
  --accent-warm:#FF7A00;
  --aux-purple:#7B61FF;
  --text-white:#F7FAFC;
  --text-muted:rgba(226,234,255,0.66);
  --radius-card:20px;
  --radius-btn:50px;
  --shadow-glow:0 0 22px rgba(41,243,199,0.32);
  --space-section:6rem;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","微软雅黑","Segoe UI",Roboto,sans-serif;
  font-size:1rem;
  line-height:1.75;
  letter-spacing:0.01em;
  color:rgba(255,255,255,0.88);
  background:linear-gradient(160deg,var(--bg-deep) 0%,var(--bg-deep-2) 58%,#081226 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;cursor:pointer}
a:hover{color:inherit}
img{max-width:100%;height:auto}
ul,ol{list-style:none;margin:0;padding:0}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,h5{
  margin:0;
  line-height:1.3;
  color:#fff;
  font-weight:700;
}
p{margin:0}
.container{max-width:1320px}
.site-header{
  position:sticky;
  top:0;
  z-index:1080;
  width:100%;
  background:rgba(6,11,24,0.82);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.site-header .container{
  padding-top:0.75rem;
  padding-bottom:0.75rem;
}
.header-row{
  display:flex;
  align-items:center;
  gap:1.25rem;
}
.logo-brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
  min-width:fit-content;
}
.logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#29F3C7,#0EAB9B);
  color:#03151B;
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:0.02em;
  box-shadow:0 0 18px rgba(41,243,199,0.25);
}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  font-size:1.08rem;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}
.logo-text small{
  font-size:.74rem;
  font-weight:400;
  color:var(--text-muted);
  letter-spacing:.06em;
  margin-top:2px;
}
.search-wrap{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  max-width:46%;
  margin:0 auto;
}
.search-form{
  display:flex;
  align-items:center;
  width:100%;
  height:42px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:50px;
  padding:0 6px 0 16px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.search-form:focus-within{
  border-color:var(--primary-neon);
  background:rgba(255,255,255,0.10);
  box-shadow:0 0 0 3px rgba(41,243,199,0.18);
}
.search-icon{
  display:flex;
  color:var(--text-muted);
  margin-right:10px;
}
.search-input{
  flex:1;
  min-width:0;
  height:auto;
  border:0;
  background:transparent;
  outline:none;
  font-size:.92rem;
  color:#fff;
}
.search-input::placeholder{
  color:rgba(226,234,255,0.55);
}
.search-submit{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  height:32px;
  padding:0 15px;
  border:0;
  border-radius:40px;
  background:rgba(255,255,255,0.10);
  color:var(--primary-neon);
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  transition:background .2s,color .2s;
}
.search-submit:hover{
  background:rgba(41,243,199,0.16);
}
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:38px;
  border-radius:var(--radius-btn);
  background:linear-gradient(135deg,var(--primary-neon),#19D3B0);
  color:#021312;
  font-size:.92rem;
  font-weight:700;
  border:1px solid rgba(41,243,199,.6);
  box-shadow:0 0 16px rgba(41,243,199,.28);
  transition:transform .2s,box-shadow .2s,filter .2s;
  flex-shrink:0;
}
.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 28px rgba(41,243,199,.45);
  color:#021312;
}
.header-cta:active{
  transform:translateY(0);
}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid var(--border-glass);
  border-radius:14px;
  background:rgba(255,255,255,0.07);
  color:#fff;
  font-size:1.15rem;
  flex-shrink:0;
}
.pill-bar{
  padding-top:.65rem;
  overflow:hidden;
  transition:max-height .3s ease;
}
.pill-nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem .5rem;
}
.pill-nav a{
  display:inline-flex;
  align-items:center;
  padding:.34rem .8rem;
  border-radius:50px;
  font-size:.86rem;
  font-weight:500;
  color:var(--text-muted);
  background:rgba(255,255,255,0.04);
  border:1px solid transparent;
  transition:all .2s;
  white-space:nowrap;
}
.pill-nav a:hover{
  color:var(--primary-neon);
  border-color:rgba(41,243,199,.4);
}
.pill-nav a.active{
  color:var(--primary-neon);
  background:rgba(41,243,199,.10);
  border-color:rgba(41,243,199,.42);
}
.nav-verify{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-left:auto;
  font-size:.78rem;
  color:var(--text-muted);
  background:rgba(123,97,255,.12);
  padding:.28rem .8rem;
  border-radius:40px;
  white-space:nowrap;
}
.nav-verify i{
  color:var(--aux-purple);
}
.pill-nav a:focus-visible,
.logo-brand:focus-visible,
.header-cta:focus-visible,
.search-submit:focus-visible{
  outline:2px solid var(--primary-neon);
  outline-offset:3px;
}
.page-hero{
  position:relative;
  overflow:hidden;
  padding:4.4rem 0 3.6rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.page-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(96deg,rgba(6,11,24,.94) 0%,rgba(9,19,38,.78) 55%,rgba(13,34,61,.62) 100%),url("/assets/images/backpic/back-1.png") center/cover no-repeat;
}
.page-hero .container{
  position:relative;
  z-index:2;
}
.guide-crumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  color:var(--text-muted);
  margin-bottom:1.2rem;
}
.guide-crumb a{
  transition:color .2s;
}
.guide-crumb a:hover{
  color:var(--primary-neon);
}
.guide-crumb .sep{
  color:rgba(255,255,255,.25);
}
.guide-crumb .current{
  color:var(--primary-neon);
}
.hero-context{
  max-width:980px;
}
.label-sm{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--accent-warm);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  background:rgba(255,122,0,.10);
  border:1px solid rgba(255,122,0,.22);
  border-radius:40px;
  padding:.28rem .9rem;
  margin-bottom:1.1rem;
}
.label-sm::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-warm);
}
.page-hero h1{
  font-size:clamp(2rem,4.5vw,3.3rem);
  font-weight:800;
  line-height:1.28;
  letter-spacing:.01em;
  margin-bottom:1rem;
  color:#fff;
}
.hero-sub{
  margin-top:.25rem;
  font-size:1.03rem;
  color:rgba(240,247,255,.72);
  max-width:780px;
  line-height:1.9;
}
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .8rem;
  margin-top:1.6rem;
}
.hero-proof span{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:40px;
  padding:.32rem .8rem;
  font-size:.82rem;
  color:rgba(240,247,255,.82);
}
.hero-proof i{
  color:var(--primary-neon);
}
.section-block{
  padding:var(--space-section) 0;
  overflow:hidden;
  position:relative;
}
.section-block + .section-block{
  padding-top:0;
}
.steps-section{
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
}
.sec-head{
  margin-bottom:3.4rem;
}
.sec-head .label-sm{
  margin-bottom:.75rem;
}
.sec-title{
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;
  margin-bottom:.8rem;
  color:#F7FAFC;
}
.sec-desc{
  max-width:820px;
  color:var(--text-muted);
  font-size:1rem;
}
.sec-head.center .sec-desc{
  margin-left:auto;
  margin-right:auto;
}
.text-center{text-align:center}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.step-card{
  position:relative;
  padding:1.8rem 1.6rem 1.9rem;
  border-radius:var(--radius-card);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden;
  transition:transform .25s,border-color .25s,background .25s;
}
.step-card:hover{
  transform:translateY(-6px);
  border-color:rgba(41,243,199,.55);
  background:linear-gradient(160deg,rgba(41,243,199,.09),rgba(255,255,255,.035));
}
.step-card:focus-within{
  outline:2px solid var(--primary-neon);
  outline-offset:3px;
}
.step-card.step-primary{
  border-color:rgba(41,243,199,.55);
  background:linear-gradient(150deg,rgba(41,243,199,.13),rgba(255,255,255,.04));
  box-shadow:0 0 26px rgba(41,243,199,.12);
}
.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.2rem;
}
.step-num{
  font-size:2.4rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(120deg,#29F3C7,#7B61FF);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.step-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:var(--primary-neon);
  font-size:1.2rem;
}
.step-card h3{
  font-size:1.12rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.65rem;
}
.step-card p{
  font-size:.9rem;
  line-height:1.8;
  color:var(--text-muted);
}
.notice-line{
  display:grid;
  place-items:center;
  gap:.8rem;
  margin:3.8rem 0 0;
}
.notice-tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.84rem;
  color:var(--text-muted);
  background:rgba(255,255,255,.04);
  border-radius:40px;
  padding:.4rem .9rem;
  border:1px dashed rgba(255,255,255,.14);
}
.notice-tag i{
  color:var(--accent-warm);
}
.notes-section{
  position:relative;
}
.notes-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:30%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(41,243,199,.4),transparent);
}
.notes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.3rem;
}
.note-card{
  display:flex;
  gap:1rem;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-card);
  padding:1.45rem 1.5rem;
  transition:all .25s;
}
.note-card:hover{
  border-color:rgba(41,243,199,.45);
  transform:translateY(-4px);
  background:rgba(41,243,199,.08);
}
.note-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:16px;
  flex-shrink:0;
  color:#FF7A00;
  border:1px solid rgba(255,122,0,.35);
  background:rgba(255,122,0,.12);
  font-size:1.15rem;
}
.note-card h3{
  font-size:1.03rem;
  color:#F7FAFC;
  margin-bottom:.4rem;
}
.note-card p{
  font-size:.9rem;
  line-height:1.85;
  color:var(--text-muted);
}
.still-section{
  padding:4.2rem 0 1rem;
}
.still-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  background:rgba(255,173,78,.08);
  border:1px solid rgba(255,162,78,.32);
  border-radius:var(--radius-card);
  padding:1.4rem 1.8rem;
}
.still-info{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  color:rgba(255,225,190,.9);
}
.still-info i{
  font-size:1.3rem;
  color:#FFC48A;
}
.still-info strong{
  color:#FFD8AE;
  font-size:1.08rem;
  white-space:nowrap;
}
.still-info span{
  font-size:.92rem;
  color:rgba(255,225,190,.75);
  max-width:720px;
}
.btn-support{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-btn);
  color:#fff;
  padding:.64rem 1.5rem;
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.btn-support:hover{
  background:rgba(255,255,255,.14);
  border-color:var(--primary-neon);
  color:var(--primary-neon);
  transform:translateY(-2px);
}
.btn-support:active{
  transform:translateY(0);
}
.cta-return{
  padding:5.8rem 0 var(--space-section);
}
.cta-return-box{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius-card) + 4px);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);
  padding:4rem 2rem;
  text-align:center;
}
.cta-return-box::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  left:50%;
  top:-70%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(41,243,199,.13) 0%,transparent 65%);
  pointer-events:none;
}
.cta-return-box h2{
  font-size:clamp(1.7rem,3vw,2.4rem);
  color:#fff;
  margin-bottom:.8rem;
}
.cta-return-box p{
  color:var(--text-muted);
  max-width:640px;
  margin:0 auto 2rem;
  font-size:1rem;
}
.btn-return{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  min-width:210px;
  padding:0 2.2rem;
  border-radius:var(--radius-btn);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.btn-return:hover{
  border-color:var(--primary-neon);
  background:rgba(41,243,199,.13);
  color:var(--primary-neon);
  transform:translateY(-3px);
}
.btn-return:active{
  transform:translateY(-1px);
}
.btn-return:focus-visible{
  outline:2px solid var(--primary-neon);
  outline-offset:4px;
}
.cta-mini{
  font-size:.8rem;
  color:rgba(255,255,255,.5);
  margin-top:1.6rem !important;
  margin-bottom:0 !important;
}
.site-footer{
  background:#050915;
  border-top:1px solid rgba(255,255,255,.08);
  padding:4.4rem 0 0;
  position:relative;
  z-index:2;
}
.footer-row{
  padding-bottom:2.6rem;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:#fff;
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:1rem;
}
.footer-logo .logo-mark{
  width:39px;
  height:39px;
}
.footer-brand-desc{
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.9;
  max-width:400px;
  margin-bottom:1.1rem;
}
.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .7rem;
}
.footer-badges span{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:50px;
  padding:.22rem .7rem;
  font-size:.77rem;
  color:rgba(240,247,255,.72);
}
.footer-badges i{
  margin-right:.25rem;
  color:var(--primary-neon);
}
.footer-title{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:1.1rem;
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.footer-list li{
  font-size:.9rem;
}
.footer-list a{
  color:var(--text-muted);
  transition:color .2s,padding-left .2s;
}
.footer-list a:hover{
  color:var(--primary-neon);
  padding-left:3px;
}
.footer-notice{
  font-size:.82rem;
  color:rgba(226,234,255,.55);
  line-height:1.8;
  margin-bottom:.8rem;
}
.footer-icp{
  border-top:1px solid rgba(255,255,255,.06);
  padding:1.1rem 0;
  font-size:.8rem;
  color:rgba(226,234,255,.55);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem;
}
.footer-security{
  background:rgba(0,0,0,.22);
  border-top:1px solid rgba(255,255,255,.06);
  padding:.75rem 0;
}
.footer-security .container p{
  font-size:.78rem;
  line-height:1.6;
  color:rgba(226,234,255,.48);
  margin-bottom:0;
  text-align:center;
}
.footer-security i{
  color:#FF8E3D;
  margin-right:.4rem;
}
.site-footer a:focus-visible{
  outline:2px solid var(--primary-neon);
  outline-offset:3px;
}
.float-entry{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:1070;
  display:flex;
  align-items:center;
  gap:.65rem;
  background:rgba(10,22,42,.92);
  border:1px solid rgba(41,243,199,.35);
  padding:.5rem .65rem .5rem 1rem;
  border-radius:50px;
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 20px rgba(41,243,199,.10);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:.88rem;
}
.float-count{
  color:var(--primary-neon);
  font-size:.82rem;
  font-weight:600;
}
.float-entry a{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:linear-gradient(135deg,var(--primary-neon),#1bc4ac);
  color:#001716;
  border-radius:50px;
  padding:.48rem 1.05rem;
  font-weight:700;
  font-size:.88rem;
  transition:transform .2s,box-shadow .2s;
}
.float-entry a:hover{
  transform:translateY(-2px);
  box-shadow:0 0 22px rgba(41,243,199,.4);
}
@media (min-width:992px) and (max-width:1199.98px){
  .search-wrap{max-width:40%}
}
@media (max-width:991.98px){
  .search-wrap{max-width:46%}
  .logo-text small{display:none}
  .search-submit span{display:none}
  .search-submit{padding:0 12px}
  .nav-toggle{
    display:inline-flex;
  }
  .pill-bar{
    display:none;
  }
  .pill-bar.open{
    display:block;
  }
  .pill-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
  }
  .pill-nav a{
    justify-content:flex-start;
    padding:.55rem .9rem;
  }
  .pill-nav .nav-verify{
    justify-content:flex-start;
    margin-left:0;
    margin-top:.4rem;
  }
  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:767.98px){
  .site-header .container{
    padding-top:.7rem;
    padding-bottom:.7rem;
  }
  .header-row{
    flex-wrap:wrap;
    gap:.7rem;
  }
  .logo-mark{
    width:39px;
    height:39px;
    border-radius:12px;
    font-size:1.05rem;
  }
  .logo-text{
    font-size:.98rem;
  }
  .logo-text small{
    display:block;
    font-size:.7rem;
  }
  .search-wrap{
    order:5;
    width:100%;
    max-width:100%;
    flex:0 0 100%;
    margin-top:.15rem;
  }
  .header-cta{
    width:auto;
    padding:0 1.2rem;
    font-size:.88rem;
  }
  .header-cta{
    margin-left:auto;
  }
  .nav-toggle{
    width:39px;
    height:39px;
  }
  .section-block{
    padding:3.2rem 0;
  }
  .steps-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .notes-grid{
    grid-template-columns:1fr;
  }
  .step-card{
    padding:1.5rem;
  }
  .page-hero{
    padding:3.4rem 0 2.6rem;
  }
  .cta-return-box{
    padding:3rem 1.3rem;
  }
  .still-strip{
    padding:1.15rem;
  }
  .still-strip .btn-support{
    width:100%;
    justify-content:center;
  }
  .float-entry{
    bottom:1rem;
    right:1rem;
    gap:.35rem;
    padding:.4rem .4rem .4rem .8rem;
  }
  .float-count{
    display:none;
  }
  .float-entry a{
    padding:.48rem .9rem;
    font-size:.85rem;
  }
}
@media (max-width:575.98px){
  .logo-text{
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .logo-text small{
    display:none;
  }
  .search-form{
    height:41px;
  }
  .hero-proof span{
    font-size:.76rem;
    padding:.28rem .62rem;
  }
  .sec-title{
    font-size:1.65rem;
  }
  .footer-icp{
    justify-content:center;
    text-align:center;
  }
}