/* roulang page: index */
:root {
      --color-primary: #8B5CF6;
      --color-primary-2: #9F7AEA;
      --color-primary-3: #B388FF;
      --color-cta: #FF4D6D;
      --color-cta-dark: #F43F5E;
      --color-cream: #FFF3DF;
      --color-warm: #FFE2B8;
      --color-paper: #FAF6EF;
      --color-bg: #FFF8EE;
      --color-text: #241B2F;
      --color-muted: #756A82;
      --color-border: rgba(139, 92, 246, .18);
      --color-border-warm: rgba(255, 226, 184, .78);
      --shadow-soft: 0 18px 50px rgba(95, 54, 160, .12);
      --shadow-hover: 0 22px 60px rgba(95, 54, 160, .18);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-pill: 999px;
      --container: 1200px;
      --nav-height: 76px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
      color: var(--color-text);
      line-height: 1.75;
      background:
        radial-gradient(circle at 12% 8%, rgba(179, 136, 255, .28), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(255, 226, 184, .68), transparent 30%),
        linear-gradient(135deg, #FFF8EE 0%, #F9F0FF 52%, #FFF3DF 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .34;
      background-image:
        radial-gradient(rgba(139, 92, 246, .16) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 48%, transparent 78%);
      background-size: 20px 20px, 100% 100%;
      z-index: -2;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease, opacity .22s ease;
    }

    a:hover {
      color: var(--color-primary);
    }

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

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

    .page-shell {
      position: relative;
      isolation: isolate;
    }

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

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

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: var(--radius-pill);
      color: #5D35B0;
      background: rgba(255, 255, 255, .76);
      border: 1px solid var(--color-border);
      box-shadow: 0 8px 24px rgba(95, 54, 160, .08);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-cta);
      box-shadow: 0 0 0 6px rgba(255, 77, 109, .13);
    }

    .section-title {
      margin: 14px 0 12px;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.22;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--color-text);
    }

    .section-desc {
      max-width: 780px;
      margin: 0;
      color: var(--color-muted);
      font-size: 16px;
    }

    .title-row {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: end;
      margin-bottom: 30px;
    }

    .title-row .section-desc {
      max-width: 520px;
    }

    .brand-nav {
      min-height: var(--nav-height);
      background: rgba(255, 248, 238, .82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(139, 92, 246, .14);
      transition: box-shadow .22s ease, background .22s ease;
      z-index: 1030;
    }

    .brand-nav.is-scrolled {
      background: rgba(255, 248, 238, .96);
      box-shadow: 0 14px 34px rgba(95, 54, 160, .12);
    }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-right: 34px;
      color: var(--color-text);
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: #fff;
      background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.9), transparent 18%),
        linear-gradient(135deg, var(--color-primary), var(--color-cta));
      box-shadow: 0 12px 28px rgba(139, 92, 246, .32);
      font-weight: 900;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .logo-text strong {
      font-size: 18px;
    }

    .logo-text span {
      margin-top: 4px;
      color: var(--color-muted);
      font-size: 12px;
      font-weight: 600;
    }

    .navbar-toggler {
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 9px 11px;
      background: rgba(255,255,255,.65);
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(139, 92, 246, .18);
    }

    .navbar-nav {
      gap: 6px;
    }

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

    .nav-link:hover,
    .nav-link:focus {
      color: var(--color-primary);
      background: rgba(139, 92, 246, .08);
    }

    .nav-link.active {
      color: var(--color-primary);
      background: rgba(139, 92, 246, .12);
    }

    .nav-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: var(--radius-pill);
      background: rgba(255, 77, 109, .1);
      color: #B91C3A;
      border: 1px solid rgba(255, 77, 109, .22);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav-status i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-cta);
      box-shadow: 0 0 0 5px rgba(255, 77, 109, .14);
    }

    .btn-brand,
    .btn-ghost,
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 12px 20px;
      border-radius: var(--radius-pill);
      font-weight: 800;
      letter-spacing: .01em;
      border: 1px solid transparent;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
      text-decoration: none;
      cursor: pointer;
    }

    .btn-brand {
      color: #fff;
      background: linear-gradient(135deg, var(--color-cta), var(--color-cta-dark));
      box-shadow: 0 14px 30px rgba(244, 63, 94, .28);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(244, 63, 94, .35);
      background: linear-gradient(135deg, #FF3159, #E11D48);
    }

    .btn-ghost {
      color: #5D35B0;
      background: rgba(255,255,255,.7);
      border-color: var(--color-border);
    }

    .btn-ghost:hover,
    .btn-ghost:focus {
      transform: translateY(-2px);
      color: #4C1D95;
      background: rgba(179, 136, 255, .15);
      border-color: rgba(139, 92, 246, .34);
      box-shadow: 0 12px 24px rgba(95, 54, 160, .1);
    }

    .btn-soft {
      color: var(--color-text);
      background: rgba(255, 226, 184, .58);
      border-color: rgba(255, 226, 184, .95);
    }

    .btn-soft:hover,
    .btn-soft:focus {
      transform: translateY(-2px);
      color: #4C1D95;
      background: rgba(255, 243, 223, .95);
      box-shadow: 0 12px 26px rgba(95, 54, 160, .12);
    }

    .btn:focus-visible,
    .btn-brand:focus-visible,
    .btn-ghost:focus-visible,
    .btn-soft:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 4px solid rgba(139, 92, 246, .22);
      outline-offset: 2px;
    }

    .hero {
      padding: 58px 0 88px;
      min-height: 760px;
      display: flex;
      align-items: center;
    }

    .hero-stage {
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 4.2vw, 58px);
      border-radius: 36px;
      border: 1px solid rgba(139, 92, 246, .18);
      background:
        radial-gradient(circle at 14% 20%, rgba(255, 255, 255, .82), transparent 24%),
        radial-gradient(circle at 88% 18%, rgba(255, 226, 184, .86), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,246,239,.76) 48%, rgba(243,232,255,.78));
      box-shadow: var(--shadow-soft);
    }

    .hero-stage::before,
    .hero-stage::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }

    .hero-stage::before {
      width: 520px;
      height: 520px;
      right: -190px;
      top: -170px;
      background: radial-gradient(circle, rgba(139, 92, 246, .32), transparent 64%);
      filter: blur(4px);
    }

    .hero-stage::after {
      inset: 0;
      opacity: .42;
      background:
        linear-gradient(105deg, transparent 8%, rgba(255,255,255,.58) 38%, transparent 43%),
        linear-gradient(82deg, transparent 58%, rgba(255, 77, 109, .08), transparent 76%);
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      max-width: 830px;
      margin: 18px 0 18px;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -.045em;
    }

    .hero h1 .mark-line {
      position: relative;
      display: inline;
      background: linear-gradient(180deg, transparent 58%, rgba(255, 226, 184, .92) 0);
      padding-inline: 4px;
    }

    .hero-lead {
      max-width: 760px;
      margin: 0;
      color: var(--color-muted);
      font-size: 18px;
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

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

    .data-pill {
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      border: 1px dashed rgba(139, 92, 246, .28);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .data-pill:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 77, 109, .42);
      box-shadow: 0 12px 26px rgba(95,54,160,.1);
    }

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

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

    .entry-board {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: stretch;
    }

    .entry-card {
      position: relative;
      padding: 20px;
      border-radius: 24px;
      border: 1px solid rgba(139, 92, 246, .18);
      background: rgba(255,255,255,.72);
      box-shadow: 0 14px 36px rgba(95, 54, 160, .1);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .entry-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(255, 77, 109, .34);
    }

    .entry-card.wide {
      grid-column: 1 / -1;
      min-height: 154px;
      color: #fff;
      background:
        radial-gradient(circle at 82% 20%, rgba(255, 226, 184, .36), transparent 30%),
        linear-gradient(135deg, #7C3AED, #9F5CFF 54%, #E94F76);
      border-color: rgba(255,255,255,.28);
    }

    .entry-card .badge-note {
      display: inline-flex;
      padding: 6px 10px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 900;
      background: rgba(255,255,255,.28);
      color: inherit;
      border: 1px solid rgba(255,255,255,.28);
    }

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

    .entry-card p {
      margin: 0;
      color: inherit;
      opacity: .78;
      font-size: 14px;
      line-height: 1.6;
    }

    .entry-card:not(.wide) .badge-note {
      color: #5D35B0;
      background: rgba(139, 92, 246, .1);
      border-color: rgba(139, 92, 246, .16);
    }

    .entry-card .mini-count {
      margin-top: 14px;
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 13px;
      font-weight: 800;
    }

    .progress-rail {
      height: 10px;
      border-radius: var(--radius-pill);
      background: rgba(255,255,255,.3);
      overflow: hidden;
      margin-top: 18px;
    }

    .progress-rail span {
      display: block;
      width: 72%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #FFE2B8, #fff);
    }

    .benefit-ladder {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 22px;
      align-items: stretch;
    }

    .ladder-main {
      display: grid;
      gap: 16px;
    }

    .ladder-item {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 22px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.7);
      box-shadow: 0 12px 34px rgba(95, 54, 160, .08);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .ladder-item::before {
      content: "";
      position: absolute;
      left: 33px;
      top: 62px;
      bottom: -20px;
      width: 2px;
      border-left: 2px dashed rgba(139, 92, 246, .24);
    }

    .ladder-item:last-child::before {
      display: none;
    }

    .ladder-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(255, 77, 109, .34);
    }

    .ladder-item.recommend {
      background:
        radial-gradient(circle at 92% 14%, rgba(255, 226, 184, .7), transparent 22%),
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(243,232,255,.82));
      border-color: rgba(255, 77, 109, .36);
    }

    .step-num {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(139,92,246,.26);
      z-index: 1;
    }

    .ladder-copy h3 {
      margin: 0 0 7px;
      font-size: 20px;
      font-weight: 900;
    }

    .ladder-copy p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.62;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border-radius: var(--radius-pill);
      color: #B91C3A;
      background: rgba(255, 77, 109, .1);
      border: 1px solid rgba(255, 77, 109, .22);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .note-card {
      padding: 26px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255, 226, 184, .86);
      background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,243,223,.82));
      box-shadow: var(--shadow-soft);
      min-height: 100%;
    }

    .note-card h3 {
      margin: 0 0 12px;
      font-size: 24px;
      font-weight: 900;
    }

    .note-list {
      display: grid;
      gap: 12px;
      padding: 0;
      margin: 18px 0 0;
      list-style: none;
    }

    .note-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.62);
      border: 1px dashed rgba(139, 92, 246, .18);
      color: var(--color-muted);
      font-size: 14px;
    }

    .note-list li::before {
      content: "✓";
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--color-primary);
      font-size: 12px;
      font-weight: 900;
      margin-top: 2px;
    }

    .compare-wrap {
      padding: 26px;
      border-radius: 32px;
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.68);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .package-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 22px;
    }

    .package-card {
      position: relative;
      padding: 24px;
      border-radius: 26px;
      border: 1px solid rgba(139, 92, 246, .17);
      background: rgba(255,255,255,.72);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .package-card:hover {
      transform: translateY(-4px);
      border-color: rgba(139, 92, 246, .38);
      box-shadow: var(--shadow-hover);
    }

    .package-card.featured {
      border-color: rgba(255, 77, 109, .48);
      background:
        radial-gradient(circle at 70% 0%, rgba(255, 226, 184, .84), transparent 31%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,240,255,.88));
      box-shadow: 0 20px 54px rgba(244, 63, 94, .14);
    }

    .package-card h3 {
      margin: 12px 0 8px;
      font-size: 22px;
      font-weight: 900;
    }

    .package-card p {
      min-height: 46px;
      margin: 0 0 18px;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.62;
    }

    .package-list {
      padding: 0;
      margin: 0 0 20px;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .package-list li {
      display: flex;
      gap: 8px;
      color: var(--color-text);
      font-size: 14px;
      font-weight: 650;
    }

    .package-list li::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      margin-top: 9px;
      background: var(--color-primary);
      box-shadow: 0 0 0 5px rgba(139,92,246,.12);
      flex: 0 0 auto;
    }

    .table-note {
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(139, 92, 246, .16);
      background: rgba(255,255,255,.55);
    }

    .custom-table {
      margin: 0;
      min-width: 760px;
      color: var(--color-text);
    }

    .custom-table thead th {
      background: rgba(139, 92, 246, .11);
      color: #4C1D95;
      border: 0;
      padding: 16px;
      font-size: 14px;
      font-weight: 900;
    }

    .custom-table tbody td,
    .custom-table tbody th {
      padding: 16px;
      border-color: rgba(139, 92, 246, .12);
      vertical-align: middle;
      font-size: 14px;
      background: rgba(255,255,255,.46);
    }

    .custom-table tbody th {
      color: var(--color-text);
      font-weight: 900;
    }

    .check-tag {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: var(--radius-pill);
      background: rgba(139, 92, 246, .1);
      color: #5D35B0;
      font-size: 12px;
      font-weight: 900;
    }

    .limited-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 4vw, 46px);
      border-radius: 34px;
      color: #FFF8EE;
      background:
        radial-gradient(circle at 82% 18%, rgba(255, 226, 184, .45), transparent 24%),
        radial-gradient(circle at 14% 88%, rgba(255, 77, 109, .24), transparent 28%),
        linear-gradient(135deg, #5B21B6 0%, #8B5CF6 58%, #FF4D6D 120%);
      box-shadow: 0 24px 68px rgba(95, 54, 160, .26);
    }

    .limited-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
      background-size: 18px 18px;
      opacity: .32;
      pointer-events: none;
    }

    .limited-panel > * {
      position: relative;
      z-index: 1;
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(4, minmax(78px, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .time-box {
      padding: 14px 12px;
      border-radius: 20px;
      text-align: center;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.24);
      backdrop-filter: blur(8px);
    }

    .time-box strong {
      display: block;
      font-size: 26px;
      line-height: 1;
      font-weight: 900;
    }

    .time-box span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      opacity: .82;
    }

    .entry-steps {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .entry-steps li {
      display: flex;
      gap: 12px;
      padding: 15px;
      border-radius: 18px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.22);
    }

    .entry-steps em {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-style: normal;
      color: #5B21B6;
      background: #FFF3DF;
      font-weight: 900;
    }

    .form-card {
      position: relative;
      padding: clamp(24px, 4vw, 42px);
      border-radius: 34px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,243,223,.86));
      border: 1px solid rgba(139, 92, 246, .2);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .form-card::after {
      content: "";
      position: absolute;
      right: 26px;
      top: 24px;
      width: 86px;
      height: 30px;
      border-radius: 0 0 16px 16px;
      background: rgba(255, 226, 184, .72);
      transform: rotate(4deg);
      opacity: .8;
    }

    .form-label {
      font-weight: 800;
      color: var(--color-text);
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 50px;
      border-radius: 16px;
      border: 1px solid rgba(139, 92, 246, .18);
      background-color: rgba(255,255,255,.78);
      color: var(--color-text);
      padding: 12px 14px;
      box-shadow: none;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
      background-color: #fff;
    }

    textarea.form-control {
      min-height: 126px;
      resize: vertical;
    }

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

    .info-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
      gap: 22px;
      align-items: start;
    }

    .news-card,
    .guide-card,
    .review-card,
    .faq-card {
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.72);
      box-shadow: 0 12px 36px rgba(95, 54, 160, .08);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .news-card:hover,
    .guide-card:hover,
    .review-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(139, 92, 246, .32);
    }

    .news-list {
      padding: 0;
      margin: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .news-list a {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.65);
      border: 1px dashed rgba(139, 92, 246, .18);
    }

    .news-list a:hover {
      transform: translateX(3px);
      border-color: rgba(255, 77, 109, .34);
      background: rgba(255,243,223,.76);
    }

    .news-list .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--color-cta);
      box-shadow: 0 0 0 6px rgba(255,77,109,.1);
    }

    .news-list strong {
      font-size: 15px;
      line-height: 1.5;
    }

    .news-list span {
      color: var(--color-muted);
      font-size: 13px;
      white-space: nowrap;
    }

    .side-recommend {
      position: sticky;
      top: 96px;
      padding: 24px;
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 90% 0%, rgba(255, 226, 184, .84), transparent 34%),
        rgba(255,255,255,.76);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
    }

    .side-recommend h3 {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 900;
    }

    .side-recommend p {
      color: var(--color-muted);
      font-size: 14px;
      margin-bottom: 18px;
    }

    .guide-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 22px;
      align-items: stretch;
    }

    .guide-card {
      padding: 24px;
    }

    .guide-card h3 {
      font-size: 21px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .guide-card ol {
      margin: 0;
      padding-left: 20px;
      color: var(--color-muted);
    }

    .guide-card li {
      padding-left: 6px;
      margin-bottom: 10px;
    }

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

    .hot-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(139, 92, 246, .16);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .hot-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(255, 77, 109, .32);
    }

    .hot-rank {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--color-primary), var(--color-cta));
      font-weight: 900;
    }

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

    .hot-item p {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .review-summary {
      padding: 26px;
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 18% 0%, rgba(255, 226, 184, .35), transparent 28%),
        linear-gradient(135deg, #6D28D9, #9F5CFF);
      box-shadow: var(--shadow-soft);
    }

    .score {
      display: flex;
      gap: 14px;
      align-items: end;
    }

    .score strong {
      font-size: 54px;
      line-height: .95;
      font-weight: 900;
    }

    .score span {
      margin-bottom: 8px;
      opacity: .82;
      font-size: 14px;
    }

    .review-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 18px;
    }

    .review-card {
      padding: 20px;
    }

    .review-card p {
      margin: 0 0 14px;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .review-card strong {
      display: block;
      font-size: 15px;
      font-weight: 900;
    }

    .trust-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .trust-item {
      padding: 20px;
      border-radius: 24px;
      border: 1px solid rgba(139, 92, 246, .16);
      background: rgba(255,255,255,.68);
      box-shadow: 0 10px 28px rgba(95, 54, 160, .07);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .trust-item:hover {
      transform: translateY(-3px);
      border-color: rgba(139, 92, 246, .34);
      box-shadow: var(--shadow-hover);
    }

    .trust-item .icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 12px;
      color: #fff;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-3));
      font-weight: 900;
    }

    .trust-item h3 {
      font-size: 17px;
      font-weight: 900;
      margin: 0 0 6px;
    }

    .trust-item p {
      margin: 0;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.58;
    }

    .accordion {
      display: grid;
      gap: 12px;
    }

    .accordion-item {
      border: 1px solid rgba(139, 92, 246, .16) !important;
      border-radius: 22px !important;
      overflow: hidden;
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 28px rgba(95,54,160,.06);
    }

    .accordion-button {
      padding: 18px 20px;
      color: var(--color-text);
      background: rgba(255,255,255,.62);
      font-weight: 900;
      box-shadow: none !important;
    }

    .accordion-button:not(.collapsed) {
      color: #5D35B0;
      background: rgba(139, 92, 246, .1);
    }

    .accordion-button:focus {
      border-color: transparent;
      box-shadow: 0 0 0 4px rgba(139, 92, 246, .14) !important;
    }

    .accordion-body {
      color: var(--color-muted);
      font-size: 15px;
      line-height: 1.75;
      background: rgba(255,255,255,.56);
    }

    .footer {
      padding: 54px 0 28px;
      border-top: 1px solid rgba(139, 92, 246, .16);
      background:
        radial-gradient(circle at 12% 0%, rgba(179, 136, 255, .2), transparent 28%),
        linear-gradient(180deg, rgba(255,243,223,.42), rgba(250,246,239,.92));
    }

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

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

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

    .footer h3 {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .footer-links {
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      color: var(--color-muted);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--color-primary);
      transform: translateX(2px);
    }

    .copyright {
      margin-top: 34px;
      padding-top: 18px;
      border-top: 1px dashed rgba(139, 92, 246, .18);
      color: var(--color-muted);
      font-size: 13px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
    }

    .mobile-cta {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 1040;
      padding: 10px;
      border-radius: 22px;
      background: rgba(255, 248, 238, .92);
      border: 1px solid rgba(139, 92, 246, .18);
      box-shadow: 0 14px 38px rgba(95, 54, 160, .2);
      backdrop-filter: blur(16px);
    }

    @media (max-width: 1199px) {
      .hero {
        min-height: auto;
        padding-top: 42px;
      }
      .entry-board {
        gap: 12px;
      }
      .package-grid {
        gap: 14px;
      }
    }

    @media (max-width: 991px) {
      .navbar-collapse {
        padding: 18px 0 12px;
      }
      .navbar-nav {
        padding: 10px 0;
      }
      .nav-actions {
        width: 100%;
        display: grid !important;
        gap: 10px;
        margin-top: 8px;
      }
      .nav-actions .btn-brand {
        width: 100%;
      }
      .hero-stage {
        border-radius: 30px;
      }
      .entry-board {
        margin-top: 32px;
      }
      .benefit-ladder,
      .guide-grid,
      .info-layout {
        grid-template-columns: 1fr;
      }
      .side-recommend {
        position: relative;
        top: auto;
      }
      .package-grid,
      .review-list {
        grid-template-columns: 1fr;
      }
      .trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .title-row {
        display: block;
      }
      .title-row .section-desc {
        max-width: 780px;
      }
    }

    @media (max-width: 767px) {
      :root {
        --nav-height: 68px;
      }
      body {
        padding-bottom: 82px;
      }
      .container-custom {
        width: min(100% - 24px, var(--container));
      }
      .section {
        padding: 58px 0;
      }
      .section-tight {
        padding: 46px 0;
      }
      .logo-text strong {
        font-size: 16px;
      }
      .logo-text span {
        display: none;
      }
      .hero {
        padding: 24px 0 58px;
      }
      .hero-stage {
        padding: 24px;
        border-radius: 26px;
      }
      .hero-lead {
        font-size: 16px;
      }
      .hero-actions .btn-brand,
      .hero-actions .btn-ghost,
      .hero-actions .btn-soft {
        width: 100%;
      }
      .hero-data,
      .entry-board,
      .countdown {
        grid-template-columns: 1fr;
      }
      .ladder-item {
        grid-template-columns: auto 1fr;
      }
      .ladder-item .btn-soft,
      .ladder-item .btn-brand {
        grid-column: 1 / -1;
        width: 100%;
      }
      .compare-wrap,
      .form-card {
        padding: 20px;
        border-radius: 26px;
      }
      .hot-item {
        grid-template-columns: auto 1fr;
      }
      .hot-item .btn-ghost {
        grid-column: 1 / -1;
        width: 100%;
      }
      .news-list a {
        grid-template-columns: auto 1fr;
      }
      .news-list span {
        grid-column: 2 / 3;
      }
      .trust-strip {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .copyright {
        display: block;
      }
      .mobile-cta {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .mobile-cta .nav-status {
        flex: 0 0 auto;
        font-size: 12px;
        padding-inline: 10px;
      }
      .mobile-cta .btn-brand {
        flex: 1 1 auto;
        min-height: 48px;
      }
    }

    @media (max-width: 520px) {
      .hero h1 {
        font-size: 34px;
      }
      .section-title {
        font-size: 26px;
      }
      .entry-card,
      .note-card,
      .guide-card,
      .review-card {
        border-radius: 22px;
      }
      .time-box strong {
        font-size: 24px;
      }
    }

/* roulang page: category1 */
:root{
      --primary:#8B5CF6;
      --primary-2:#9F7AEA;
      --primary-3:#B388FF;
      --coral:#FF4D6D;
      --coral-dark:#F43F5E;
      --cream:#FAF6EF;
      --cream-2:#FFF3DF;
      --apricot:#FFE2B8;
      --ink:#241B2F;
      --ink-2:#31263E;
      --muted:#756A82;
      --line:rgba(139,92,246,.18);
      --line-warm:rgba(255,226,184,.78);
      --white:#fff;
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 18px 50px rgba(95,54,160,.12);
      --shadow-hover:0 24px 68px rgba(95,54,160,.18);
      --focus:0 0 0 .25rem rgba(139,92,246,.22);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Helvetica Neue,Arial,sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at 12% 10%,rgba(179,136,255,.24),transparent 28%),
        radial-gradient(circle at 86% 18%,rgba(255,226,184,.55),transparent 26%),
        linear-gradient(135deg,#fffaf2 0%,#fbf4ff 54%,#fff3df 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.16;
      background-image:
        radial-gradient(rgba(139,92,246,.24) 1px, transparent 1px),
        linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.45) 45% 48%,transparent 49%);
      background-size:22px 22px,100% 100%;
      z-index:-2;
    }
    a{color:inherit;text-decoration:none;transition:all .22s ease}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(255,77,109,.22);color:var(--ink)}
    .container-custom{
      width:min(var(--container),calc(100% - 40px));
      margin-inline:auto;
    }
    .section{
      padding:84px 0;
      position:relative;
    }
    .section-tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      color:var(--primary);
      background:rgba(139,92,246,.10);
      border:1px solid var(--line);
      font-weight:700;
      font-size:14px;
      letter-spacing:.02em;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;
      border-radius:50%;
      background:var(--coral);
      box-shadow:0 0 0 6px rgba(255,77,109,.12);
    }
    .section-title{
      font-size:clamp(28px,3.1vw,40px);
      line-height:1.2;
      font-weight:800;
      margin:16px 0 12px;
      color:var(--ink);
      letter-spacing:-.02em;
    }
    .section-desc{
      max-width:780px;
      color:var(--muted);
      font-size:17px;
      margin:0;
    }
    .highlight{
      background:linear-gradient(180deg,transparent 56%,rgba(255,226,184,.95) 0);
      padding:0 4px;
      border-radius:4px;
    }

    header{
      backdrop-filter:saturate(140%) blur(14px);
      -webkit-backdrop-filter:saturate(140%) blur(14px);
    }
    .brand-nav{
      min-height:78px;
      background:rgba(255,250,242,.86);
      border-bottom:1px solid rgba(139,92,246,.14);
      box-shadow:0 10px 30px rgba(95,54,160,.07);
      transition:all .24s ease;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      margin-right:20px;
    }
    .logo-mark{
      width:44px;height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:16px;
      color:#fff;
      font-weight:900;
      font-size:22px;
      background:
        radial-gradient(circle at 35% 25%,rgba(255,255,255,.38),transparent 28%),
        linear-gradient(135deg,var(--primary),var(--coral));
      box-shadow:0 12px 28px rgba(139,92,246,.24);
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.18}
    .logo-text strong{font-size:17px;font-weight:900;color:var(--ink)}
    .logo-text span{font-size:12px;color:var(--muted);font-weight:600}
    .navbar-nav{
      gap:6px;
      padding:6px;
      border-radius:999px;
      background:rgba(255,255,255,.54);
      border:1px solid rgba(255,226,184,.65);
    }
    .navbar .nav-link{
      color:var(--muted);
      font-weight:750;
      border-radius:999px;
      padding:10px 17px !important;
      position:relative;
    }
    .navbar .nav-link:hover{
      color:var(--primary);
      background:rgba(139,92,246,.08);
    }
    .navbar .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      box-shadow:0 10px 24px rgba(139,92,246,.24);
    }
    .nav-actions{margin-left:auto}
    .nav-status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:10px 14px;
      background:rgba(255,77,109,.10);
      color:var(--coral-dark);
      font-size:13px;
      font-weight:800;
      border:1px solid rgba(255,77,109,.18);
      white-space:nowrap;
    }
    .nav-status i{
      width:8px;height:8px;
      border-radius:50%;
      background:var(--coral);
      box-shadow:0 0 0 6px rgba(255,77,109,.14);
      display:inline-block;
    }
    .btn-brand,.btn-ghost,.btn-light-note{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      border-radius:999px;
      padding:12px 22px;
      font-weight:850;
      border:1px solid transparent;
      transition:all .22s ease;
      cursor:pointer;
    }
    .btn-brand{
      color:#fff;
      background:
        radial-gradient(circle at 30% 18%,rgba(255,255,255,.32),transparent 24%),
        linear-gradient(135deg,var(--coral),var(--coral-dark));
      box-shadow:0 16px 34px rgba(244,63,94,.28);
    }
    .btn-brand:hover,.btn-brand:focus{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 22px 48px rgba(244,63,94,.36);
    }
    .btn-ghost{
      color:var(--ink);
      background:rgba(255,255,255,.66);
      border-color:var(--line);
      box-shadow:0 12px 30px rgba(95,54,160,.08);
    }
    .btn-ghost:hover,.btn-ghost:focus{
      color:var(--primary);
      background:rgba(139,92,246,.08);
      transform:translateY(-2px);
      box-shadow:var(--shadow);
    }
    .btn-light-note{
      color:var(--primary);
      background:#fff;
      border-color:rgba(255,255,255,.55);
    }
    .btn-light-note:hover{transform:translateY(-2px);color:var(--coral-dark)}
    .navbar-toggler{
      border:1px solid var(--line);
      border-radius:14px;
      padding:9px 11px;
      box-shadow:none !important;
      background:rgba(255,255,255,.62);
    }
    .navbar-toggler:focus{box-shadow:var(--focus)!important}

    .hero-benefits{
      padding:82px 0 68px;
      position:relative;
      overflow:hidden;
    }
    .hero-benefits::before{
      content:"";
      position:absolute;
      width:720px;height:520px;
      right:-190px;top:-120px;
      background:
        radial-gradient(circle at 46% 42%,rgba(255,255,255,.9),transparent 12%),
        radial-gradient(circle,rgba(139,92,246,.26),transparent 58%);
      filter:blur(2px);
      pointer-events:none;
    }
    .hero-benefits::after{
      content:"";
      position:absolute;
      left:-160px;bottom:-180px;
      width:520px;height:420px;
      background:radial-gradient(circle,rgba(255,226,184,.82),transparent 64%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);
      gap:34px;
      align-items:center;
    }
    .breadcrumb-note{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:18px;
      color:var(--muted);
      font-size:14px;
      font-weight:700;
    }
    .breadcrumb-note a{color:var(--primary)}
    .breadcrumb-note span{opacity:.7}
    h1{
      font-size:clamp(34px,5vw,56px);
      line-height:1.08;
      font-weight:900;
      letter-spacing:-.035em;
      margin:18px 0 18px;
      color:var(--ink);
    }
    .hero-lead{
      color:var(--muted);
      font-size:18px;
      max-width:790px;
      margin:0 0 26px;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
      margin-top:28px;
    }
    .hero-mini{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:30px;
      max-width:760px;
    }
    .mini-stat{
      background:rgba(255,255,255,.68);
      border:1px solid var(--line-warm);
      border-radius:20px;
      padding:16px;
      box-shadow:0 14px 34px rgba(95,54,160,.08);
    }
    .mini-stat strong{
      display:block;
      color:var(--ink);
      font-size:24px;
      line-height:1.1;
      font-weight:900;
    }
    .mini-stat span{color:var(--muted);font-size:13px;font-weight:700}

    .download-card{
      position:relative;
      border-radius:32px;
      background:
        linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,243,223,.82)),
        linear-gradient(135deg,rgba(139,92,246,.20),rgba(255,77,109,.10));
      border:1px solid rgba(139,92,246,.20);
      box-shadow:var(--shadow);
      padding:24px;
      overflow:hidden;
    }
    .download-card::before{
      content:"权益说明";
      position:absolute;
      top:26px;right:-40px;
      transform:rotate(35deg);
      padding:8px 52px;
      background:linear-gradient(135deg,var(--primary),var(--coral));
      color:#fff;
      font-weight:900;
      font-size:13px;
      letter-spacing:.08em;
      box-shadow:0 10px 25px rgba(139,92,246,.22);
    }
    .cover-box{
      border-radius:26px;
      padding:26px;
      background:
        radial-gradient(circle at 78% 18%,rgba(255,77,109,.20),transparent 26%),
        linear-gradient(135deg,#fff,#fbf1ff 55%,#fff2d8);
      border:1px solid rgba(255,255,255,.75);
      min-height:300px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .cover-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .live-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:8px 13px;
      font-size:13px;
      color:#fff;
      font-weight:900;
      background:linear-gradient(135deg,var(--coral),var(--primary));
      box-shadow:0 12px 26px rgba(244,63,94,.20);
    }
    .live-pill i{
      width:8px;height:8px;border-radius:50%;background:#fff;
      box-shadow:0 0 0 5px rgba(255,255,255,.22);
    }
    .cover-title{
      margin:30px 0 12px;
      font-size:31px;
      line-height:1.18;
      font-weight:900;
      color:var(--ink);
    }
    .cover-desc{color:var(--muted);margin:0;font-weight:600}
    .toc-list{
      margin:22px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:11px;
    }
    .toc-list li{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.72);
      border:1px dashed rgba(139,92,246,.25);
      color:var(--ink-2);
      font-weight:750;
    }
    .toc-list small{color:var(--primary);font-weight:900}
    .download-form{
      margin-top:16px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
    }

    .filter-shell{
      margin-top:30px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.66);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      padding:22px;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .tag-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:10px 15px;
      background:rgba(255,243,223,.75);
      border:1px solid var(--line-warm);
      color:var(--ink-2);
      font-weight:800;
      font-size:14px;
      transition:all .2s ease;
    }
    .tag-pill:hover,.tag-pill.active{
      background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(255,77,109,.10));
      color:var(--primary);
      border-color:rgba(139,92,246,.26);
      transform:translateY(-2px);
    }
    .tag-dot{
      width:7px;height:7px;border-radius:50%;background:var(--primary);
    }

    .benefit-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 330px;
      gap:24px;
      align-items:start;
      margin-top:28px;
    }
    .benefit-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    .note-card{
      position:relative;
      padding:24px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.76);
      border:1px solid var(--line);
      box-shadow:0 14px 38px rgba(95,54,160,.09);
      transition:all .22s ease;
      overflow:hidden;
    }
    .note-card::after{
      content:"";
      position:absolute;
      width:74px;height:74px;
      right:-26px;top:-26px;
      background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(255,226,184,.55));
      border-radius:0 0 0 28px;
      transform:rotate(8deg);
    }
    .note-card:hover{
      transform:translateY(-4px);
      border-color:rgba(139,92,246,.32);
      box-shadow:var(--shadow-hover);
    }
    .card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
      position:relative;
      z-index:1;
    }
    .num-bubble{
      width:38px;height:38px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(139,92,246,.12);
      color:var(--primary);
      font-weight:900;
      flex:0 0 auto;
    }
    .status-badge{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:7px 11px;
      font-size:12px;
      font-weight:900;
      color:var(--coral-dark);
      background:rgba(255,77,109,.10);
      border:1px solid rgba(255,77,109,.18);
      white-space:nowrap;
    }
    .note-card h3{
      font-size:21px;
      margin:0 0 10px;
      font-weight:900;
      color:var(--ink);
      position:relative;
      z-index:1;
    }
    .note-card p{
      color:var(--muted);
      margin:0 0 18px;
      font-size:15px;
      position:relative;
      z-index:1;
    }
    .condition-list{
      list-style:none;
      margin:0 0 20px;
      padding:0;
      display:grid;
      gap:8px;
      position:relative;
      z-index:1;
    }
    .condition-list li{
      display:flex;
      gap:8px;
      color:var(--ink-2);
      font-size:14px;
      font-weight:650;
    }
    .condition-list li::before{
      content:"✓";
      color:var(--primary);
      font-weight:900;
    }
    .sticky-summary{
      position:sticky;
      top:98px;
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 85% 10%,rgba(255,226,184,.70),transparent 25%),
        linear-gradient(150deg,#fff,#fbf0ff);
      border:1px solid rgba(139,92,246,.18);
      box-shadow:var(--shadow);
      padding:24px;
    }
    .summary-title{
      font-size:22px;
      font-weight:900;
      margin:0 0 8px;
    }
    .summary-desc{color:var(--muted);margin:0 0 18px;font-size:15px}
    .summary-item{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:14px 0;
      border-top:1px dashed rgba(139,92,246,.20);
      font-weight:800;
    }
    .summary-item span:first-child{color:var(--muted)}
    .summary-item span:last-child{color:var(--primary)}
    .progress-note{
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(139,92,246,.10);
      margin:16px 0 18px;
    }
    .progress-note i{
      display:block;
      height:100%;
      width:72%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--primary),var(--coral));
    }

    .steps-wrap{
      border-radius:32px;
      background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(255,226,184,.42));
      border:1px solid var(--line);
      padding:28px;
      box-shadow:var(--shadow);
      margin-top:30px;
    }
    .steps-grid{
      display:grid;
      grid-template-columns:1.1fr 1fr 1fr;
      gap:16px;
      margin-top:18px;
    }
    .step-card{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(255,255,255,.8);
      border-radius:22px;
      padding:22px;
      transition:all .22s ease;
    }
    .step-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(95,54,160,.10)}
    .step-card b{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;height:34px;
      border-radius:12px;
      color:#fff;
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      margin-bottom:14px;
    }
    .step-card h3{font-size:19px;font-weight:900;margin:0 0 8px}
    .step-card p{margin:0;color:var(--muted);font-size:15px}

    .limited-banner{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      background:
        radial-gradient(circle at 16% 18%,rgba(255,255,255,.34),transparent 16%),
        radial-gradient(circle at 88% 18%,rgba(255,226,184,.30),transparent 24%),
        linear-gradient(135deg,#7c3aed 0%,#9f7aea 55%,#ff4d6d 100%);
      color:#fff;
      padding:34px;
      box-shadow:0 26px 70px rgba(139,92,246,.28);
    }
    .limited-banner::after{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);
      background-size:18px 18px;
      opacity:.32;
      pointer-events:none;
    }
    .limited-content{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr auto;
      gap:26px;
      align-items:center;
    }
    .limited-banner h2{
      font-size:clamp(26px,3vw,38px);
      font-weight:900;
      margin:10px 0 10px;
    }
    .limited-banner p{margin:0;color:rgba(255,255,255,.86);max-width:740px}
    .count-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .count-box{
      min-width:72px;
      text-align:center;
      border-radius:18px;
      padding:12px 10px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.24);
      backdrop-filter:blur(8px);
    }
    .count-box strong{display:block;font-size:24px;line-height:1;font-weight:900}
    .count-box span{font-size:12px;color:rgba(255,255,255,.82)}
    .limited-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:22px;
    }

    .form-panel{
      display:grid;
      grid-template-columns:.92fr 1.08fr;
      gap:24px;
      align-items:stretch;
    }
    .apply-note{
      border-radius:32px;
      padding:30px;
      background:
        radial-gradient(circle at 12% 12%,rgba(255,226,184,.86),transparent 22%),
        linear-gradient(145deg,#fff,#fbf1ff);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .apply-note h2{
      font-size:clamp(26px,3vw,38px);
      line-height:1.2;
      font-weight:900;
      margin:14px 0 12px;
    }
    .apply-note p{color:var(--muted);margin:0 0 18px}
    .check-stack{
      display:grid;
      gap:10px;
      margin-top:24px;
    }
    .check-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:13px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.66);
      border:1px dashed rgba(139,92,246,.22);
      font-weight:750;
    }
    .check-item i{
      width:22px;height:22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      color:#fff;
      background:var(--primary);
      font-style:normal;
      font-size:13px;
      flex:0 0 auto;
    }
    .form-card{
      border-radius:32px;
      padding:28px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(139,92,246,.18);
      box-shadow:var(--shadow);
    }
    .form-label{
      color:var(--ink);
      font-weight:850;
      margin-bottom:8px;
    }
    .form-control,.form-select{
      min-height:50px;
      border-radius:16px;
      border:1px solid rgba(139,92,246,.18);
      background:rgba(255,250,242,.72);
      color:var(--ink);
      box-shadow:none;
      padding:12px 15px;
    }
    textarea.form-control{min-height:120px}
    .form-control:focus,.form-select:focus{
      border-color:var(--primary);
      box-shadow:var(--focus);
      background:#fff;
    }
    .form-hint{
      color:var(--muted);
      font-size:13px;
      margin-top:12px;
    }

    .accordion{
      display:grid;
      gap:14px;
    }
    .accordion-item{
      border:1px solid var(--line) !important;
      border-radius:22px !important;
      overflow:hidden;
      background:rgba(255,255,255,.74);
      box-shadow:0 10px 28px rgba(95,54,160,.07);
    }
    .accordion-button{
      padding:20px 22px;
      font-weight:900;
      color:var(--ink);
      background:rgba(255,255,255,.72);
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:var(--primary);
      background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(255,226,184,.32));
    }
    .accordion-button:focus{box-shadow:var(--focus)!important}
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px;
    }

    .footer{
      margin-top:30px;
      padding:56px 0 26px;
      background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(246,235,255,.88));
      border-top:1px solid rgba(139,92,246,.16);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.45fr .75fr .75fr;
      gap:36px;
      align-items:start;
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:900;
      font-size:20px;
      margin-bottom:14px;
    }
    .footer p{
      max-width:520px;
      color:var(--muted);
      margin:0;
    }
    .footer h3{
      font-size:16px;
      font-weight:900;
      margin:4px 0 14px;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:700;
    }
    .footer-links a:hover{
      color:var(--primary);
      transform:translateX(3px);
    }
    .copyright{
      margin-top:34px;
      padding-top:20px;
      border-top:1px dashed rgba(139,92,246,.22);
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:14px;
      font-weight:650;
    }
    .mobile-cta{
      display:none;
      position:fixed;
      left:12px;
      right:12px;
      bottom:12px;
      z-index:1030;
      border-radius:22px;
      padding:10px;
      background:rgba(255,250,242,.92);
      border:1px solid rgba(139,92,246,.18);
      box-shadow:0 18px 50px rgba(95,54,160,.22);
      backdrop-filter:blur(14px);
      align-items:center;
      gap:10px;
    }
    .mobile-cta .nav-status{flex:1;justify-content:center;padding:10px}
    .mobile-cta .btn-brand{flex:1;padding-inline:12px}

    @media (max-width:1199px){
      .container-custom{width:min(100% - 32px,1080px)}
      .hero-grid{grid-template-columns:1fr .92fr}
      .benefit-layout{grid-template-columns:1fr 300px}
      .navbar .nav-link{padding:9px 13px!important}
    }
    @media (max-width:991px){
      .brand-nav{min-height:70px}
      .navbar-collapse{
        margin-top:14px;
        padding:14px;
        border-radius:24px;
        background:rgba(255,255,255,.86);
        border:1px solid var(--line);
        box-shadow:var(--shadow);
      }
      .navbar-nav{
        border-radius:18px;
        background:transparent;
        border:0;
        padding:0;
        gap:5px;
      }
      .navbar .nav-link{padding:12px 14px!important}
      .nav-actions{
        margin:12px 0 0;
        width:100%;
        flex-direction:column;
        align-items:stretch!important;
      }
      .nav-actions .btn-brand,.nav-actions .nav-status{width:100%;justify-content:center}
      .hero-grid,.form-panel{grid-template-columns:1fr}
      .hero-benefits{padding-top:54px}
      .download-card{max-width:620px;margin-inline:auto}
      .benefit-layout{grid-template-columns:1fr}
      .sticky-summary{position:relative;top:auto}
      .limited-content{grid-template-columns:1fr}
      .count-row{justify-content:flex-start}
      .steps-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:767px){
      .section{padding:64px 0}
      .section-tight{padding:46px 0}
      .container-custom{width:min(100% - 24px,720px)}
      .logo-mark{width:40px;height:40px;border-radius:14px}
      .logo-text strong{font-size:15px}
      .logo-text span{font-size:11px}
      .hero-mini{grid-template-columns:1fr}
      .benefit-list{grid-template-columns:1fr}
      .download-form{grid-template-columns:1fr}
      .cover-title{font-size:26px}
      .filter-shell,.steps-wrap,.limited-banner,.apply-note,.form-card{padding:22px;border-radius:24px}
      .hero-actions,.limited-actions{flex-direction:column;align-items:stretch}
      .hero-actions a,.limited-actions a,.form-card .btn-brand{width:100%}
      .footer-grid{grid-template-columns:1fr}
      .mobile-cta{display:flex}
      body{padding-bottom:86px}
    }
    @media (max-width:520px){
      h1{font-size:36px}
      .section-title{font-size:28px}
      .hero-lead{font-size:16px}
      .tag-pill{width:100%;justify-content:center}
      .toc-list li{align-items:flex-start;flex-direction:column;gap:4px}
      .count-box{min-width:calc(50% - 5px)}
      .copyright{font-size:13px}
    }

/* roulang page: category2 */
:root {
      --primary: #8B5CF6;
      --primary-2: #9F7AEA;
      --primary-3: #B388FF;
      --coral: #FF4D6D;
      --coral-dark: #F43F5E;
      --cream: #FFF3DF;
      --cream-2: #FAF6EF;
      --apricot: #FFE2B8;
      --ink: #241B2F;
      --ink-2: #31263E;
      --muted: #756A82;
      --soft: #F6EEFF;
      --line: rgba(139, 92, 246, .18);
      --line-warm: rgba(255, 226, 184, .78);
      --white: #ffffff;
      --shadow: 0 18px 50px rgba(95, 54, 160, .12);
      --shadow-strong: 0 24px 70px rgba(95, 54, 160, .18);
      --radius-lg: 28px;
      --radius-md: 20px;
      --radius-sm: 16px;
      --radius-pill: 999px;
      --container: 1200px;
      --nav-height: 78px;
      --ease: all .24s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      line-height: 1.75;
      background:
        radial-gradient(circle at 12% 8%, rgba(179, 136, 255, .28) 0, rgba(179, 136, 255, 0) 31%),
        radial-gradient(circle at 82% 12%, rgba(255, 226, 184, .75) 0, rgba(255, 226, 184, 0) 28%),
        linear-gradient(135deg, #fff9ef 0%, #fbf3ff 48%, #fff7ea 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      opacity: .48;
      background-image:
        linear-gradient(rgba(139, 92, 246, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, .055) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, #000, transparent 82%);
    }

    body::after {
      content: "";
      position: fixed;
      top: -10%;
      left: 45%;
      width: 58vw;
      height: 58vw;
      z-index: -3;
      pointer-events: none;
      background: conic-gradient(from 180deg, rgba(139, 92, 246, .10), rgba(255, 77, 109, .08), rgba(255, 226, 184, .16), rgba(139, 92, 246, .10));
      filter: blur(38px);
      opacity: .72;
      transform: rotate(-16deg);
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--ease);
    }

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

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

    ::selection {
      background: rgba(255, 77, 109, .18);
      color: var(--ink);
    }

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

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

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

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 13px;
      border-radius: var(--radius-pill);
      color: var(--primary);
      background: rgba(139, 92, 246, .10);
      border: 1px solid rgba(139, 92, 246, .16);
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .02em;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 5px rgba(255, 77, 109, .12);
    }

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

    .section-head h2 {
      margin: 14px 0 0;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.22;
      font-weight: 850;
      letter-spacing: -.03em;
      color: var(--ink);
    }

    .section-head p {
      max-width: 560px;
      margin: 0;
      color: var(--muted);
      font-weight: 500;
    }

    .text-marker {
      position: relative;
      display: inline-block;
      z-index: 1;
    }

    .text-marker::after {
      content: "";
      position: absolute;
      left: -3px;
      right: -3px;
      bottom: 5px;
      height: 12px;
      background: rgba(255, 226, 184, .9);
      border-radius: var(--radius-pill);
      z-index: -1;
      transform: rotate(-1deg);
    }

    header {
      z-index: 1000;
    }

    .brand-nav {
      min-height: var(--nav-height);
      padding: 13px 0;
      border-bottom: 1px solid rgba(139, 92, 246, .12);
      background: rgba(255, 250, 241, .86);
      backdrop-filter: blur(18px);
      transition: var(--ease);
    }

    .brand-nav.nav-scrolled {
      background: rgba(255, 250, 241, .98);
      box-shadow: 0 12px 34px rgba(95, 54, 160, .10);
    }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      min-width: 238px;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      color: #fff;
      font-weight: 900;
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.52), transparent 22%),
        linear-gradient(135deg, var(--primary), var(--coral));
      box-shadow: 0 12px 28px rgba(139, 92, 246, .30);
      flex: 0 0 auto;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      gap: 4px;
    }

    .logo-text strong {
      font-size: 17px;
      color: var(--ink);
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .logo-text span {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .navbar-nav {
      gap: 6px;
    }

    .brand-nav .nav-link {
      position: relative;
      padding: 10px 15px !important;
      color: var(--ink-2);
      font-weight: 800;
      border-radius: var(--radius-pill);
    }

    .brand-nav .nav-link:hover,
    .brand-nav .nav-link:focus {
      color: var(--primary);
      background: rgba(139, 92, 246, .08);
    }

    .brand-nav .nav-link.active {
      color: var(--primary);
      background: rgba(139, 92, 246, .12);
      box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .12);
    }

    .nav-actions {
      min-width: 248px;
      justify-content: flex-end;
    }

    .nav-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: var(--radius-pill);
      background: rgba(255, 77, 109, .09);
      border: 1px solid rgba(255, 77, 109, .16);
      color: var(--coral-dark);
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }

    .nav-status i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 5px rgba(255, 77, 109, .13);
    }

    .btn-brand,
    .btn-soft,
    .btn-outline-note {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      min-height: 44px;
      padding: 11px 20px;
      border-radius: var(--radius-pill);
      font-weight: 900;
      line-height: 1.2;
      transition: var(--ease);
      cursor: pointer;
      text-align: center;
    }

    .btn-brand {
      color: #fff;
      background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent),
        linear-gradient(135deg, var(--coral), var(--coral-dark));
      box-shadow: 0 14px 30px rgba(244, 63, 94, .25);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(244, 63, 94, .33);
      filter: saturate(1.06);
    }

    .btn-soft {
      color: var(--primary);
      background: rgba(139, 92, 246, .10);
      border: 1px solid rgba(139, 92, 246, .18);
    }

    .btn-soft:hover,
    .btn-soft:focus {
      color: var(--ink);
      background: rgba(179, 136, 255, .18);
      transform: translateY(-2px);
    }

    .btn-outline-note {
      color: var(--ink);
      background: rgba(255, 255, 255, .55);
      border: 1px dashed rgba(139, 92, 246, .26);
    }

    .btn-outline-note:hover,
    .btn-outline-note:focus {
      border-style: solid;
      color: var(--primary);
      background: rgba(255, 255, 255, .86);
      transform: translateY(-2px);
    }

    .navbar-toggler {
      border: 1px solid rgba(139, 92, 246, .20);
      border-radius: 14px;
      padding: 8px 10px;
      background: rgba(255,255,255,.55);
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
    }

    .hero {
      padding: 78px 0 54px;
      overflow: hidden;
    }

    .hero-shell {
      position: relative;
      border: 1px solid rgba(139, 92, 246, .14);
      border-radius: 36px;
      background:
        radial-gradient(circle at 12% 20%, rgba(255, 226, 184, .78), transparent 28%),
        radial-gradient(circle at 74% 22%, rgba(179, 136, 255, .35), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(250, 246, 239, .72));
      box-shadow: var(--shadow);
      padding: 42px;
      isolation: isolate;
      overflow: hidden;
    }

    .hero-shell::before {
      content: "";
      position: absolute;
      inset: -60% -20% auto auto;
      width: 560px;
      height: 560px;
      background: conic-gradient(from 20deg, rgba(139,92,246,.18), rgba(255,77,109,.10), rgba(255,226,184,.28), rgba(139,92,246,.18));
      filter: blur(30px);
      opacity: .78;
      z-index: -1;
    }

    .hero-shell::after {
      content: "";
      position: absolute;
      inset: auto 32px 24px auto;
      width: 190px;
      height: 66px;
      border-bottom: 2px dashed rgba(139, 92, 246, .22);
      border-right: 2px dashed rgba(139, 92, 246, .20);
      border-radius: 0 0 28px 0;
      transform: rotate(-3deg);
      opacity: .7;
      z-index: -1;
    }

    .breadcrumb-note {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
      margin-bottom: 18px;
    }

    .breadcrumb-note a:hover {
      color: var(--primary);
    }

    .breadcrumb-note span {
      color: var(--primary);
    }

    .hero h1 {
      max-width: 790px;
      margin: 16px 0 16px;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.12;
      letter-spacing: -.045em;
      font-weight: 900;
      color: var(--ink);
    }

    .hero-lead {
      max-width: 780px;
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      font-weight: 520;
    }

    .hero-status-row {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 22px;
      margin-top: 34px;
    }

    .status-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      padding: 14px;
      border-radius: 26px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(139, 92, 246, .14);
    }

    .status-item {
      position: relative;
      padding: 18px 16px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,243,223,.78));
      border: 1px solid rgba(255, 226, 184, .82);
      min-height: 116px;
      overflow: hidden;
    }

    .status-item::before {
      content: "";
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border-radius: 11px;
      background: rgba(139, 92, 246, .10);
    }

    .status-item b {
      display: block;
      font-size: 22px;
      line-height: 1;
      color: var(--ink);
      margin-bottom: 10px;
      font-weight: 950;
    }

    .status-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      font-weight: 700;
    }

    .entry-matrix {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 13px;
    }

    .matrix-card {
      padding: 18px;
      min-height: 116px;
      border-radius: 24px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(139, 92, 246, .16);
      box-shadow: 0 12px 28px rgba(95, 54, 160, .08);
      transition: var(--ease);
    }

    .matrix-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      border-color: rgba(139, 92, 246, .30);
    }

    .matrix-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      color: #fff;
      font-weight: 900;
      margin-bottom: 12px;
      background: linear-gradient(135deg, var(--primary), var(--primary-3));
    }

    .matrix-card strong {
      display: block;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 5px;
    }

    .matrix-card small {
      display: block;
      color: var(--muted);
      line-height: 1.55;
      font-weight: 650;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .note-badge,
    .state-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border-radius: var(--radius-pill);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .note-badge {
      color: var(--primary);
      background: rgba(139, 92, 246, .10);
      border: 1px solid rgba(139, 92, 246, .14);
    }

    .state-badge {
      color: var(--coral-dark);
      background: rgba(255, 77, 109, .10);
      border: 1px solid rgba(255, 77, 109, .16);
    }

    .summary-grid {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 22px;
      align-items: stretch;
    }

    .stage-card {
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 80% 0%, rgba(255, 226, 184, .7), transparent 34%),
        linear-gradient(145deg, #fff, rgba(246, 238, 255, .86));
      border: 1px solid rgba(139, 92, 246, .16);
      box-shadow: var(--shadow);
      padding: 28px;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .stage-card::after {
      content: "入口";
      position: absolute;
      right: -18px;
      bottom: 4px;
      font-size: 88px;
      line-height: 1;
      font-weight: 950;
      color: rgba(139, 92, 246, .055);
      transform: rotate(-8deg);
    }

    .stage-card h2 {
      margin: 12px 0 12px;
      font-size: clamp(25px, 3vw, 36px);
      line-height: 1.22;
      font-weight: 900;
      letter-spacing: -.035em;
    }

    .stage-card p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      font-weight: 520;
    }

    .progress-note {
      position: relative;
      z-index: 1;
      margin-top: 24px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255, 255, 255, .68);
      border: 1px dashed rgba(139, 92, 246, .28);
    }

    .progress-note .progress {
      height: 12px;
      border-radius: var(--radius-pill);
      background: rgba(139, 92, 246, .10);
      overflow: hidden;
    }

    .progress-note .progress-bar {
      background: linear-gradient(90deg, var(--primary), var(--coral));
      border-radius: var(--radius-pill);
    }

    .progress-text {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .timeline-panel {
      display: grid;
      gap: 14px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(139, 92, 246, .14);
      box-shadow: 0 12px 26px rgba(95, 54, 160, .07);
      transition: var(--ease);
    }

    .timeline-item:hover {
      transform: translateY(-3px);
      border-color: rgba(139, 92, 246, .30);
      box-shadow: var(--shadow);
    }

    .timeline-no {
      width: 46px;
      height: 46px;
      border-radius: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(255,226,184,.65));
      color: var(--primary);
      font-weight: 950;
    }

    .timeline-item h3 {
      margin: 0 0 3px;
      font-size: 17px;
      font-weight: 900;
    }

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

    .table-wrap {
      position: relative;
      overflow-x: auto;
      padding: 10px;
      border-radius: 30px;
      background:
        radial-gradient(circle at 60% 0%, rgba(255, 226, 184, .72), transparent 24%),
        rgba(255,255,255,.62);
      border: 1px solid rgba(139, 92, 246, .14);
      box-shadow: var(--shadow);
    }

    .scroll-hint {
      display: none;
      margin-bottom: 10px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 850;
    }

    .compare-table {
      min-width: 850px;
      width: 100%;
      margin: 0;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border-radius: 24px;
      background: #fff;
    }

    .compare-table th,
    .compare-table td {
      padding: 20px 18px;
      vertical-align: middle;
      border: 0;
      border-bottom: 1px solid rgba(139, 92, 246, .12);
      color: var(--ink-2);
    }

    .compare-table thead th {
      background: linear-gradient(180deg, rgba(246,238,255,.96), rgba(255,243,223,.76));
      color: var(--ink);
      font-weight: 950;
      font-size: 15px;
    }

    .compare-table tbody th {
      width: 150px;
      color: var(--muted);
      font-weight: 900;
      background: rgba(250,246,239,.52);
    }

    .compare-table tr:last-child th,
    .compare-table tr:last-child td {
      border-bottom: 0;
    }

    .compare-table td.highlight,
    .compare-table th.highlight {
      position: relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,243,223,.54));
      box-shadow: inset 2px 0 0 rgba(255, 77, 109, .55), inset -2px 0 0 rgba(255, 77, 109, .34);
    }

    .package-name {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .package-name strong {
      font-size: 18px;
      font-weight: 950;
      color: var(--ink);
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 7px;
    }

    .check-list li {
      position: relative;
      padding-left: 22px;
      color: var(--ink-2);
      font-weight: 650;
      font-size: 14px;
    }

    .check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--primary);
      font-weight: 950;
    }

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

    .entry-card {
      position: relative;
      padding: 26px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(139, 92, 246, .14);
      box-shadow: 0 12px 32px rgba(95, 54, 160, .08);
      transition: var(--ease);
      overflow: hidden;
    }

    .entry-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 26px;
      width: 54px;
      height: 8px;
      border-radius: 0 0 99px 99px;
      background: linear-gradient(90deg, var(--primary), var(--coral));
      opacity: .72;
    }

    .entry-card.recommend {
      background:
        radial-gradient(circle at 80% 14%, rgba(255,77,109,.14), transparent 26%),
        linear-gradient(145deg, #fff, rgba(255, 243, 223, .78));
      border-color: rgba(255, 77, 109, .30);
      box-shadow: var(--shadow-strong);
    }

    .entry-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-strong);
      border-color: rgba(139, 92, 246, .30);
    }

    .entry-card h3 {
      margin: 16px 0 10px;
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .entry-card p {
      margin: 0 0 18px;
      color: var(--muted);
      font-weight: 520;
    }

    .entry-card .btn-brand,
    .entry-card .btn-soft {
      width: 100%;
      margin-top: 18px;
    }

    .limit-banner {
      position: relative;
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 28px;
      align-items: center;
      padding: 34px;
      border-radius: 34px;
      overflow: hidden;
      background:
        radial-gradient(circle at 8% 8%, rgba(255,226,184,.50), transparent 28%),
        radial-gradient(circle at 82% 30%, rgba(255,77,109,.28), transparent 30%),
        linear-gradient(135deg, #6D42D8, #9F7AEA 54%, #8B5CF6);
      box-shadow: 0 26px 70px rgba(95, 54, 160, .24);
      color: #fff;
    }

    .limit-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px);
      background-size: 18px 18px;
    }

    .limit-banner > * {
      position: relative;
      z-index: 1;
    }

    .limit-banner h2 {
      margin: 12px 0 12px;
      font-size: clamp(27px, 3.2vw, 42px);
      line-height: 1.18;
      font-weight: 950;
      letter-spacing: -.035em;
    }

    .limit-banner p {
      margin: 0;
      color: rgba(255,255,255,.84);
      font-weight: 520;
    }

    .countdown-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 22px;
      max-width: 430px;
    }

    .time-box {
      padding: 12px 10px;
      border-radius: 18px;
      text-align: center;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.20);
    }

    .time-box b {
      display: block;
      font-size: 26px;
      line-height: 1.05;
      font-weight: 950;
    }

    .time-box span {
      font-size: 12px;
      color: rgba(255,255,255,.78);
      font-weight: 800;
    }

    .limit-steps {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .limit-steps li {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 12px;
      align-items: start;
      padding: 14px;
      border-radius: 20px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.18);
    }

    .limit-steps i {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      font-style: normal;
      color: var(--ink);
      background: var(--cream);
      font-weight: 950;
    }

    .limit-steps strong {
      display: block;
      line-height: 1.2;
      margin-bottom: 4px;
      font-weight: 950;
    }

    .limit-steps span {
      display: block;
      color: rgba(255,255,255,.80);
      font-size: 14px;
      line-height: 1.55;
      font-weight: 520;
    }

    .apply-card {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 24px;
      align-items: stretch;
      border-radius: 34px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,243,223,.66));
      border: 1px solid rgba(139, 92, 246, .15);
      box-shadow: var(--shadow);
    }

    .apply-note {
      padding: 26px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 0% 0%, rgba(255,226,184,.84), transparent 34%),
        rgba(246, 238, 255, .80);
      border: 1px dashed rgba(139, 92, 246, .26);
    }

    .apply-note h2 {
      margin: 14px 0 12px;
      font-size: clamp(26px, 3vw, 36px);
      font-weight: 950;
      line-height: 1.2;
      letter-spacing: -.035em;
    }

    .apply-note p {
      margin: 0;
      color: var(--muted);
      font-weight: 520;
    }

    .mini-points {
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .mini-points li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.58);
      color: var(--ink-2);
      font-weight: 750;
    }

    .mini-points li::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 9px;
      background: var(--coral);
      box-shadow: 0 0 0 5px rgba(255, 77, 109, .12);
      flex: 0 0 auto;
    }

    .form-panel {
      padding: 26px;
      border-radius: 28px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(139, 92, 246, .13);
    }

    .form-label {
      color: var(--ink);
      font-weight: 900;
      margin-bottom: 7px;
    }

    .form-control,
    .form-select {
      min-height: 50px;
      border-radius: 16px;
      border: 1px solid rgba(139, 92, 246, .18);
      background-color: rgba(250, 246, 239, .62);
      color: var(--ink);
      font-weight: 650;
      padding: 12px 14px;
      transition: var(--ease);
    }

    textarea.form-control {
      min-height: 118px;
      resize: vertical;
    }

    .form-control::placeholder {
      color: rgba(117, 106, 130, .70);
    }

    .form-control:focus,
    .form-select:focus {
      border-color: rgba(139, 92, 246, .65);
      box-shadow: 0 0 0 4px rgba(139, 92, 246, .13);
      background-color: #fff;
    }

    .form-text {
      color: var(--muted);
      font-weight: 650;
      font-size: 13px;
    }

    .faq-wrap {
      max-width: 920px;
      margin-inline: auto;
    }

    .accordion {
      display: grid;
      gap: 14px;
    }

    .accordion-item {
      overflow: hidden;
      border: 1px solid rgba(139, 92, 246, .14) !important;
      border-radius: 24px !important;
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 25px rgba(95, 54, 160, .07);
    }

    .accordion-button {
      padding: 20px 22px;
      color: var(--ink);
      background: rgba(255,255,255,.70);
      font-weight: 950;
      box-shadow: none !important;
      border-radius: 24px !important;
    }

    .accordion-button:not(.collapsed) {
      color: var(--primary);
      background: linear-gradient(90deg, rgba(246,238,255,.92), rgba(255,243,223,.76));
    }

    .accordion-button:focus {
      box-shadow: inset 0 0 0 3px rgba(139, 92, 246, .14) !important;
    }

    .accordion-button::after {
      width: 28px;
      height: 28px;
      border-radius: 12px;
      background-color: rgba(139, 92, 246, .10);
      background-position: center;
      background-size: 16px;
    }

    .accordion-body {
      padding: 0 22px 22px;
      color: var(--muted);
      font-weight: 520;
    }

    .footer {
      padding: 58px 0 28px;
      border-top: 1px solid rgba(139, 92, 246, .14);
      background:
        radial-gradient(circle at 12% 0%, rgba(179,136,255,.22), transparent 30%),
        linear-gradient(180deg, rgba(255,250,241,.20), rgba(250,246,239,.92));
    }

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

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

    .footer p {
      max-width: 430px;
      margin: 0;
      color: var(--muted);
      font-weight: 520;
    }

    .footer h3 {
      margin: 0 0 14px;
      font-size: 16px;
      font-weight: 950;
      color: var(--ink);
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-links a {
      color: var(--muted);
      font-weight: 750;
    }

    .footer-links a:hover,
    .footer-links a:focus {
      color: var(--primary);
      transform: translateX(3px);
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 34px;
      padding-top: 20px;
      border-top: 1px solid rgba(139, 92, 246, .12);
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .mobile-sticky {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 999;
      padding: 10px;
      border-radius: 22px;
      background: rgba(255, 250, 241, .92);
      border: 1px solid rgba(139, 92, 246, .18);
      box-shadow: 0 18px 52px rgba(95, 54, 160, .18);
      backdrop-filter: blur(16px);
      align-items: center;
      gap: 10px;
    }

    .mobile-sticky .nav-status {
      flex: 0 0 auto;
      padding: 8px 10px;
      font-size: 12px;
    }

    .mobile-sticky .btn-brand {
      flex: 1;
      min-height: 46px;
      padding: 10px 14px;
    }

    @media (max-width: 1199px) {
      .container-custom {
        width: min(100% - 32px, 1080px);
      }

      .navbar-brand {
        min-width: auto;
      }

      .nav-actions {
        min-width: auto;
      }

      .hero-status-row,
      .summary-grid,
      .limit-banner,
      .apply-card {
        grid-template-columns: 1fr;
      }

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

    @media (max-width: 991px) {
      :root {
        --nav-height: auto;
      }

      .brand-nav .container-custom {
        flex-wrap: wrap;
      }

      .navbar-collapse {
        width: 100%;
        margin-top: 14px;
        padding: 16px;
        border-radius: 24px;
        background: rgba(255, 255, 255, .74);
        border: 1px solid rgba(139, 92, 246, .14);
        box-shadow: var(--shadow);
      }

      .navbar-nav {
        gap: 4px;
      }

      .nav-actions {
        margin-top: 12px;
        width: 100%;
        align-items: stretch !important;
        flex-direction: column;
      }

      .nav-actions .btn-brand {
        width: 100%;
      }

      .section {
        padding: 68px 0;
      }

      .hero {
        padding: 50px 0 36px;
      }

      .hero-shell {
        padding: 30px;
        border-radius: 30px;
      }

      .section-head {
        display: block;
      }

      .section-head p {
        margin-top: 12px;
      }

      .entry-layout,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .scroll-hint {
        display: block;
      }
    }

    @media (max-width: 767px) {
      .container-custom {
        width: min(100% - 24px, 100%);
      }

      .logo-mark {
        width: 38px;
        height: 38px;
        border-radius: 14px;
      }

      .logo-text strong {
        font-size: 15px;
      }

      .logo-text span {
        font-size: 11px;
      }

      .hero h1 {
        font-size: clamp(32px, 10vw, 38px);
      }

      .hero-lead {
        font-size: 16px;
      }

      .hero-shell {
        padding: 24px;
      }

      .status-strip,
      .entry-matrix,
      .countdown-row {
        grid-template-columns: 1fr;
      }

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

      .timeline-item .state-badge {
        grid-column: 2;
        justify-self: start;
      }

      .limit-banner {
        padding: 24px;
        border-radius: 28px;
      }

      .apply-card {
        padding: 12px;
      }

      .apply-note,
      .form-panel {
        padding: 22px;
      }

      .hero-actions .btn-brand,
      .hero-actions .btn-soft,
      .hero-actions .btn-outline-note {
        width: 100%;
      }

      .mobile-sticky {
        display: flex;
      }

      body {
        padding-bottom: 82px;
      }

      .copyright {
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .section {
        padding: 56px 0;
      }

      .hero-shell {
        border-radius: 24px;
      }

      .status-item,
      .matrix-card,
      .entry-card,
      .stage-card {
        border-radius: 22px;
      }

      .compare-table th,
      .compare-table td {
        padding: 16px 14px;
      }

      .breadcrumb-note {
        font-size: 13px;
      }
    }