/* roulang page: index */
:root {
    --bg-900: #05090F;
    --bg-800: #0A121F;
    --panel: #0E1828;
    --primary: #1FD1F9;
    --primary-600: #0EA5C9;
    --accent: #FF9A3C;
    --ok: #34D399;
    --danger: #FF6B6B;
    --text-100: #EAF2FF;
    --text-400: #A7B5C9;
    --text-600: #6B7A90;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .16);
    --r-card: 16px;
    --r-glass: 18px;
    --r-img: 14px;
    --r-btn: 12px;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .45);
    --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg-900);
    color: var(--text-400);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    overflow-x: hidden;
  }

  img { max-width: 100%; display: block; }

  a { color: inherit; text-decoration: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }

  button { font-family: inherit; cursor: pointer; }

  input, textarea, select { font-family: inherit; }

  h1, h2, h3, h4 {
    color: var(--text-100);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  h1 { font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; }
  h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.25; }
  h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }

  p { margin: 0; }

  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  section[id] { scroll-margin-top: 128px; }

  /* ---------- 顶部导航 ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(5, 9, 15, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
  }

  .site-header.is-scrolled {
    background: rgba(5, 9, 15, .94);
    border-bottom-color: var(--line);
  }

  .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
    transition: height .25s ease;
  }

  .site-header.is-scrolled .brand-row { height: 56px; }

  .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .brand-logo .brand-mark {
    color: var(--primary);
    text-shadow: 0 0 18px rgba(31, 209, 249, .45);
  }

  .brand-logo .brand-sub { color: var(--text-100); }

  .brand-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .16);
  }

  .brand-actions { display: flex; align-items: center; gap: 10px; }

  .icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    color: var(--text-400);
    transition: all .2s ease;
  }

  .icon-btn:hover { color: var(--text-100); border-color: var(--line-strong); background: rgba(31, 209, 249, .08); }

  .icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--r-btn);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #04222B;
    box-shadow: 0 0 0 1px rgba(31, 209, 249, .5), 0 8px 28px rgba(31, 209, 249, .35);
  }

  .btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(31, 209, 249, .65), 0 12px 32px rgba(31, 209, 249, .45);
  }

  .btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 1px rgba(31, 209, 249, .4), 0 4px 14px rgba(31, 209, 249, .25); }

  .btn-ghost {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text-100);
  }

  .btn-ghost:hover { border-color: rgba(31, 209, 249, .7); background: rgba(31, 209, 249, .08); }

  .btn-accent {
    background: transparent;
    border-color: rgba(255, 154, 60, .75);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(255, 154, 60, .18), 0 8px 24px rgba(255, 154, 60, .18);
  }

  .btn-accent:hover { background: rgba(255, 154, 60, .1); transform: translateY(-1px); }

  .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  .btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

  .channel-row {
    border-top: 1px solid var(--line);
    background: rgba(10, 18, 31, .6);
  }

  .channel-scroll {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 46px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .channel-scroll::-webkit-scrollbar { display: none; }

  .channel-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 46px;
    font-size: 14px;
    color: var(--text-400);
    white-space: nowrap;
    scroll-snap-align: start;
    flex: 0 0 auto;
  }

  .channel-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background-color .2s ease, box-shadow .2s ease;
  }

  .channel-tab:hover { color: var(--text-100); }

  .channel-tab.active { color: var(--primary); }

  .channel-tab.active::after {
    background: var(--primary);
    box-shadow: 0 0 12px rgba(31, 209, 249, .8);
  }

  /* ---------- 移动端抽屉 ---------- */
  .mobile-drawer {
    display: none;
    border-top: 1px solid var(--line);
    background: rgba(8, 14, 24, .98);
    padding: 14px 20px 22px;
  }

  .mobile-drawer.open { display: block; }

  .mobile-drawer a {
    display: block;
    padding: 12px 4px;
    font-size: 15px;
    color: var(--text-400);
    border-bottom: 1px solid var(--line);
  }

  .mobile-drawer a.active { color: var(--primary); }

  .mobile-drawer a:hover { color: var(--text-100); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 88px;
    background: var(--bg-900);
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/backpic/back-1.webp');
    background-size: cover;
    background-position: center;
    opacity: .22;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(620px 420px at 84% 12%, rgba(31, 209, 249, .20), transparent 68%),
      radial-gradient(520px 380px at 8% 88%, rgba(255, 154, 60, .07), transparent 70%),
      linear-gradient(180deg, rgba(5, 9, 15, .58) 0%, rgba(5, 9, 15, .94) 76%, var(--bg-900) 100%);
  }

  .hero > .container { position: relative; z-index: 2; }

  .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: center;
  }

  .hero-copy { grid-column: span 7; }

  .hero-visual { grid-column: span 5; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(31, 209, 249, .32);
    background: rgba(31, 209, 249, .08);
    color: var(--primary);
    font-size: 12.5px;
    letter-spacing: .04em;
  }

  .hero-sub {
    margin-top: 20px;
    max-width: 560px;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--text-400);
  }

  .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

  .hero-points {
    margin-top: 34px;
    display: grid;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .hero-point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--text-400);
  }

  .hero-point i { color: var(--primary); font-size: 13px; }

  .scroll-cue {
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-600);
  }

  .scroll-cue i { animation: cue 2.4s ease-in-out infinite; }

  @keyframes cue {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50% { transform: translateY(5px); opacity: 1; }
  }

  /* 玻璃卡通用 */
  .glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--r-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
  }

  .hero-device {
    position: relative;
    height: 430px;
  }

  .hv-card {
    position: absolute;
    border-radius: var(--r-glass);
    transform: rotate(-3deg);
    padding: 16px;
  }

  .hv-1 {
    top: 0;
    left: 6%;
    width: 78%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
  }

  .hv-1 .thumb {
    height: 148px;
    border-radius: var(--r-img);
    background-image: url('/assets/images/coverpic/cover-1.webp');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, .12);
  }

  .hv-2 {
    top: 168px;
    left: 0;
    width: 62%;
    z-index: 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
    transform: rotate(-3deg) translateX(-4px);
  }

  .hv-3 {
    top: 208px;
    right: 0;
    width: 56%;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
    transform: rotate(-3deg) translateX(6px);
  }

  .hv-label { font-size: 12px; color: var(--text-600); letter-spacing: .04em; }

  .hv-metric {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-100);
    line-height: 1.2;
  }

  .hv-metric span { font-size: 13px; color: var(--text-400); font-weight: 500; }

  .status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-400);
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .14);
    animation: pulse 6s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .14); }
    50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, .06); }
  }

  /* ---------- 信任条 ---------- */
  .trust-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-800);
  }

  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .trust-item {
    padding: 26px 20px;
    border-right: 1px solid var(--line);
  }

  .trust-item:last-child { border-right: none; }

  .trust-num {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-100);
    line-height: 1.2;
  }

  .trust-num small { font-size: 12px; color: var(--text-600); font-weight: 500; margin-left: 4px; }

  .trust-label { font-size: 13px; color: var(--text-600); margin-top: 6px; }

  /* ---------- 通用板块 ---------- */
  .section { padding: 96px 0; }

  .section-alt { background: var(--bg-800); }

  .section-head { max-width: 720px; margin-bottom: 44px; }

  .section-kicker {
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
  }

  .section-title { margin-bottom: 14px; }

  .section-desc { font-size: 16px; color: var(--text-400); line-height: 1.9; }

  .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 26px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
  }

  .card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(31, 209, 249, .22), transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }

  .card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
  }

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

  /* 卖点非对称网格 */
  .feature-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
  }

  .feature-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
  }

  .feature-main .fig {
    height: 220px;
    border-radius: var(--r-img);
    border: 1px solid rgba(255, 255, 255, .1);
    background-image: url('/assets/images/coverpic/cover-2.webp');
    background-size: cover;
    background-position: center;
  }

  .feature-side { display: grid; gap: 24px; align-content: stretch; }

  .feature-side .card { display: flex; flex-direction: column; gap: 12px; }

  .feature-side .fig-sm {
    height: 108px;
    border-radius: var(--r-img);
    border: 1px solid rgba(255, 255, 255, .1);
    background-size: cover;
    background-position: center;
  }

  .card-text { font-size: 14.8px; color: var(--text-400); line-height: 1.85; }

  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--primary);
    margin-top: auto;
  }

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

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

  .arrow-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

  /* ---------- 演示区 ---------- */
  .demo-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
    align-items: start;
  }

  .demo-frame {
    padding: 14px;
    border-radius: var(--r-glass);
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
  }

  .demo-inner {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-img);
    overflow: hidden;
    border: 1px solid rgba(31, 209, 249, .28);
    box-shadow: inset 0 0 40px rgba(31, 209, 249, .18);
    background-color: #071019;
  }

  .demo-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/backpic/back-2.webp');
    background-size: cover;
    background-position: center;
    opacity: .26;
  }

  .demo-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 16, 25, .35), rgba(7, 16, 25, .9));
  }

  .demo-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; }

  .channel-tab-btn {
    padding: 6px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    color: var(--text-400);
    transition: all .2s ease;
  }

  .channel-tab-btn.active {
    color: #04222B;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(31, 209, 249, .5), 0 8px 20px rgba(31, 209, 249, .28);
  }

  .channel-tab-btn:hover { color: var(--text-100); border-color: var(--line-strong); }

  .channel-tab-btn.active:hover { color: #04222B; }

  .demo-caption {
    font-size: 13px;
    color: var(--text-400);
    font-family: var(--font-mono);
  }

  .check-list { display: grid; gap: 14px; }

  .check-item {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }

  .check-item i { color: var(--primary); margin-top: 5px; font-size: 13px; }

  .check-item h4 { font-size: 15px; color: var(--text-100); font-weight: 600; }

  .check-item p { font-size: 13.5px; color: var(--text-600); margin-top: 4px; line-height: 1.75; }

  /* ---------- 数据卡 ---------- */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .stat-card {
    padding: 24px;
    border-radius: var(--r-card);
    background: #12203A;
    border: 1px solid var(--line);
  }

  .stat-value {
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    color: var(--text-100);
    line-height: 1.15;
  }

  .stat-value small { font-size: 14px; color: var(--text-600); margin-left: 4px; font-weight: 500; }

  .stat-label { font-size: 13px; color: var(--text-400); margin-top: 8px; }

  /* 横向滚动评价 */
  .quote-scroller {
    margin-top: 36px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
    -webkit-overflow-scrolling: touch;
  }

  .quote-scroller::-webkit-scrollbar { height: 6px; }

  .quote-scroller::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }

  .quote-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
    padding: 24px;
    border-radius: var(--r-card);
    background: var(--panel);
    border: 1px solid var(--line);
  }

  .quote-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(31, 209, 249, .35), rgba(255, 154, 60, .3));
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-100);
    font-weight: 600;
  }

  .quote-text { font-size: 14.5px; color: var(--text-400); line-height: 1.85; margin-top: 14px; }

  .quote-source { font-size: 12.5px; color: var(--text-600); margin-top: 12px; }

  .badge-strip {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    filter: grayscale(1);
    opacity: .72;
  }

  .badge-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-600);
  }

  /* ---------- 资讯 / CMS 列表 ---------- */
  .news-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
  }

  .news-lead {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .news-lead .thumb {
    height: 230px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--line);
    transition: transform .35s ease;
  }

  .news-lead:hover .thumb { transform: scale(1.03); }

  .news-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

  .news-side { display: grid; gap: 20px; align-content: start; }

  .news-mini {
    display: flex;
    gap: 16px;
    padding: 18px;
    align-items: flex-start;
  }

  .news-mini .thumb-sm {
    flex: 0 0 108px;
    height: 76px;
    border-radius: var(--r-img);
    border: 1px solid var(--line);
    background-size: cover;
    background-position: center;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(31, 209, 249, .3);
    background: rgba(31, 209, 249, .08);
    color: var(--primary);
    white-space: nowrap;
  }

  .tag-muted {
    border-color: var(--line);
    background: rgba(255, 255, 255, .03);
    color: var(--text-600);
  }

  .news-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-100);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-excerpt {
    font-size: 14px;
    color: var(--text-400);
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--text-600);
  }

  .empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .015);
    text-align: center;
    padding: 32px 20px;
  }

  .empty-state i { font-size: 22px; color: var(--text-600); }

  .empty-state p { font-size: 14px; color: var(--text-600); }

  .section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  /* ---------- 方案对比 ---------- */
  .plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .plan-card {
    padding: 30px;
    border-radius: var(--r-card);
    background: var(--panel);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .plan-card.recommended {
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 154, 60, .38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-glass);
    position: relative;
  }

  .plan-badge {
    position: absolute;
    top: -12px;
    right: 22px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: #2A1400;
    background: var(--accent);
    box-shadow: 0 6px 18px rgba(255, 154, 60, .35);
    font-weight: 600;
  }

  .plan-name { font-size: 19px; color: var(--text-100); font-weight: 600; }

  .plan-desc { font-size: 13.8px; color: var(--text-600); line-height: 1.8; }

  .plan-list { display: grid; gap: 12px; }

  .plan-list li {
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    color: var(--text-400);
  }

  .plan-list i { color: var(--primary); margin-top: 6px; font-size: 12px; }

  .plan-list li.muted i { color: var(--text-600); }

  .plan-card .btn { width: 100%; margin-top: auto; }

  /* ---------- FAQ ---------- */
  .faq-list { display: grid; gap: 14px; max-width: 900px; }

  .faq-item {
    border-radius: var(--r-glass);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transition: background-color .2s ease, border-color .2s ease;
  }

  .faq-item.open { border-color: rgba(31, 209, 249, .32); }

  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    min-height: 60px;
    background: transparent;
    border: none;
    color: var(--text-100);
    font-size: 15.5px;
    font-weight: 600;
    text-align: left;
  }

  .faq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

  .faq-q .faq-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-400);
    transition: transform .2s ease, color .2s ease, border-color .2s ease;
  }

  .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--primary); border-color: rgba(31, 209, 249, .5); }

  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
    position: relative;
  }

  .faq-a-inner {
    padding: 0 22px 20px 22px;
    font-size: 14.5px;
    color: var(--text-400);
    line-height: 1.9;
    border-left: 0 solid transparent;
  }

  .faq-item.open .faq-a-inner {
    border-left: 3px solid var(--primary);
    box-shadow: inset 2px 0 10px rgba(31, 209, 249, .16);
    padding-left: 19px;
  }

  /* ---------- 收尾 CTA ---------- */
  .cta-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: var(--bg-900);
    text-align: center;
  }

  .cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(520px 320px at 50% 42%, rgba(31, 209, 249, .18), transparent 70%),
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
    background-position: center, center, center;
  }

  .cta-section > .container { position: relative; z-index: 2; }

  .cta-inner { max-width: 720px; margin: 0 auto; }

  .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

  /* ---------- 页脚 ---------- */
  .site-footer {
    background: var(--bg-800);
    border-top: 1px solid var(--line);
    padding: 64px 0 0;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding-bottom: 48px;
  }

  .footer-col h4 {
    font-size: 14px;
    color: var(--text-100);
    margin-bottom: 16px;
    font-weight: 600;
  }

  .footer-col p, .footer-col li {
    font-size: 14px;
    color: var(--text-600);
    line-height: 1.9;
  }

  .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

  .footer-col a:hover { color: var(--primary); }

  .footer-col a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

  .footer-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-600);
  }

  /* ---------- 浮动 CTA ---------- */
  .float-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #04222B;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    box-shadow: 0 0 0 1px rgba(31, 209, 249, .5), 0 10px 30px rgba(31, 209, 249, .38);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    animation: breathe 6s ease-in-out infinite;
  }

  .float-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .float-cta:hover { filter: brightness(1.07); }

  .float-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

  @keyframes breathe {
    0%, 100% { box-shadow: 0 0 0 1px rgba(31, 209, 249, .5), 0 10px 30px rgba(31, 209, 249, .3); }
    50% { box-shadow: 0 0 0 1px rgba(31, 209, 249, .7), 0 12px 38px rgba(31, 209, 249, .48); }
  }

  /* ---------- 响应式 ---------- */
  @media (max-width: 1024px) {
    .hero-copy { grid-column: span 12; }
    .hero-visual { grid-column: span 12; margin-top: 12px; }
    .hero-device { height: 380px; }
    .feature-grid { grid-template-columns: 1fr; }
    .demo-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section { padding: 88px 0; }
  }

  @media (max-width: 768px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-item:nth-child(2) { border-right: none; }
    .trust-item:nth-child(1), .trust-item:nth-child(2) { border-bottom: 1px solid var(--line); }
    .plan-grid { grid-template-columns: 1fr; }
    .hero { padding: 52px 0 64px; }
    .hero-device { height: auto; display: grid; gap: 14px; }
    .hv-card { position: static; width: 100% !important; transform: none !important; }
    .hv-1 .thumb { height: 160px; }
    .section { padding: 72px 0; }
    .cta-section { padding: 88px 0; }
    .float-cta {
      right: 16px;
      left: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      justify-content: center;
      padding: 14px 20px;
    }
    section[id] { scroll-margin-top: 104px; }
  }

  @media (max-width: 520px) {
    .stat-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .quote-card { flex: 0 0 86%; }
    .news-mini { flex-direction: column; }
    .news-mini .thumb-sm { flex: none; width: 100%; height: 132px; }
    .btn { width: 100%; }
    .btn-sm, .icon-btn { width: auto; }
    .hero-cta { flex-direction: column; }
    .cta-actions { flex-direction: column; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }

/* roulang page: article */
:root{
  --bg-900:#05090F;
  --bg-800:#0A121F;
  --panel:#0E1828;
  --primary:#1FD1F9;
  --primary-600:#0EA5C9;
  --accent:#FF9A3C;
  --ok:#34D399;
  --danger:#FF6B6B;
  --text-100:#EAF2FF;
  --text-400:#A7B5C9;
  --text-600:#6B7A90;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --radius-card:16px;
  --radius-glass:18px;
  --radius-img:14px;
  --radius-btn:12px;
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.45);
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  --ease:.2s ease;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg-900);
  color:var(--text-400);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--ease),border-color var(--ease),background-color var(--ease)}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;color:var(--text-100);line-height:1.35}
p{margin:0}
ul,ol{margin:0;padding:0}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.num{font-family:var(--mono);letter-spacing:-.02em}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-glass);
  border-radius:var(--radius-glass);
}

/* ============ 阅读进度条 ============ */
.read-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:90;
  background:linear-gradient(90deg,var(--primary),var(--primary-600));
  box-shadow:0 0 12px rgba(31,209,249,.65);
  transition:width .12s linear;
}

/* ============ 头部导航 ============ */
.site-header{
  position:sticky;top:0;z-index:70;
  background:rgba(5,9,15,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand-bar{height:64px}
.brand-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{display:inline-flex;align-items:baseline;gap:1px;font-size:18px;font-weight:700;letter-spacing:-.01em;flex:0 0 auto}
.brand-logo .brand-mark{color:var(--primary)}
.brand-logo .brand-sub{color:var(--text-100)}
.brand-logo:hover .brand-sub{color:var(--primary)}
.brand-actions{display:flex;align-items:center;gap:14px}
.channel-row{border-top:1px solid var(--line);background:rgba(10,18,31,.55)}
.channel-scroll{
  display:flex;align-items:center;gap:28px;height:46px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.channel-scroll::-webkit-scrollbar{display:none}
.channel-tab{
  position:relative;flex:0 0 auto;scroll-snap-align:start;
  font-size:14px;color:var(--text-400);padding:12px 0;white-space:nowrap;
}
.channel-tab:hover{color:var(--text-100)}
.channel-tab.active{color:var(--primary)}
.channel-tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-600));
  box-shadow:0 0 12px rgba(31,209,249,.7);
}

/* ============ 按钮 ============ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-btn);border:0;cursor:pointer;
  font-size:15px;font-weight:600;color:#03202B;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  box-shadow:0 0 0 1px rgba(31,209,249,.5),0 8px 28px rgba(31,209,249,.35);
  transition:transform var(--ease),filter var(--ease),box-shadow var(--ease);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(31,209,249,.62),0 12px 34px rgba(31,209,249,.45)}
.btn-primary:active{transform:translateY(0);box-shadow:0 0 0 1px rgba(31,209,249,.4),0 4px 14px rgba(31,209,249,.25)}
.btn-primary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-btn);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--text-100);
  background:transparent;border:1px solid var(--line-strong);
  transition:border-color var(--ease),background-color var(--ease),color var(--ease),transform var(--ease);
}
.btn-ghost:hover{border-color:rgba(31,209,249,.6);background:rgba(31,209,249,.08);color:var(--primary);transform:translateY(-1px)}
.btn-ghost:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-sm{padding:9px 18px;font-size:14px;border-radius:10px}
.link-more{font-size:14px;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.link-more:hover{color:var(--text-100)}

/* ============ 面包屑与文章头 ============ */
.crumb-wrap{padding:28px 0 0}
.crumb{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-600)}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"/";color:var(--text-600)}
.crumb a{color:var(--text-600)}
.crumb a:hover{color:var(--primary)}
.crumb .current{color:var(--text-400);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-head{padding:22px 0 0}
.badge-cat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;letter-spacing:.02em;padding:5px 12px;border-radius:999px;
  color:var(--primary);background:rgba(31,209,249,.08);border:1px solid rgba(31,209,249,.32);
}
.article-title{
  font-size:clamp(26px,3.4vw,40px);line-height:1.25;font-weight:700;
  letter-spacing:-.01em;margin-top:16px;max-width:900px;
}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-size:13px;color:var(--text-600)}
.meta-row .num{color:var(--text-400)}
.cover-figure{
  margin:28px 0 0;border-radius:var(--radius-img);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/9;background:linear-gradient(140deg,#0E1828,#0A121F);
  box-shadow:var(--shadow-card);
}
.cover-figure img{width:100%;height:100%;object-fit:cover}

/* ============ 主布局 ============ */
.layout{
  display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;
  align-items:start;padding:52px 0 0;
}
.article-body{max-width:780px;min-width:0}
.side-sticky{position:sticky;top:132px;display:flex;flex-direction:column;gap:18px}
.side-card{padding:20px}
.side-title{font-size:14px;font-weight:600;margin-bottom:12px}
.side-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-400)}
.side-list li{position:relative;padding-left:15px;line-height:1.7}
.side-list li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 8px rgba(31,209,249,.8);
}
.side-links{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.side-links a{color:var(--text-400);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.side-links li:last-child a{border-bottom:0}
.side-links a:hover{color:var(--primary)}

/* ============ 正文排版 ============ */
.prose-cn{font-size:17.5px;line-height:1.9;color:var(--text-400);text-align:left;word-break:break-word}
.prose-cn p{margin:0 0 1.2em}
.prose-cn h2{
  font-size:clamp(21px,2.4vw,26px);font-weight:700;color:var(--text-100);
  margin:2em 0 .6em;line-height:1.4;letter-spacing:-.01em;
}
.prose-cn h3{font-size:20px;font-weight:600;color:var(--text-100);margin:1.6em 0 .5em}
.prose-cn h4{font-size:17px;font-weight:600;color:var(--text-100);margin:1.4em 0 .4em}
.prose-cn a{color:var(--primary);border-bottom:1px solid transparent}
.prose-cn a:hover{border-bottom-color:var(--primary)}
.prose-cn strong{color:var(--text-100);font-weight:600}
.prose-cn ul,.prose-cn ol{margin:0 0 1.2em;padding-left:1.4em}
.prose-cn li{margin-bottom:.45em;line-height:1.8}
.prose-cn li::marker{color:var(--primary)}
.prose-cn blockquote{
  margin:1.6em 0;padding:16px 20px;
  border-left:3px solid var(--primary);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border-radius:0 14px 14px 0;color:var(--text-100);
}
.prose-cn blockquote p:last-child{margin-bottom:0}
.prose-cn img{border-radius:var(--radius-img);border:1px solid var(--line);margin:1.6em 0}
.prose-cn figure{margin:1.6em 0}
.prose-cn figcaption{font-size:13px;color:var(--text-600);text-align:center;margin-top:10px;line-height:1.6}
.prose-cn table{
  width:100%;display:block;overflow-x:auto;border-collapse:collapse;
  margin:1.6em 0;font-size:15px;
}
.prose-cn th,.prose-cn td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.prose-cn th{background:rgba(255,255,255,.04);color:var(--text-100);font-weight:600;white-space:nowrap}
.prose-cn code{
  font-family:var(--mono);font-size:.92em;color:var(--primary);
  background:rgba(31,209,249,.1);padding:2px 6px;border-radius:6px;
}
.prose-cn hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ============ 空态 ============ */
.empty-note{
  padding:48px 28px;text-align:center;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
}
.empty-title{font-size:20px;font-weight:600;color:var(--text-100);margin-bottom:10px}
.empty-note p{font-size:15px;color:var(--text-400);margin-bottom:20px}

/* ============ 标签与分享 ============ */
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.tag{
  font-size:13px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-400);
  transition:border-color var(--ease),color var(--ease);
}
.tag:hover{border-color:rgba(31,209,249,.45);color:var(--primary)}
.share-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn-share{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  font-size:13px;color:var(--text-400);cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--ease),color var(--ease),background-color var(--ease);
}
.btn-share:hover{border-color:rgba(31,209,249,.5);color:var(--primary)}
.btn-share:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ============ 上下篇 ============ */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.pager-card{
  display:flex;flex-direction:column;gap:8px;padding:20px 22px;
  border-radius:var(--radius-card);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-glass);
  transition:transform var(--ease),border-color var(--ease);
  position:relative;overflow:hidden;
}
.pager-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pager-card:hover::after{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(31,209,249,.28),transparent 70%);pointer-events:none;
}
.pager-dir{font-size:12px;color:var(--text-600);letter-spacing:.06em}
.pager-title{font-size:16px;font-weight:600;color:var(--text-100);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager-card:hover .pager-title{color:var(--primary)}

/* ============ 板块通用 ============ */
.section{padding:88px 0 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:700}

/* ============ 资讯卡片 ============ */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.info-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  transition:transform var(--ease),border-color var(--ease);
  position:relative;
}
.info-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.card-thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(140deg,#0E1828,#0A121F)}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.info-card:hover .card-thumb img{transform:scale(1.03)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-tag{align-self:flex-start;font-size:12px;padding:4px 10px;border-radius:999px;color:var(--primary);background:rgba(31,209,249,.08);border:1px solid rgba(31,209,249,.28)}
.card-body h3{font-size:17px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-body p{font-size:14px;color:var(--text-400);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;font-size:13px;color:var(--text-600)}
.info-card:hover .card-meta{color:var(--primary)}

/* ============ 收尾转化 ============ */
.cta-section{padding:96px 0 0}
.cta-box{
  position:relative;overflow:hidden;text-align:center;
  padding:72px 32px;border-radius:22px;
  background:var(--bg-800);border:1px solid var(--line);
}
.cta-box::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(31,209,249,.20),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  pointer-events:none;
}
.cta-box::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:52px 52px;pointer-events:none;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-size:clamp(24px,3vw,34px);font-weight:700}
.cta-box p{margin:16px auto 30px;max-width:600px;font-size:16px;color:var(--text-400)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ 浮动 CTA ============ */
.float-cta{
  position:fixed;right:24px;bottom:24px;z-index:80;
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;color:#03202B;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  box-shadow:0 0 0 1px rgba(31,209,249,.5),0 10px 30px rgba(31,209,249,.4);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  animation:breathe 6s ease-in-out infinite;
}
.float-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px rgba(31,209,249,.5),0 10px 30px rgba(31,209,249,.35)}50%{box-shadow:0 0 0 1px rgba(31,209,249,.68),0 14px 38px rgba(31,209,249,.55)}}

/* ============ 页脚 ============ */
.site-footer{margin-top:96px;background:var(--bg-800);border-top:1px solid var(--line);padding:72px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.footer-col h4{font-size:14px;font-weight:600;color:var(--text-100);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--text-600)}
.footer-col a:hover{color:var(--primary)}
.footer-col p{font-size:14px;color:var(--text-600);max-width:300px;line-height:1.8}
.footer-col li{font-size:14px;color:var(--text-600)}
.mt-4{margin-top:16px}
.footer-bottom{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-600);
}

/* ============ 响应式 ============ */
@media (max-width:1024px){
  .layout{grid-template-columns:1fr;gap:36px;padding-top:42px}
  .side-sticky{position:static}
  .article-body{max-width:100%}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:16px}
  .container{padding:0 20px}
  .brand-bar,.brand-inner{height:56px}
  .section{padding:64px 0 0}
  .section-head{margin-bottom:22px}
  .cover-figure{margin-top:22px}
  .pager{grid-template-columns:1fr;margin-top:44px}
  .card-grid{grid-template-columns:1fr}
  .cta-section{padding:72px 0 0}
  .cta-box{padding:52px 22px}
  .site-footer{margin-top:72px;padding:52px 0 22px}
  .footer-grid{gap:28px}
  .meta-row{gap:6px 18px}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .btn-primary,.btn-ghost{min-height:48px}
  .float-cta{
    left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
    justify-content:center;
  }
  .crumb .current{max-width:160px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

/* roulang page: category1 */
:root{
    --bg-900:#05090F;
    --bg-800:#0A121F;
    --panel:#0E1828;
    --panel-2:#101E32;
    --primary:#1FD1F9;
    --primary-600:#0EA5C9;
    --accent:#FF9A3C;
    --ok:#34D399;
    --danger:#FF6B6B;
    --text-100:#EAF2FF;
    --text-400:#A7B5C9;
    --text-600:#6B7A90;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --glass-bg:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
    --glass-border:rgba(255,255,255,.10);
    --r-card:16px;
    --r-panel:18px;
    --r-img:14px;
    --r-btn:12px;
    --shadow-card:0 8px 24px rgba(0,0,0,.35);
    --shadow-glass:0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.45);
    --glow:0 0 0 1px rgba(31,209,249,.5),0 8px 28px rgba(31,209,249,.35);
    --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-mono:"JetBrains Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    padding:0;
    background:var(--bg-900);
    color:var(--text-400);
    font-family:var(--font-sans);
    font-size:17px;
    line-height:1.85;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  body img{max-width:100%;display:block;border-style:solid;border-width:0;}
  body a{color:inherit;text-decoration:none;transition:color .2s ease,border-color .2s ease,background-color .2s ease;}
  body ul{margin:0;padding:0;list-style:none;}
  body ol{margin:0;padding:0;list-style:none;}
  body h1,body h2,body h3,body h4{color:var(--text-100);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.25;text-align:left;}
  body p{margin:0;text-align:left;}
  body button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

  .container{max-width:1200px !important;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}
  @media (min-width:768px){
    .container{padding-left:32px;padding-right:32px;}
  }

  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:70;
    background:rgba(5,9,15,.88);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .brand-bar{display:flex;align-items:center;height:64px;transition:height .25s ease;}
  body.scrolled .brand-bar{height:56px;}
  .brand-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;}
  .brand-logo{display:inline-flex;align-items:baseline;gap:4px;font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
  .brand-mark{color:var(--primary);}
  .brand-sub{color:#FFFFFF;}
  .brand-actions{display:flex;align-items:center;gap:10px;}
  .icon-btn{
    width:40px;height:40px;border-radius:var(--r-btn);
    border:1px solid var(--line);background:rgba(255,255,255,.03);
    color:var(--text-400);display:inline-flex;align-items:center;justify-content:center;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease;
  }
  .icon-btn:hover{color:var(--primary);border-color:rgba(31,209,249,.5);background:rgba(31,209,249,.08);}
  .icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

  .channel-row{border-top:1px solid var(--line);}
  .channel-scroll{
    display:flex;align-items:center;gap:6px;height:48px;
    overflow-x:auto;scroll-snap-type:x proximity;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .channel-scroll::-webkit-scrollbar{display:none;}
  .channel-tab{
    position:relative;display:inline-flex;align-items:center;height:100%;
    padding:0 14px;font-size:14px;color:var(--text-400);
    white-space:nowrap;scroll-snap-align:start;
    transition:color .2s ease;
  }
  .channel-tab:hover{color:var(--text-100);}
  .channel-tab:focus-visible{outline:2px solid var(--primary);outline-offset:-4px;border-radius:8px;}
  .channel-tab.active{color:var(--primary);}
  .channel-tab.active::after{
    content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;
    background:var(--primary);box-shadow:0 0 10px rgba(31,209,249,.8);
  }
  @media (max-width:767px){
    .channel-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);}
    .brand-bar{height:56px;}
    .brand-logo{font-size:16px;}
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 22px;border-radius:var(--r-btn);
    font-size:15px;font-weight:600;line-height:1;white-space:nowrap;
    border:1px solid transparent;cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease;
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-600));
    color:#04121A;box-shadow:var(--glow);
  }
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(31,209,249,.6),0 10px 32px rgba(31,209,249,.42);}
  .btn-primary:active{transform:translateY(1px);box-shadow:0 0 0 1px rgba(31,209,249,.35),0 4px 14px rgba(31,209,249,.25);}
  .btn-ghost{
    background:rgba(255,255,255,.04);border-color:var(--glass-border);color:var(--text-100);
  }
  .btn-ghost:hover{border-color:rgba(31,209,249,.6);background:rgba(31,209,249,.08);color:#FFFFFF;}
  .btn-ghost:active{transform:translateY(1px);}
  .btn-sm{min-height:40px;padding:0 16px;font-size:14px;}
  .btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .btn[disabled],.btn.is-disabled{opacity:.45;box-shadow:none;cursor:not-allowed;}

  /* ---------- Page hero ---------- */
  .page-hero{
    position:relative;
    padding:48px 0 64px;
    border-bottom:1px solid var(--line);
    background-image:
      linear-gradient(180deg,rgba(5,9,15,.88),rgba(5,9,15,.96)),
      radial-gradient(circle at 84% 10%,rgba(31,209,249,.20),transparent 58%),
      url("/assets/images/backpic/back-1.webp");
    background-size:cover,cover,cover;
    background-position:center,center,center;
  }
  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-600);margin-bottom:20px;}
  .breadcrumb li{display:inline-flex;align-items:center;gap:8px;}
  .breadcrumb li+li::before{content:"/";color:var(--text-600);}
  .breadcrumb a{color:var(--text-400);}
  .breadcrumb a:hover{color:var(--primary);}
  .breadcrumb [aria-current="page"]{color:var(--text-100);}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:.12em;color:var(--primary);
    background:rgba(31,209,249,.08);border:1px solid rgba(31,209,249,.25);
    border-radius:999px;padding:6px 12px;
  }
  .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);display:inline-block;}
  body h1{
    font-size:clamp(28px,4.4vw,52px);
    line-height:1.15;
    margin:18px 0 16px;
    max-width:16em;
  }
  .hero-lead{max-width:44em;font-size:17px;line-height:1.9;color:var(--text-400);}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
  .hero-meta{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
  .hero-meta li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-400);}
  .hero-meta .tick{width:16px;height:16px;border-radius:50%;border:1px solid rgba(31,209,249,.55);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .hero-meta .tick::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px rgba(31,209,249,.9);}

  /* ---------- Layout ---------- */
  .layout-2col{display:grid;grid-template-columns:1fr;gap:28px;padding:56px 0 0;}
  @media (min-width:1024px){
    .layout-2col{grid-template-columns:220px minmax(0,1fr);gap:48px;padding-top:80px;}
  }

  .side-nav{
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--panel);
    padding:12px;
    overflow-x:auto;
    -ms-overflow-style:none;scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .side-nav::-webkit-scrollbar{display:none;}
  .side-nav nav{display:flex;gap:8px;min-width:max-content;}
  .side-title{display:none;font-size:13px;letter-spacing:.1em;color:var(--text-600);margin:0 0 12px 12px;}
  .side-link{
    display:block;padding:10px 14px;border-radius:10px;
    font-size:14px;color:var(--text-400);white-space:nowrap;
    border-left:2px solid transparent;
    transition:color .2s ease,background-color .2s ease,border-color .2s ease;
  }
  .side-link:hover{color:var(--text-100);background:rgba(255,255,255,.04);}
  .side-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .side-link.active{color:var(--primary);background:rgba(31,209,249,.08);border-left-color:var(--primary);box-shadow:inset 2px 0 12px rgba(31,209,249,.25);}
  @media (min-width:1024px){
    .side-nav{position:sticky;top:128px;align-self:start;padding:18px 12px;overflow:visible;}
    .side-nav nav{flex-direction:column;gap:4px;min-width:0;}
    .side-title{display:block;}
  }

  .content-col{min-width:0;}

  .block{margin-bottom:64px;scroll-margin-top:104px;}
  @media (min-width:1024px){
    .block{margin-bottom:96px;scroll-margin-top:128px;}
  }
  .block-head{margin-bottom:24px;}
  body h2{font-size:clamp(24px,3vw,36px);line-height:1.25;}
  .block-head h2{margin-top:12px;}
  .block-desc{max-width:46em;font-size:16px;line-height:1.85;color:var(--text-400);margin-top:12px;}

  /* ---------- Number list ---------- */
  .num-list{display:grid;gap:14px;margin-top:8px;}
  .num-list li{
    display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
    padding:16px 0;border-bottom:1px dashed var(--line);
  }
  .num-list li:last-child{border-bottom:0;}
  .num-index{
    width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:14px;color:var(--primary);
    background:rgba(31,209,249,.08);border:1px solid rgba(31,209,249,.28);
  }
  .num-list h3{font-size:17px;font-weight:600;margin-bottom:6px;}
  .num-list p{font-size:15px;line-height:1.8;}

  /* ---------- Entry cards ---------- */
  .entry-list{display:grid;gap:16px;margin-top:8px;}
  @media (min-width:768px){
    .entry-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  }
  .entry-card{
    position:relative;overflow:hidden;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
    padding:22px 24px;
    box-shadow:var(--shadow-card);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .entry-card::after{
    content:"";position:absolute;top:-46px;right:-46px;width:132px;height:132px;border-radius:50%;
    background:radial-gradient(circle,rgba(31,209,249,.22),transparent 70%);
    opacity:0;transition:opacity .25s ease;pointer-events:none;
  }
  .entry-card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
  .entry-card:hover::after{opacity:1;}
  .entry-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
  .entry-card h3{font-size:18px;font-weight:600;margin:0;}
  .entry-card p{font-size:15px;line-height:1.8;color:var(--text-400);}
  .tag{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;letter-spacing:.06em;color:var(--text-400);
    border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;
    background:rgba(255,255,255,.03);white-space:nowrap;
  }
  .tag-primary{color:var(--primary);border-color:rgba(31,209,249,.35);background:rgba(31,209,249,.08);}
  .entry-link{
    display:inline-flex;align-items:center;gap:6px;margin-top:16px;
    font-size:14px;font-weight:600;color:var(--primary);
  }
  .entry-link svg{transition:transform .2s ease;}
  .entry-link:hover svg{transform:translateX(4px);}

  /* ---------- Table ---------- */
  .table-wrap{
    overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);
    background:var(--panel);margin-top:8px;
    -webkit-overflow-scrolling:touch;
  }
  body table.compare{width:100%;border-collapse:collapse;min-width:560px;font-size:15px;}
  body .compare th,body .compare td{
    padding:15px 20px;text-align:left;vertical-align:top;
    border-bottom:1px solid var(--line);border-style:solid;border-width:0 0 1px 0;
  }
  body .compare thead th{color:var(--text-100);font-size:13px;letter-spacing:.06em;background:rgba(255,255,255,.03);font-weight:600;}
  body .compare td{color:var(--text-400);line-height:1.75;}
  body .compare td:first-child{color:var(--text-100);font-weight:600;}
  body .compare tbody tr:last-child td{border-bottom:0;}
  body .compare tbody tr:hover td{background:rgba(255,255,255,.02);}

  /* ---------- Figure ---------- */
  .figure-card{
    border:1px solid var(--glass-border);border-radius:var(--r-card);
    overflow:hidden;background:var(--panel);box-shadow:var(--shadow-card);
  }
  .figure-card img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease;}
  .figure-card:hover img{transform:scale(1.03);}
  .figure-grid{display:grid;gap:24px;align-items:center;margin-top:8px;}
  @media (min-width:900px){
    .figure-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;}
  }
  .check-list{display:grid;gap:14px;}
  .check-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.8;}
  .check-list .mark{
    width:20px;height:20px;border-radius:6px;margin-top:4px;
    border:1px solid rgba(31,209,249,.4);background:rgba(31,209,249,.08);
    display:flex;align-items:center;justify-content:center;
  }
  .check-list .mark::after{content:"";width:8px;height:4px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg) translate(1px,-1px);}

  .notice-strip{
    display:flex;align-items:flex-start;gap:12px;margin-top:22px;
    padding:16px 20px;border-radius:var(--r-card);
    border:1px solid rgba(255,154,60,.28);background:rgba(255,154,60,.07);
  }
  .notice-strip span{font-size:15px;line-height:1.8;color:var(--text-400);}
  .notice-strip strong{color:var(--accent);font-weight:600;}

  /* ---------- FAQ ---------- */
  .faq-list{margin-top:8px;}
  .faq-item{
    position:relative;overflow:hidden;
    background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-panel);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    margin-bottom:12px;box-shadow:var(--shadow-glass);
    transition:background .25s ease,border-color .25s ease;
  }
  .faq-item:hover{border-color:var(--line-strong);}
  .faq-item.open{background:linear-gradient(180deg,rgba(31,209,249,.08),rgba(255,255,255,.03));border-color:rgba(31,209,249,.3);}
  .faq-item.open::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);
    box-shadow:0 0 14px rgba(31,209,249,.8);
  }
  .faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:60px;padding:12px 22px;text-align:left;
    font-size:16px;font-weight:600;color:var(--text-100);
    transition:background-color .2s ease;
  }
  .faq-q:hover{background:rgba(255,255,255,.03);}
  .faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
  .faq-icon{
    flex:0 0 auto;width:22px;height:22px;position:relative;
    transition:transform .25s ease;
  }
  .faq-icon::before,.faq-icon::after{
    content:"";position:absolute;background:var(--primary);border-radius:2px;
  }
  .faq-icon::before{left:3px;right:3px;top:50%;height:2px;transform:translateY(-50%);}
  .faq-icon::after{top:3px;bottom:3px;left:50%;width:2px;transform:translateX(-50%);transition:opacity .25s ease,transform .25s ease;}
  .faq-item.open .faq-icon{transform:rotate(90deg);}
  .faq-item.open .faq-icon::after{opacity:0;}
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease;}
  .faq-a>div{overflow:hidden;}
  .faq-a p{padding:0 22px 20px;font-size:15px;line-height:1.85;color:var(--text-400);}
  .faq-item.open .faq-a{grid-template-rows:1fr;}

  /* ---------- CTA ---------- */
  .cta-block{
    position:relative;overflow:hidden;text-align:center;
    padding:64px 24px;border-radius:var(--r-panel);
    border:1px solid var(--glass-border);
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
      radial-gradient(circle at 50% -10%,rgba(31,209,249,.22),transparent 62%),
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:auto,auto,44px 44px,44px 44px;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:var(--shadow-glass);
    scroll-margin-top:104px;
  }
  @media (min-width:1024px){.cta-block{padding:80px 56px;scroll-margin-top:128px;}}
  .cta-block h2{font-size:clamp(24px,3vw,34px);}
  .cta-block p{max-width:36em;margin:16px auto 0;font-size:16px;line-height:1.85;color:var(--text-400);}
  .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px;}
  @media (max-width:639px){
    .cta-actions{flex-direction:column;}
    .cta-actions .btn{width:100%;}
  }

  /* ---------- Floating CTA ---------- */
  .float-cta{
    position:fixed;right:24px;bottom:24px;z-index:80;
    display:inline-flex;align-items:center;gap:8px;
    height:48px;padding:0 20px;border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-600));
    color:#04121A;font-size:14px;font-weight:700;
    box-shadow:var(--glow);
    opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  .float-cta.show{opacity:1;transform:translateY(0);pointer-events:auto;animation:pulseGlow 6s ease-in-out infinite;}
  .float-cta:hover{filter:brightness(1.08);}
  .float-cta:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 1px rgba(31,209,249,.5),0 8px 28px rgba(31,209,249,.30);}
    50%{box-shadow:0 0 0 1px rgba(31,209,249,.65),0 8px 34px rgba(31,209,249,.48);}
  }
  @media (max-width:639px){
    .float-cta{
      left:16px;right:16px;width:calc(100% - 32px);
      justify-content:center;
      bottom:calc(16px + env(safe-area-inset-bottom,0px));
    }
  }

  /* ---------- Footer ---------- */
  .site-footer{
    margin-top:80px;
    background:var(--bg-800);
    border-top:1px solid var(--line);
    padding:64px 0 28px;
  }
  @media (min-width:1024px){.site-footer{margin-top:120px;}}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
  @media (min-width:768px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (min-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;}}
  .footer-col h4{font-size:14px;font-weight:600;color:var(--text-100);margin-bottom:14px;letter-spacing:.02em;}
  .footer-col li{margin-bottom:10px;font-size:14px;color:var(--text-400);line-height:1.7;}
  .footer-col a{font-size:14px;color:var(--text-400);}
  .footer-col a:hover{color:var(--primary);}
  .site-footer p{font-size:14px;line-height:1.75;color:var(--text-400);max-width:30em;}
  .footer-bottom{
    margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
    font-size:13px;color:var(--text-600);
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  }

/* roulang page: category2 */
:root{
  --bg-900:#05090F;
  --bg-800:#0A121F;
  --panel:#0E1828;
  --primary:#1FD1F9;
  --primary-600:#0EA5C9;
  --accent:#FF9A3C;
  --ok:#34D399;
  --danger:#FF6B6B;
  --text-100:#EAF2FF;
  --text-400:#A7B5C9;
  --text-600:#6B7A90;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --radius-card:16px;
  --radius-glass:18px;
  --radius-img:14px;
  --radius-btn:12px;
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.45);
  --font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-900);
  color:var(--text-400);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;color:var(--text-100);font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 32px}}

.section{padding:64px 0}
@media(min-width:768px){.section{padding:96px 0}}
section[id],div[id]{scroll-margin-top:104px}
@media(min-width:1024px){section[id],div[id]{scroll-margin-top:128px}}
.section--alt{background:var(--bg-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============ 顶部导航 ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(5,9,15,.84);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand-bar{border-bottom:1px solid var(--line)}
.brand-row{display:flex;align-items:center;justify-content:space-between;height:64px}
@media(max-width:767px){.brand-row{height:56px}}
.brand-logo{display:inline-flex;align-items:baseline;font-size:18px;font-weight:700;letter-spacing:-.01em}
.brand-mark{color:var(--primary)}
.brand-sub{color:var(--text-100)}
.brand-logo:hover .brand-sub{color:var(--primary)}
.nav-actions{display:flex;align-items:center;gap:12px}

.channel-row .container{position:relative}
.channel-scroll{
  display:flex;align-items:center;gap:6px;height:48px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;
}
.channel-scroll::-webkit-scrollbar{display:none}
.channel-tab{
  position:relative;display:inline-flex;align-items:center;height:48px;padding:0 14px;
  color:var(--text-600);font-size:14px;white-space:nowrap;scroll-snap-align:start;
  transition:color .2s,background .2s;
}
.channel-tab:hover{color:var(--text-100)}
.channel-tab.active{color:var(--primary)}
.channel-tab.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-600));
  box-shadow:0 0 12px rgba(31,209,249,.75);
}
@media(max-width:767px){
  .channel-row .container::after{
    content:"";position:absolute;top:0;right:20px;width:44px;height:48px;pointer-events:none;
    background:linear-gradient(90deg,rgba(5,9,15,0),rgba(5,9,15,.95));
  }
}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:var(--radius-btn);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s,filter .2s;
}
.btn-primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#04121A;
  box-shadow:0 0 0 1px rgba(31,209,249,.5),0 8px 28px rgba(31,209,249,.35);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(31,209,249,.65),0 12px 34px rgba(31,209,249,.45)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 0 0 1px rgba(31,209,249,.4),0 4px 14px rgba(31,209,249,.25)}
.btn-ghost{
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-100);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn-ghost:hover{border-color:rgba(31,209,249,.5);background:rgba(31,209,249,.08);color:#fff}
.btn-accent{
  border:1px solid rgba(255,154,60,.6);color:#FFD3A6;background:rgba(255,154,60,.08);
  box-shadow:0 0 22px rgba(255,154,60,.18);
}
.btn-accent:hover{background:rgba(255,154,60,.16);box-shadow:0 0 28px rgba(255,154,60,.3)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;border-radius:10px}
@media(max-width:767px){
  .btn{width:100%}
  .btn.btn-inline{width:auto}
}

/* ============ 玻璃与卡片 ============ */
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-radius:var(--radius-glass);
  box-shadow:var(--shadow-glass);
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.card-lift{position:relative;overflow:hidden}
.card-lift::after{
  content:"";position:absolute;top:0;right:0;width:120px;height:120px;pointer-events:none;
  background:radial-gradient(circle at 100% 0,rgba(31,209,249,.18),transparent 70%);
  opacity:0;transition:opacity .25s;
}
.card-lift:hover::after{opacity:1}

/* ============ 首屏 ============ */
.page-hero{
  position:relative;overflow:hidden;padding:52px 0 60px;
  background-image:linear-gradient(180deg,rgba(5,9,15,.88),rgba(5,9,15,.96)),url('/assets/images/backpic/back-2.webp');
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 86% 0%,rgba(31,209,249,.16),transparent 70%);
}
@media(min-width:768px){.page-hero{padding:64px 0 84px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-600)}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.2)}
.crumbs a:hover{color:var(--primary)}
.crumbs .current{color:var(--text-400)}
.page-title{font-size:clamp(28px,4.4vw,52px);line-height:1.15;font-weight:700;letter-spacing:-.01em;margin-top:20px}
.page-lead{margin-top:18px;max-width:720px;font-size:16px;line-height:1.9;color:var(--text-400)}
@media(min-width:768px){.page-lead{font-size:17px}}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-tags li{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13.5px;color:var(--text-400);
}
.hero-tags li::before{
  content:"";width:6px;height:6px;border-radius:999px;background:var(--primary);
  box-shadow:0 0 10px rgba(31,209,249,.85);
}

.badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:12.5px;letter-spacing:.02em;border:1px solid var(--line);color:var(--text-400);
  background:rgba(255,255,255,.04);
}
.badge-primary{color:var(--primary);border-color:rgba(31,209,249,.35);background:rgba(31,209,249,.10)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.16)}

/* ============ 标题块 ============ */
.section-head{max-width:780px}
.section-head h2{font-size:clamp(24px,3vw,36px);line-height:1.25}
.section-head p{margin-top:14px;font-size:16px;color:var(--text-400);line-height:1.85}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.14em;color:var(--primary);text-transform:uppercase;margin-bottom:14px;
}

/* ============ 步骤条 / 时间轴 ============ */
.steps-track{
  display:flex;gap:20px;overflow-x:auto;padding:6px 4px 18px;
  scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;
}
.steps-track::-webkit-scrollbar{display:none}
.step{
  position:relative;flex:0 0 264px;scroll-snap-align:start;padding:24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);transition:transform .2s,border-color .2s;
}
.step:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;
  font-family:var(--font-mono);font-size:14px;color:var(--primary);
  border:1px solid rgba(31,209,249,.4);background:rgba(31,209,249,.08);
  box-shadow:0 0 18px rgba(31,209,249,.18);
}
.step h3{font-size:19px;margin-top:16px}
.step p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--text-400)}
.steps-hint{margin-top:12px;font-size:13px;color:var(--text-600)}
@media(min-width:1024px){
  .steps-track{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;overflow:visible;padding:6px 0 0}
  .step{flex:none}
  .steps-hint{display:none}
  .step:not(:last-child)::after{
    content:"";position:absolute;top:43px;right:-20px;width:20px;height:1px;
    background:linear-gradient(90deg,rgba(31,209,249,.65),rgba(31,209,249,.08));
  }
}

/* ============ 错位瀑布 ============ */
.waterfall{display:grid;gap:20px;margin-top:44px}
.waterfall .wf-col{display:grid;gap:20px;align-content:start}
@media(min-width:900px){
  .waterfall{grid-template-columns:1fr 1fr;gap:24px}
  .waterfall .wf-col{gap:24px}
  .waterfall .wf-col+.wf-col{margin-top:40px}
}
.mini-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .2s,border-color .2s;
}
.mini-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.mini-card .thumb{
  aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,#0E1828,#05090F);
  border-bottom:1px solid var(--line);
}
.mini-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mini-card:hover .thumb img{transform:scale(1.03)}
.mini-card .body{padding:22px}
.mini-card h3{font-size:19px;line-height:1.4}
.mini-card p{margin-top:12px;font-size:15px;line-height:1.85;color:var(--text-400)}
.mini-card .tagline{margin-top:16px;font-size:13px;color:var(--text-600);display:flex;align-items:center;gap:8px}

/* ============ 对照表 ============ */
.table-wrap{
  margin-top:40px;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--radius-card);background:var(--panel);box-shadow:var(--shadow-card);
}
table.compare{width:100%;border-collapse:collapse;min-width:680px;font-size:15px}
table.compare th,table.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.compare thead th{
  font-size:13px;letter-spacing:.06em;color:var(--text-600);font-weight:600;
  background:rgba(255,255,255,.03);white-space:nowrap;
}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare td:first-child{color:var(--text-100);font-weight:600}
table.compare tbody tr{transition:background .2s}
table.compare tbody tr:hover{background:rgba(31,209,249,.05)}

/* ============ FAQ ============ */
.faq-list{margin-top:40px}
.faq-item{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--radius-glass);box-shadow:var(--shadow-glass);
  transition:background .2s,border-color .2s;
}
.faq-item+.faq-item{margin-top:12px}
.faq-item::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--primary),rgba(31,209,249,.1));
  box-shadow:0 0 12px rgba(31,209,249,.65);opacity:0;transition:opacity .2s;
}
.faq-item[data-open="true"]::before{opacity:1}
.faq-item[data-open="true"]{background:rgba(255,255,255,.09);border-color:rgba(31,209,249,.3)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;min-height:60px;text-align:left;
  color:var(--text-100);font-size:16px;font-weight:600;line-height:1.5;
}
.faq-q .ind{position:relative;flex:0 0 auto;width:22px;height:22px;color:var(--primary)}
.faq-q .ind::before,.faq-q .ind::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s;
}
.faq-q .ind::before{left:4px;right:4px;top:10px;height:2px}
.faq-q .ind::after{top:4px;bottom:4px;left:10px;width:2px}
.faq-item[data-open="true"] .faq-q .ind::after{transform:scaleY(0);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item[data-open="true"] .faq-a{max-height:340px}
.faq-a p{padding:0 22px 20px 22px;font-size:15px;line-height:1.85;color:var(--text-400)}

/* ============ CTA ============ */
.cta-panel{
  position:relative;overflow:hidden;border-radius:24px;padding:56px 24px;text-align:center;
  background:radial-gradient(620px 320px at 50% 0,rgba(31,209,249,.18),transparent 70%),var(--bg-800);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-glass);
}
@media(min-width:768px){.cta-panel{padding:72px 48px}}
.cta-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(420px 220px at 50% 40%,#000,transparent);
  mask-image:radial-gradient(420px 220px at 50% 40%,#000,transparent);
}
.cta-panel h2{position:relative;z-index:1;font-size:clamp(24px,3.2vw,38px);line-height:1.25}
.cta-panel p{position:relative;z-index:1;margin:18px auto 0;max-width:620px;font-size:16px;color:var(--text-400)}
.cta-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* ============ 页脚 ============ */
.site-footer{background:var(--bg-800);border-top:1px solid var(--line);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px}}
.footer-col h4{font-size:14px;color:var(--text-100);margin-bottom:16px;letter-spacing:.02em}
.footer-col p{font-size:14px;color:var(--text-600);line-height:1.8;max-width:300px}
.footer-col ul{display:grid;gap:10px}
.footer-col ul li{font-size:14px;color:var(--text-600)}
.footer-col a{font-size:14px;color:var(--text-400)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13px;color:var(--text-600);
}

/* ============ 浮动 CTA ============ */
.float-cta{
  position:fixed;right:24px;bottom:24px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#04121A;font-size:15px;font-weight:700;
  box-shadow:0 0 0 1px rgba(31,209,249,.5),0 12px 32px rgba(31,209,249,.4);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s,filter .2s;
}
.float-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}
.float-cta:hover{filter:brightness(1.08)}
@media(max-width:767px){
  .float-cta{
    left:16px;right:16px;width:calc(100% - 32px);justify-content:center;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
  .float-cta{opacity:1;transform:none;pointer-events:auto}
}