/* roulang page: index */
:root {
      --ink: #17203a;
      --muted: #667085;
      --light-muted: #98a2b3;
      --coral: #ff5d78;
      --coral-dark: #e63d5d;
      --plum: #6d46c8;
      --plum-dark: #4e2d9e;
      --paper: #fffdfb;
      --cloud: #f6f7fb;
      --line: #e7e8ef;
      --white: #ffffff;
      --radius-lg: 26px;
      --radius-md: 18px;
      --radius-sm: 12px;
      --shadow-soft: 0 14px 42px rgba(37, 34, 77, .09);
      --shadow-lift: 0 22px 58px rgba(80, 48, 129, .16);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    :focus-visible {
      outline: 3px solid rgba(255, 93, 120, .34);
      outline-offset: 3px;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(15px);
      background: rgba(255, 253, 251, .88);
      border-bottom: 1px solid rgba(231, 232, 239, .88);
    }
    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      letter-spacing: -2px;
      background: linear-gradient(135deg, var(--coral), #ff9478);
      box-shadow: 0 8px 18px rgba(255, 93, 120, .28);
    }
    .nav-link {
      position: relative;
      color: #4b556e;
      font-size: 14px;
      font-weight: 700;
      transition: color .22s ease;
    }
    .nav-link:hover, .nav-link.active { color: var(--plum); }
    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -18px;
      height: 3px;
      border-radius: 9px 9px 0 0;
      background: var(--coral);
    }
    .search-box {
      display: flex;
      align-items: center;
      width: 200px;
      padding: 0 12px;
      height: 40px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 12px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .search-box:focus-within {
      border-color: rgba(109, 70, 200, .58);
      box-shadow: 0 0 0 4px rgba(109, 70, 200, .1);
    }
    .search-box input {
      width: 100%;
      margin-left: 7px;
      outline: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }
    .search-box input::placeholder { color: #a5aabd; }
    .btn-primary, .btn-light, .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 13px;
      border: 1px solid transparent;
      font-weight: 800;
      font-size: 14px;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn-primary {
      color: #fff;
      background: var(--coral);
      box-shadow: 0 12px 24px rgba(255, 93, 120, .23);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      background: var(--coral-dark);
      box-shadow: 0 16px 29px rgba(255, 93, 120, .31);
    }
    .btn-light {
      color: var(--plum);
      background: #fff;
      box-shadow: 0 10px 24px rgba(20, 26, 70, .12);
    }
    .btn-light:hover { transform: translateY(-2px); background: #fff6f8; }
    .btn-outline {
      color: var(--plum);
      border-color: #dcd5f4;
      background: rgba(255,255,255,.72);
    }
    .btn-outline:hover {
      background: #f5f1ff;
      border-color: #b8a5eb;
      transform: translateY(-2px);
    }
    .hero-shell {
      overflow: hidden;
      background:
        radial-gradient(circle at 82% 20%, rgba(255, 160, 177, .34), transparent 20%),
        radial-gradient(circle at 58% 74%, rgba(150, 111, 237, .18), transparent 30%),
        linear-gradient(118deg, #fffdfb 0%, #f9f5ff 100%);
    }
    .dot-grid {
      background-image: radial-gradient(rgba(109, 70, 200, .16) 1.2px, transparent 1.2px);
      background-size: 19px 19px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border: 1px solid #eadcf5;
      border-radius: 999px;
      color: var(--plum);
      background: rgba(255,255,255,.78);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
    }
    .eyebrow i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 4px rgba(255,93,120,.12);
    }
    .hero-title {
      letter-spacing: -.055em;
      line-height: 1.12;
    }
    .hero-art {
      position: relative;
      min-height: 510px;
    }
    .hero-orbit {
      position: absolute;
      width: 470px;
      height: 470px;
      border-radius: 50%;
      top: 4px;
      right: -22px;
      border: 1px solid rgba(109,70,200,.14);
    }
    .hero-orbit::after {
      content: "";
      position: absolute;
      inset: 34px;
      border-radius: inherit;
      border: 1px dashed rgba(255,93,120,.26);
    }
    .comic-panel {
      position: absolute;
      overflow: hidden;
      border: 7px solid #fff;
      border-radius: 23px;
      box-shadow: var(--shadow-lift);
      background: linear-gradient(145deg, #5c3ba7, #8d64d7 62%, #ff899c);
    }
    .comic-panel::before {
      content: "";
      position: absolute;
      width: 150%;
      height: 64%;
      left: -27%;
      bottom: -20%;
      transform: rotate(-15deg);
      border-radius: 45% 55% 0 0;
      background: rgba(255,255,255,.2);
    }
    .comic-panel::after {
      content: "";
      position: absolute;
      width: 66px;
      height: 66px;
      top: 20px;
      right: 22px;
      border-radius: 50%;
      background: #ffe29b;
      box-shadow: 0 0 0 13px rgba(255,255,255,.09);
    }
    .panel-main { width: 258px; height: 348px; right: 72px; top: 63px; transform: rotate(6deg); }
    .panel-side { width: 166px; height: 230px; right: 289px; top: 186px; transform: rotate(-11deg); background: linear-gradient(150deg, #ff7189, #f9a565 70%, #ffdbc9); }
    .panel-bottom { width: 190px; height: 120px; right: 9px; top: 387px; transform: rotate(-5deg); background: linear-gradient(145deg, #23315f, #4d68c5); }
    .bubble {
      position: absolute;
      z-index: 3;
      padding: 10px 14px;
      border-radius: 13px;
      background: #fff;
      color: var(--plum);
      box-shadow: 0 12px 27px rgba(33,26,64,.14);
      font-size: 12px;
      font-weight: 800;
    }
    .bubble-one { top: 44px; right: 310px; }
    .bubble-two { top: 331px; right: 286px; }
    .mini-progress { width: 54px; height: 5px; border-radius: 20px; background: #e6dffa; overflow: hidden; }
    .mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
    .section-heading { max-width: 680px; }
    .section-heading h2 { letter-spacing: -.035em; line-height: 1.25; }
    .feature-card, .guide-card, .faq-item, .rank-card {
      border: 1px solid var(--line);
      background: #fff;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .feature-card:hover, .guide-card:hover, .rank-card:hover {
      transform: translateY(-5px);
      border-color: #d8caf3;
      box-shadow: var(--shadow-soft);
    }
    .feature-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 17px;
      color: var(--plum);
      background: #f1ebff;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid #e8e1f8;
      border-radius: 999px;
      padding: 6px 11px;
      color: #624f91;
      background: #faf8ff;
      font-size: 12px;
      font-weight: 700;
      transition: all .2s ease;
    }
    .tag:hover { color: #fff; background: var(--plum); border-color: var(--plum); }
    .index-side {
      background: #222042;
      color: #fff;
      border-radius: var(--radius-lg);
      box-shadow: 0 18px 45px rgba(32,29,68,.2);
    }
    .index-nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255,255,255,.12);
      color: #d8d4f4;
      font-size: 14px;
      transition: color .2s ease, padding .2s ease;
    }
    .index-nav-item:last-child { border-bottom: 0; }
    .index-nav-item:hover { color: #fff; padding-left: 5px; }
    .stat-card {
      position: relative;
      overflow: hidden;
      min-height: 160px;
      border-radius: 21px;
      padding: 24px;
      background: #fff;
      border: 1px solid var(--line);
    }
    .stat-card::after {
      content: "";
      position: absolute;
      right: -22px;
      bottom: -40px;
      width: 105px;
      height: 105px;
      border-radius: 50%;
      background: rgba(109,70,200,.07);
    }
    .timeline-line {
      position: absolute;
      top: 21px;
      bottom: 21px;
      left: 21px;
      width: 2px;
      background: #e5def5;
    }
    .timeline-dot {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: #fff;
      background: var(--plum);
      box-shadow: 0 0 0 7px #f2edff;
      font-size: 13px;
      font-weight: 900;
    }
    .cover-art {
      position: relative;
      overflow: hidden;
      min-height: 220px;
      border-radius: 17px;
    }
    .cover-art::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 44%, rgba(15,14,44,.28));
    }
    .cover-art::after {
      content: "漫画精选";
      position: absolute;
      left: 17px;
      bottom: 14px;
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .1em;
    }
    .cover-a { background: linear-gradient(145deg, #ff6881, #ffac72 54%, #fde3b0); }
    .cover-b { background: linear-gradient(145deg, #4936a6, #7c7ee5 52%, #b7d9ff); }
    .cover-c { background: linear-gradient(145deg, #193b5d, #287d93 55%, #9fd8c2); }
    .cover-d { background: linear-gradient(145deg, #5a254f, #be4b77 53%, #f5b2a0); }
    .cover-shape {
      position: absolute;
      width: 125px;
      height: 125px;
      top: 30px;
      left: 50%;
      transform: translateX(-50%) rotate(18deg);
      border: 8px solid rgba(255,255,255,.5);
      border-radius: 44px 44px 52px 22px;
    }
    .cover-shape::before {
      content: "";
      position: absolute;
      width: 105px;
      height: 50px;
      left: -47px;
      bottom: -37px;
      border-radius: 50%;
      background: rgba(255,255,255,.4);
    }
    .rank-number {
      width: 30px;
      color: #b0a8c9;
      font-size: 22px;
      font-weight: 900;
      font-style: italic;
      line-height: 1;
    }
    .rank-card:first-child .rank-number { color: var(--coral); }
    .rank-card:nth-child(2) .rank-number { color: #9b78dd; }
    .rank-card:nth-child(3) .rank-number { color: #e69b55; }
    .faq-item { border-radius: 16px; overflow: hidden; }
    .faq-item[open] { border-color: #d9cdf2; box-shadow: 0 8px 24px rgba(75,47,133,.07); }
    .faq-item summary {
      display: flex;
      list-style: none;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 19px 21px;
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-plus {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border-radius: 8px;
      color: var(--plum);
      background: #f3efff;
      transition: transform .2s ease, background .2s ease;
    }
    .faq-item[open] .faq-plus { transform: rotate(45deg); color: #fff; background: var(--plum); }
    .footer-link { color: #a9a8bd; transition: color .2s ease; }
    .footer-link:hover { color: #fff; }
    .mobile-menu { display: none; }
    @media (max-width: 1024px) {
      .search-box { width: 155px; }
      .hero-art { min-height: 430px; transform: scale(.9); transform-origin: center center; }
      .panel-main { right: 44px; }
      .panel-side { right: 244px; }
      .bubble-one { right: 270px; }
      .bubble-two { right: 238px; }
    }
    @media (max-width: 768px) {
      .desktop-nav, .desktop-actions { display: none; }
      .mobile-menu { display: inline-flex; }
      .nav-link.active::after { display: none; }
      .hero-art { min-height: 380px; transform: scale(.83); margin: -32px 0 -38px; }
      .hero-orbit { right: 50%; transform: translateX(50%); }
      .panel-main { right: calc(50% - 108px); }
      .panel-side { right: calc(50% + 71px); }
      .panel-bottom { right: calc(50% - 198px); }
      .bubble-one { right: calc(50% + 85px); }
      .bubble-two { right: calc(50% + 22px); }
    }
    @media (max-width: 520px) {
      .brand-text { max-width: 185px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
      .hero-title { font-size: 38px !important; }
      .hero-art { transform: scale(.68); margin: -72px 0 -89px; }
      .btn-primary, .btn-light, .btn-outline { width: 100%; }
      .section-heading h2 { font-size: 29px !important; }
      .index-side { border-radius: 20px; }
      .faq-item summary { padding: 17px; font-size: 14px; }
    }