/* roulang page: index */
:root {
      --bg: #070916;
      --bg-deep: #050610;
      --surface: #10142a;
      --surface-soft: #151b36;
      --surface-light: #1b2345;
      --line: rgba(185, 198, 255, .15);
      --line-bright: rgba(174, 155, 255, .34);
      --text: #f6f7ff;
      --muted: #aab4d4;
      --dim: #747e9f;
      --primary: #8b5cf6;
      --primary-light: #b697ff;
      --cyan: #42d9ff;
      --pink: #fb6eab;
      --gold: #ffc96b;
      --success: #71edbd;
      --radius-sm: 12px;
      --radius: 20px;
      --radius-lg: 30px;
      --shadow: 0 18px 55px rgba(0, 0, 0, .28);
      --shadow-hover: 0 25px 65px rgba(0, 0, 0, .42);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--text);
      background:
        radial-gradient(circle at 85% 4%, rgba(91, 65, 188, .23), transparent 27rem),
        radial-gradient(circle at 3% 33%, rgba(35, 155, 201, .12), transparent 29rem),
        var(--bg);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { border: 0; cursor: pointer; }
    img { max-width: 100%; display: block; }
    ::selection { color: #fff; background: var(--primary); }
    :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

    .site-shell { position: relative; overflow: hidden; }
    .container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
    .section { padding: 94px 0; position: relative; }
    .section-tight { padding: 70px 0; }

    .noise {
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 50;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)' opacity='.8'/%3E%3C/svg%3E");
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid rgba(210, 218, 255, .1);
      background: rgba(7, 9, 22, .78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .header-inner {
      height: 76px;
      display: grid;
      grid-template-columns: minmax(225px, 1fr) auto minmax(225px, 1fr);
      align-items: center;
      gap: 22px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      gap: 10px;
      transition: transform .25s ease;
    }
    .brand:hover { transform: translateY(-1px); }
    .brand-mark {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      border-radius: 13px;
      background: linear-gradient(135deg, #b99aff, #7350e9 58%, #3cd5fa);
      box-shadow: 0 8px 25px rgba(126, 86, 239, .38);
    }
    .brand-copy { min-width: 0; line-height: 1.2; }
    .brand-title {
      display: block;
      overflow: hidden;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .02em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .brand-sub {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .09em;
    }

    .main-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 76px;
    }
    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 76px;
      padding: 0 18px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: color .2s ease;
    }
    .nav-link::after {
      position: absolute;
      right: 18px;
      bottom: 0;
      left: 18px;
      height: 2px;
      border-radius: 4px;
      background: var(--cyan);
      content: "";
      opacity: 0;
      transform: scaleX(.4);
      transition: opacity .2s ease, transform .2s ease;
    }
    .nav-link:hover, .nav-link.active { color: #fff; }
    .nav-link:hover::after, .nav-link.active::after { opacity: 1; transform: scaleX(1); }

    .header-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .search-mini {
      width: 170px;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.035);
      transition: border-color .2s ease, background .2s ease, width .25s ease;
    }
    .search-mini:focus-within {
      width: 195px;
      border-color: rgba(66, 217, 255, .55);
      background: rgba(66, 217, 255, .06);
    }
    .search-mini svg { flex: 0 0 17px; }
    .search-mini input {
      width: 100%;
      min-width: 0;
      color: #fff;
      outline: 0;
      border: 0;
      background: transparent;
      font-size: 13px;
    }
    .search-mini input::placeholder { color: #8792b6; }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      place-items: center;
      color: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.04);
    }

    .hero { padding: 46px 0 42px; position: relative; }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      min-height: 540px;
      overflow: hidden;
      border: 1px solid rgba(203, 207, 255, .14);
      border-radius: var(--radius-lg);
      background: linear-gradient(110deg, rgba(19, 23, 50, .96), rgba(12, 15, 34, .9));
      box-shadow: var(--shadow);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 70px 48px 64px 62px;
    }
    .hero-content::before {
      position: absolute;
      top: -90px;
      left: -100px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(139, 92, 246, .17);
      filter: blur(20px);
      content: "";
    }
    .eyebrow {
      position: relative;
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      padding: 7px 11px;
      color: #d9caff;
      border: 1px solid rgba(183, 149, 255, .28);
      border-radius: 999px;
      background: rgba(139, 92, 246, .1);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .eyebrow i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 4px rgba(66,217,255,.12);
    }
    h1 {
      position: relative;
      max-width: 680px;
      margin: 21px 0 18px;
      font-size: clamp(35px, 4vw, 58px);
      font-weight: 900;
      letter-spacing: -.055em;
      line-height: 1.15;
    }
    .hero-title-gradient {
      color: transparent;
      background: linear-gradient(100deg, #fff 10%, #ded2ff 53%, #8cecff);
      background-clip: text;
      -webkit-background-clip: text;
    }
    .hero-desc {
      position: relative;
      max-width: 570px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.9;
    }
    .hero-actions {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-top: 31px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 48px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 800;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: #fff;
      background: linear-gradient(120deg, #8c5df5, #6c4ce1);
      box-shadow: 0 10px 25px rgba(111, 75, 228, .3);
    }
    .btn-primary:hover { box-shadow: 0 15px 34px rgba(111, 75, 228, .48); }
    .btn-ghost {
      color: #e8ebff;
      border-color: var(--line);
      background: rgba(255,255,255,.045);
    }
    .btn-ghost:hover { border-color: rgba(66,217,255,.5); background: rgba(66,217,255,.08); }
    .hero-meta {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 17px;
      margin-top: 31px;
      color: #8994b6;
      font-size: 12px;
    }
    .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
    .hero-meta strong { color: #dfe5ff; font-weight: 800; }
    .hero-meta svg { color: var(--cyan); }

    .hero-art {
      position: relative;
      min-height: 540px;
      overflow: hidden;
      border-left: 1px solid rgba(203, 207, 255, .1);
      background:
        linear-gradient(180deg, rgba(7,9,22,.05), rgba(7,9,22,.8)),
        radial-gradient(circle at 67% 20%, rgba(63, 216, 255, .37), transparent 22%),
        radial-gradient(circle at 28% 65%, rgba(181, 102, 255, .45), transparent 30%),
        linear-gradient(138deg, #303062, #181d40 55%, #0d1024);
    }
    .hero-art::before {
      position: absolute;
      inset: 0;
      opacity: .3;
      background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, #000, transparent);
      content: "";
    }
    .planet {
      position: absolute;
      top: 75px;
      right: 30px;
      width: 280px;
      height: 280px;
      border: 1px solid rgba(189, 224, 255, .35);
      border-radius: 50%;
      background: radial-gradient(circle at 33% 28%, #eddaff, #a976e8 35%, #3d3b93 63%, #161a47 73%);
      box-shadow: inset -35px -29px 50px rgba(7, 8, 33, .65), 0 0 70px rgba(90, 117, 255, .27);
    }
    .planet::before, .planet::after {
      position: absolute;
      border: 1px solid rgba(155, 237, 255, .5);
      border-radius: 50%;
      content: "";
    }
    .planet::before { inset: -27px 19px; transform: rotate(-25deg); }
    .planet::after { inset: 39px -40px; transform: rotate(-25deg); opacity: .55; }
    .orb {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(130deg, #fff, #61d9ff 45%, #7554e8);
      box-shadow: 0 0 25px rgba(96,218,255,.6);
    }
    .orb-one { top: 79px; left: 18%; width: 16px; height: 16px; }
    .orb-two { top: 215px; left: 11%; width: 9px; height: 9px; }
    .orb-three { right: 13%; bottom: 118px; width: 12px; height: 12px; }
    .art-copy {
      position: absolute;
      right: 31px;
      bottom: 30px;
      left: 31px;
      padding: 20px;
      border: 1px solid rgba(235,239,255,.18);
      border-radius: 18px;
      background: rgba(8,10,29,.56);
      backdrop-filter: blur(12px);
    }
    .art-copy small { display: block; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
    .art-copy strong { display: block; margin-top: 6px; font-size: 18px; letter-spacing: .01em; }
    .art-copy p { margin: 4px 0 0; color: #b4bdd9; font-size: 12px; }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 33px;
    }
    .section-kicker {
      margin: 0 0 8px;
      color: var(--cyan);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
    }
    .section-title {
      margin: 0;
      color: #f8f8ff;
      font-size: clamp(27px, 3vw, 38px);
      font-weight: 900;
      letter-spacing: -.045em;
      line-height: 1.2;
    }
    .section-desc {
      max-width: 390px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      text-align: right;
    }

    .channel-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    .channel-card {
      position: relative;
      min-height: 168px;
      overflow: hidden;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .channel-card:hover {
      z-index: 1;
      border-color: rgba(137, 100, 246, .58);
      box-shadow: var(--shadow-hover);
      transform: translateY(-5px);
    }
    .channel-card::before {
      position: absolute;
      right: -30px;
      bottom: -35px;
      width: 125px;
      height: 125px;
      border-radius: 44px;
      background: var(--card-color, #7256e9);
      content: "";
      filter: blur(1px);
      opacity: .85;
      transform: rotate(28deg);
    }
    .channel-card::after {
      position: absolute;
      right: 14px;
      bottom: 13px;
      width: 74px;
      height: 74px;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 50%;
      content: "";
    }
    .channel-icon {
      position: relative;
      z-index: 1;
      width: 39px;
      height: 39px;
      display: grid;
      place-items: center;
      color: #fff;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      background: rgba(10,12,32,.22);
    }
    .channel-card h3 { position: relative; z-index: 1; margin: 24px 0 2px; font-size: 18px; font-weight: 800; }
    .channel-card p { position: relative; z-index: 1; margin: 0; color: #ccd3ed; font-size: 12px; }

    .feature-layout {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 22px;
      align-items: stretch;
    }
    .spotlight {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      padding: 31px;
      border: 1px solid rgba(173, 151, 255, .3);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, transparent 24%, rgba(8,9,25,.94) 100%),
        radial-gradient(circle at 66% 25%, #e3b1ff 0, #a464e7 16%, #4f3aaf 35%, transparent 55%),
        linear-gradient(145deg, #27376f, #171837 58%, #111329);
      box-shadow: var(--shadow);
    }
    .spotlight::after {
      position: absolute;
      top: -30%;
      right: -32%;
      width: 86%;
      height: 110%;
      border: 1px solid rgba(223,226,255,.26);
      border-radius: 46% 54% 58% 42%;
      content: "";
      transform: rotate(-25deg);
    }
    .spotlight-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      color: #e9deff;
      border: 1px solid rgba(224,194,255,.26);
      border-radius: 999px;
      background: rgba(91, 61, 158, .34);
      font-size: 11px;
      font-weight: 800;
    }
    .badge-hot { color: #fff1d3; border-color: rgba(255,201,107,.35); background: rgba(255,174,65,.14); }
    .spotlight-bottom { position: absolute; z-index: 2; right: 31px; bottom: 30px; left: 31px; }
    .spotlight-bottom h3 { margin: 0; font-size: clamp(25px, 3vw, 34px); font-weight: 900; letter-spacing: -.04em; }
    .spotlight-bottom p { max-width: 440px; margin: 8px 0 18px; color: #c5ccea; font-size: 14px; }
    .meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .meta-chip {
      padding: 4px 9px;
      color: #d4daf1;
      border: 1px solid rgba(221,225,255,.16);
      border-radius: 7px;
      background: rgba(4,5,20,.3);
      font-size: 11px;
    }

    .reading-list { display: grid; gap: 12px; }
    .reading-item {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      align-items: center;
      gap: 17px;
      min-height: 98px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(18, 22, 46, .78);
      transition: transform .22s ease, background .22s ease, border-color .22s ease;
    }
    .reading-item:hover {
      border-color: rgba(66,217,255,.38);
      background: var(--surface-light);
      transform: translateX(5px);
    }
    .cover {
      position: relative;
      width: 92px;
      height: 72px;
      overflow: hidden;
      border-radius: 11px;
      background: var(--cover, linear-gradient(130deg,#6046dd,#e36fb7));
    }
    .cover::before {
      position: absolute;
      right: -3px;
      bottom: -22px;
      width: 63px;
      height: 83px;
      border: 2px solid rgba(255,255,255,.45);
      border-radius: 48% 48% 15px 15px;
      content: "";
      transform: rotate(-15deg);
    }
    .cover::after {
      position: absolute;
      top: 11px;
      left: 13px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.74);
      content: "";
      mix-blend-mode: overlay;
    }
    .reading-copy { min-width: 0; }
    .reading-copy h3 { overflow: hidden; margin: 0 0 5px; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .reading-copy p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .reading-action {
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      color: var(--cyan);
      border: 1px solid rgba(66,217,255,.24);
      border-radius: 10px;
      background: rgba(66,217,255,.07);
      transition: color .2s ease, background .2s ease;
    }
    .reading-item:hover .reading-action { color: #fff; background: var(--primary); }

    .stats-wrap {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(100deg, rgba(21,27,57,.93), rgba(13,16,37,.9));
    }
    .stats-intro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding: 29px 33px;
      border-bottom: 1px solid var(--line);
    }
    .stats-intro h2 { margin: 0; font-size: 23px; font-weight: 900; }
    .stats-intro p { max-width: 540px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .stat-card { min-height: 146px; padding: 26px 30px; border-right: 1px solid var(--line); }
    .stat-card:last-child { border-right: 0; }
    .stat-num { display: block; color: #fff; font-size: 32px; font-weight: 900; letter-spacing: -.05em; line-height: 1.1; }
    .stat-num em { margin-left: 2px; color: var(--cyan); font-size: 15px; font-style: normal; }
    .stat-card p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }

    .timeline {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .step {
      position: relative;
      min-height: 193px;
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(16,20,42,.75);
      transition: border-color .22s ease, transform .22s ease;
    }
    .step:hover { border-color: rgba(139,92,246,.55); transform: translateY(-4px); }
    .step-no { display: block; color: var(--primary-light); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
    .step h3 { margin: 15px 0 8px; font-size: 18px; font-weight: 800; }
    .step p { margin: 0; color: var(--muted); font-size: 13px; }
    .step-line {
      position: absolute;
      top: 38px;
      right: -18px;
      z-index: 2;
      width: 18px;
      border-top: 1px dashed rgba(178,161,255,.5);
    }

    .rank-layout {
      display: grid;
      grid-template-columns: 1.13fr .87fr;
      gap: 22px;
      align-items: start;
    }
    .rank-board, .notice-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(16,20,42,.8);
    }
    .rank-board { overflow: hidden; }
    .rank-top { display: flex; justify-content: space-between; align-items: center; padding: 21px 23px; border-bottom: 1px solid var(--line); }
    .rank-top h3 { margin: 0; font-size: 17px; font-weight: 800; }
    .rank-top span { color: var(--cyan); font-size: 12px; }
    .rank-row {
      display: grid;
      grid-template-columns: 35px 1fr auto;
      align-items: center;
      gap: 12px;
      min-height: 65px;
      padding: 0 23px;
      border-bottom: 1px solid rgba(185,198,255,.08);
      transition: background .2s ease;
    }
    .rank-row:last-child { border-bottom: 0; }
    .rank-row:hover { background: rgba(255,255,255,.035); }
    .rank-no { color: #7884a9; font-weight: 900; font-size: 15px; font-style: italic; }
    .rank-row:nth-child(2) .rank-no { color: var(--gold); }
    .rank-row:nth-child(3) .rank-no { color: #d1d8e8; }
    .rank-row:nth-child(4) .rank-no { color: #e8a37b; }
    .rank-name { font-size: 14px; font-weight: 700; }
    .rank-heat { color: var(--muted); font-size: 12px; }
    .notice-card { padding: 27px; }
    .notice-icon {
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      color: var(--cyan);
      border: 1px solid rgba(66,217,255,.23);
      border-radius: 14px;
      background: rgba(66,217,255,.08);
    }
    .notice-card h3 { margin: 18px 0 8px; font-size: 22px; font-weight: 900; }
    .notice-card > p { margin: 0; color: var(--muted); font-size: 14px; }
    .notice-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
    .notice-list li { display: flex; gap: 10px; color: #d4daf0; font-size: 13px; }
    .notice-list svg { flex: 0 0 17px; margin-top: 3px; color: var(--success); }

    .faq-layout {
      display: grid;
      grid-template-columns: .77fr 1.23fr;
      gap: 58px;
      align-items: start;
    }
    .faq-side { position: sticky; top: 104px; }
    .faq-side p { margin: 17px 0 0; color: var(--muted); font-size: 14px; }
    .faq-hint {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 25px;
      padding: 14px;
      color: #cfd7f1;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.03);
      font-size: 12px;
    }
    .faq-hint span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; color: var(--cyan); border-radius: 9px; background: rgba(66,217,255,.1); }
    .faq-list { display: grid; gap: 11px; }
    .faq-item {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(16,20,42,.8);
      transition: border-color .2s ease, background .2s ease;
    }
    .faq-item.active { border-color: rgba(139,92,246,.5); background: rgba(30,28,62,.82); }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 19px 20px;
      color: #f4f5ff;
      background: transparent;
      text-align: left;
      font-size: 15px;
      font-weight: 800;
    }
    .faq-plus {
      position: relative;
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      color: var(--cyan);
      transition: transform .25s ease;
    }
    .faq-plus::before, .faq-plus::after {
      position: absolute;
      top: 10px;
      left: 3px;
      width: 16px;
      height: 2px;
      border-radius: 3px;
      background: currentColor;
      content: "";
    }
    .faq-plus::after { transform: rotate(90deg); transition: transform .25s ease; }
    .faq-item.active .faq-plus { transform: rotate(45deg); }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
    .faq-answer > div { overflow: hidden; }
    .faq-answer p { margin: 0; padding: 0 20px 19px; color: var(--muted); font-size: 13px; }
    .faq-item.active .faq-answer { grid-template-rows: 1fr; }

    .cta-box {
      position: relative;
      overflow: hidden;
      padding: 55px 60px;
      border: 1px solid rgba(164,139,255,.35);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 89% 8%, rgba(66,217,255,.26), transparent 22%),
        radial-gradient(circle at 10% 100%, rgba(139,92,246,.37), transparent 30%),
        linear-gradient(130deg, #171440, #151a3c 53%, #0b112c);
      box-shadow: var(--shadow);
    }
    .cta-box::before {
      position: absolute;
      top: -120px;
      right: 7%;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(210,211,255,.19);
      border-radius: 50%;
      content: "";
    }
    .cta-box::after {
      position: absolute;
      right: 12%;
      bottom: -93px;
      width: 170px;
      height: 170px;
      border: 1px solid rgba(210,211,255,.17);
      border-radius: 50%;
      content: "";
    }
    .cta-content { position: relative; z-index: 1; max-width: 700px; }
    .cta-content h2 { margin: 12px 0; font-size: clamp(30px, 4vw, 45px); font-weight: 900; letter-spacing: -.055em; line-height: 1.2; }
    .cta-content p { max-width: 620px; margin: 0; color: #c3cbe4; font-size: 15px; }
    .cta-box .hero-actions { margin-top: 25px; }

    .footer {
      margin-top: 94px;
      border-top: 1px solid var(--line);
      background: var(--bg-deep);
    }
    .footer-main {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 35px;
      padding: 51px 0 35px;
    }
    .footer-brand .brand { max-width: 100%; }
    .footer-brand p { max-width: 500px; margin: 15px 0 0; color: var(--muted); font-size: 13px; }
    .footer-info { display: flex; justify-content: flex-end; align-items: flex-start; gap: 35px; }
    .footer-info-block span { display: block; color: #7e89aa; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
    .footer-info-block strong { display: block; margin-top: 7px; color: #dce2f5; font-size: 13px; font-weight: 700; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 19px 0 26px;
      color: #717c9d;
      border-top: 1px solid rgba(185,198,255,.08);
      font-size: 12px;
    }
    .footer-bottom a { color: #9ba6c9; transition: color .2s ease; }
    .footer-bottom a:hover { color: var(--cyan); }

    @media (max-width: 1024px) {
      .header-inner { grid-template-columns: 1fr auto; }
      .main-nav { display: none; }
      .header-tools { gap: 8px; }
      .hero-content { padding: 58px 37px; }
      .channel-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-layout { grid-template-columns: 1fr; }
      .spotlight { min-height: 370px; }
      .faq-layout { gap: 35px; }
    }

    @media (max-width: 768px) {
      .container { width: min(100% - 32px, 1180px); }
      .section { padding: 68px 0; }
      .section-tight { padding: 51px 0; }
      .header-inner { height: 68px; }
      .search-mini { display: none; }
      .menu-toggle { display: grid; }
      .mobile-nav {
        display: none;
        padding: 0 16px 14px;
      }
      .mobile-nav.open { display: block; }
      .mobile-nav a {
        display: block;
        padding: 13px 14px;
        color: var(--muted);
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255,255,255,.035);
        font-size: 14px;
        font-weight: 700;
      }
      .hero { padding-top: 24px; }
      .hero-grid { grid-template-columns: 1fr; min-height: 0; }
      .hero-content { min-height: 455px; padding: 48px 31px; }
      .hero-art { min-height: 355px; border-top: 1px solid rgba(203,207,255,.1); border-left: 0; }
      .planet { top: 32px; right: 20%; width: 215px; height: 215px; }
      .section-head { display: block; margin-bottom: 25px; }
      .section-desc { margin-top: 12px; text-align: left; }
      .stats-intro { display: block; padding: 25px; }
      .stats-intro p { margin-top: 9px; text-align: left; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat-card:nth-child(2) { border-right: 0; }
      .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .timeline { grid-template-columns: 1fr; }
      .step-line { top: auto; right: auto; bottom: -18px; left: 39px; width: 1px; height: 18px; border-top: 0; border-left: 1px dashed rgba(178,161,255,.5); }
      .rank-layout, .faq-layout { grid-template-columns: 1fr; }
      .faq-side { position: static; }
      .cta-box { padding: 42px 32px; }
      .footer { margin-top: 68px; }
      .footer-main { grid-template-columns: 1fr; padding: 41px 0 28px; }
      .footer-info { justify-content: flex-start; }
    }

    @media (max-width: 520px) {
      .brand-title { max-width: 205px; font-size: 13px; }
      .brand-sub { display: none; }
      .hero-content { min-height: 458px; padding: 39px 23px; }
      h1 { font-size: 34px; letter-spacing: -.06em; }
      .hero-desc { font-size: 14px; }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .hero-actions .btn { width: 100%; }
      .hero-meta { gap: 10px; }
      .hero-art { min-height: 300px; }
      .planet { right: 17%; width: 185px; height: 185px; }
      .art-copy { right: 17px; bottom: 17px; left: 17px; padding: 15px; }
      .channel-grid { grid-template-columns: 1fr; }
      .channel-card { min-height: 142px; }
      .reading-item { grid-template-columns: 72px 1fr; gap: 12px; }
      .cover { width: 72px; height: 65px; }
      .reading-action { display: none; }
      .stats-grid { grid-template-columns: 1fr; }
      .stat-card, .stat-card:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .stat-card:last-child { border-bottom: 0; }
      .spotlight { min-height: 350px; padding: 22px; }
      .spotlight-bottom { right: 22px; bottom: 22px; left: 22px; }
      .rank-row { padding: 0 16px; }
      .notice-card { padding: 22px; }
      .cta-box { padding: 35px 23px; }
      .cta-content h2 { font-size: 31px; }
      .footer-info { display: grid; grid-template-columns: 1fr; gap: 17px; }
      .footer-bottom { display: block; line-height: 1.9; }
    }