/* roulang page: index */
:root {
      --brand: #2563eb;
      --brand-dark: #1e40af;
      --ink: #10213f;
      --muted: #64748b;
      --soft: #f5f8fc;
      --line: #e5edf7;
      --white: #ffffff;
      --radius-lg: 24px;
      --radius-md: 16px;
      --shadow: 0 18px 50px rgba(33, 71, 125, .10);
      --shadow-hover: 0 24px 60px rgba(33, 71, 125, .16);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Inter", "Noto Sans SC", sans-serif;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible {
      outline: 3px solid rgba(37, 99, 235, .3);
      outline-offset: 3px;
    }

    .container {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }
    .section {
      padding: 96px 0;
    }
    .section-soft {
      background: var(--soft);
    }
    .section-head {
      max-width: 700px;
      margin-bottom: 42px;
    }
    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 13px;
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 3px;
      border-radius: 99px;
      background: var(--brand);
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { letter-spacing: -.035em; }
    h2 {
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .section-head p {
      color: var(--muted);
      font-size: 16px;
      margin-bottom: 0;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid rgba(229,237,247,.9);
      backdrop-filter: blur(18px);
    }
    .nav-wrap {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #60a5fa);
      box-shadow: 0 8px 20px rgba(37,99,235,.25);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #52647f;
      font-size: 14px;
      font-weight: 600;
    }
    .nav-links a {
      position: relative;
      padding: 27px 0;
      transition: color .25s ease;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 18px;
      height: 2px;
      border-radius: 99px;
      background: var(--brand);
      transition: right .25s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--brand); }
    .nav-links a:hover::after, .nav-links a.active::after { right: 0; }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-download, .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: #fff;
      background: var(--brand);
      border: 1px solid var(--brand);
      border-radius: 12px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 10px 22px rgba(37,99,235,.2);
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }
    .nav-download:hover, .btn-primary:hover {
      color: #fff;
      background: var(--brand-dark);
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(37,99,235,.28);
    }
    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 80px 0 74px;
      background:
        radial-gradient(circle at 8% 12%, rgba(147,197,253,.25), transparent 27%),
        radial-gradient(circle at 92% 15%, rgba(191,219,254,.45), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      align-items: center;
      gap: 68px;
    }
    .hero h1 {
      max-width: 690px;
      font-size: clamp(40px, 5.4vw, 70px);
      line-height: 1.1;
      margin-bottom: 23px;
    }
    .hero h1 span { color: var(--brand); }
    .hero-copy {
      max-width: 660px;
      color: #52647f;
      font-size: 17px;
      line-height: 1.9;
      margin-bottom: 30px;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 13px;
      margin-bottom: 29px;
    }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border: 1px solid #d9e5f4;
      border-radius: 12px;
      color: #345073;
      background: #fff;
      font-size: 14px;
      font-weight: 700;
      transition: all .25s ease;
    }
    .btn-secondary:hover {
      color: var(--brand);
      border-color: #9fc1f5;
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }
    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      color: #6b7c96;
      font-size: 13px;
    }
    .hero-points span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .hero-points i { color: #16a34a; }
    .hero-visual {
      position: relative;
      min-height: 430px;
    }
    .hero-image {
      height: 430px;
      width: 100%;
      object-fit: cover;
      border-radius: 30px;
      box-shadow: 0 28px 70px rgba(32, 68, 121, .18);
    }
    .hero-image-overlay {
      position: absolute;
      inset: 0;
      border-radius: 30px;
      background: linear-gradient(135deg, rgba(13,45,99,.1), rgba(37,99,235,.2));
    }
    .network-panel {
      position: absolute;
      left: -34px;
      bottom: 28px;
      width: 230px;
      padding: 19px;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 19px;
      background: rgba(255,255,255,.92);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }
    .network-panel small { color: var(--muted); font-size: 12px; }
    .network-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 8px 0 13px;
      font-size: 14px;
      font-weight: 700;
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 5px rgba(34,197,94,.12);
    }
    .latency {
      display: flex;
      align-items: end;
      gap: 4px;
      height: 48px;
    }
    .latency i {
      flex: 1;
      border-radius: 5px 5px 2px 2px;
      background: linear-gradient(180deg, #60a5fa, #2563eb);
    }
    .latency i:nth-child(1) { height: 42%; }
    .latency i:nth-child(2) { height: 68%; }
    .latency i:nth-child(3) { height: 52%; }
    .latency i:nth-child(4) { height: 88%; }
    .latency i:nth-child(5) { height: 62%; }
    .latency i:nth-child(6) { height: 76%; }
    .latency i:nth-child(7) { height: 45%; }

    .search-zone {
      padding: 34px 0;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }
    .search-box {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 8px 9px 8px 20px;
      border: 1px solid #dbe6f3;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 12px 34px rgba(35,79,137,.08);
    }
    .search-box i { color: #8ca0bb; }
    .search-box input {
      min-width: 0;
      flex: 1;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font-size: 15px;
    }
    .search-box button {
      border: 0;
      border-radius: 10px;
      padding: 11px 20px;
      color: #fff;
      background: var(--brand);
      font-weight: 700;
      transition: background .25s ease;
    }
    .search-box button:hover { background: var(--brand-dark); }
    .hot-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
      color: #71829b;
      font-size: 13px;
    }
    .hot-links a {
      padding: 5px 12px;
      border-radius: 99px;
      background: #f1f6fc;
      transition: all .2s ease;
    }
    .hot-links a:hover { color: var(--brand); background: #e4efff; }

    .category-grid, .feature-grid, .node-grid, .scenario-grid, .resource-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .category-card, .feature-card, .scenario-card, .resource-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #fff;
      box-shadow: 0 8px 25px rgba(35,79,137,.05);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .category-card:hover, .feature-card:hover, .scenario-card:hover, .resource-card:hover {
      transform: translateY(-6px);
      border-color: #bdd5f7;
      box-shadow: var(--shadow-hover);
    }
    .icon-box {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      border-radius: 14px;
      color: var(--brand);
      background: #eaf3ff;
      font-size: 20px;
    }
    .category-card h3, .feature-card h3, .scenario-card h3, .resource-card h3 {
      margin-bottom: 9px;
      font-size: 19px;
    }
    .category-card p, .feature-card p, .scenario-card p, .resource-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      margin-bottom: 0;
    }
    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 18px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 700;
    }

    .feature-card.featured {
      color: #fff;
      border-color: #2563eb;
      background: linear-gradient(145deg, #1d4ed8, #2563eb);
      box-shadow: 0 18px 40px rgba(37,99,235,.2);
    }
    .feature-card.featured .icon-box { color: #fff; background: rgba(255,255,255,.17); }
    .feature-card.featured p { color: rgba(255,255,255,.78); }
    .feature-card.featured .card-link { color: #fff; }

    .stats-band {
      padding: 30px 0;
      color: #fff;
      background: #102b57;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .stat {
      padding: 12px 24px;
      border-right: 1px solid rgba(255,255,255,.15);
    }
    .stat:last-child { border-right: 0; }
    .stat strong {
      display: block;
      margin-bottom: 4px;
      font-size: 32px;
      letter-spacing: -.04em;
    }
    .stat span { color: rgba(255,255,255,.68); font-size: 13px; }

    .node-section {
      background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    }
    .node-grid { grid-template-columns: repeat(4, 1fr); }
    .node-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 8px 25px rgba(35,79,137,.05);
    }
    .node-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .node-name { font-weight: 700; }
    .node-badge {
      padding: 4px 8px;
      border-radius: 99px;
      color: #16803b;
      background: #e9f9ef;
      font-size: 11px;
      font-weight: 700;
    }
    .node-line {
      height: 7px;
      overflow: hidden;
      border-radius: 99px;
      background: #edf2f8;
    }
    .node-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #60a5fa, #2563eb);
    }
    .node-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 11px;
      color: var(--muted);
      font-size: 12px;
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 17px;
    }
    .price-card {
      position: relative;
      padding: 27px 23px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 25px rgba(35,79,137,.05);
    }
    .price-card.recommended {
      border: 2px solid var(--brand);
      box-shadow: 0 18px 38px rgba(37,99,235,.14);
    }
    .recommended-tag {
      position: absolute;
      top: -13px;
      right: 18px;
      padding: 5px 10px;
      border-radius: 99px;
      color: #fff;
      background: var(--brand);
      font-size: 11px;
      font-weight: 700;
    }
    .price-card h3 { font-size: 18px; margin-bottom: 13px; }
    .price {
      margin-bottom: 18px;
      color: var(--ink);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -.05em;
    }
    .price small { color: var(--muted); font-size: 12px; font-weight: 500; }
    .price-list {
      padding: 0;
      margin: 0 0 20px;
      list-style: none;
      color: var(--muted);
      font-size: 13px;
    }
    .price-list li { display: flex; gap: 8px; margin: 9px 0; }
    .price-list i { color: #22a15a; margin-top: 5px; }
    .price-btn {
      display: block;
      padding: 10px;
      border: 1px solid #d8e5f5;
      border-radius: 10px;
      color: var(--brand);
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      transition: all .25s ease;
    }
    .price-btn:hover, .recommended .price-btn { color: #fff; background: var(--brand); border-color: var(--brand); }

    .scenario-card {
      display: flex;
      gap: 17px;
      align-items: flex-start;
      padding: 22px;
    }
    .scenario-card .icon-box { flex: 0 0 43px; width: 43px; height: 43px; margin: 0; font-size: 17px; }
    .scenario-card h3 { font-size: 16px; }

    .update-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .update-item {
      display: grid;
      grid-template-columns: 110px 1fr auto;
      align-items: center;
      gap: 22px;
      padding: 22px 27px;
      border-bottom: 1px solid var(--line);
    }
    .update-item:last-child { border-bottom: 0; }
    .update-date { color: var(--brand); font-size: 13px; font-weight: 700; }
    .update-item h3 { margin-bottom: 4px; font-size: 16px; }
    .update-item p { margin: 0; color: var(--muted); font-size: 13px; }
    .update-tag {
      padding: 5px 10px;
      border-radius: 99px;
      color: #58708e;
      background: #f1f6fc;
      font-size: 11px;
      white-space: nowrap;
    }

    .ranking {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    .rank-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 25px rgba(35,79,137,.05);
    }
    .rank-card h3 { margin-bottom: 20px; font-size: 19px; }
    .rank-row {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 0;
      border-bottom: 1px solid #edf2f8;
    }
    .rank-row:last-child { border-bottom: 0; }
    .rank-no {
      width: 25px;
      color: #9aaac0;
      font-weight: 800;
      text-align: center;
    }
    .rank-row:nth-child(2) .rank-no { color: #f59e0b; }
    .rank-row:nth-child(3) .rank-no { color: #94a3b8; }
    .rank-row:nth-child(4) .rank-no { color: #b7793f; }
    .rank-name { flex: 1; font-size: 14px; font-weight: 600; }
    .rank-value { color: var(--brand); font-size: 13px; font-weight: 700; }

    .resource-grid { grid-template-columns: repeat(3, 1fr); }
    .resource-card { padding: 0; overflow: hidden; }
    .resource-card img { width: 100%; height: 160px; object-fit: cover; }
    .resource-body { padding: 22px; }
    .resource-label { color: var(--brand); font-size: 12px; font-weight: 700; }
    .resource-body h3 { margin-top: 7px; }

    .quote-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .quote-card {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
    }
    .stars { color: #f59e0b; letter-spacing: 2px; font-size: 13px; margin-bottom: 15px; }
    .quote-card blockquote { margin: 0 0 20px; color: #52647f; font-size: 14px; line-height: 1.85; }
    .quote-user { display: flex; align-items: center; gap: 11px; }
    .avatar {
      width: 36px; height: 36px; display: grid; place-items: center;
      border-radius: 50%; color: var(--brand); background: #e5efff; font-size: 12px; font-weight: 800;
    }
    .quote-user strong { display: block; font-size: 13px; }
    .quote-user span { color: #8a9ab0; font-size: 11px; }

    .security-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .security-card {
      display: flex;
      gap: 17px;
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
    }
    .security-card i { color: var(--brand); font-size: 22px; margin-top: 3px; }
    .security-card h3 { margin-bottom: 6px; font-size: 17px; }
    .security-card p { margin: 0; color: var(--muted); font-size: 13px; }

    .faq-list { max-width: 850px; margin: 0 auto; }
    details {
      border-bottom: 1px solid var(--line);
      padding: 20px 0;
    }
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      cursor: pointer;
      list-style: none;
      font-size: 16px;
      font-weight: 700;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      color: var(--brand);
      font-size: 24px;
      font-weight: 400;
    }
    details[open] summary::after { content: "−"; }
    details p {
      max-width: 750px;
      margin: 12px 35px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .final-cta {
      padding: 82px 0;
      color: #fff;
      background: linear-gradient(120deg, #12366e, #2563eb);
    }
    .final-cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 35px;
    }
    .final-cta h2 { max-width: 650px; margin-bottom: 12px; }
    .final-cta p { max-width: 650px; margin: 0; color: rgba(255,255,255,.76); }
    .final-cta .btn-primary {
      flex: 0 0 auto;
      color: var(--brand);
      background: #fff;
      border-color: #fff;
      box-shadow: none;
    }
    .final-cta .btn-primary:hover { color: var(--brand-dark); background: #edf5ff; }

    .site-footer {
      padding: 58px 0 25px;
      color: #a7b8d0;
      background: #0b1c38;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 35px;
      padding-bottom: 42px;
    }
    .footer-brand { color: #fff; margin-bottom: 16px; }
    .footer-intro { max-width: 300px; color: #91a5c2; font-size: 13px; line-height: 1.8; }
    .site-footer h3 { margin-bottom: 16px; color: #fff; font-size: 14px; }
    .footer-links { display: grid; gap: 10px; font-size: 13px; }
    .footer-links a { transition: color .2s ease; }
    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: #7186a5;
      font-size: 12px;
    }

    @media (max-width: 1024px) {
      .hero-grid { gap: 35px; }
      .node-grid { grid-template-columns: repeat(2, 1fr); }
      .price-grid { grid-template-columns: repeat(2, 1fr); }
      .hero h1 { font-size: clamp(40px, 6vw, 58px); }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 30px, 620px); }
      .section { padding: 68px 0; }
      .nav-wrap { height: 68px; }
      .nav-links {
        display: none;
        position: absolute;
        left: 15px;
        right: 15px;
        top: 76px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 9px 18px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; }
      .nav-links a::after { display: none; }
      .mobile-toggle { display: block; }
      .nav-actions .nav-download { display: none; }
      .hero { padding: 55px 0 55px; }
      .hero-grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: clamp(38px, 11vw, 55px); }
      .hero-visual { min-height: 330px; }
      .hero-image { height: 330px; }
      .network-panel { left: 15px; bottom: 18px; }
      .category-grid, .feature-grid, .scenario-grid, .resource-grid, .quote-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat { border-right: 0; padding: 10px 6px; }
      .ranking, .security-grid { grid-template-columns: 1fr; }
      .final-cta-inner { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 28px); }
      .brand { font-size: 17px; }
      .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
      .hero-actions { align-items: stretch; flex-direction: column; }
      .hero-actions a { width: 100%; }
      .search-box { padding-left: 14px; }
      .search-box button { padding: 10px 13px; }
      .hot-links { justify-content: flex-start; }
      .node-grid, .price-grid { grid-template-columns: 1fr; }
      .update-item { grid-template-columns: 1fr; gap: 8px; padding: 19px; }
      .update-tag { width: fit-content; }
      .stats-grid { gap: 8px; }
      .stat strong { font-size: 26px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 8px; }
    }

/* roulang page: category1 */
:root {
      --brand:#2563eb;
      --brand-dark:#1e40af;
      --ink:#10213f;
      --muted:#64748b;
      --soft:#f5f8fc;
      --line:#e5edf7;
      --white:#fff;
      --radius-lg:24px;
      --radius-md:16px;
      --shadow:0 18px 50px rgba(33,71,125,.10);
      --shadow-hover:0 24px 60px rgba(33,71,125,.16);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:#fff;font-family:"Inter","Noto Sans SC",sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .section{padding:92px 0}
    .section-soft{background:var(--soft)}
    .section-head{max-width:700px;margin-bottom:42px}
    .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:13px}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:99px;background:var(--brand)}
    .section-head h2{margin:0 0 14px;font-size:clamp(28px,4vw,44px);line-height:1.2;letter-spacing:-.03em}
    .section-head p{color:var(--muted);font-size:16px;margin:0}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);border-bottom:1px solid rgba(229,237,247,.9);backdrop-filter:blur(18px)}
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap}
    .brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(135deg,#2563eb,#60a5fa);box-shadow:0 8px 20px rgba(37,99,235,.25)}
    .nav-links{display:flex;align-items:center;gap:28px;color:#52647f;font-size:14px;font-weight:600}
    .nav-links a{position:relative;padding:27px 0;transition:color .25s ease}
    .nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:2px;border-radius:99px;background:var(--brand);transition:right .25s ease}
    .nav-links a:hover,.nav-links a.active{color:var(--brand)}
    .nav-links a:hover:after,.nav-links a.active:after{right:0}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .nav-download,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:var(--brand);border:1px solid var(--brand);border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;box-shadow:0 10px 22px rgba(37,99,235,.2);transition:.25s}
    .nav-download:hover,.btn-primary:hover{color:#fff;background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 15px 30px rgba(37,99,235,.28)}
    .mobile-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
    .page-hero{padding:78px 0 70px;background:radial-gradient(circle at 88% 15%,rgba(191,219,254,.55),transparent 30%),linear-gradient(180deg,#f7fbff 0%,#fff 100%);border-bottom:1px solid var(--line)}
    .hero-layout{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center}
    .hero-title{font-size:clamp(40px,5.3vw,68px);line-height:1.1;letter-spacing:-.045em;margin:0 0 22px}
    .hero-title span{color:var(--brand)}
    .hero-copy{max-width:650px;color:#52647f;font-size:17px;line-height:1.9;margin:0 0 28px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:27px}
    .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border:1px solid #d9e5f4;border-radius:12px;color:#345073;background:#fff;font-size:14px;font-weight:700;transition:.25s}
    .btn-secondary:hover{color:var(--brand);border-color:#9fc1f5;transform:translateY(-2px);box-shadow:var(--shadow)}
    .hero-points{display:flex;flex-wrap:wrap;gap:18px;color:#6b7c96;font-size:13px}
    .hero-points span{display:inline-flex;align-items:center;gap:7px}
    .hero-points i{color:#16a34a}
    .team-card{position:relative;overflow:hidden;padding:30px;border:1px solid #d9e8fb;border-radius:28px;background:#fff;box-shadow:var(--shadow)}
    .team-card:before{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;background:rgba(147,197,253,.25)}
    .team-top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
    .status-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:99px;background:#ecfdf3;color:#15803d;font-size:12px;font-weight:800}
    .status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}
    .team-card h2{position:relative;font-size:29px;line-height:1.25;margin:0 0 12px}
    .team-card p{position:relative;color:var(--muted);font-size:14px;margin:0 0 23px}
    .team-progress{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:25px}
    .progress-track{height:9px;flex:1;border-radius:99px;background:#eaf1fa;overflow:hidden}
    .progress-track span{display:block;width:72%;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#60a5fa)}
    .team-progress strong{font-size:15px;color:var(--brand)}
    .team-actions{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:11px}
    .team-actions a{padding:12px;text-align:center;border-radius:12px;font-size:14px;font-weight:700}
    .team-actions .open{color:#fff;background:var(--brand)}
    .team-actions .join{color:var(--brand);border:1px solid #cfe0f7;background:#f7fbff}
    .team-actions a:hover{transform:translateY(-2px)}
    .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .feature-card{padding:27px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:0 10px 30px rgba(33,71,125,.05);transition:.25s}
    .feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:#c8dcf8}
    .icon-box{width:48px;height:48px;display:grid;place-items:center;margin-bottom:20px;border-radius:15px;color:var(--brand);background:#eaf3ff;font-size:20px}
    .feature-card h3{margin:0 0 9px;font-size:19px}
    .feature-card p{margin:0;color:var(--muted);font-size:14px}
    .split-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:62px;align-items:start}
    .node-panel{padding:23px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
    .node-row{display:grid;grid-template-columns:1.4fr .8fr .75fr;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}
    .node-row:last-child{border-bottom:0}
    .node-name{display:flex;align-items:center;gap:10px;font-weight:700}
    .node-name i{color:var(--brand);font-size:13px}
    .node-tag{display:inline-flex;justify-content:center;padding:5px 8px;border-radius:8px;background:#eff6ff;color:#2563eb;font-size:12px;font-weight:700}
    .latency{color:#15803d;font-weight:800;text-align:right}
    .advantage-list{display:grid;gap:16px}
    .advantage-item{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
    .advantage-item:last-child{border-bottom:0}
    .check{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:50%;color:#16a34a;background:#ecfdf3}
    .advantage-item h3{margin:0 0 4px;font-size:17px}
    .advantage-item p{margin:0;color:var(--muted);font-size:14px}
    .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .plan-card{position:relative;padding:25px 20px;border:1px solid var(--line);border-radius:20px;background:#fff;transition:.25s}
    .plan-card.featured{border:2px solid #72a6f4;box-shadow:0 16px 40px rgba(37,99,235,.13)}
    .plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .plan-label{color:var(--muted);font-size:14px;font-weight:700}
    .plan-price{margin:12px 0 4px;font-size:32px;font-weight:800;color:var(--ink)}
    .plan-price small{font-size:13px;color:var(--muted);font-weight:500}
    .plan-note{height:45px;color:var(--muted);font-size:13px}
    .plan-card ul{padding:0;margin:18px 0 0;list-style:none;color:#52647f;font-size:13px}
    .plan-card li{display:flex;gap:7px;margin:10px 0}
    .plan-card li i{color:#22c55e;margin-top:5px}
    .recommend{position:absolute;right:15px;top:-12px;padding:5px 10px;border-radius:99px;color:#fff;background:var(--brand);font-size:11px;font-weight:800}
    .stats-band{background:#10213f;color:#fff}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    .stat{text-align:center;padding:10px 16px;border-right:1px solid rgba(255,255,255,.14)}
    .stat:last-child{border-right:0}
    .stat strong{display:block;font-size:34px;line-height:1.2}
    .stat span{display:block;margin-top:8px;color:#b9c9df;font-size:13px}
    .flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .flow-item{position:relative;padding:26px;border-radius:20px;background:#f8fbff;border:1px solid #e1ebf7}
    .flow-number{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:18px;border-radius:11px;color:#fff;background:var(--brand);font-weight:800}
    .flow-item h3{margin:0 0 8px;font-size:18px}
    .flow-item p{margin:0;color:var(--muted);font-size:14px}
    .article-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
    .article-main{min-height:270px;padding:30px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#163d86,#2563eb);box-shadow:var(--shadow)}
    .article-main .eyebrow{color:#dbeafe}
    .article-main .eyebrow:before{background:#bfdbfe}
    .article-main h3{max-width:570px;margin:0 0 14px;font-size:28px;line-height:1.3}
    .article-main p{max-width:570px;margin:0;color:#dbeafe;font-size:14px}
    .article-list{display:grid;gap:12px}
    .article-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.25s}
    .article-item:hover{border-color:#a7c6f2;box-shadow:var(--shadow)}
    .article-item strong{font-size:14px}
    .article-item span{color:#8aa0bc;font-size:12px;white-space:nowrap}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
    .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:19px 21px;border:0;background:transparent;color:var(--ink);text-align:left;font-weight:700}
    .faq-question i{color:var(--brand);transition:.25s}
    .faq-answer{display:none;padding:0 21px 19px;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question i{transform:rotate(45deg)}
    .cta-section{padding:70px 0;background:#eff6ff}
    .cta-box{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:35px 42px;border-radius:25px;background:#fff;border:1px solid #d8e8fb;box-shadow:var(--shadow)}
    .cta-box h2{margin:0 0 8px;font-size:30px}
    .cta-box p{margin:0;color:var(--muted);font-size:15px}
    .site-footer{padding:62px 0 24px;background:#10213f;color:#fff}
    .footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:45px}
    .footer-brand{color:#fff;margin-bottom:17px}
    .footer-intro{max-width:330px;color:#aebed3;font-size:14px}
    .site-footer h3{margin:7px 0 17px;font-size:14px}
    .footer-links{display:grid;gap:10px;color:#aebed3;font-size:13px}
    .footer-links a{transition:.2s}
    .footer-links a:hover{color:#fff}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);color:#8fa3bd;font-size:12px}
    :focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px}
    @media(max-width:1024px){
      .hero-layout,.split-section{grid-template-columns:1fr;gap:38px}
      .hero-visual{max-width:650px}
      .plan-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
      .footer-grid>div:last-child{display:none}
    }
    @media(max-width:768px){
      .container{width:min(100% - 30px,620px)}
      .nav-wrap{height:68px}
      .nav-links{display:none;position:absolute;left:15px;right:15px;top:76px;padding:10px 18px;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
      .nav-links.open{display:flex}
      .nav-links a{padding:12px 0}
      .nav-links a:after{bottom:5px}
      .nav-actions{margin-left:auto}
      .nav-download{display:none}
      .mobile-toggle{display:block}
      .page-hero{padding:58px 0}
      .section{padding:68px 0}
      .feature-grid,.flow-grid,.stats-grid,.faq-grid,.article-layout{grid-template-columns:1fr}
      .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:15px}
      .stat:last-child{border-bottom:0}
      .cta-box{align-items:flex-start;flex-direction:column;padding:29px 24px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
    }
    @media(max-width:520px){
      .brand{font-size:17px}
      .brand-mark{width:32px;height:32px;border-radius:10px}
      .hero-title{font-size:40px}
      .hero-actions,.hero-actions a{width:100%}
      .hero-actions a{justify-content:center}
      .team-card{padding:23px}
      .node-row{grid-template-columns:1.2fr .8fr .65fr;font-size:12px}
      .plan-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-grid>div:last-child{display:block}
      .footer-bottom{flex-direction:column;gap:8px}
    }

/* roulang page: category2 */
:root {
            --brand: #2563eb;
            --brand-dark: #1e40af;
            --ink: #10213f;
            --muted: #64748b;
            --soft: #f5f8fc;
            --line: #e5edf7;
            --white: #ffffff;
            --radius-lg: 24px;
            --radius-md: 16px;
            --shadow: 0 18px 50px rgba(33,71,125,.10);
            --shadow-hover: 0 24px 60px rgba(33,71,125,.16);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: #fff;
            font-family: "Inter", "Noto Sans SC", sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
        .section { padding: 96px 0; }
        .section-soft { background: var(--soft); }
        .section-head { max-width: 710px; margin-bottom: 42px; }
        .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--brand);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            margin-bottom: 13px;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 3px;
            border-radius: 99px;
            background: var(--brand);
        }
        .section-head h2 {
            margin: 0 0 14px;
            font-size: clamp(29px, 4vw, 45px);
            line-height: 1.18;
            letter-spacing: -.04em;
        }
        .section-head p {
            color: var(--muted);
            font-size: 16px;
            margin: 0;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255,255,255,.93);
            border-bottom: 1px solid rgba(229,237,247,.9);
            backdrop-filter: blur(18px);
        }
        .nav-wrap {
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 20px;
            font-weight: 800;
            color: var(--ink);
            white-space: nowrap;
        }
        .brand-mark {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(135deg, #2563eb, #60a5fa);
            box-shadow: 0 8px 20px rgba(37,99,235,.25);
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 28px;
            color: #52647f;
            font-size: 14px;
            font-weight: 600;
        }
        .nav-links a {
            position: relative;
            padding: 27px 0;
            transition: color .25s ease;
        }
        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: 18px;
            height: 2px;
            border-radius: 99px;
            background: var(--brand);
            transition: right .25s ease;
        }
        .nav-links a:hover,
        .nav-links a.active { color: var(--brand); }
        .nav-links a:hover::after,
        .nav-links a.active::after { right: 0; }
        .nav-actions { display: flex; align-items: center; gap: 12px; }
        .nav-download,
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            color: #fff;
            background: var(--brand);
            border: 1px solid var(--brand);
            border-radius: 12px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 10px 22px rgba(37,99,235,.2);
            transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
        }
        .nav-download:hover,
        .btn-primary:hover {
            color: #fff;
            background: var(--brand-dark);
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(37,99,235,.28);
        }
        .mobile-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--ink);
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 78px 0 84px;
            background:
                radial-gradient(circle at 8% 12%, rgba(147,197,253,.28), transparent 27%),
                radial-gradient(circle at 92% 10%, rgba(191,219,254,.48), transparent 28%),
                linear-gradient(180deg, #f8fbff 0%, #fff 100%);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.02fr .98fr;
            align-items: center;
            gap: 66px;
        }
        .hero h1 {
            max-width: 650px;
            margin: 0 0 22px;
            font-size: clamp(40px, 5.2vw, 68px);
            line-height: 1.1;
            letter-spacing: -.055em;
        }
        .hero h1 span { color: var(--brand); }
        .hero-copy {
            max-width: 650px;
            color: #52647f;
            font-size: 17px;
            line-height: 1.9;
            margin: 0 0 30px;
        }
        .hero-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 13px;
            margin-bottom: 28px;
        }
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 18px;
            border: 1px solid #d9e5f4;
            border-radius: 12px;
            color: #345073;
            background: #fff;
            font-size: 14px;
            font-weight: 700;
            transition: all .25s ease;
        }
        .btn-secondary:hover {
            color: var(--brand);
            border-color: #9fc1f5;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        .hero-points {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            color: #6b7c96;
            font-size: 13px;
        }
        .hero-points span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .hero-points i { color: #16a34a; }
        .hero-visual { position: relative; min-height: 430px; }
        .hero-image {
            width: 100%;
            height: 430px;
            object-fit: cover;
            border-radius: 30px;
            box-shadow: 0 28px 70px rgba(32,68,121,.18);
        }
        .hero-image-overlay {
            position: absolute;
            inset: 0;
            border-radius: 30px;
            background: linear-gradient(135deg, rgba(13,45,99,.05), rgba(37,99,235,.24));
        }
        .signal-card {
            position: absolute;
            left: -26px;
            bottom: 28px;
            width: 220px;
            padding: 18px;
            border: 1px solid rgba(255,255,255,.78);
            border-radius: 18px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 18px 42px rgba(31,70,125,.18);
        }
        .signal-card small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
        .signal-card strong { display: block; font-size: 25px; line-height: 1.2; }
        .signal-line {
            height: 6px;
            overflow: hidden;
            border-radius: 99px;
            background: #e8f0fb;
            margin-top: 12px;
        }
        .signal-line span {
            display: block;
            width: 84%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #2563eb, #60a5fa);
        }
        .floating-tag {
            position: absolute;
            right: -18px;
            top: 28px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 14px;
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 14px;
            color: #1e40af;
            background: rgba(255,255,255,.94);
            box-shadow: 0 16px 35px rgba(31,70,125,.15);
            font-size: 13px;
            font-weight: 700;
        }
        .floating-tag i { color: #16a34a; }

        .stats-strip {
            padding: 28px 0;
            border-bottom: 1px solid var(--line);
            background: #fff;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .stat-item {
            padding: 13px 24px;
            border-left: 1px solid var(--line);
        }
        .stat-item:first-child { border-left: 0; }
        .stat-item strong {
            display: block;
            color: var(--ink);
            font-size: 30px;
            line-height: 1.1;
            letter-spacing: -.04em;
        }
        .stat-item span { display: block; color: var(--muted); margin-top: 5px; font-size: 13px; }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .feature-card {
            min-height: 240px;
            padding: 28px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: var(--shadow);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        .feature-card:hover {
            transform: translateY(-7px);
            border-color: #bfd6f6;
            box-shadow: var(--shadow-hover);
        }
        .feature-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            margin-bottom: 23px;
            border-radius: 15px;
            color: var(--brand);
            background: #eaf2ff;
            font-size: 20px;
        }
        .feature-card h3 { margin: 0 0 10px; font-size: 19px; }
        .feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

        .split-layout {
            display: grid;
            grid-template-columns: .88fr 1.12fr;
            gap: 70px;
            align-items: center;
        }
        .split-image {
            position: relative;
            overflow: hidden;
            min-height: 390px;
            border-radius: 28px;
            box-shadow: var(--shadow);
        }
        .split-image img { width: 100%; height: 390px; object-fit: cover; }
        .split-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(37,99,235,.08), rgba(16,33,63,.2));
        }
        .check-list { display: grid; gap: 17px; margin: 28px 0 0; padding: 0; list-style: none; }
        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: 13px;
            color: #52647f;
            font-size: 15px;
        }
        .check-list i {
            flex: 0 0 auto;
            width: 23px;
            height: 23px;
            display: grid;
            place-items: center;
            margin-top: 2px;
            border-radius: 50%;
            color: #16803c;
            background: #e8f8ee;
            font-size: 11px;
        }

        .node-panel {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 24px;
            padding: 28px;
            border: 1px solid #dbe7f5;
            border-radius: 24px;
            background: #fff;
            box-shadow: var(--shadow);
        }
        .node-list { display: grid; gap: 12px; }
        .node-row {
            display: grid;
            grid-template-columns: 1.2fr .8fr .45fr;
            align-items: center;
            gap: 15px;
            padding: 15px 17px;
            border: 1px solid #edf2f8;
            border-radius: 14px;
            background: #fbfdff;
        }
        .node-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
        .node-name i { color: var(--brand); }
        .node-latency { color: #516883; font-size: 13px; }
        .node-state {
            justify-self: end;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #14803a;
            font-size: 12px;
            font-weight: 700;
        }
        .node-state::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 4px #dcfce7;
        }
        .node-summary {
            padding: 24px;
            border-radius: 18px;
            color: #fff;
            background: linear-gradient(145deg, #1d4ed8, #2563eb 55%, #60a5fa);
        }
        .node-summary small { color: rgba(255,255,255,.75); }
        .node-summary strong { display: block; margin: 12px 0 22px; font-size: 44px; line-height: 1; }
        .node-summary p { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.8; }

        .scenario-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 20px;
        }
        .scenario-card {
            position: relative;
            min-height: 225px;
            padding: 28px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 12px 35px rgba(33,71,125,.07);
        }
        .scenario-card.large { grid-row: span 2; min-height: 470px; color: #fff; background: #10213f; }
        .scenario-card.large::after {
            content: "";
            position: absolute;
            right: -35px;
            bottom: -50px;
            width: 220px;
            height: 220px;
            border: 28px solid rgba(96,165,250,.22);
            border-radius: 50%;
        }
        .scenario-card h3 { margin: 0 0 11px; font-size: 20px; }
        .scenario-card p { max-width: 460px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
        .scenario-card.large p { color: rgba(255,255,255,.73); }
        .scenario-card i {
            display: block;
            margin-bottom: 25px;
            color: var(--brand);
            font-size: 25px;
        }
        .scenario-card.large i { color: #93c5fd; }

        .guide-layout {
            display: grid;
            grid-template-columns: .7fr 1.3fr;
            gap: 64px;
            align-items: start;
        }
        .guide-note {
            padding: 25px;
            border-radius: 19px;
            background: #eaf2ff;
        }
        .guide-note strong { display: block; margin-bottom: 8px; font-size: 18px; }
        .guide-note p { margin: 0; color: #52647f; font-size: 14px; }
        .guide-list { display: grid; gap: 15px; }
        .guide-item {
            display: grid;
            grid-template-columns: 52px 1fr auto;
            align-items: center;
            gap: 18px;
            padding: 20px 0;
            border-bottom: 1px solid var(--line);
        }
        .guide-number {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            color: var(--brand);
            background: #edf4ff;
            font-weight: 800;
        }
        .guide-item h3 { margin: 0 0 4px; font-size: 16px; }
        .guide-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .guide-item i { color: #9aabc1; }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 64px;
            align-items: start;
        }
        .faq-list { display: grid; gap: 12px; }
        .faq-item {
            border: 1px solid var(--line);
            border-radius: 15px;
            background: #fff;
            transition: border-color .25s ease, box-shadow .25s ease;
        }
        .faq-item[open] {
            border-color: #b8d2f7;
            box-shadow: 0 12px 28px rgba(37,99,235,.08);
        }
        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 19px 21px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            content: "\f078";
            color: var(--brand);
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 12px;
            transition: transform .25s ease;
        }
        .faq-item[open] summary::after { transform: rotate(180deg); }
        .faq-answer { padding: 0 21px 20px; color: var(--muted); font-size: 14px; line-height: 1.85; }

        .cta-section { padding: 78px 0; }
        .cta-box {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 35px;
            padding: 42px 48px;
            border-radius: 26px;
            color: #fff;
            background: linear-gradient(125deg, #10213f, #1d4ed8);
            box-shadow: 0 22px 55px rgba(30,64,175,.2);
        }
        .cta-box::after {
            content: "";
            position: absolute;
            right: -70px;
            top: -120px;
            width: 330px;
            height: 330px;
            border: 60px solid rgba(147,197,253,.13);
            border-radius: 50%;
        }
        .cta-box h2 { position: relative; z-index: 1; margin: 0 0 10px; font-size: clamp(25px, 3.4vw, 39px); line-height: 1.2; }
        .cta-box p { position: relative; z-index: 1; max-width: 600px; margin: 0; color: rgba(255,255,255,.76); font-size: 15px; }
        .cta-box .btn-primary {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            color: var(--brand);
            border-color: #fff;
            background: #fff;
            box-shadow: none;
        }
        .cta-box .btn-primary:hover { color: #fff; background: transparent; }

        .site-footer {
            padding: 64px 0 25px;
            color: #9badc5;
            background: #0c1830;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.45fr .8fr .8fr .8fr;
            gap: 40px;
            padding-bottom: 48px;
        }
        .footer-brand { color: #fff; }
        .footer-intro { max-width: 350px; margin: 20px 0 0; color: #9badc5; font-size: 14px; line-height: 1.8; }
        .site-footer h3 { margin: 3px 0 16px; color: #fff; font-size: 14px; }
        .footer-links { display: grid; gap: 10px; }
        .footer-links a { color: #9badc5; font-size: 13px; transition: color .2s ease; }
        .footer-links a:hover { color: #fff; }
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,.1);
            color: #71849f;
            font-size: 12px;
        }

        :focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; }

        @media (max-width: 1024px) {
            .hero-grid, .split-layout, .guide-layout, .faq-layout { gap: 38px; }
            .nav-links { gap: 17px; }
            .feature-grid { gap: 15px; }
            .node-panel { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1.2fr .8fr .8fr; }
        }

        @media (max-width: 768px) {
            .container { width: min(100% - 30px, 620px); }
            .section { padding: 70px 0; }
            .nav-wrap { height: 68px; }
            .mobile-toggle { display: grid; place-items: center; }
            .nav-actions .nav-download { display: none; }
            .nav-links {
                position: absolute;
                left: 15px;
                right: 15px;
                top: 76px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 8px 18px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(255,255,255,.98);
                box-shadow: var(--shadow);
            }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 13px 0; border-bottom: 1px solid #eef3f9; }
            .nav-links a:last-child { border-bottom: 0; }
            .nav-links a::after { display: none; }
            .hero { padding: 58px 0 65px; }
            .hero-grid, .split-layout, .guide-layout, .faq-layout, .scenario-grid { grid-template-columns: 1fr; }
            .hero-visual { min-height: 350px; margin-top: 12px; }
            .hero-image { height: 350px; }
            .signal-card { left: 14px; bottom: 18px; }
            .floating-tag { right: 14px; top: 18px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .stat-item:nth-child(3) { border-left: 0; }
            .feature-grid { grid-template-columns: 1fr; }
            .split-image, .split-image img { min-height: 310px; height: 310px; }
            .scenario-card.large { grid-row: auto; min-height: 300px; }
            .node-summary { min-height: 210px; }
            .cta-box { align-items: flex-start; flex-direction: column; padding: 34px 28px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 22px; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }

        @media (max-width: 520px) {
            .container { width: min(100% - 28px, 470px); }
            .hero h1 { font-size: 41px; }
            .hero-copy { font-size: 15px; }
            .hero-actions > * { width: 100%; }
            .stats-grid { gap: 0; }
            .stat-item { padding: 16px 10px; }
            .stat-item strong { font-size: 25px; }
            .node-panel { padding: 16px; }
            .node-row { grid-template-columns: 1fr; gap: 7px; }
            .node-state { justify-self: start; }
            .guide-item { grid-template-columns: 42px 1fr; gap: 12px; }
            .guide-item > i { display: none; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > div:first-child { grid-column: auto; }
        }

/* roulang page: category3 */
:root {
            --brand: #2563eb;
            --brand-dark: #1e40af;
            --ink: #10213f;
            --muted: #64748b;
            --soft: #f5f8fc;
            --line: #e5edf7;
            --white: #ffffff;
            --radius-lg: 24px;
            --radius-md: 16px;
            --shadow: 0 18px 50px rgba(33, 71, 125, .10);
            --shadow-hover: 0 24px 60px rgba(33, 71, 125, .16);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: #fff;
            font-family: "Inter", "Noto Sans SC", sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, p { margin-top: 0; }
        .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
        .section { padding: 92px 0; }
        .section-soft { background: var(--soft); }
        .section-head { max-width: 720px; margin-bottom: 42px; }
        .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
        .section-head h2 { margin-bottom: 13px; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: -.03em; }
        .section-head p { color: var(--muted); font-size: 16px; margin-bottom: 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--brand);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            margin-bottom: 13px;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 3px;
            border-radius: 99px;
            background: var(--brand);
        }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255,255,255,.92);
            border-bottom: 1px solid rgba(229,237,247,.9);
            backdrop-filter: blur(18px);
        }
        .nav-wrap {
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 20px;
            font-weight: 800;
            color: var(--ink);
            white-space: nowrap;
        }
        .brand-mark {
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: #fff;
            background: linear-gradient(135deg, #2563eb, #60a5fa);
            box-shadow: 0 8px 20px rgba(37,99,235,.25);
        }
        .nav-links { display: flex; align-items: center; gap: 28px; color: #52647f; font-size: 14px; font-weight: 600; }
        .nav-links a { position: relative; padding: 27px 0; transition: color .25s ease; }
        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: 18px;
            height: 2px;
            border-radius: 99px;
            background: var(--brand);
            transition: right .25s ease;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--brand); }
        .nav-links a:hover::after, .nav-links a.active::after { right: 0; }
        .nav-actions { display: flex; align-items: center; gap: 12px; }
        .nav-download, .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            color: #fff;
            background: var(--brand);
            border: 1px solid var(--brand);
            border-radius: 12px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 10px 22px rgba(37,99,235,.2);
            transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
        }
        .nav-download:hover, .btn-primary:hover {
            color: #fff;
            background: var(--brand-dark);
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(37,99,235,.28);
        }
        .mobile-toggle {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: #fff;
            color: var(--ink);
        }
        .hero {
            position: relative;
            overflow: hidden;
            padding: 80px 0 76px;
            background:
                radial-gradient(circle at 8% 12%, rgba(147,197,253,.25), transparent 27%),
                radial-gradient(circle at 92% 15%, rgba(191,219,254,.45), transparent 28%),
                linear-gradient(180deg, #f8fbff 0%, #fff 100%);
        }
        .hero-grid { display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 70px; }
        .hero h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(40px, 5.3vw, 68px); line-height: 1.1; letter-spacing: -.045em; }
        .hero h1 span { color: var(--brand); }
        .hero-copy { max-width: 650px; color: #52647f; font-size: 17px; line-height: 1.9; margin-bottom: 28px; }
        .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 28px; }
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 12px 18px;
            border: 1px solid #d9e5f4;
            border-radius: 12px;
            color: #345073;
            background: #fff;
            font-size: 14px;
            font-weight: 700;
            transition: all .25s ease;
        }
        .btn-secondary:hover { color: var(--brand); border-color: #9fc1f5; transform: translateY(-2px); box-shadow: var(--shadow); }
        .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 12px;
            border: 1px solid #dbe7f5;
            border-radius: 999px;
            color: #52647f;
            background: rgba(255,255,255,.76);
            font-size: 13px;
            font-weight: 600;
        }
        .badge i { color: var(--brand); }
        .hero-panel {
            position: relative;
            min-height: 410px;
            padding: 24px;
            overflow: hidden;
            border: 1px solid #dce8f6;
            border-radius: 30px;
            background: #fff;
            box-shadow: 0 28px 70px rgba(32,68,121,.14);
        }
        .hero-panel::before {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            right: -80px;
            top: -80px;
            border-radius: 50%;
            background: rgba(147,197,253,.3);
        }
        .panel-top { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
        .panel-title { font-size: 15px; font-weight: 800; }
        .panel-status { color: #16a34a; font-size: 12px; font-weight: 700; }
        .version-card {
            position: relative;
            padding: 23px;
            border-radius: 22px;
            color: #fff;
            background: linear-gradient(135deg, #163d83, #2563eb);
            box-shadow: 0 18px 35px rgba(37,99,235,.23);
        }
        .version-card small { color: #bfdbfe; font-size: 12px; }
        .version-card h3 { margin: 10px 0 15px; font-size: 28px; }
        .version-card p { margin-bottom: 0; color: #dbeafe; font-size: 14px; }
        .update-list { position: relative; display: grid; gap: 12px; margin-top: 18px; }
        .update-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid #edf2f8; }
        .update-row:last-child { border-bottom: 0; }
        .update-icon {
            width: 34px; height: 34px; display: grid; place-items: center;
            border-radius: 11px; color: var(--brand); background: #eff6ff;
        }
        .update-row strong { display: block; font-size: 14px; }
        .update-row span { color: var(--muted); font-size: 12px; }
        .ticker { padding: 15px 0; border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; }
        .ticker-inner { display: flex; align-items: center; gap: 20px; white-space: nowrap; color: #52647f; font-size: 13px; }
        .ticker-label { color: var(--brand); font-weight: 800; }
        .ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: #93c5fd; }
        .release-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: start; }
        .release-note { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
        .release-note h3 { margin: 0 0 15px; font-size: 24px; }
        .release-note p { color: var(--muted); margin-bottom: 22px; }
        .check-list { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; }
        .check-list li { display: flex; gap: 11px; color: #405674; font-size: 14px; }
        .check-list i { margin-top: 5px; color: #16a34a; }
        .timeline { position: relative; padding-left: 28px; border-left: 2px solid #dbeafe; }
        .timeline-item { position: relative; padding: 0 0 34px 22px; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item::before {
            content: "";
            position: absolute;
            left: -36px;
            top: 4px;
            width: 16px;
            height: 16px;
            border: 4px solid #fff;
            border-radius: 50%;
            background: var(--brand);
            box-shadow: 0 0 0 2px #bfdbfe;
        }
        .timeline-item time { color: var(--brand); font-size: 12px; font-weight: 800; }
        .timeline-item h3 { margin: 6px 0 7px; font-size: 18px; }
        .timeline-item p { margin: 0; color: var(--muted); font-size: 14px; }
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .feature-card {
            padding: 28px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: #fff;
            box-shadow: 0 12px 34px rgba(35,79,137,.06);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        .feature-card:hover { transform: translateY(-6px); border-color: #b9d3f5; box-shadow: var(--shadow-hover); }
        .feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; color: var(--brand); background: #eff6ff; font-size: 20px; }
        .feature-card h3 { margin-bottom: 9px; font-size: 19px; }
        .feature-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .compat-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .compat-card { padding: 30px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
        .compat-card.blue { color: #fff; border: 0; background: linear-gradient(135deg, #123c87, #2563eb); box-shadow: 0 20px 45px rgba(37,99,235,.2); }
        .compat-card h3 { margin-bottom: 12px; font-size: 24px; }
        .compat-card p { color: var(--muted); font-size: 14px; }
        .compat-card.blue p { color: #dbeafe; }
        .device-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
        .device-tags span { padding: 8px 11px; border-radius: 10px; color: #345073; background: #f4f8fd; font-size: 13px; font-weight: 600; }
        .blue .device-tags span { color: #e0edff; background: rgba(255,255,255,.13); }
        .news-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
        .news-list { display: grid; gap: 14px; }
        .news-item {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 21px 23px;
            border: 1px solid var(--line);
            border-radius: 17px;
            background: #fff;
            transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
        }
        .news-item:hover { transform: translateX(4px); border-color: #b8d2f5; box-shadow: var(--shadow); }
        .news-item h3 { margin: 0 0 5px; font-size: 16px; }
        .news-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .news-date { flex: 0 0 auto; color: var(--brand); font-size: 12px; font-weight: 800; }
        .info-box { padding: 30px; border-radius: var(--radius-lg); background: #eef5ff; border: 1px solid #d8e8fb; }
        .info-box h3 { margin-bottom: 12px; font-size: 22px; }
        .info-box p { color: #52647f; font-size: 14px; }
        .info-box a { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 14px; font-weight: 700; }
        .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .faq-item { padding: 23px 25px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
        .faq-item h3 { display: flex; gap: 11px; margin-bottom: 9px; font-size: 16px; }
        .faq-item h3 i { color: var(--brand); margin-top: 4px; }
        .faq-item p { margin: 0; color: var(--muted); font-size: 14px; }
        .cta {
            padding: 68px 0;
            color: #fff;
            background: linear-gradient(135deg, #143b82, #2563eb);
        }
        .cta-wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
        .cta h2 { margin-bottom: 10px; font-size: clamp(28px, 4vw, 42px); }
        .cta p { max-width: 650px; margin-bottom: 0; color: #dbeafe; }
        .cta .btn-secondary { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.1); }
        .cta .btn-secondary:hover { background: #fff; color: var(--brand); }
        .site-footer { padding: 58px 0 24px; background: #f7faff; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 40px; }
        .footer-brand { margin-bottom: 17px; }
        .footer-intro { max-width: 310px; color: var(--muted); font-size: 13px; }
        .site-footer h3 { margin: 5px 0 17px; font-size: 14px; }
        .footer-links { display: grid; gap: 10px; color: var(--muted); font-size: 13px; }
        .footer-links a { transition: color .2s ease; }
        .footer-links a:hover { color: var(--brand); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 27px; margin-top: 42px; border-top: 1px solid var(--line); color: #8a9ab0; font-size: 12px; }
        @media (max-width: 1024px) {
            .hero-grid, .release-layout, .news-grid { gap: 35px; }
            .nav-links { gap: 17px; }
            .feature-grid { gap: 15px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 30px, 620px); }
            .section { padding: 68px 0; }
            .nav-wrap { height: 68px; }
            .nav-links {
                display: none;
                position: absolute;
                top: 68px;
                left: 15px;
                right: 15px;
                padding: 12px 18px;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: #fff;
                box-shadow: var(--shadow);
            }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 12px 0; }
            .nav-links a::after { bottom: 6px; }
            .nav-actions .nav-download { display: none; }
            .mobile-toggle { display: grid; place-items: center; }
            .hero { padding: 62px 0; }
            .hero-grid, .release-layout, .compat-layout, .news-grid { grid-template-columns: 1fr; }
            .hero-panel { min-height: auto; }
            .feature-grid, .faq-list { grid-template-columns: 1fr 1fr; }
            .cta-wrap { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
        }
        @media (max-width: 520px) {
            .hero h1 { font-size: 41px; }
            .hero-copy { font-size: 15px; }
            .hero-actions { align-items: stretch; flex-direction: column; }
            .hero-actions a { width: 100%; }
            .feature-grid, .faq-list, .footer-grid { grid-template-columns: 1fr; }
            .version-card h3 { font-size: 24px; }
            .news-item { flex-direction: column; gap: 8px; }
            .footer-bottom { flex-direction: column; gap: 7px; }
        }

/* roulang page: category4 */
:root {
      --brand: #2563eb;
      --brand-dark: #1e40af;
      --ink: #10213f;
      --muted: #64748b;
      --soft: #f5f8fc;
      --line: #e5edf7;
      --white: #ffffff;
      --success: #16a34a;
      --radius-lg: 24px;
      --radius-md: 16px;
      --shadow: 0 18px 50px rgba(33, 71, 125, .10);
      --shadow-hover: 0 24px 60px rgba(33, 71, 125, .16);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Inter", "Noto Sans SC", sans-serif;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    .container {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }
    .section { padding: 92px 0; }
    .section-soft { background: var(--soft); }
    .section-blue {
      color: #fff;
      background: linear-gradient(135deg, #153d88 0%, #2563eb 100%);
    }
    .section-head {
      max-width: 720px;
      margin-bottom: 42px;
    }
    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .section-head h2 {
      margin: 0 0 14px;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.2;
      letter-spacing: -.03em;
    }
    .section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
    }
    .section-blue .section-head p { color: rgba(255,255,255,.78); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      margin-bottom: 13px;
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 3px;
      border-radius: 99px;
      background: var(--brand);
    }
    .section-blue .eyebrow { color: #bfdbfe; }
    .section-blue .eyebrow::before { background: #bfdbfe; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.92);
      border-bottom: 1px solid rgba(229,237,247,.9);
      backdrop-filter: blur(18px);
    }
    .nav-wrap {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #60a5fa);
      box-shadow: 0 8px 20px rgba(37,99,235,.25);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #52647f;
      font-size: 14px;
      font-weight: 600;
    }
    .nav-links a {
      position: relative;
      padding: 27px 0;
      transition: color .25s ease;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 18px;
      height: 2px;
      border-radius: 99px;
      background: var(--brand);
      transition: right .25s ease;
    }
    .nav-links a:hover,
    .nav-links a.active { color: var(--brand); }
    .nav-links a:hover::after,
    .nav-links a.active::after { right: 0; }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-download,
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: #fff;
      background: var(--brand);
      border: 1px solid var(--brand);
      border-radius: 12px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 10px 22px rgba(37,99,235,.2);
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }
    .nav-download:hover,
    .btn-primary:hover {
      color: #fff;
      background: var(--brand-dark);
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(37,99,235,.28);
    }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border: 1px solid #d9e5f4;
      border-radius: 12px;
      color: #345073;
      background: #fff;
      font-size: 14px;
      font-weight: 700;
      transition: all .25s ease;
    }
    .btn-secondary:hover {
      color: var(--brand);
      border-color: #9fc1f5;
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }
    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
    }

    .page-hero {
      position: relative;
      overflow: hidden;
      padding: 78px 0 68px;
      background:
        radial-gradient(circle at 5% 10%, rgba(147,197,253,.28), transparent 28%),
        radial-gradient(circle at 96% 8%, rgba(191,219,254,.5), transparent 30%),
        linear-gradient(180deg, #f7fbff 0%, #fff 100%);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 68px;
    }
    .page-hero h1 {
      max-width: 680px;
      margin: 0 0 22px;
      font-size: clamp(40px, 5vw, 66px);
      line-height: 1.12;
      letter-spacing: -.045em;
    }
    .page-hero h1 span { color: var(--brand); }
    .hero-copy {
      max-width: 650px;
      margin: 0 0 28px;
      color: #52647f;
      font-size: 17px;
      line-height: 1.9;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-bottom: 28px;
    }
    .hero-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 13px 20px;
      color: #61728c;
      font-size: 13px;
    }
    .hero-checks span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .hero-checks i { color: var(--success); }
    .hero-panel {
      position: relative;
      padding: 14px;
      border: 1px solid #dbe8f7;
      border-radius: 30px;
      background: rgba(255,255,255,.72);
      box-shadow: var(--shadow);
    }
    .hero-panel img {
      width: 100%;
      height: 370px;
      object-fit: cover;
      border-radius: 22px;
    }
    .status-card {
      position: absolute;
      right: -22px;
      bottom: 34px;
      width: 220px;
      padding: 17px;
      border: 1px solid #deebfa;
      border-radius: 17px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 18px 40px rgba(36,76,131,.16);
    }
    .status-card small {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 12px;
    }
    .status-card strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-size: 17px;
    }
    .status-line {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #238a4b;
      font-size: 12px;
      font-weight: 700;
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 5px rgba(34,197,94,.12);
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 58px;
      align-items: start;
    }
    .faq-aside {
      position: sticky;
      top: 108px;
    }
    .faq-aside h2 {
      margin: 0 0 15px;
      font-size: clamp(28px, 3.5vw, 42px);
      line-height: 1.2;
    }
    .faq-aside p {
      margin: 0 0 24px;
      color: var(--muted);
    }
    .faq-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }
    .faq-tag {
      padding: 8px 12px;
      border: 1px solid #dce7f4;
      border-radius: 99px;
      color: #52647f;
      background: #fff;
      font-size: 13px;
    }
    .faq-list {
      display: grid;
      gap: 12px;
    }
    .faq-item {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    .faq-item:hover,
    .faq-item.open {
      border-color: #b9d2f5;
      box-shadow: 0 12px 30px rgba(42,86,143,.08);
    }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 21px 23px;
      border: 0;
      color: var(--ink);
      background: transparent;
      text-align: left;
      font-size: 16px;
      font-weight: 700;
    }
    .faq-question i {
      color: var(--brand);
      transition: transform .25s ease;
    }
    .faq-item.open .faq-question i { transform: rotate(45deg); }
    .faq-answer {
      display: none;
      padding: 0 23px 22px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }
    .faq-item.open .faq-answer { display: block; }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .info-card {
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #fff;
      box-shadow: 0 8px 25px rgba(33,71,125,.045);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .info-card:hover {
      transform: translateY(-5px);
      border-color: #bfd5f3;
      box-shadow: var(--shadow-hover);
    }
    .info-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      border-radius: 14px;
      color: var(--brand);
      background: #eaf2ff;
      font-size: 18px;
    }
    .info-card h3 {
      margin: 0 0 9px;
      font-size: 18px;
    }
    .info-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .step {
      position: relative;
      padding: 25px 22px;
      border-top: 3px solid #bfdbfe;
      background: #fff;
    }
    .step-number {
      display: inline-flex;
      width: 32px;
      height: 32px;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      border-radius: 10px;
      color: #fff;
      background: var(--brand);
      font-weight: 800;
    }
    .step h3 {
      margin: 0 0 7px;
      font-size: 17px;
    }
    .step p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .compare-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .compare-card {
      padding: 28px;
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: var(--shadow);
    }
    .compare-card.accent {
      color: #fff;
      background: linear-gradient(145deg, #1d4ed8, #2563eb);
    }
    .compare-card h3 {
      margin: 0 0 17px;
      font-size: 21px;
    }
    .compare-list {
      display: grid;
      gap: 13px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .compare-list li {
      display: flex;
      gap: 10px;
      color: var(--muted);
      font-size: 14px;
    }
    .compare-card.accent .compare-list li { color: rgba(255,255,255,.86); }
    .compare-list i {
      flex: 0 0 auto;
      margin-top: 5px;
      color: var(--brand);
    }
    .compare-card.accent .compare-list i { color: #bfdbfe; }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.16);
    }
    .metric {
      padding: 28px 22px;
      background: rgba(255,255,255,.08);
    }
    .metric strong {
      display: block;
      margin-bottom: 5px;
      font-size: 32px;
      line-height: 1.1;
    }
    .metric span {
      color: rgba(255,255,255,.72);
      font-size: 13px;
    }

    .notice-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      align-items: stretch;
    }
    .notice-main,
    .notice-side {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: 0 9px 30px rgba(33,71,125,.05);
    }
    .notice-main { padding: 31px; }
    .notice-main h3 {
      margin: 0 0 12px;
      font-size: 24px;
    }
    .notice-main p {
      margin: 0 0 20px;
      color: var(--muted);
    }
    .notice-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 14px;
      font-weight: 700;
    }
    .notice-link:hover { color: var(--brand-dark); }
    .notice-side {
      padding: 25px;
      background: #f8fbff;
    }
    .notice-side h3 {
      margin: 0 0 14px;
      font-size: 18px;
    }
    .notice-side ul {
      display: grid;
      gap: 11px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .notice-side li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: #52647f;
      font-size: 14px;
    }
    .notice-side li i {
      margin-top: 5px;
      color: var(--brand);
    }

    .cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 36px 42px;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, #eff6ff, #f8fbff);
      border: 1px solid #d9e8fa;
    }
    .cta-box h2 {
      margin: 0 0 9px;
      font-size: clamp(25px, 3vw, 36px);
      line-height: 1.2;
    }
    .cta-box p {
      max-width: 650px;
      margin: 0;
      color: var(--muted);
    }

    .site-footer {
      padding: 65px 0 22px;
      color: #b5c3d9;
      background: #0d1b33;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr repeat(3, 1fr);
      gap: 42px;
    }
    .footer-brand { color: #fff; }
    .footer-intro {
      max-width: 310px;
      margin: 18px 0 0;
      color: #8ea1bd;
      font-size: 14px;
      line-height: 1.8;
    }
    .site-footer h3 {
      margin: 3px 0 16px;
      color: #fff;
      font-size: 14px;
    }
    .footer-links {
      display: grid;
      gap: 10px;
    }
    .footer-links a {
      color: #8ea1bd;
      font-size: 13px;
      transition: color .2s ease;
    }
    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 48px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.1);
      color: #7186a5;
      font-size: 12px;
    }
    :focus-visible {
      outline: 3px solid rgba(37,99,235,.35);
      outline-offset: 3px;
    }

    @media (max-width: 1024px) {
      .nav-links { gap: 18px; }
      .hero-grid { gap: 35px; }
      .status-card { right: 12px; }
      .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 24px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 30px, 680px); }
      .section { padding: 70px 0; }
      .nav-wrap { height: 68px; }
      .nav-links {
        display: none;
        position: absolute;
        top: 68px;
        left: 15px;
        right: 15px;
        padding: 12px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; }
      .nav-links a::after { bottom: 7px; }
      .nav-download { display: none; }
      .mobile-toggle { display: grid; place-items: center; }
      .hero-grid,
      .faq-layout,
      .notice-grid,
      .compare-wrap { grid-template-columns: 1fr; }
      .page-hero { padding: 58px 0 55px; }
      .hero-panel img { height: 300px; }
      .faq-aside { position: static; }
      .info-grid { grid-template-columns: 1fr 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .metrics { grid-template-columns: 1fr 1fr; }
      .cta-box { align-items: flex-start; flex-direction: column; padding: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-bottom { flex-direction: column; gap: 7px; }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 24px, 480px); }
      .brand { font-size: 17px; }
      .brand-mark { width: 33px; height: 33px; }
      .page-hero h1 { font-size: 39px; }
      .hero-copy { font-size: 15px; }
      .hero-actions a { width: 100%; }
      .hero-panel { padding: 8px; border-radius: 22px; }
      .hero-panel img { height: 245px; border-radius: 17px; }
      .status-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin: -24px 15px 8px;
      }
      .info-grid,
      .steps,
      .metrics { grid-template-columns: 1fr; }
      .section-head h2 { font-size: 31px; }
      .compare-card,
      .notice-main,
      .notice-side { padding: 23px; }
      .footer-grid { grid-template-columns: 1fr; gap: 30px; }
      .faq-question { padding: 18px; font-size: 15px; }
      .faq-answer { padding: 0 18px 18px; }
    }