/* roulang page: index */
:root{
      --color-ink:#111111;
      --color-field:#F7F3EA;
      --color-accent:#B6FF3B;
      --color-alert:#FF4D2D;
      --color-muted:#6B6B6B;
      --color-line:#E8E0D2;
      --color-card:#FFFDF7;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      background:var(--color-field);
      color:var(--color-ink);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(182,255,59,.35)}
    summary::-webkit-details-marker{display:none}
    details .plus{transition:transform .25s ease}
    details[open] .plus{transform:rotate(45deg)}
    .hero-grid{
      background:
        radial-gradient(circle at 20% 20%, rgba(182,255,59,.18), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(255,176,0,.18), transparent 24%),
        radial-gradient(circle at 70% 80%, rgba(255,77,45,.16), transparent 20%),
        linear-gradient(135deg, #111111 0%, #161616 60%, #111111 100%);
    }
    .pattern{
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 30px 30px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 95%);
    }
    .ribbon-bg{
      background:
        linear-gradient(90deg, rgba(182,255,59,.18), rgba(255,176,0,.08)),
        linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
    }
    .ticket-edge{
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    }
    .text-balance{ text-wrap: balance; }

/* roulang page: category1 */
:root {
      --color-ink: #111111;
      --color-field: #FFF9EC;
      --color-accent: #B6FF3B;
      --color-alert: #FF4D2D;
      --color-muted: #6B6B6B;
      --color-line: #E8E0D2;
      --radius-xl: 28px;
      --shadow-soft: 0 18px 55px rgba(17,17,17,.12);
      --shadow-lift: 0 24px 70px rgba(17,17,17,.18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--color-field);
      color: var(--color-ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.7;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

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

    button, a, input, select, textarea {
      transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
    }

    :focus-visible {
      outline: 3px solid rgba(182,255,59,.9);
      outline-offset: 3px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(232,224,210,.92);
      background: rgba(255,249,236,.94);
      box-shadow: 0 10px 32px rgba(17,17,17,.06);
      backdrop-filter: blur(16px);
    }

    .brand-mark {
      box-shadow: inset 0 -5px 0 rgba(17,17,17,.12);
    }

    .search-box {
      min-height: 44px;
      border: 1px solid var(--color-line);
      background: #fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    }

    .search-box:focus-within {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 5px rgba(182,255,59,.22);
    }

    .btn-primary {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: 999px;
      background: var(--color-accent);
      padding: .85rem 1.25rem;
      color: var(--color-ink);
      font-weight: 900;
      box-shadow: 0 12px 26px rgba(17,17,17,.13);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(17,17,17,.19), 0 0 0 6px rgba(182,255,59,.16);
    }

    .btn-dark {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: 999px;
      background: var(--color-ink);
      padding: .85rem 1.25rem;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 16px 36px rgba(17,17,17,.18);
    }

    .btn-dark:hover {
      transform: translateY(-2px);
      background: #000;
      box-shadow: var(--shadow-lift);
    }

    .btn-outline {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border: 1px solid rgba(17,17,17,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.7);
      padding: .85rem 1.25rem;
      color: var(--color-ink);
      font-weight: 800;
    }

    .btn-outline:hover {
      transform: translateY(-2px);
      border-color: var(--color-ink);
      background: #fff;
      box-shadow: var(--shadow-soft);
    }

    .hero-surface {
      position: relative;
      overflow: hidden;
      border-radius: 0 0 46px 46px;
      background:
        radial-gradient(circle at 86% 8%, rgba(182,255,59,.36), transparent 32%),
        radial-gradient(circle at 12% 26%, rgba(255,176,0,.22), transparent 30%),
        linear-gradient(135deg, #fff9ec 0%, #f4efd9 46%, #111 46.2%, #111 100%);
    }

    .hero-surface::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .12;
      background-image:
        linear-gradient(90deg, rgba(17,17,17,.24) 1px, transparent 1px),
        linear-gradient(rgba(17,17,17,.24) 1px, transparent 1px);
      background-size: 34px 34px;
      pointer-events: none;
    }

    .video-panel {
      position: relative;
      min-height: 430px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 34px;
      background:
        linear-gradient(rgba(17,17,17,.48), rgba(17,17,17,.84)),
        radial-gradient(circle at 70% 20%, rgba(182,255,59,.38), transparent 30%),
        linear-gradient(135deg, #2b2b2b, #050505);
      box-shadow: var(--shadow-lift);
    }

    .video-panel::after {
      content: "";
      position: absolute;
      inset: auto -10% -22% -10%;
      height: 46%;
      background: repeating-linear-gradient(-12deg, rgba(182,255,59,.16) 0 10px, transparent 10px 21px);
      transform: skewY(-7deg);
    }

    .play-button {
      display: grid;
      width: 76px;
      height: 76px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      color: var(--color-accent);
      box-shadow: 0 0 0 10px rgba(182,255,59,.12);
      backdrop-filter: blur(10px);
    }

    .play-button:hover {
      transform: scale(1.05);
      background: rgba(182,255,59,.18);
    }

    .section-pad {
      padding: 86px 0;
    }

    .section-title {
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 950;
      letter-spacing: -.04em;
      line-height: 1.08;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border: 1px solid rgba(17,17,17,.12);
      border-radius: 999px;
      background: rgba(255,255,255,.68);
      padding: .45rem .8rem;
      font-size: .88rem;
      font-weight: 800;
      color: var(--color-ink);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: rgba(182,255,59,.22);
      padding: .42rem .75rem;
      font-size: .85rem;
      font-weight: 800;
      color: var(--color-ink);
    }

    .card {
      border: 1px solid var(--color-line);
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.78);
      box-shadow: 0 12px 36px rgba(17,17,17,.07);
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(17,17,17,.28);
      box-shadow: var(--shadow-soft);
    }

    .ticket-card {
      position: relative;
      overflow: hidden;
      border-radius: 30px;
      background: #111;
      color: #fff;
    }

    .ticket-card::before,
    .ticket-card::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: var(--color-field);
      transform: translateY(-50%);
    }

    .ticket-card::before { left: -14px; }
    .ticket-card::after { right: -14px; }

    .step-line {
      position: relative;
    }

    .step-line::before {
      content: "";
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 18px;
      width: 2px;
      background: linear-gradient(var(--color-accent), rgba(17,17,17,.12));
    }

    .form-field {
      min-height: 48px;
      width: 100%;
      border: 1px solid var(--color-line);
      border-radius: 16px;
      background: #fffdf7;
      padding: .78rem .95rem;
      color: var(--color-ink);
    }

    .form-field:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 5px rgba(182,255,59,.2);
      outline: none;
    }

    details.faq-item {
      border: 1px solid var(--color-line);
      border-radius: 22px;
      background: rgba(255,255,255,.72);
      padding: 1.1rem 1.25rem;
      box-shadow: 0 10px 30px rgba(17,17,17,.05);
    }

    details.faq-item[open] {
      border-color: rgba(182,255,59,.9);
      background: rgba(182,255,59,.12);
    }

    details.faq-item summary {
      cursor: pointer;
      list-style: none;
      font-weight: 900;
      color: var(--color-ink);
    }

    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    .footer-link:hover {
      color: var(--color-accent);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    @media (max-width: 1024px) {
      .hero-surface {
        background:
          radial-gradient(circle at 80% 0%, rgba(182,255,59,.34), transparent 34%),
          linear-gradient(180deg, #fff9ec 0%, #fff9ec 58%, #111 58.2%, #111 100%);
      }

      .video-panel {
        min-height: 360px;
      }

      .section-pad {
        padding: 70px 0;
      }
    }

    @media (max-width: 768px) {
      .mobile-nav-scroll {
        overflow-x: auto;
        scrollbar-width: none;
      }

      .mobile-nav-scroll::-webkit-scrollbar {
        display: none;
      }

      .hero-surface {
        border-radius: 0 0 30px 30px;
      }

      .video-panel {
        min-height: 310px;
        border-radius: 26px;
      }

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

    @media (max-width: 520px) {
      .btn-primary,
      .btn-dark,
      .btn-outline {
        width: 100%;
      }

      .section-title {
        font-size: 2rem;
      }

      .hero-surface h1 {
        font-size: 2.45rem;
      }
    }

/* roulang page: category2 */
:root {
      --color-ink: #111111;
      --color-field: #F7F3EA;
      --color-accent: #B6FF3B;
      --color-alert: #FF4D2D;
      --color-muted: #6B6B6B;
      --color-line: #E8E0D2;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      background: var(--color-field);
      color: var(--color-ink);
      letter-spacing: 0;
    }
    ::selection {
      background: var(--color-accent);
      color: #111111;
    }
    .shadow-soft { box-shadow: 0 16px 40px rgba(17,17,17,.10); }
    .shadow-hard { box-shadow: 0 22px 60px rgba(17,17,17,.18); }
    .bg-grid {
      background-image:
        linear-gradient(to right, rgba(17,17,17,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,17,17,.05) 1px, transparent 1px);
      background-size: 36px 36px;
    }
    .bg-stripe {
      background-image:
        linear-gradient(135deg, rgba(182,255,59,.16) 0%, rgba(182,255,59,.16) 18%, transparent 18%, transparent 100%),
        linear-gradient(315deg, rgba(255,77,45,.12) 0%, rgba(255,77,45,.12) 12%, transparent 12%, transparent 100%);
    }
    summary::-webkit-details-marker { display: none; }
    details[open] .faq-plus { display: none; }
    details:not([open]) .faq-minus { display: none; }
    .mobile-scrollbar::-webkit-scrollbar { height: 0; }
    .mobile-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }