/* roulang page: index */
:root {
      --bg: #070914;
      --bg-soft: #0e1324;
      --panel: rgba(18, 24, 45, .86);
      --panel-strong: #151c33;
      --text: #f7f8ff;
      --muted: #aab2cb;
      --weak: #737d9c;
      --line: rgba(255, 255, 255, .12);
      --brand: #25f4c8;
      --brand-2: #ff4ecd;
      --brand-3: #ffd166;
      --danger: #ff6575;
      --success: #65f28f;
      --radius-sm: 10px;
      --radius: 18px;
      --radius-lg: 28px;
      --shadow: 0 22px 70px rgba(0, 0, 0, .34);
      --shadow-soft: 0 12px 36px rgba(0, 0, 0, .22);
      --container: 1160px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 0%, rgba(37, 244, 200, .16), transparent 32%),
        radial-gradient(circle at 82% 8%, rgba(255, 78, 205, .16), transparent 28%),
        linear-gradient(180deg, #070914 0%, #0b1020 42%, #070914 100%);
      line-height: 1.7;
      overflow-x: hidden;
    }

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

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

    button, input {
      font: inherit;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
      outline: 3px solid rgba(37, 244, 200, .45);
      outline-offset: 3px;
      border-radius: 10px;
    }

    .site-container {
      width: min(var(--container), calc(100% - 40px));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(7, 9, 20, .78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    .navbar {
      padding: 14px 0;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: 0;
      white-space: nowrap;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #06110f;
      background: linear-gradient(135deg, var(--brand), var(--brand-3));
      box-shadow: 0 0 30px rgba(37, 244, 200, .3);
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      color: var(--text);
      padding: 8px 10px;
      border-radius: 12px;
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    .navbar-nav {
      gap: 8px;
      align-items: center;
    }

    .nav-link {
      color: var(--muted);
      font-weight: 700;
      padding: 10px 14px !important;
      border-radius: 999px;
      position: relative;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--text);
      background: rgba(255, 255, 255, .08);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 5px;
      height: 2px;
      border-radius: 10px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
    }

    .nav-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: #050714;
      font-weight: 900;
      border: 0;
      box-shadow: 0 12px 32px rgba(37, 244, 200, .18);
    }

    .nav-action:hover {
      color: #050714;
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(255, 78, 205, .25);
    }

    .mega-wrap {
      position: relative;
    }

    .mega-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 14px);
      width: 360px;
      padding: 16px;
      border-radius: 20px;
      background: rgba(15, 20, 38, .96);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .mega-wrap:hover .mega-panel,
    .mega-wrap:focus-within .mega-panel {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .mega-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid transparent;
    }

    .mega-item:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(255, 255, 255, .1);
    }

    .mega-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(37, 244, 200, .12);
      color: var(--brand);
      flex: 0 0 auto;
    }

    .mega-item strong {
      display: block;
      font-size: 14px;
      color: var(--text);
    }

    .mega-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      margin-top: 2px;
    }

    .hero {
      position: relative;
      min-height: 680px;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .34;
      filter: saturate(1.08) contrast(1.05);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(7, 9, 20, .94) 0%, rgba(7, 9, 20, .7) 48%, rgba(7, 9, 20, .82) 100%),
        linear-gradient(180deg, transparent 0%, rgba(7, 9, 20, .92) 100%);
      z-index: 1;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
      padding: 110px 0 64px;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 34px;
      align-items: end;
    }

    .hero-kv {
      padding-top: 34px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--brand);
      background: rgba(37, 244, 200, .1);
      border: 1px solid rgba(37, 244, 200, .24);
      font-weight: 800;
      font-size: 13px;
      margin-bottom: 20px;
    }

    h1 {
      margin: 0;
      font-size: clamp(38px, 5.5vw, 78px);
      line-height: 1.06;
      font-weight: 950;
      letter-spacing: 0;
      max-width: 920px;
    }

    .hero-lead {
      color: #d7dcef;
      font-size: 18px;
      max-width: 760px;
      margin: 22px 0 0;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .btn-energy,
    .btn-ghost,
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }

    .btn-energy {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-3) 45%, var(--brand-2) 100%);
      color: #070914;
      box-shadow: 0 18px 46px rgba(37, 244, 200, .22);
    }

    .btn-energy:hover {
      color: #070914;
      transform: translateY(-2px);
      box-shadow: 0 24px 60px rgba(255, 78, 205, .28);
    }

    .btn-ghost {
      color: var(--text);
      border-color: rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .06);
    }

    .btn-ghost:hover {
      color: var(--text);
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .32);
      transform: translateY(-2px);
    }

    .btn-soft {
      color: var(--brand);
      background: rgba(37, 244, 200, .1);
      border-color: rgba(37, 244, 200, .18);
    }

    .btn-soft:hover {
      color: #06110f;
      background: var(--brand);
      transform: translateY(-2px);
    }

    .hero-data {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
      max-width: 760px;
    }

    .data-pill {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(10px);
    }

    .data-pill strong {
      display: block;
      font-size: 22px;
      color: var(--text);
      line-height: 1.1;
    }

    .data-pill span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .event-panel {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 14px;
    }

    .countdown {
      padding: 18px;
      border-radius: var(--radius-lg);
      background: rgba(11, 16, 32, .78);
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }

    .countdown-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 14px;
    }

    .time-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .time-cell {
      text-align: center;
      padding: 12px 8px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.1);
    }

    .time-cell b {
      display: block;
      font-size: 24px;
      color: var(--brand-3);
      line-height: 1.1;
    }

    .time-cell small {
      color: var(--muted);
      font-size: 12px;
    }

    .mission-card {
      padding: 18px;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(37,244,200,.14), rgba(255,78,205,.12));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow-soft);
    }

    .mission-card h2 {
      font-size: 20px;
      margin: 0 0 8px;
      font-weight: 900;
    }

    .mission-card p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    main section {
      padding: 82px 0;
    }

    .section-dark {
      background: rgba(255, 255, 255, .025);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

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

    .section-title {
      max-width: 760px;
    }

    .section-title h2 {
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.18;
      font-weight: 950;
      margin: 0;
      letter-spacing: 0;
    }

    .section-title p {
      color: var(--muted);
      margin: 12px 0 0;
      max-width: 720px;
    }

    .badge-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand-3);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .highlight-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 20px;
    }

    .commission-board {
      padding: 26px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(135deg, rgba(37,244,200,.13), rgba(255,78,205,.08)),
        var(--panel);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow-soft);
    }

    .progress-track {
      height: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      overflow: hidden;
      margin: 22px 0;
    }

    .progress-fill {
      width: 76%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), var(--brand-3), var(--brand-2));
      box-shadow: 0 0 22px rgba(37,244,200,.35);
    }

    .tier-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .tier-card,
    .tool-card,
    .case-card,
    .faq-item,
    .entry-card,
    .topic-card,
    .rank-item {
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow-soft);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .tier-card {
      padding: 18px;
    }

    .tier-card:hover,
    .tool-card:hover,
    .case-card:hover,
    .entry-card:hover,
    .topic-card:hover,
    .rank-item:hover {
      transform: translateY(-4px);
      border-color: rgba(37,244,200,.3);
      box-shadow: 0 18px 46px rgba(0,0,0,.28);
    }

    .tier-card strong {
      display: block;
      font-size: 18px;
      color: var(--text);
    }

    .tier-card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 8px;
    }

    .side-stack {
      display: grid;
      gap: 20px;
    }

    .mini-stat {
      padding: 22px;
      border-radius: var(--radius-lg);
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,.12);
    }

    .mini-stat b {
      font-size: 38px;
      line-height: 1;
      color: var(--brand);
    }

    .mini-stat p {
      color: var(--muted);
      margin: 8px 0 0;
    }

    .steps {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 24px;
      align-items: center;
    }

    .poster {
      min-height: 430px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      background: url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=900&q=80") center/cover;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.14);
    }

    .poster::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, rgba(7,9,20,.88));
    }

    .poster-caption {
      position: absolute;
      z-index: 2;
      left: 22px;
      right: 22px;
      bottom: 22px;
      padding: 18px;
      border-radius: 18px;
      background: rgba(7,9,20,.66);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.14);
    }

    .poster-caption strong {
      display: block;
      font-size: 20px;
      margin-bottom: 6px;
    }

    .poster-caption span {
      color: var(--muted);
      font-size: 14px;
    }

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

    .step-item {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      padding: 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.1);
    }

    .step-no {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      color: #070914;
      font-weight: 950;
      font-size: 20px;
    }

    .step-item h3 {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 4px;
    }

    .step-item p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .tool-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .tool-card {
      padding: 20px;
      min-height: 198px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .tool-card i,
    .entry-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: rgba(37,244,200,.12);
      color: var(--brand);
      font-size: 20px;
      margin-bottom: 18px;
    }

    .tool-card h3 {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 8px;
    }

    .tool-card p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .rank-layout {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 24px;
      align-items: stretch;
    }

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

    .rank-item {
      padding: 16px;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 14px;
      align-items: center;
    }

    .rank-num {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255, 209, 102, .14);
      color: var(--brand-3);
      font-weight: 950;
    }

    .rank-item h3 {
      font-size: 16px;
      margin: 0 0 2px;
      font-weight: 900;
    }

    .rank-item p {
      color: var(--muted);
      font-size: 13px;
      margin: 0;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .case-card {
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(255,209,102,.1), rgba(37,244,200,.06)),
        var(--panel);
    }

    .case-card blockquote {
      margin: 0;
      color: #e8ebf7;
      font-size: 20px;
      line-height: 1.65;
      font-weight: 800;
    }

    .case-card p {
      margin: 18px 0 0;
      color: var(--muted);
    }

    .ip-strip {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 10px;
      scroll-snap-type: x mandatory;
    }

    .ip-strip::-webkit-scrollbar {
      height: 8px;
    }

    .ip-strip::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.18);
      border-radius: 999px;
    }

    .topic-card {
      min-width: 280px;
      padding: 20px;
      scroll-snap-align: start;
    }

    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(37,244,200,.22), rgba(255,78,205,.2));
      color: var(--brand-3);
      font-size: 24px;
      margin-bottom: 16px;
    }

    .topic-card h3 {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 8px;
    }

    .topic-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 14px;
    }

    .topic-card a {
      color: var(--brand);
      font-weight: 900;
      font-size: 14px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 24px;
    }

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

    .news-link {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 16px;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.1);
    }

    .news-link:hover {
      background: rgba(255,255,255,.085);
      border-color: rgba(37,244,200,.25);
      transform: translateY(-2px);
    }

    .news-date {
      color: var(--brand-3);
      font-weight: 950;
      font-size: 13px;
    }

    .news-link h3 {
      font-size: 17px;
      margin: 0 0 4px;
      font-weight: 900;
    }

    .news-link p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .recommend-box {
      padding: 24px;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(255,78,205,.12), rgba(37,244,200,.08));
      border: 1px solid rgba(255,255,255,.14);
      height: 100%;
    }

    .recommend-box h3 {
      font-size: 22px;
      font-weight: 950;
      margin: 0 0 12px;
    }

    .recommend-box p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .entry-card {
      padding: 22px;
    }

    .entry-card h3 {
      font-size: 17px;
      font-weight: 900;
      margin: 0 0 8px;
    }

    .entry-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 16px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .faq-item {
      padding: 22px;
    }

    .faq-item h3 {
      font-size: 18px;
      font-weight: 900;
      margin: 0 0 10px;
    }

    .faq-item p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
    }

    .join-panel {
      padding: 34px;
      border-radius: 32px;
      background:
        linear-gradient(135deg, rgba(37,244,200,.18), rgba(255,78,205,.14)),
        var(--panel-strong);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 24px;
      align-items: center;
    }

    .join-panel h2 {
      font-size: clamp(28px, 3vw, 44px);
      font-weight: 950;
      margin: 0 0 12px;
    }

    .join-panel p {
      color: #d8ddf0;
      margin: 0;
    }

    .join-form {
      background: rgba(7,9,20,.62);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      padding: 18px;
    }

    .form-control {
      min-height: 48px;
      border-radius: 14px;
      color: var(--text);
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
    }

    .form-control::placeholder {
      color: var(--weak);
    }

    .form-control:focus {
      color: var(--text);
      background: rgba(255,255,255,.1);
      border-color: rgba(37,244,200,.5);
      box-shadow: 0 0 0 .25rem rgba(37,244,200,.12);
    }

    .form-note {
      color: var(--muted);
      font-size: 12px;
      margin-top: 10px;
    }

    .site-footer {
      padding: 46px 0 26px;
      background: #050711;
      border-top: 1px solid var(--line);
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: start;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 950;
      font-size: 18px;
      margin-bottom: 12px;
    }

    .footer-desc {
      max-width: 620px;
      color: var(--muted);
      margin: 0;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .footer-links a {
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      font-weight: 700;
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--text);
      border-color: rgba(37,244,200,.25);
      background: rgba(37,244,200,.08);
    }

    .copyright {
      color: var(--weak);
      font-size: 13px;
      margin-top: 22px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .floating-cta {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 999;
      width: min(680px, calc(100% - 28px));
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(12, 17, 34, .9);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .floating-cta span {
      color: var(--muted);
      font-size: 14px;
      padding-left: 10px;
    }

    @media (max-width: 1024px) {
      .hero-inner,
      .highlight-grid,
      .steps,
      .rank-layout,
      .news-layout,
      .join-panel {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
      }

      .hero-inner {
        padding-top: 88px;
      }

      .tool-grid,
      .entry-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .section-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .join-panel {
        padding: 26px;
      }
    }

    @media (max-width: 768px) {
      .site-container,
      .hero-inner {
        width: min(100% - 28px, var(--container));
      }

      .navbar-collapse {
        padding: 14px 0 6px;
      }

      .navbar-nav {
        align-items: stretch;
      }

      .nav-link {
        border-radius: 14px;
      }

      .mega-panel {
        position: static;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        margin-top: 10px;
      }

      .hero-inner {
        gap: 24px;
        padding-bottom: 42px;
      }

      .hero-data,
      .tier-grid,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      main section {
        padding: 62px 0;
      }

      .poster {
        min-height: 340px;
      }

      .news-link {
        grid-template-columns: 1fr;
      }

      .footer-top {
        grid-template-columns: 1fr;
      }

      .footer-links {
        justify-content: flex-start;
      }

      .floating-cta {
        border-radius: 18px;
        align-items: stretch;
        flex-direction: column;
      }

      .floating-cta span {
        padding-left: 0;
        text-align: center;
      }
    }

    @media (max-width: 520px) {
      .brand-logo {
        font-size: 15px;
      }

      .brand-mark {
        width: 34px;
        height: 34px;
      }

      .hero-actions {
        flex-direction: column;
      }

      .btn-energy,
      .btn-ghost,
      .btn-soft,
      .nav-action {
        width: 100%;
      }

      .time-grid,
      .tool-grid,
      .entry-grid {
        grid-template-columns: 1fr;
      }

      .rank-item {
        grid-template-columns: 42px 1fr;
      }

      .rank-item .tag {
        grid-column: 2;
        justify-self: start;
      }

      .commission-board,
      .join-panel {
        padding: 20px;
        border-radius: 24px;
      }

      .floating-cta {
        display: none;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#070914;
      --bg-2:#101529;
      --panel:#12182e;
      --panel-2:#171f3a;
      --panel-soft:rgba(255,255,255,.06);
      --text:#f7f8ff;
      --muted:#a8b0c7;
      --muted-2:#79839d;
      --line:rgba(255,255,255,.12);
      --primary:#8b5cf6;
      --primary-2:#22d3ee;
      --accent:#f59e0b;
      --danger:#fb7185;
      --success:#34d399;
      --radius-lg:28px;
      --radius-md:20px;
      --radius-sm:14px;
      --shadow:0 24px 70px rgba(0,0,0,.35);
      --shadow-soft:0 14px 42px rgba(0,0,0,.22);
      --container:1180px;
      --header-h:78px;
      --ease:all .25s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 16% 0%, rgba(139,92,246,.35), transparent 30%),
        radial-gradient(circle at 85% 8%, rgba(34,211,238,.2), transparent 28%),
        linear-gradient(180deg,#070914 0%,#0a0d1b 44%,#090b15 100%);
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(139,92,246,.55);color:#fff}

    .site-container{
      width:min(100% - 32px,var(--container));
      margin-inline:auto;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:rgba(7,9,20,.78);
      border-bottom:1px solid var(--line);
    }
    .navbar{min-height:var(--header-h);padding:0}
    .brand-logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:900;
      letter-spacing:.2px;
      font-size:18px;
      color:#fff;
      white-space:nowrap;
    }
    .brand-logo:hover{color:#fff;transform:translateY(-1px)}
    .brand-mark{
      width:40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 0 28px rgba(139,92,246,.42);
      color:#fff;
      flex:none;
    }
    .navbar-toggler{
      border:1px solid var(--line);
      color:#fff;
      border-radius:14px;
      padding:10px 12px;
      box-shadow:none!important;
    }
    .navbar-toggler:focus{outline:3px solid rgba(34,211,238,.25)}
    .navbar-nav{align-items:center;gap:6px}
    .nav-link{
      color:var(--muted);
      font-weight:700;
      padding:10px 14px!important;
      border-radius:999px;
      position:relative;
    }
    .nav-link:hover,.nav-link:focus{color:#fff;background:rgba(255,255,255,.07)}
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,rgba(139,92,246,.26),rgba(34,211,238,.16));
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .nav-action{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 16px;
      border-radius:999px;
      color:#08101f;
      background:linear-gradient(135deg,#facc15,#fb923c);
      font-weight:900;
      box-shadow:0 12px 28px rgba(245,158,11,.22);
    }
    .nav-action:hover{color:#08101f;transform:translateY(-2px);box-shadow:0 18px 36px rgba(245,158,11,.32)}
    .mega-wrap{position:relative}
    .mega-panel{
      position:absolute;
      right:0;
      top:calc(100% + 14px);
      width:390px;
      padding:14px;
      border:1px solid var(--line);
      border-radius:22px;
      background:rgba(15,20,39,.96);
      box-shadow:var(--shadow);
      opacity:0;
      visibility:hidden;
      transform:translateY(12px);
      transition:var(--ease);
    }
    .mega-wrap:hover .mega-panel,.mega-wrap:focus-within .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .mega-item{
      display:flex;
      gap:12px;
      padding:13px;
      border-radius:16px;
      color:#fff;
    }
    .mega-item:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}
    .mega-icon{
      width:40px;
      height:40px;
      border-radius:13px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(139,92,246,.18);
      color:#c4b5fd;
      flex:none;
    }
    .mega-item strong{display:block;font-size:14px;margin-bottom:2px}
    .mega-item span span{display:block;color:var(--muted);font-size:12px;line-height:1.55}

    .section{padding:86px 0}
    .section-sm{padding:58px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      color:#c7d2fe;
      background:rgba(139,92,246,.14);
      border:1px solid rgba(139,92,246,.24);
      font-size:13px;
      font-weight:800;
      margin-bottom:18px;
    }
    .section-title{
      font-size:clamp(28px,4vw,48px);
      line-height:1.12;
      font-weight:950;
      letter-spacing:-1px;
      margin:0 0 18px;
    }
    .section-desc{
      color:var(--muted);
      font-size:17px;
      max-width:760px;
      margin:0;
    }
    .gradient-text{
      background:linear-gradient(135deg,#fff,#c4b5fd 48%,#67e8f9);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .hero{
      padding:82px 0 62px;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:34px;
      align-items:center;
    }
    .hero-copy{
      padding:36px 0;
    }
    .hero h1{
      font-size:clamp(38px,6vw,72px);
      line-height:1.03;
      letter-spacing:-2.2px;
      font-weight:1000;
      margin:0 0 22px;
    }
    .hero-lead{
      font-size:18px;
      color:#c4cadb;
      max-width:720px;
      margin-bottom:28px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:14px;
      margin-bottom:26px;
    }
    .btn-main,.btn-ghost,.btn-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border-radius:999px;
      padding:13px 20px;
      font-weight:900;
      border:1px solid transparent;
      transition:var(--ease);
      min-height:48px;
    }
    .btn-main{
      color:#07101e;
      background:linear-gradient(135deg,#22d3ee,#a78bfa 52%,#facc15);
      box-shadow:0 18px 42px rgba(34,211,238,.18);
    }
    .btn-main:hover{color:#07101e;transform:translateY(-2px);box-shadow:0 24px 54px rgba(139,92,246,.28)}
    .btn-ghost{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:var(--line);
    }
    .btn-ghost:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
    .btn-soft{
      color:#dbeafe;
      background:rgba(34,211,238,.1);
      border-color:rgba(34,211,238,.22);
    }
    .btn-soft:hover{color:#fff;background:rgba(34,211,238,.17);transform:translateY(-2px)}
    .btn-main:focus,.btn-ghost:focus,.btn-soft:focus,.nav-action:focus{
      outline:3px solid rgba(34,211,238,.28);
      outline-offset:3px;
    }
    .hero-notes{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      color:var(--muted);
      font-size:13px;
    }
    .note-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.1);
    }

    .campaign-panel{
      position:relative;
      padding:24px;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),
        radial-gradient(circle at 18% 14%, rgba(245,158,11,.18), transparent 32%),
        var(--panel);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .campaign-panel::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-70px;
      top:-70px;
      background:radial-gradient(circle,rgba(34,211,238,.4),transparent 68%);
      filter:blur(2px);
    }
    .panel-head{
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:flex-start;
      margin-bottom:22px;
      position:relative;
      z-index:1;
    }
    .status-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 11px;
      border-radius:999px;
      color:#fef3c7;
      background:rgba(245,158,11,.14);
      border:1px solid rgba(245,158,11,.24);
      font-weight:900;
      font-size:13px;
      white-space:nowrap;
    }
    .progress-wrap{
      display:grid;
      grid-template-columns:170px 1fr;
      gap:22px;
      align-items:center;
      position:relative;
      z-index:1;
    }
    .progress-ring{
      width:170px;
      height:170px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:conic-gradient(var(--primary-2) 0 78%, rgba(255,255,255,.09) 78% 100%);
      position:relative;
      box-shadow:0 0 46px rgba(34,211,238,.14);
    }
    .progress-ring::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:50%;
      background:linear-gradient(180deg,#121832,#0b1021);
      border:1px solid rgba(255,255,255,.09);
    }
    .ring-inner{
      position:relative;
      text-align:center;
      z-index:1;
    }
    .ring-inner strong{
      display:block;
      font-size:38px;
      line-height:1;
      font-weight:1000;
    }
    .ring-inner span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-top:6px;
    }
    .tier-list{
      display:grid;
      gap:10px;
    }
    .tier{
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:center;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.09);
    }
    .tier:hover{background:rgba(255,255,255,.075);transform:translateY(-1px)}
    .tier strong{display:block;color:#fff;font-size:15px}
    .tier span{display:block;color:var(--muted);font-size:12px}
    .tier em{
      font-style:normal;
      color:#08101f;
      background:linear-gradient(135deg,#67e8f9,#c4b5fd);
      padding:6px 10px;
      border-radius:999px;
      font-weight:900;
      font-size:12px;
      flex:none;
    }

    .step-layout{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:30px;
      align-items:start;
    }
    .mission-board{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .mission-row{
      display:grid;
      grid-template-columns:74px 1fr;
      gap:16px;
      padding:22px;
      border-bottom:1px solid rgba(255,255,255,.09);
      transition:var(--ease);
    }
    .mission-row:last-child{border-bottom:0}
    .mission-row:hover{background:rgba(255,255,255,.045)}
    .mission-num{
      width:54px;
      height:54px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:18px;
      background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(34,211,238,.16));
      color:#fff;
      font-weight:1000;
      font-size:18px;
      border:1px solid rgba(255,255,255,.11);
    }
    .mission-row h3{
      margin:0 0 6px;
      font-size:19px;
      font-weight:950;
    }
    .mission-row p{margin:0;color:var(--muted);font-size:15px}

    .notice-card{
      padding:24px;
      border-radius:var(--radius-lg);
      background:
        radial-gradient(circle at 100% 0%, rgba(251,113,133,.16), transparent 34%),
        rgba(255,255,255,.055);
      border:1px solid var(--line);
    }
    .notice-card h2{
      font-size:30px;
      font-weight:950;
      line-height:1.2;
      margin-bottom:14px;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:22px 0 0;
      display:grid;
      gap:12px;
    }
    .check-list li{
      display:flex;
      gap:11px;
      color:#d8def0;
    }
    .check-list i{
      color:var(--success);
      margin-top:5px;
    }

    .split-band{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:
        linear-gradient(135deg,rgba(139,92,246,.15),rgba(34,211,238,.06)),
        rgba(255,255,255,.04);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .split-inner{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      min-height:420px;
    }
    .rank-panel{
      padding:32px;
      background:rgba(0,0,0,.16);
      border-right:1px solid rgba(255,255,255,.09);
    }
    .rank-item{
      display:flex;
      align-items:center;
      gap:14px;
      padding:15px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .rank-item:last-child{border-bottom:0}
    .rank-index{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:12px;
      font-weight:1000;
      color:#07101e;
      background:linear-gradient(135deg,#facc15,#67e8f9);
      flex:none;
    }
    .rank-info{flex:1;min-width:0}
    .rank-info strong{display:block;font-size:16px}
    .rank-info span{display:block;color:var(--muted);font-size:13px}
    .energy-bar{
      width:110px;
      height:8px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.1);
      flex:none;
    }
    .energy-bar i{
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--primary-2));
    }
    .feature-copy{
      padding:36px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .feature-copy h2{
      font-size:34px;
      line-height:1.18;
      font-weight:950;
      margin:0 0 16px;
    }
    .feature-copy p{color:var(--muted);margin-bottom:22px}
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:8px;
    }
    .tag{
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.1);
      color:#dbeafe;
      font-size:13px;
      font-weight:800;
    }
    .tag:hover{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.35)}

    .proof-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:stretch;
    }
    .quote-card,.stats-card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.055);
      box-shadow:var(--shadow-soft);
      padding:30px;
    }
    .quote-mark{
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:rgba(34,211,238,.12);
      color:#67e8f9;
      font-size:24px;
      margin-bottom:18px;
    }
    .quote-card blockquote{
      margin:0;
      font-size:22px;
      line-height:1.55;
      font-weight:850;
      color:#fff;
    }
    .quote-card cite{
      display:block;
      margin-top:18px;
      color:var(--muted);
      font-style:normal;
    }
    .stats-card{
      display:grid;
      gap:14px;
    }
    .stat-line{
      padding:18px;
      border-radius:20px;
      background:rgba(0,0,0,.14);
      border:1px solid rgba(255,255,255,.08);
    }
    .stat-line strong{
      display:block;
      font-size:32px;
      line-height:1;
      color:#fff;
      margin-bottom:8px;
    }
    .stat-line span{color:var(--muted);font-size:14px}

    .faq-wrap{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:30px;
      align-items:start;
    }
    .accordion{
      display:grid;
      gap:12px;
    }
    .accordion-item{
      color:#fff;
      background:rgba(255,255,255,.055);
      border:1px solid var(--line)!important;
      border-radius:20px!important;
      overflow:hidden;
    }
    .accordion-button{
      color:#fff;
      background:transparent;
      box-shadow:none!important;
      font-weight:900;
      padding:18px 20px;
    }
    .accordion-button:not(.collapsed){
      color:#fff;
      background:rgba(139,92,246,.12);
    }
    .accordion-button:focus{
      border-color:transparent;
      outline:3px solid rgba(34,211,238,.18);
      outline-offset:-3px;
    }
    .accordion-button::after{filter:invert(1) grayscale(1)}
    .accordion-body{
      color:var(--muted);
      padding:0 20px 20px;
    }
    .objection-panel{
      padding:26px;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(180deg,rgba(251,113,133,.12),rgba(139,92,246,.07)),
        rgba(255,255,255,.045);
      border:1px solid var(--line);
    }
    .objection-panel h2{
      font-size:32px;
      font-weight:950;
      line-height:1.18;
      margin-bottom:14px;
    }

    .cta{
      padding:40px;
      border-radius:34px;
      background:
        radial-gradient(circle at 18% 20%,rgba(34,211,238,.22),transparent 32%),
        radial-gradient(circle at 88% 10%,rgba(245,158,11,.2),transparent 30%),
        linear-gradient(135deg,rgba(139,92,246,.24),rgba(255,255,255,.055));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      display:grid;
      grid-template-columns:1fr auto;
      gap:24px;
      align-items:center;
    }
    .cta h2{
      font-size:clamp(28px,4vw,46px);
      font-weight:1000;
      line-height:1.12;
      letter-spacing:-1px;
      margin:0 0 12px;
    }
    .cta p{color:#d5dbed;margin:0;max-width:760px}
    .cta-actions{
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:stretch;
      min-width:210px;
    }

    .site-footer{
      padding:42px 0 28px;
      border-top:1px solid var(--line);
      background:rgba(5,7,16,.76);
    }
    .footer-top{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:30px;
      align-items:start;
      padding-bottom:26px;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-size:18px;
      font-weight:950;
      margin-bottom:14px;
    }
    .footer-desc{
      color:var(--muted);
      max-width:620px;
      margin:0;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-links a{
      padding:9px 12px;
      border-radius:999px;
      color:var(--muted);
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);
      font-weight:700;
      font-size:14px;
    }
    .footer-links a:hover{color:#fff;background:rgba(255,255,255,.09);transform:translateY(-1px)}
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding-top:22px;
      color:var(--muted-2);
      font-size:13px;
    }

    @media (max-width:1024px){
      .hero-grid,.step-layout,.split-inner,.proof-grid,.faq-wrap{
        grid-template-columns:1fr;
      }
      .hero{padding-top:58px}
      .rank-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
      .cta{grid-template-columns:1fr}
      .cta-actions{flex-direction:row;flex-wrap:wrap;min-width:0}
      .progress-wrap{grid-template-columns:150px 1fr}
      .progress-ring{width:150px;height:150px}
    }

    @media (max-width:991px){
      .site-container{width:min(100% - 24px,var(--container))}
      .navbar-collapse{
        margin-top:12px;
        padding:14px;
        border:1px solid var(--line);
        border-radius:22px;
        background:rgba(13,17,34,.98);
        box-shadow:var(--shadow-soft);
      }
      .navbar-nav{align-items:stretch}
      .nav-link,.nav-action{width:100%;justify-content:flex-start}
      .mega-panel{
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
        margin-top:8px;
        display:grid;
        box-shadow:none;
        background:rgba(255,255,255,.04);
      }
    }

    @media (max-width:768px){
      .section{padding:64px 0}
      .section-sm{padding:44px 0}
      .hero h1{letter-spacing:-1.4px}
      .hero-copy{padding:14px 0}
      .campaign-panel,.notice-card,.rank-panel,.feature-copy,.quote-card,.stats-card,.objection-panel,.cta{padding:22px}
      .progress-wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
      .tier{align-items:flex-start}
      .mission-row{grid-template-columns:1fr;gap:12px}
      .footer-top{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .energy-bar{width:88px}
    }

    @media (max-width:520px){
      .brand-logo span:last-child{max-width:220px;overflow:hidden;text-overflow:ellipsis}
      .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
      .btn-main,.btn-ghost,.btn-soft{width:100%}
      .panel-head{flex-direction:column}
      .tier{flex-direction:column}
      .rank-item{align-items:flex-start}
      .energy-bar{width:100%}
      .quote-card blockquote{font-size:19px}
      .copyright{flex-direction:column}
    }

/* roulang page: category2 */
:root{
      --bg:#090b16;
      --bg-soft:#101426;
      --panel:#151a31;
      --panel-2:#1a2040;
      --text:#f7f8ff;
      --muted:#a8b0cb;
      --muted-2:#737d9d;
      --line:rgba(255,255,255,.12);
      --line-strong:rgba(255,255,255,.2);
      --primary:#7c4dff;
      --primary-2:#23d3ee;
      --accent:#ffcc3d;
      --danger:#ff5577;
      --success:#38e6a4;
      --white:#ffffff;
      --shadow:0 22px 70px rgba(0,0,0,.35);
      --shadow-soft:0 14px 40px rgba(0,0,0,.22);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1180px;
      --header-h:78px;
      --font:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(124,77,255,.35), transparent 34%),
        radial-gradient(circle at 86% 0%, rgba(35,211,238,.22), transparent 30%),
        linear-gradient(180deg,#070915 0%,#0b0e1c 48%,#080a13 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    a:hover{color:var(--white)}
    img{max-width:100%;display:block}
    button,input,textarea{font-family:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{
      outline:3px solid rgba(35,211,238,.45);
      outline-offset:3px;
      border-radius:12px;
    }
    .site-container{
      width:min(var(--container), calc(100% - 40px));
      margin:0 auto;
    }
    .section{
      padding:88px 0;
      position:relative;
    }
    .section-tight{padding:62px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border:1px solid rgba(35,211,238,.28);
      background:rgba(35,211,238,.09);
      color:#bdf7ff;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      letter-spacing:.03em;
    }
    .section-title{
      margin:16px 0 12px;
      font-size:clamp(28px,4vw,46px);
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.04em;
    }
    .section-desc{
      margin:0;
      color:var(--muted);
      font-size:17px;
      max-width:760px;
    }
    .gradient-text{
      background:linear-gradient(90deg,#fff 0%,#b7f8ff 46%,#ffd55c 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      backdrop-filter:blur(18px);
      background:rgba(9,11,22,.78);
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .navbar{
      min-height:var(--header-h);
      padding:0;
    }
    .brand-logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      color:var(--white);
      font-weight:900;
      font-size:20px;
      letter-spacing:-.03em;
      white-space:nowrap;
    }
    .brand-mark{
      width:42px;
      height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      color:#0c1020;
      background:linear-gradient(135deg,var(--accent),var(--primary-2) 48%,#9b6cff);
      box-shadow:0 12px 26px rgba(35,211,238,.22);
    }
    .navbar-toggler{
      border:1px solid var(--line);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      background:rgba(255,255,255,.06);
    }
    .navbar-toggler:focus{box-shadow:none}
    .navbar-nav{
      align-items:center;
      gap:6px;
    }
    .nav-link{
      color:var(--muted);
      font-weight:750;
      padding:10px 14px!important;
      border-radius:999px;
      position:relative;
    }
    .nav-link:hover,
    .nav-link.active{
      color:var(--white);
      background:rgba(255,255,255,.08);
    }
    .nav-link.active:after{
      content:"";
      position:absolute;
      left:50%;
      bottom:4px;
      width:18px;
      height:3px;
      transform:translateX(-50%);
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary-2),var(--accent));
    }
    .nav-action{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#101426;
      font-weight:900;
      padding:10px 16px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--accent),#62ecff);
      box-shadow:0 14px 30px rgba(35,211,238,.18);
    }
    .nav-action:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(255,204,61,.2);
      color:#090b16;
    }
    .mega-wrap{position:relative}
    .mega-panel{
      position:absolute;
      right:0;
      top:calc(100% + 14px);
      width:420px;
      padding:14px;
      border-radius:22px;
      background:rgba(17,22,43,.96);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      opacity:0;
      visibility:hidden;
      transform:translateY(10px);
      transition:.22s ease;
    }
    .mega-wrap:hover .mega-panel,
    .mega-wrap:focus-within .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }
    .mega-item{
      display:flex;
      gap:12px;
      padding:13px;
      border-radius:16px;
      color:var(--text);
    }
    .mega-item:hover{
      background:rgba(255,255,255,.07);
      transform:translateX(3px);
    }
    .mega-icon{
      flex:0 0 40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:13px;
      color:var(--accent);
      background:rgba(255,204,61,.12);
    }
    .mega-item strong{
      display:block;
      font-size:15px;
      line-height:1.2;
      margin-bottom:4px;
    }
    .mega-item span span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }

    .btn-energy{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:50px;
      padding:13px 20px;
      border:0;
      border-radius:999px;
      font-weight:900;
      color:#0a0d18;
      background:linear-gradient(135deg,#ffdb5c 0%,#39e2ff 52%,#9b6cff 100%);
      box-shadow:0 18px 42px rgba(35,211,238,.22);
    }
    .btn-energy:hover{
      transform:translateY(-3px);
      color:#070915;
      box-shadow:0 24px 56px rgba(124,77,255,.28);
    }
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:50px;
      padding:12px 18px;
      border-radius:999px;
      color:var(--text);
      background:rgba(255,255,255,.06);
      border:1px solid var(--line);
      font-weight:850;
    }
    .btn-ghost:hover{
      background:rgba(255,255,255,.11);
      border-color:rgba(35,211,238,.4);
      transform:translateY(-2px);
    }

    .inner-hero{
      padding:60px 0 40px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(21,26,49,.96),rgba(11,14,28,.92)),
        radial-gradient(circle at 14% 18%,rgba(124,77,255,.45),transparent 28%);
      box-shadow:var(--shadow);
    }
    .hero-shell:before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 78% 22%,rgba(35,211,238,.32),transparent 28%),
        radial-gradient(circle at 55% 85%,rgba(255,204,61,.16),transparent 26%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:28px;
      padding:46px;
      align-items:center;
    }
    .hero-copy h1{
      margin:18px 0 16px;
      font-size:clamp(34px,5vw,64px);
      line-height:1.05;
      font-weight:950;
      letter-spacing:-.055em;
    }
    .hero-copy p{
      margin:0;
      max-width:680px;
      color:#c5cbe0;
      font-size:18px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:28px;
    }
    .hero-note{
      margin-top:18px;
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      font-size:14px;
    }
    .hero-note i{color:var(--success);margin-top:5px}
    .rank-panel{
      border-radius:26px;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
      padding:20px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    }
    .rank-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      margin-bottom:16px;
    }
    .rank-head strong{
      font-size:18px;
      letter-spacing:-.02em;
    }
    .live-dot{
      display:inline-flex;
      align-items:center;
      gap:7px;
      color:#9fffe1;
      font-size:13px;
      font-weight:800;
    }
    .live-dot:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 7px rgba(56,230,164,.12);
    }
    .rank-list{
      display:grid;
      gap:12px;
    }
    .rank-item{
      display:grid;
      grid-template-columns:38px 1fr auto;
      gap:12px;
      align-items:center;
      padding:13px;
      border-radius:18px;
      background:rgba(8,10,20,.46);
      border:1px solid rgba(255,255,255,.08);
    }
    .rank-no{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:12px;
      font-weight:950;
      color:#09101d;
      background:linear-gradient(135deg,var(--accent),var(--primary-2));
    }
    .rank-title{font-weight:850;line-height:1.25}
    .rank-sub{font-size:12px;color:var(--muted);margin-top:3px}
    .rank-score{
      min-width:58px;
      text-align:right;
      color:#ffd95e;
      font-weight:950;
    }
    .meter{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      overflow:hidden;
      margin-top:10px;
    }
    .meter span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--primary-2),var(--accent));
    }

    .intro-band{
      margin-top:28px;
      display:grid;
      grid-template-columns:1.4fr .6fr;
      gap:18px;
    }
    .intro-card,
    .mini-stat,
    .mission-card,
    .proof-card,
    .objection-card,
    .faq-item,
    .open-box{
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-soft);
    }
    .intro-card{
      padding:26px;
    }
    .intro-card h2{
      margin:0 0 10px;
      font-size:26px;
      font-weight:950;
      letter-spacing:-.03em;
    }
    .intro-card p{margin:0;color:var(--muted)}
    .mini-stat{
      padding:22px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:160px;
      background:
        radial-gradient(circle at top right,rgba(255,204,61,.18),transparent 44%),
        linear-gradient(180deg,rgba(124,77,255,.14),rgba(255,255,255,.035));
    }
    .mini-stat b{
      font-size:42px;
      line-height:1;
      letter-spacing:-.05em;
    }
    .mini-stat span{color:var(--muted);font-weight:700}

    .steps-layout{
      display:grid;
      grid-template-columns:.76fr 1.24fr;
      gap:28px;
      align-items:start;
    }
    .sticky-copy{
      position:sticky;
      top:106px;
    }
    .task-stack{
      display:grid;
      gap:16px;
    }
    .task-card{
      display:grid;
      grid-template-columns:74px 1fr;
      gap:18px;
      padding:20px;
      border-radius:24px;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.035)),
        radial-gradient(circle at 100% 0%,rgba(35,211,238,.12),transparent 36%);
      transition:.22s ease;
    }
    .task-card:hover{
      transform:translateY(-4px);
      border-color:rgba(35,211,238,.28);
      box-shadow:0 18px 48px rgba(0,0,0,.25);
    }
    .task-level{
      width:64px;
      height:64px;
      display:grid;
      place-items:center;
      border-radius:20px;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;
      font-size:24px;
      font-weight:950;
      box-shadow:0 14px 34px rgba(124,77,255,.25);
    }
    .task-card h3{
      margin:0 0 7px;
      font-size:21px;
      font-weight:950;
      letter-spacing:-.03em;
    }
    .task-card p{
      margin:0 0 14px;
      color:var(--muted);
    }
    .task-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      color:#dfe4ff;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
      font-size:12px;
      font-weight:800;
    }

    .proof-zone{
      border-radius:32px;
      padding:34px;
      border:1px solid var(--line);
      background:
        linear-gradient(135deg,rgba(19,24,47,.94),rgba(10,13,26,.92)),
        radial-gradient(circle at 14% 20%,rgba(35,211,238,.18),transparent 30%);
      overflow:hidden;
    }
    .proof-grid{
      margin-top:26px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    .proof-card{
      padding:22px;
      box-shadow:none;
    }
    .proof-card:nth-child(2){
      background:
        radial-gradient(circle at 90% 12%,rgba(255,204,61,.16),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    }
    .quote{
      position:relative;
      padding-left:20px;
      color:#d7ddf6;
      font-size:18px;
      margin:0 0 18px;
    }
    .quote:before{
      content:"";
      position:absolute;
      left:0;
      top:5px;
      bottom:5px;
      width:4px;
      border-radius:999px;
      background:linear-gradient(180deg,var(--primary-2),var(--accent));
    }
    .proof-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:var(--muted);
      font-size:14px;
      border-top:1px solid var(--line);
      padding-top:16px;
    }
    .stars{
      color:var(--accent);
      letter-spacing:2px;
    }
    .signal-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:22px;
    }
    .signal{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
    }
    .signal b{
      display:block;
      font-size:28px;
      line-height:1;
      letter-spacing:-.04em;
      color:#c8fbff;
      margin-bottom:8px;
    }
    .signal span{color:var(--muted);font-size:13px}

    .objection-layout{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      margin-top:28px;
    }
    .objection-card{
      padding:22px;
      display:flex;
      gap:16px;
      align-items:flex-start;
    }
    .objection-icon{
      flex:0 0 46px;
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:16px;
      color:#08111e;
      background:linear-gradient(135deg,#ffdb5c,#46e7ff);
      font-size:20px;
    }
    .objection-card h3{
      margin:0 0 6px;
      font-size:20px;
      font-weight:950;
    }
    .objection-card p{margin:0;color:var(--muted)}

    .faq-wrap{
      display:grid;
      grid-template-columns:.82fr 1.18fr;
      gap:28px;
      align-items:start;
    }
    .faq-list{
      display:grid;
      gap:14px;
    }
    .faq-item{
      padding:0;
      overflow:hidden;
    }
    .faq-question{
      width:100%;
      padding:20px 22px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      border:0;
      background:transparent;
      color:var(--text);
      font-weight:950;
      text-align:left;
    }
    .faq-question i{
      color:var(--primary-2);
      transition:.22s ease;
    }
    .faq-answer{
      padding:0 22px 20px;
      color:var(--muted);
      border-top:1px solid rgba(255,255,255,.07);
    }
    .accordion-button:not(.collapsed){
      color:var(--text);
      background:rgba(255,255,255,.04);
      box-shadow:none;
    }
    .accordion-button:focus{box-shadow:none}

    .open-box{
      position:relative;
      overflow:hidden;
      padding:34px;
      background:
        radial-gradient(circle at 16% 22%,rgba(124,77,255,.28),transparent 30%),
        radial-gradient(circle at 88% 14%,rgba(35,211,238,.22),transparent 30%),
        linear-gradient(135deg,rgba(20,25,50,.96),rgba(9,11,22,.96));
    }
    .open-box:after{
      content:"";
      position:absolute;
      width:260px;
      height:260px;
      right:-120px;
      bottom:-130px;
      border-radius:50%;
      background:rgba(255,204,61,.18);
      filter:blur(6px);
    }
    .open-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr 390px;
      gap:28px;
      align-items:center;
    }
    .open-box h2{
      margin:14px 0 12px;
      font-size:clamp(28px,4vw,44px);
      line-height:1.15;
      font-weight:950;
      letter-spacing:-.04em;
    }
    .open-box p{
      margin:0;
      color:var(--muted);
      max-width:720px;
    }
    .join-form{
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
    }
    .form-label{
      color:#dfe5ff;
      font-weight:850;
      margin-bottom:8px;
    }
    .form-control{
      min-height:50px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      color:var(--text);
      background:rgba(4,6,14,.48);
      padding:12px 14px;
    }
    .form-control::placeholder{color:#727b9d}
    .form-control:focus{
      border-color:rgba(35,211,238,.55);
      background:rgba(4,6,14,.62);
      color:var(--text);
      box-shadow:0 0 0 .25rem rgba(35,211,238,.13);
    }
    .form-tip{
      margin-top:10px;
      color:var(--muted);
      font-size:13px;
    }

    .site-footer{
      padding:44px 0 28px;
      background:#070915;
      border-top:1px solid rgba(255,255,255,.1);
    }
    .footer-top{
      display:grid;
      grid-template-columns:1fr auto;
      gap:28px;
      align-items:start;
      padding-bottom:26px;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:950;
      font-size:20px;
      margin-bottom:12px;
    }
    .footer-desc{
      margin:0;
      max-width:620px;
      color:var(--muted);
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:12px;
      max-width:420px;
    }
    .footer-links a{
      padding:8px 12px;
      border-radius:999px;
      color:var(--muted);
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.07);
      font-weight:750;
    }
    .footer-links a:hover{
      color:var(--white);
      background:rgba(255,255,255,.09);
      transform:translateY(-2px);
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      padding-top:20px;
      color:var(--muted-2);
      font-size:14px;
    }

    @media (max-width:1024px){
      :root{--header-h:72px}
      .hero-grid,
      .steps-layout,
      .faq-wrap,
      .open-grid{
        grid-template-columns:1fr;
      }
      .sticky-copy{position:relative;top:auto}
      .intro-band{grid-template-columns:1fr}
      .open-grid{gap:22px}
    }

    @media (max-width:991.98px){
      .site-container{width:min(100% - 32px,var(--container))}
      .navbar-collapse{
        margin-top:14px;
        padding:14px;
        border-radius:22px;
        background:rgba(14,18,36,.98);
        border:1px solid var(--line);
        box-shadow:var(--shadow-soft);
      }
      .navbar-nav{align-items:stretch}
      .nav-link,.nav-action{justify-content:flex-start}
      .mega-panel{
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        transform:none;
        margin-top:8px;
        display:grid;
        gap:8px;
        box-shadow:none;
        background:rgba(255,255,255,.045);
      }
    }

    @media (max-width:768px){
      .section{padding:68px 0}
      .inner-hero{padding:34px 0 28px}
      .hero-grid{padding:28px}
      .proof-zone,.open-box{padding:24px}
      .proof-grid,
      .signal-grid,
      .objection-layout{
        grid-template-columns:1fr;
      }
      .task-card{
        grid-template-columns:1fr;
      }
      .footer-top{
        grid-template-columns:1fr;
      }
      .footer-links{
        justify-content:flex-start;
      }
    }

    @media (max-width:520px){
      .site-container{width:min(100% - 24px,var(--container))}
      .brand-logo{font-size:17px}
      .brand-mark{width:38px;height:38px;border-radius:13px}
      .hero-shell{border-radius:24px}
      .hero-grid{padding:22px}
      .hero-actions .btn-energy,
      .hero-actions .btn-ghost{
        width:100%;
      }
      .rank-item{
        grid-template-columns:34px 1fr;
      }
      .rank-score{
        grid-column:2;
        text-align:left;
      }
      .intro-card,.mini-stat,.proof-card,.objection-card{padding:18px}
      .open-box{padding:20px}
      .join-form{padding:14px}
      .footer-links a{width:100%;text-align:center}
    }