/* roulang page: index */
:root {
      --bg: #0f0d16;
      --bg-soft: #171520;
      --bg-card: rgba(255,255,255,.075);
      --bg-card-strong: rgba(255,255,255,.11);
      --text: #f8f5ff;
      --text-muted: #bbb4cc;
      --text-soft: #8f879e;
      --primary: #a78bfa;
      --primary-2: #f0abfc;
      --primary-3: #67e8f9;
      --gold: #fde68a;
      --green: #86efac;
      --danger: #fb7185;
      --line: rgba(255,255,255,.13);
      --line-strong: rgba(255,255,255,.22);
      --shadow: 0 24px 80px rgba(0,0,0,.42);
      --shadow-soft: 0 14px 40px rgba(0,0,0,.28);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1180px;
      --header-h: 128px;
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      text-size-adjust: 100%;
    }

    body {
      min-height: 100vh;
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      line-height: 1.72;
      background:
        radial-gradient(circle at 16% 0%, rgba(167,139,250,.26), transparent 32rem),
        radial-gradient(circle at 88% 14%, rgba(103,232,249,.15), transparent 28rem),
        linear-gradient(180deg, #11101a 0%, #0f0d16 44%, #15121d 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: .28;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }

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

    button, input, textarea, select {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
      background: none;
      color: inherit;
    }

    input, textarea {
      width: 100%;
      color: var(--text);
      background: rgba(255,255,255,.08);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      outline: none;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }

    input:focus, textarea:focus, button:focus-visible, a:focus-visible {
      outline: 3px solid rgba(103,232,249,.34);
      outline-offset: 3px;
    }

    input:focus, textarea:focus {
      border-color: rgba(103,232,249,.7);
      box-shadow: 0 0 0 5px rgba(103,232,249,.10);
      background: rgba(255,255,255,.11);
    }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(15,13,22,.78);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
    }

    .brand-row {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 14px 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
    }

    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: -.08em;
      color: #160c28;
      background:
        radial-gradient(circle at 28% 22%, #fff 0 9%, transparent 10%),
        linear-gradient(135deg, var(--gold), var(--primary-2) 48%, var(--primary-3));
      box-shadow: 0 14px 34px rgba(240,171,252,.32);
    }

    .brand-name {
      display: block;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 850;
      letter-spacing: -.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 430px;
    }

    .brand-sub {
      display: block;
      margin-top: 3px;
      color: var(--text-soft);
      font-size: 12px;
      white-space: nowrap;
    }

    .header-tools {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      justify-content: flex-end;
      min-width: 280px;
    }

    .search-box {
      position: relative;
      width: min(360px, 100%);
    }

    .search-box input {
      height: 42px;
      padding: 0 42px 0 16px;
      border-radius: 999px;
    }

    .search-box span {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-soft);
      font-size: 15px;
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.07);
    }

    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      border-radius: 999px;
      background: var(--text);
      transition: transform .25s var(--ease), opacity .25s var(--ease);
    }

    .channel-row {
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .channel-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 52px;
    }

    .channel-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
    }

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

    .channel-nav a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 7px 16px;
      border-radius: 999px;
      color: var(--text-muted);
      border: 1px solid transparent;
      white-space: nowrap;
      font-weight: 700;
      font-size: 14px;
    }

    .channel-nav a:hover {
      color: var(--text);
      background: rgba(255,255,255,.08);
      border-color: var(--line);
    }

    .channel-nav a.active {
      color: #16101f;
      background: linear-gradient(135deg, var(--gold), var(--primary-2));
      box-shadow: 0 10px 22px rgba(240,171,252,.18);
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      color: var(--text-muted);
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line);
      white-space: nowrap;
      font-size: 13px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 6px rgba(134,239,172,.12);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: -.01em;
      border: 1px solid transparent;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
      user-select: none;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn:active {
      transform: translateY(0) scale(.98);
    }

    .btn-primary {
      color: #160f21;
      background: linear-gradient(135deg, #fff0b8, var(--primary-2) 55%, #9deef8);
      box-shadow: 0 16px 36px rgba(240,171,252,.30);
    }

    .btn-primary:hover {
      box-shadow: 0 20px 44px rgba(103,232,249,.24);
    }

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

    .btn-ghost:hover {
      background: rgba(255,255,255,.13);
      border-color: var(--line-strong);
      box-shadow: 0 14px 30px rgba(0,0,0,.16);
    }

    .btn-dark {
      color: var(--text);
      background: #15121d;
      border-color: rgba(255,255,255,.12);
    }

    .section {
      padding: 88px 0;
      position: relative;
    }

    .section-tight {
      padding: 66px 0;
    }

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

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px;
      color: var(--primary-3);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .section-kicker::before {
      content: "";
      width: 24px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary-3), var(--primary-2));
    }

    .section-title {
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.12;
      letter-spacing: -.045em;
      font-weight: 900;
    }

    .section-desc {
      max-width: 610px;
      color: var(--text-muted);
      font-size: 16px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.07);
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .hero {
      min-height: calc(100vh - var(--header-h));
      display: grid;
      align-items: center;
      padding: 96px 0 78px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .hero-video-mask {
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(180deg, rgba(15,13,22,.48), rgba(15,13,22,.92) 76%, #0f0d16 100%),
        radial-gradient(circle at 50% 36%, rgba(240,171,252,.24), transparent 30rem),
        linear-gradient(135deg, rgba(103,232,249,.18), transparent 36%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%232b2040'/%3E%3Cstop offset='.48' stop-color='%23140f20'/%3E%3Cstop offset='1' stop-color='%233b1c49'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(/%23g)'/%3E%3Cg opacity='.32'%3E%3Ccircle cx='280' cy='190' r='160' fill='%23a78bfa'/%3E%3Ccircle cx='1180' cy='270' r='210' fill='%2367e8f9'/%3E%3Ccircle cx='820' cy='610' r='260' fill='%23f0abfc'/%3E%3C/g%3E%3Cg opacity='.12' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M80 690 C320 520 510 770 760 594 S1230 390 1510 540'/%3E%3Cpath d='M120 240 C340 130 520 310 700 225 S1040 60 1400 170'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      transform: scale(1.03);
      animation: heroDrift 15s ease-in-out infinite alternate;
    }

    .hero-video-mask::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
    }

    @keyframes heroDrift {
      from { transform: scale(1.03) translate3d(0,0,0); }
      to { transform: scale(1.08) translate3d(-18px, 10px,0); }
    }

    .hero-content {
      text-align: center;
      max-width: 980px;
      margin: 0 auto;
      position: relative;
    }

    .play-button {
      width: 86px;
      height: 86px;
      margin: 0 auto 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #1b1025;
      background: linear-gradient(135deg, #ffffff, var(--gold) 34%, var(--primary-2));
      box-shadow: 0 0 0 18px rgba(255,255,255,.08), 0 30px 70px rgba(240,171,252,.38);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    }

    .play-button:hover {
      transform: scale(1.06);
      box-shadow: 0 0 0 22px rgba(255,255,255,.10), 0 34px 82px rgba(103,232,249,.28);
    }

    .play-button .triangle {
      width: 0;
      height: 0;
      margin-left: 6px;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      border-left: 22px solid #1b1025;
    }

    .hero h1 {
      font-size: clamp(42px, 7.8vw, 86px);
      line-height: .98;
      letter-spacing: -.075em;
      font-weight: 950;
      max-width: 1060px;
      margin: 0 auto;
      text-wrap: balance;
    }

    .hero h1 .shine {
      background: linear-gradient(135deg, #fff, #fff0b8 32%, #f0abfc 66%, #91f3ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-lead {
      max-width: 790px;
      margin: 24px auto 0;
      color: #ddd6ee;
      font-size: clamp(17px, 2vw, 20px);
    }

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

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 44px auto 0;
      max-width: 890px;
    }

    .metric {
      padding: 18px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.075);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow-soft);
    }

    .metric strong {
      display: block;
      font-size: 26px;
      line-height: 1.1;
      letter-spacing: -.04em;
    }

    .metric span {
      display: block;
      margin-top: 6px;
      color: var(--text-muted);
      font-size: 13px;
    }

    .scroll-note {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 36px;
      color: var(--text-soft);
      font-size: 13px;
    }

    .scroll-note i {
      width: 28px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      position: relative;
    }

    .scroll-note i::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      width: 4px;
      height: 8px;
      border-radius: 999px;
      background: var(--primary-3);
      transform: translateX(-50%);
      animation: wheel 1.8s ease-in-out infinite;
    }

    @keyframes wheel {
      0%, 100% { transform: translate(-50%,0); opacity: .4; }
      50% { transform: translate(-50%,10px); opacity: 1; }
    }

    .commission-wrap {
      display: grid;
      grid-template-columns: .9fr 1.35fr;
      gap: 24px;
      align-items: stretch;
    }

    .feature-panel, .card {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(16px);
    }

    .commission-main {
      padding: 32px;
      overflow: hidden;
      position: relative;
    }

    .commission-main::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      right: -70px;
      bottom: -80px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(253,230,138,.24), transparent 68%);
    }

    .commission-main .rate {
      font-size: clamp(44px, 6vw, 72px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.07em;
      margin: 18px 0 8px;
      color: var(--gold);
    }

    .commission-main p {
      color: var(--text-muted);
      position: relative;
      z-index: 1;
    }

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

    .mini-card {
      padding: 22px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.066);
      transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
    }

    .mini-card:hover {
      transform: translateY(-4px);
      border-color: rgba(240,171,252,.35);
      background: rgba(255,255,255,.10);
    }

    .mini-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      margin-bottom: 16px;
      color: #17101d;
      font-weight: 900;
      background: linear-gradient(135deg, var(--primary-3), var(--primary-2));
    }

    .mini-card h3, .material-card h3, .bento-card h3, .scenario-card h3, .case-card h3, .plan h3 {
      font-size: 18px;
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .mini-card p, .material-card p, .bento-card p, .scenario-card p, .case-card p, .plan p {
      color: var(--text-muted);
      font-size: 14px;
    }

    .materials {
      display: grid;
      grid-template-columns: .95fr 1.15fr;
      gap: 26px;
      align-items: center;
    }

    .material-note {
      padding: 30px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(167,139,250,.18), rgba(103,232,249,.08)),
        rgba(255,255,255,.05);
      border: 1px solid var(--line);
    }

    .check-list {
      list-style: none;
      margin-top: 22px;
      display: grid;
      gap: 12px;
    }

    .check-list li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      color: #e8e1f4;
    }

    .check-list li::before {
      content: "✓";
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #11101a;
      background: var(--green);
      font-size: 13px;
      font-weight: 900;
      margin-top: 3px;
    }

    .material-stack {
      display: grid;
      gap: 15px;
    }

    .material-card {
      display: grid;
      grid-template-columns: 76px 1fr auto;
      gap: 17px;
      align-items: center;
      padding: 18px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.07);
      transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
    }

    .material-card:nth-child(2) {
      transform: translateX(20px);
    }

    .material-card:hover {
      transform: translateY(-3px);
      border-color: rgba(103,232,249,.38);
      box-shadow: 0 18px 44px rgba(0,0,0,.22);
    }

    .material-card:nth-child(2):hover {
      transform: translate(20px, -3px);
    }

    .material-thumb {
      height: 62px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 13%),
        linear-gradient(135deg, rgba(253,230,138,.9), rgba(240,171,252,.8), rgba(103,232,249,.72));
      position: relative;
      overflow: hidden;
    }

    .material-thumb::after {
      content: "";
      position: absolute;
      inset: 15px 12px;
      border-radius: 12px;
      border: 1px solid rgba(20,15,28,.22);
      background: rgba(20,15,28,.14);
    }

    .arrow-link {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.09);
      border: 1px solid var(--line);
      color: var(--primary-3);
      font-weight: 900;
    }

    .material-card:hover .arrow-link {
      background: rgba(103,232,249,.18);
      color: #fff;
    }

    .bento {
      display: grid;
      grid-template-columns: 1.15fr .85fr 1fr;
      grid-auto-rows: minmax(176px, auto);
      gap: 16px;
    }

    .bento-card {
      padding: 24px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.065);
      position: relative;
      overflow: hidden;
      transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
    }

    .bento-card:hover {
      transform: translateY(-4px);
      border-color: rgba(167,139,250,.36);
      background: rgba(255,255,255,.10);
    }

    .bento-card.large {
      grid-row: span 2;
      background:
        radial-gradient(circle at 20% 15%, rgba(240,171,252,.20), transparent 38%),
        rgba(255,255,255,.07);
    }

    .bento-card.wide {
      grid-column: span 2;
    }

    .bento-visual {
      margin-top: 26px;
      height: 190px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 28px);
      position: relative;
      overflow: hidden;
    }

    .subtitle-line {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      padding: 12px 16px;
      text-align: center;
      border-radius: 14px;
      color: #fff;
      background: rgba(0,0,0,.54);
      font-weight: 800;
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
    }

    .signal-bars {
      display: flex;
      align-items: end;
      gap: 8px;
      height: 86px;
      margin-top: 24px;
    }

    .signal-bars i {
      flex: 1;
      min-width: 14px;
      border-radius: 999px 999px 8px 8px;
      background: linear-gradient(180deg, var(--primary-3), var(--primary-2));
      opacity: .92;
    }

    .signal-bars i:nth-child(1){ height: 38%; }
    .signal-bars i:nth-child(2){ height: 62%; }
    .signal-bars i:nth-child(3){ height: 82%; }
    .signal-bars i:nth-child(4){ height: 56%; }
    .signal-bars i:nth-child(5){ height: 74%; }

    .scenario-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }

    .scenario-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.065);
      min-height: 238px;
      position: relative;
      overflow: hidden;
    }

    .scenario-card::before {
      content: attr(data-step);
      position: absolute;
      right: 24px;
      top: 18px;
      font-size: 56px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.08em;
      color: rgba(255,255,255,.07);
    }

    .scenario-card:nth-child(2), .scenario-card:nth-child(3) {
      margin-top: 34px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .status-board {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow-soft);
    }

    .status-top {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }

    .kpi {
      padding: 22px;
      border-right: 1px solid var(--line);
    }

    .kpi:last-child {
      border-right: 0;
    }

    .kpi strong {
      display: block;
      font-size: 28px;
      line-height: 1;
      letter-spacing: -.05em;
    }

    .kpi span {
      display: block;
      margin-top: 8px;
      color: var(--text-soft);
      font-size: 13px;
    }

    .status-row {
      display: grid;
      grid-template-columns: 130px 1fr 160px 120px;
      gap: 14px;
      align-items: center;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,.09);
      color: var(--text-muted);
    }

    .status-row:last-child {
      border-bottom: 0;
    }

    .status-row b {
      color: var(--text);
    }

    .status-row .state {
      justify-self: start;
      padding: 5px 10px;
      border-radius: 999px;
      color: #102013;
      background: var(--green);
      font-weight: 850;
      font-size: 12px;
    }

    .case-strip {
      display: grid;
      grid-template-columns: 1fr 1.2fr .85fr;
      gap: 18px;
      align-items: stretch;
    }

    .case-card {
      padding: 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.065);
      position: relative;
      overflow: hidden;
    }

    .case-card.featured {
      background:
        radial-gradient(circle at 80% 10%, rgba(103,232,249,.18), transparent 36%),
        linear-gradient(135deg, rgba(167,139,250,.16), rgba(255,255,255,.06));
    }

    .case-number {
      display: block;
      margin-bottom: 18px;
      font-size: 42px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.06em;
      color: var(--primary-3);
    }

    .quote {
      margin-top: 20px;
      padding: 18px;
      border-radius: 18px;
      color: #efe9ff;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.08);
    }

    .plans {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .plan {
      padding: 28px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.065);
      position: relative;
      transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
    }

    .plan:hover {
      transform: translateY(-5px);
      border-color: rgba(253,230,138,.34);
      box-shadow: var(--shadow-soft);
    }

    .plan.hot {
      background:
        radial-gradient(circle at 78% 0%, rgba(253,230,138,.20), transparent 34%),
        rgba(255,255,255,.09);
      border-color: rgba(253,230,138,.28);
    }

    .price {
      margin: 20px 0 18px;
      font-size: 38px;
      font-weight: 950;
      letter-spacing: -.06em;
    }

    .price small {
      color: var(--text-soft);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .plan ul {
      list-style: none;
      display: grid;
      gap: 10px;
      margin: 20px 0 24px;
    }

    .plan li {
      color: var(--text-muted);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
    }

    .plan li::before {
      content: "";
      width: 7px;
      height: 7px;
      margin-top: 9px;
      border-radius: 50%;
      background: var(--primary-3);
      box-shadow: 0 0 0 5px rgba(103,232,249,.10);
      flex: 0 0 auto;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 28px;
      align-items: start;
    }

    .faq-card {
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.06);
      position: sticky;
      top: calc(var(--header-h) + 22px);
    }

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

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      padding: 20px 22px;
      text-align: left;
      font-weight: 850;
    }

    .faq-question:hover {
      background: rgba(255,255,255,.06);
    }

    .faq-question i {
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid var(--line);
      position: relative;
      transition: transform .25s var(--ease), background .25s var(--ease);
    }

    .faq-question i::before,
    .faq-question i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 2px;
      border-radius: 999px;
      background: var(--text);
      transform: translate(-50%, -50%);
    }

    .faq-question i::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s var(--ease);
    }

    .faq-answer p {
      padding: 0 22px 20px;
      color: var(--text-muted);
    }

    .faq-item.open .faq-answer {
      max-height: 220px;
    }

    .faq-item.open .faq-question i {
      background: rgba(103,232,249,.18);
      transform: rotate(45deg);
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 22px;
    }

    .news-list, .recommend-box {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.06);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }

    .news-item {
      display: grid;
      grid-template-columns: 120px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 20px 22px;
      border-bottom: 1px solid rgba(255,255,255,.09);
    }

    .news-item:last-child {
      border-bottom: 0;
    }

    .news-item time {
      color: var(--text-soft);
      font-size: 13px;
    }

    .news-item a {
      font-weight: 850;
      line-height: 1.45;
    }

    .news-item a:hover {
      color: var(--primary-3);
    }

    .news-item p {
      margin-top: 5px;
      color: var(--text-muted);
      font-size: 14px;
    }

    .news-type {
      padding: 5px 10px;
      border-radius: 999px;
      color: var(--primary-3);
      background: rgba(103,232,249,.10);
      border: 1px solid rgba(103,232,249,.18);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .recommend-box {
      padding: 24px;
    }

    .recommend-box h3 {
      font-size: 22px;
      margin-bottom: 14px;
    }

    .rank-list {
      list-style: none;
      display: grid;
      gap: 13px;
      margin-top: 20px;
    }

    .rank-list li {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 12px;
      align-items: start;
      padding: 13px;
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.075);
    }

    .rank-list em {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      font-style: normal;
      color: #15101b;
      background: linear-gradient(135deg, var(--gold), var(--primary-2));
      font-weight: 950;
    }

    .rank-list b {
      display: block;
      line-height: 1.35;
    }

    .rank-list span {
      display: block;
      margin-top: 4px;
      color: var(--text-soft);
      font-size: 13px;
    }

    .join {
      padding-bottom: 112px;
    }

    .join-panel {
      display: grid;
      grid-template-columns: 1fr .92fr;
      gap: 26px;
      padding: 34px;
      border-radius: 36px;
      background:
        radial-gradient(circle at 6% 0%, rgba(253,230,138,.18), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(103,232,249,.18), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
      border: 1px solid var(--line-strong);
      box-shadow: var(--shadow);
    }

    .join-copy {
      padding: 12px 8px;
    }

    .join-copy h2 {
      font-size: clamp(32px, 4.6vw, 58px);
      line-height: 1.05;
      letter-spacing: -.06em;
      margin: 12px 0 18px;
    }

    .join-copy p {
      color: var(--text-muted);
      max-width: 620px;
    }

    .join-steps {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .join-step {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.08);
    }

    .join-step span {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 11px;
      color: #130f1c;
      background: var(--primary-3);
      font-weight: 950;
    }

    .join-form {
      padding: 24px;
      border-radius: 28px;
      background: rgba(10,9,15,.48);
      border: 1px solid var(--line);
    }

    .form-grid {
      display: grid;
      gap: 14px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      color: #eee8ff;
      font-size: 13px;
      font-weight: 850;
    }

    .field input,
    .field textarea {
      padding: 13px 14px;
    }

    .field textarea {
      min-height: 112px;
      resize: vertical;
    }

    .form-hint {
      margin: 12px 0 18px;
      color: var(--text-soft);
      font-size: 13px;
    }

    .form-success {
      display: none;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      color: #122013;
      background: var(--green);
      font-weight: 850;
    }

    .floating-cta {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      width: min(calc(100% - 32px), 960px);
      z-index: 45;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 14px 12px 20px;
      border-radius: 999px;
      background: rgba(20,17,29,.86);
      border: 1px solid var(--line-strong);
      box-shadow: 0 18px 60px rgba(0,0,0,.46);
      backdrop-filter: blur(16px);
    }

    .floating-cta p {
      color: var(--text-muted);
      font-size: 14px;
    }

    .floating-cta strong {
      color: var(--text);
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background: rgba(10,9,15,.72);
      padding: 54px 0 92px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 34px;
      align-items: start;
    }

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

    .footer-brand .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 14px;
    }

    .footer-text {
      color: var(--text-muted);
      max-width: 520px;
      font-size: 14px;
    }

    .footer-col h3 {
      font-size: 15px;
      margin-bottom: 14px;
      color: #fff;
    }

    .footer-links {
      list-style: none;
      display: grid;
      gap: 9px;
      color: var(--text-muted);
      font-size: 14px;
    }

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

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 34px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.09);
      color: var(--text-soft);
      font-size: 13px;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: 24px;
      background: rgba(6,5,10,.72);
      backdrop-filter: blur(10px);
    }

    .modal.open {
      display: grid;
    }

    .modal-card {
      width: min(760px, 100%);
      border-radius: 30px;
      background:
        radial-gradient(circle at 18% 0%, rgba(240,171,252,.18), transparent 36%),
        #16131f;
      border: 1px solid var(--line-strong);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .modal-top {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
    }

    .modal-close {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      border: 1px solid var(--line);
    }

    .preview-frame {
      margin: 24px;
      min-height: 260px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      text-align: center;
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 18px);
      border: 1px solid var(--line);
      padding: 28px;
    }

    .preview-frame p {
      max-width: 560px;
      color: var(--text-muted);
      margin: 10px auto 0;
    }

    @media (max-width: 1024px) {
      :root { --header-h: 118px; }
      .brand-name { max-width: 310px; }
      .search-box { width: 280px; }
      .commission-wrap,
      .materials,
      .faq-layout,
      .news-layout,
      .join-panel {
        grid-template-columns: 1fr;
      }
      .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .bento-card.large,
      .bento-card.wide {
        grid-column: span 1;
        grid-row: span 1;
      }
      .case-strip,
      .plans {
        grid-template-columns: 1fr;
      }
      .scenario-layout {
        grid-template-columns: 1fr;
      }
      .scenario-card:nth-child(2), .scenario-card:nth-child(3) {
        margin-top: 0;
      }
      .faq-card {
        position: static;
      }
    }

    @media (max-width: 768px) {
      :root { --header-h: 76px; }
      .container {
        width: min(100% - 28px, var(--container));
      }
      .site-header {
        position: sticky;
      }
      .brand-row {
        min-height: 76px;
      }
      .brand-name {
        max-width: 210px;
        font-size: 16px;
      }
      .brand-sub,
      .search-box,
      .status-pill {
        display: none;
      }
      .menu-toggle {
        display: inline-grid;
        place-items: center;
      }
      .header-tools {
        min-width: auto;
        flex: 0 0 auto;
      }
      .channel-row {
        display: none;
      }
      .site-header.menu-open .channel-row {
        display: block;
      }
      .channel-inner {
        align-items: flex-start;
        padding: 12px 0;
      }
      .channel-nav {
        width: 100%;
      }
      .hero {
        min-height: auto;
        padding: 78px 0 60px;
      }
      .hero-metrics {
        grid-template-columns: 1fr;
      }
      .section {
        padding: 66px 0;
      }
      .section-head {
        display: block;
      }
      .section-desc {
        margin-top: 14px;
      }
      .commission-grid,
      .bento,
      .status-top {
        grid-template-columns: 1fr;
      }
      .kpi {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .kpi:last-child {
        border-bottom: 0;
      }
      .status-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .material-card,
      .news-item {
        grid-template-columns: 1fr;
      }
      .material-card:nth-child(2),
      .material-card:nth-child(2):hover {
        transform: none;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .floating-cta {
        border-radius: 24px;
        align-items: stretch;
        flex-direction: column;
        bottom: 12px;
      }
      .floating-cta .btn {
        width: 100%;
      }
    }

    @media (max-width: 520px) {
      .btn {
        width: 100%;
      }
      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .hero h1 {
        font-size: 40px;
      }
      .play-button {
        width: 74px;
        height: 74px;
      }
      .commission-main,
      .join-panel {
        padding: 22px;
      }
      .join-form {
        padding: 18px;
      }
      .news-item {
        padding: 18px;
      }
      .footer-bottom {
        display: block;
      }
      .footer-bottom span + span {
        display: block;
        margin-top: 8px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }