/* roulang page: index */
:root{
      --bg:#090511;
      --bg2:#07070A;
      --panel:#15111F;
      --panel2:#111113;
      --text:#F8FAFC;
      --muted:#CBD5E1;
      --soft:#94A3B8;
      --purple:#8B5CF6;
      --cyan:#22D3EE;
      --orange:#F97316;
      --yellow:#FACC15;
      --line:rgba(148,163,184,.16);
      --shadow:0 18px 50px rgba(0,0,0,.42);
      --radius:24px;
    }
    html { scroll-behavior:smooth; }
    body {
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
      background:
        radial-gradient(circle at 12% 18%, rgba(139,92,246,.18), transparent 24%),
        radial-gradient(circle at 85% 14%, rgba(34,211,238,.14), transparent 22%),
        radial-gradient(circle at 76% 80%, rgba(249,115,22,.10), transparent 18%),
        linear-gradient(180deg, #090511 0%, #07070A 100%);
      color: var(--text);
      letter-spacing: 0;
    }
    body::before {
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 80%);
      opacity:.28;
      z-index:0;
    }
    body::after{
      content:"";
      position:fixed;
      inset:-20% -10%;
      pointer-events:none;
      background:
        linear-gradient(120deg, transparent 0 34%, rgba(34,211,238,.06) 34% 38%, transparent 38% 100%);
      transform: rotate(-6deg);
      z-index:0;
    }
    .page-wrap { position:relative; z-index:1; }
    .container-max { max-width: 1240px; }
    .glass-line { border:1px solid var(--line); box-shadow: var(--shadow); }
    .soft-glow { box-shadow: 0 0 0 1px rgba(34,211,238,.12), 0 0 28px rgba(139,92,246,.14); }
    .soft-glow:hover { box-shadow: 0 0 0 1px rgba(34,211,238,.24), 0 0 34px rgba(139,92,246,.22); }
    .grid-noise {
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(circle at top left, rgba(34,211,238,.09), transparent 42%);
    }
    .accent-gradient {
      background: linear-gradient(135deg, #8B5CF6 0%, #22D3EE 100%);
    }
    .accent-gradient-hover:hover {
      background: linear-gradient(135deg, #F97316 0%, #FACC15 100%);
    }
    .tag {
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.38rem .75rem;
      border-radius:999px;
      border:1px solid rgba(34,211,238,.20);
      background: rgba(34,211,238,.06);
      color:#dffaff;
      font-size:.78rem;
      font-weight:800;
      letter-spacing:.04em;
    }
    .tag-orange{
      border-color: rgba(249,115,22,.25);
      background: rgba(249,115,22,.10);
      color: #ffe0cc;
    }
    .btn-primary, .btn-secondary {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height: 46px;
      padding: .82rem 1.2rem;
      border-radius: 999px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      will-change: transform;
    }
    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, #8B5CF6, #22D3EE);
      box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 34px rgba(34,211,238,.16);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #F97316, #FACC15);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 34px rgba(249,115,22,.18);
    }
    .btn-secondary {
      color: #E2E8F0;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(34,211,238,.22);
      box-shadow: inset 0 0 0 1px rgba(139,92,246,.06);
    }
    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: rgba(34,211,238,.42);
      background: rgba(139,92,246,.12);
      box-shadow: 0 0 0 1px rgba(34,211,238,.12), 0 0 22px rgba(139,92,246,.14);
    }
    .card {
      background: linear-gradient(180deg, rgba(21,17,31,.96), rgba(17,17,19,.98));
      border: 1px solid rgba(148,163,184,.14);
      border-radius: 24px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(34,211,238,.38);
      box-shadow: 0 0 0 1px rgba(34,211,238,.14), 0 18px 46px rgba(0,0,0,.4);
    }
    .section-title {
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.1;
    }
    .small-line {
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,.45), rgba(139,92,246,.45), transparent);
    }
    .nav-link {
      color: #dbeafe;
      transition: color .2s ease, opacity .2s ease;
    }
    .nav-link:hover,
    .nav-link.active {
      color: #ffffff;
      opacity: 1;
    }
    .input-shell {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(34,211,238,.18);
      color: #f8fafc;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-shell:focus {
      outline: none;
      border-color: rgba(34,211,238,.48);
      box-shadow: 0 0 0 4px rgba(34,211,238,.08);
      background: rgba(255,255,255,.05);
    }
    .pulse-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #22D3EE;
      box-shadow: 0 0 18px rgba(34,211,238,.9);
    }
    .ticker {
      overflow: hidden;
      position: relative;
    }
    .ticker-track {
      display:flex;
      gap:1rem;
      white-space:nowrap;
      animation: slide 30s linear infinite;
      width:max-content;
    }
    @keyframes slide {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
    }
    .accordion-open .accordion-content {
      max-height: 260px;
    }
    .accordion-open .accordion-arrow {
      transform: rotate(180deg);
    }
    .hero-panel {
      background:
        radial-gradient(circle at 24% 20%, rgba(139,92,246,.18), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(34,211,238,.16), transparent 26%),
        linear-gradient(180deg, rgba(21,17,31,.98), rgba(17,17,19,.98));
      border: 1px solid rgba(148,163,184,.14);
      box-shadow: 0 24px 50px rgba(0,0,0,.45);
    }
    .hero-grid {
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 38%),
        radial-gradient(circle at top right, rgba(249,115,22,.12), transparent 34%);
    }
    .marquee {
      mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
    }
    .chip {
      border: 1px solid rgba(148,163,184,.18);
      background: rgba(255,255,255,.03);
      color: #e2e8f0;
      border-radius: 999px;
      padding: .46rem .78rem;
      font-size: .78rem;
      font-weight: 700;
    }
    .field-slim {
      min-height: 46px;
    }
    .count-box {
      background: rgba(0,0,0,.24);
      border: 1px solid rgba(34,211,238,.16);
      border-radius: 18px;
    }
    .category-ribbon {
      position: absolute;
      top: 1rem;
      right: 1rem;
      transform: rotate(8deg);
    }
    .badge-number {
      width: 2.15rem;
      height: 2.15rem;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      background: linear-gradient(135deg, rgba(139,92,246,.24), rgba(34,211,238,.24));
      border:1px solid rgba(34,211,238,.28);
      color:#fff;
      box-shadow: 0 0 22px rgba(139,92,246,.16);
    }
    .mobile-sticky {
      box-shadow: 0 -8px 24px rgba(0,0,0,.38);
      border-top: 1px solid rgba(34,211,238,.16);
    }
    @media (max-width: 768px) {
      .ticker-track { animation-duration: 24s; }
    }

/* roulang page: category2 */
:root {
      --bg: #090511;
      --bg-deep: #07070A;
      --panel: #15111F;
      --panel-2: #111113;
      --text: #F8FAFC;
      --muted: #CBD5E1;
      --weak: #94A3B8;
      --purple: #8B5CF6;
      --cyan: #22D3EE;
      --orange: #F97316;
      --yellow: #FACC15;
      --line: rgba(34, 211, 238, .18);
      --line-purple: rgba(139, 92, 246, .28);
      --radius: 24px;
      --shadow-cyan: 0 0 34px rgba(34, 211, 238, .16);
      --shadow-purple: 0 0 42px rgba(139, 92, 246, .18);
      --shadow-orange: 0 0 30px rgba(249, 115, 22, .14);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 8%, rgba(139, 92, 246, .22), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(34, 211, 238, .16), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(45deg, rgba(34, 211, 238, .035) 1px, transparent 1px),
        var(--bg);
      background-size: auto, auto, 34px 34px, 42px 42px, auto;
      line-height: 1.7;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    button,
    input {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    input {
      outline: none;
    }

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

    ::selection {
      color: #07070A;
      background: var(--cyan);
    }

    .site-shell {
      position: relative;
      min-height: 100vh;
    }

    .site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 0 12%, rgba(34, 211, 238, .055) 12% 12.35%, transparent 12.35% 44%, rgba(249, 115, 22, .045) 44% 44.4%, transparent 44.4%),
        radial-gradient(circle at 50% 0, rgba(250, 204, 21, .07), transparent 24%);
      opacity: .9;
      z-index: -1;
    }

    .container-x {
      width: min(1240px, calc(100% - 32px));
      margin-inline: auto;
    }

    .nav-link {
      color: rgb(203 213 225);
      position: relative;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: white;
    }

    .nav-link.active {
      color: white;
      background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(34, 211, 238, .18));
      box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .24), 0 0 22px rgba(139, 92, 246, .16);
    }

    .search-field {
      background: rgba(7, 7, 10, .72);
      border: 1px solid rgba(34, 211, 238, .18);
      color: white;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .search-field:focus {
      border-color: rgba(34, 211, 238, .75);
      box-shadow: 0 0 0 4px rgba(34, 211, 238, .12);
      background: rgba(17, 17, 19, .92);
    }

    .btn-primary {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 999px;
      padding: .78rem 1.18rem;
      color: white;
      font-weight: 900;
      background: linear-gradient(135deg, var(--purple), var(--cyan));
      box-shadow: 0 0 24px rgba(34, 211, 238, .22), 0 0 24px rgba(139, 92, 246, .18);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      color: #090511;
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      box-shadow: 0 0 34px rgba(250, 204, 21, .24);
      transform: translateY(-2px);
    }

    .btn-secondary {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: 999px;
      padding: .74rem 1.1rem;
      color: white;
      font-weight: 800;
      border: 1px solid rgba(34, 211, 238, .38);
      background: rgba(255, 255, 255, .04);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
      border-color: rgba(250, 204, 21, .65);
      background: rgba(139, 92, 246, .18);
      box-shadow: var(--shadow-orange);
      transform: translateY(-2px);
    }

    .neon-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(21, 17, 31, .95), rgba(17, 17, 19, .92));
      box-shadow: var(--shadow-purple);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .neon-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 28%, transparent 70%, rgba(34, 211, 238, .08));
      opacity: .65;
    }

    .neon-card:hover {
      transform: translateY(-5px);
      border-color: rgba(34, 211, 238, .62);
      box-shadow: var(--shadow-cyan);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      border-radius: 999px;
      border: 1px solid rgba(34, 211, 238, .22);
      background: rgba(34, 211, 238, .08);
      color: #A5F3FC;
      padding: .32rem .72rem;
      font-size: .78rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .tag-hot {
      border-color: rgba(250, 204, 21, .45);
      background: rgba(249, 115, 22, .15);
      color: #FDE68A;
    }

    .angle-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      padding: .32rem .62rem;
      color: #090511;
      font-size: .75rem;
      font-weight: 1000;
      background: linear-gradient(135deg, var(--yellow), var(--orange));
      transform: skewX(-10deg);
      box-shadow: 0 0 18px rgba(249, 115, 22, .32);
    }

    .angle-badge span {
      transform: skewX(10deg);
    }

    .section-title {
      font-size: clamp(1.75rem, 3vw, 2.55rem);
      line-height: 1.15;
      font-weight: 1000;
      letter-spacing: 0;
    }

    .section-kicker {
      color: #A5F3FC;
      font-size: .82rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .hero-panel {
      border: 1px solid rgba(34, 211, 238, .18);
      background:
        linear-gradient(135deg, rgba(139, 92, 246, .14), transparent 44%),
        linear-gradient(180deg, rgba(21, 17, 31, .94), rgba(7, 7, 10, .86));
      border-radius: 30px;
      box-shadow: 0 0 60px rgba(139, 92, 246, .18);
    }

    .step-card {
      border: 1px solid rgba(139, 92, 246, .24);
      background: rgba(255, 255, 255, .045);
      border-radius: 22px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .step-card:hover {
      transform: translateY(-4px);
      border-color: rgba(34, 211, 238, .62);
      background: rgba(34, 211, 238, .07);
    }

    .num-block {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      flex: 0 0 58px;
      border-radius: 18px;
      color: #090511;
      font-weight: 1000;
      font-size: 1.35rem;
      background: linear-gradient(135deg, var(--cyan), var(--yellow));
      box-shadow: 0 0 26px rgba(34, 211, 238, .25);
    }

    .abstract-cover {
      min-height: 132px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, .08);
      background:
        radial-gradient(circle at 18% 22%, rgba(250, 204, 21, .36), transparent 22%),
        radial-gradient(circle at 78% 30%, rgba(34, 211, 238, .28), transparent 26%),
        linear-gradient(135deg, rgba(139, 92, 246, .62), rgba(7, 7, 10, .72) 58%, rgba(249, 115, 22, .34)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 10px);
      position: relative;
      overflow: hidden;
    }

    .abstract-cover::after {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(255, 255, 255, .14);
      clip-path: polygon(0 0, 80% 0, 100% 28%, 100% 100%, 20% 100%, 0 72%);
    }

    .count-box {
      display: grid;
      place-items: center;
      min-width: 58px;
      min-height: 54px;
      border-radius: 16px;
      border: 1px solid rgba(250, 204, 21, .38);
      color: #FDE68A;
      background: rgba(250, 204, 21, .08);
      font-weight: 1000;
      font-size: 1.15rem;
      box-shadow: inset 0 0 18px rgba(250, 204, 21, .08);
    }

    .side-panel {
      border: 1px solid rgba(34, 211, 238, .16);
      border-radius: 24px;
      background: rgba(7, 7, 10, .66);
      box-shadow: var(--shadow-purple);
    }

    .list-item {
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(21, 17, 31, .72);
      border-radius: 24px;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .list-item:hover {
      transform: translateY(-4px);
      border-color: rgba(34, 211, 238, .5);
      box-shadow: var(--shadow-cyan);
    }

    .ticker {
      overflow: hidden;
      border-block: 1px solid rgba(34, 211, 238, .14);
      background: rgba(255, 255, 255, .035);
    }

    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 24s linear infinite;
    }

    .ticker:hover .ticker-track {
      animation-play-state: paused;
    }

    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .faq-item {
      border: 1px solid rgba(34, 211, 238, .16);
      border-radius: 20px;
      background: rgba(17, 17, 19, .78);
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .faq-item[open] {
      border-color: rgba(34, 211, 238, .46);
      background: rgba(21, 17, 31, .96);
      box-shadow: var(--shadow-cyan);
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      padding: 1.1rem 1.25rem;
      font-weight: 900;
      color: white;
    }

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

    .faq-item summary::after {
      content: "+";
      float: right;
      color: var(--cyan);
      font-weight: 1000;
    }

    .faq-item[open] summary::after {
      content: "−";
      color: var(--yellow);
    }

    .faq-item p {
      margin: 0;
      padding: 0 1.25rem 1.15rem;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.8;
    }

    .cta-band {
      position: relative;
      overflow: hidden;
      border-radius: 30px;
      border: 1px solid rgba(250, 204, 21, .25);
      background:
        linear-gradient(120deg, rgba(139, 92, 246, .7), rgba(34, 211, 238, .35) 46%, rgba(249, 115, 22, .46)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 12px);
      box-shadow: 0 0 56px rgba(139, 92, 246, .28), 0 0 32px rgba(249, 115, 22, .18);
    }

    .cta-band::before {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      right: -60px;
      top: -70px;
      border: 1px solid rgba(255, 255, 255, .16);
      transform: rotate(18deg);
    }

    .mobile-drawer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .25s ease;
    }

    .mobile-drawer.open {
      max-height: 420px;
    }

    @media (max-width: 1024px) {
      .container-x {
        width: min(100% - 28px, 920px);
      }

      .hero-panel {
        border-radius: 26px;
      }

      .side-panel {
        position: static;
      }
    }

    @media (max-width: 768px) {
      .container-x {
        width: min(100% - 24px, 720px);
      }

      .num-block {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 16px;
      }

      .abstract-cover {
        min-height: 108px;
      }

      .ticker-track {
        animation-duration: 30s;
      }
    }

    @media (max-width: 520px) {
      .container-x {
        width: min(100% - 20px, 500px);
      }

      .btn-primary,
      .btn-secondary {
        width: 100%;
        min-height: 48px;
      }

      .hero-panel,
      .cta-band,
      .neon-card,
      .list-item {
        border-radius: 22px;
      }

      .tag {
        font-size: .72rem;
      }
    }

/* roulang page: category1 */
:root {
      --bg: #090511;
      --bg-2: #111113;
      --panel: rgba(21, 17, 31, 0.92);
      --panel-strong: #15111f;
      --line: rgba(103, 232, 249, 0.16);
      --line-strong: rgba(139, 92, 246, 0.28);
      --text: #f8fafc;
      --subtext: #cbd5e1;
      --muted: #94a3b8;
      --purple: #8b5cf6;
      --cyan: #22d3ee;
      --orange: #f97316;
      --yellow: #facc15;
      --radius: 24px;
      --shadow: 0 22px 60px rgba(4, 6, 20, 0.52);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(139, 92, 246, 0.22), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(34, 211, 238, 0.16), transparent 22%),
        radial-gradient(circle at 50% 92%, rgba(249, 115, 22, 0.08), transparent 25%),
        linear-gradient(180deg, #090511 0%, #07070a 100%);
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 96px 96px;
      opacity: 0.28;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 0%, rgba(139, 92, 246, 0.04) 27%, transparent 32%, rgba(34, 211, 238, 0.05) 58%, transparent 64%);
      opacity: 0.8;
      mix-blend-mode: screen;
    }

    a, button, input, summary {
      -webkit-tap-highlight-color: transparent;
    }

    .container-wide {
      width: min(1240px, calc(100% - 2rem));
      margin: 0 auto;
    }

    .glass-border {
      border: 1px solid rgba(148, 163, 184, 0.12);
      box-shadow: var(--shadow);
      background: linear-gradient(180deg, rgba(21, 17, 31, 0.93), rgba(9, 5, 17, 0.88));
    }

    .neo-line {
      position: relative;
    }

    .neo-line::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, rgba(34, 211, 238, 0.05), rgba(34, 211, 238, 0.45), rgba(139, 92, 246, 0.5), rgba(249, 115, 22, 0.3), rgba(34, 211, 238, 0.05));
    }

    .nav-link {
      color: #e2e8f0;
      transition: all 180ms ease;
      border: 1px solid transparent;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: #ffffff;
      border-color: rgba(34, 211, 238, 0.3);
      background: rgba(255, 255, 255, 0.04);
      outline: none;
      box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08);
    }

    .nav-link.active {
      color: #fff;
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.22));
      border-color: rgba(34, 211, 238, 0.34);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(139, 92, 246, 0.22);
    }

    .accent-btn {
      background: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
      color: #fff;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
      box-shadow: 0 16px 30px rgba(34, 211, 238, 0.14);
    }

    .accent-btn:hover,
    .accent-btn:focus-visible {
      transform: translateY(-1px);
      background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
      box-shadow: 0 16px 32px rgba(249, 115, 22, 0.24);
      outline: none;
    }

    .ghost-btn {
      background: rgba(255,255,255,0.02);
      color: #e2e8f0;
      border: 1px solid rgba(103, 232, 249, 0.18);
      transition: all 180ms ease;
    }

    .ghost-btn:hover,
    .ghost-btn:focus-visible {
      background: rgba(139, 92, 246, 0.12);
      border-color: rgba(34, 211, 238, 0.34);
      box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08);
      outline: none;
    }

    .chip {
      border: 1px solid rgba(103, 232, 249, 0.16);
      background: rgba(255,255,255,0.03);
      color: #dbeafe;
      transition: all 180ms ease;
    }

    .chip:hover {
      border-color: rgba(34, 211, 238, 0.38);
      background: rgba(34, 211, 238, 0.08);
      color: #fff;
      transform: translateY(-1px);
    }

    .panel {
      background: linear-gradient(180deg, rgba(21, 17, 31, 0.94), rgba(17, 17, 19, 0.88));
      border: 1px solid rgba(103, 232, 249, 0.12);
      box-shadow: 0 12px 34px rgba(3, 4, 12, 0.48);
    }

    .feature-card {
      background: linear-gradient(180deg, rgba(21, 17, 31, 0.96), rgba(10, 10, 14, 0.92));
      border: 1px solid rgba(139, 92, 246, 0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(3, 4, 12, 0.34);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(34, 211, 238, 0.38);
      box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.1), 0 18px 36px rgba(3, 4, 12, 0.42);
    }

    .tag-burst {
      clip-path: polygon(10% 0, 100% 0, 90% 50%, 100% 100%, 12% 100%, 0 50%);
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.96), rgba(250, 204, 21, 0.96));
      color: #0b1020;
      box-shadow: 0 12px 24px rgba(249, 115, 22, 0.18);
    }

    .section-title {
      letter-spacing: 0;
    }

    .fade-mask {
      mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    }

    .scroll-track {
      display: flex;
      gap: 1rem;
      width: max-content;
      animation: track-scroll 30s linear infinite;
    }

    @keyframes track-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .count-box {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(103, 232, 249, 0.12);
    }

    .menu-drawer {
      transform-origin: top;
      transition: transform 180ms ease, opacity 180ms ease, max-height 240ms ease;
    }

    details > summary {
      list-style: none;
    }

    details > summary::-webkit-details-marker {
      display: none;
    }

    .faq-item[open] {
      border-color: rgba(34, 211, 238, 0.38);
      background: rgba(139, 92, 246, 0.08);
      box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.08);
    }

    .footer-link {
      color: #94a3b8;
      transition: color 180ms ease, transform 180ms ease;
    }

    .footer-link:hover,
    .footer-link:focus-visible {
      color: #fff;
      transform: translateX(2px);
      outline: none;
    }

    @media (max-width: 1024px) {
      .scroll-track {
        animation-duration: 38s;
      }
    }

    @media (max-width: 768px) {
      .container-wide {
        width: min(100% - 1rem, 1240px);
      }
    }