/* roulang page: index */
:root {
      --bg: #050914;
      --bg-2: #07111f;
      --bg-3: #081827;
      --surface: rgba(12, 24, 42, .66);
      --surface-2: rgba(18, 35, 58, .48);
      --surface-3: rgba(9, 18, 32, .82);
      --text: #eaf4ff;
      --muted: #9ab0c6;
      --muted-2: #6f8398;
      --line: rgba(120, 180, 255, .17);
      --line-strong: rgba(40, 215, 255, .42);
      --blue: #0b5cff;
      --blue-2: #137bff;
      --cyan: #28d7ff;
      --purple: #7c3dff;
      --green: #33e1b0;
      --warning: #ffd166;
      --radius-lg: 32px;
      --radius-md: 24px;
      --radius-sm: 16px;
      --radius-pill: 999px;
      --shadow: 0 24px 80px rgba(0, 0, 0, .42);
      --glow: 0 0 34px rgba(40, 215, 255, .22);
      --glow-blue: 0 14px 44px rgba(11, 92, 255, .32);
      --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--text);
      line-height: 1.75;
      background:
        radial-gradient(circle at 10% 8%, rgba(11, 92, 255, .34), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(124, 61, 255, .28), transparent 30%),
        radial-gradient(circle at 58% 78%, rgba(40, 215, 255, .12), transparent 34%),
        linear-gradient(180deg, var(--bg), var(--bg-2) 42%, #030712 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background-image:
        linear-gradient(rgba(120, 180, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 180, 255, .045) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 88%);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: .18;
      background:
        linear-gradient(115deg, transparent 0%, rgba(40, 215, 255, .08) 40%, transparent 58%),
        radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 100% 100%, 4px 4px;
    }

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

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

    button, input {
      font: inherit;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(40, 215, 255, .22);
    }

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

    .container {
      max-width: 1180px;
    }

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

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

    .section-title {
      max-width: 760px;
      margin-bottom: 34px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      color: var(--cyan);
      font-size: 14px;
      letter-spacing: .04em;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      box-shadow: 0 0 18px rgba(40, 215, 255, .6);
    }

    h1, h2, h3, h4, p {
      margin-top: 0;
    }

    h1 {
      font-size: clamp(2.35rem, 6vw, 4.6rem);
      line-height: 1.08;
      font-weight: 820;
      letter-spacing: -.055em;
    }

    h2 {
      font-size: clamp(2rem, 4vw, 2.8rem);
      line-height: 1.16;
      font-weight: 780;
      letter-spacing: -.04em;
    }

    h3 {
      font-size: 1.25rem;
      line-height: 1.35;
      font-weight: 720;
    }

    .lead-text {
      color: var(--muted);
      font-size: clamp(1rem, 1.55vw, 1.12rem);
      max-width: 680px;
    }

    .text-muted-soft {
      color: var(--muted);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(120, 180, 255, .12);
      background: rgba(5, 9, 20, .76);
      backdrop-filter: blur(22px);
      box-shadow: 0 18px 54px rgba(0, 0, 0, .18);
    }

    .navbar {
      min-height: 78px;
      padding: 12px 0;
    }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      padding: 0;
      margin: 0;
      min-width: 230px;
    }

    .logo-mark {
      position: relative;
      width: 42px;
      height: 42px;
      border-radius: 15px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 15%),
        linear-gradient(135deg, rgba(11, 92, 255, .95), rgba(40, 215, 255, .72) 50%, rgba(124, 61, 255, .88));
      box-shadow: 0 0 26px rgba(40, 215, 255, .34);
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 14px rgba(51, 225, 176, .8);
    }

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

    .logo-main {
      font-weight: 800;
      font-size: 15px;
      letter-spacing: -.02em;
      color: var(--text);
    }

    .logo-sub {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 10px 12px;
      background: rgba(18, 35, 58, .55);
      color: var(--text);
      box-shadow: none;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(40, 215, 255, .18);
    }

    .navbar-toggler-icon {
      width: 22px;
      height: 22px;
      background-image: none;
      position: relative;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span {
      content: "";
      position: absolute;
      left: 2px;
      right: 2px;
      height: 2px;
      border-radius: 999px;
      background: var(--text);
    }

    .navbar-toggler-icon::before { top: 5px; }
    .navbar-toggler-icon span { top: 10px; }
    .navbar-toggler-icon::after { top: 15px; }

    .nav-center {
      gap: 8px;
      padding: 6px;
      border: 1px solid rgba(120, 180, 255, .11);
      border-radius: var(--radius-pill);
      background: rgba(9, 18, 32, .42);
    }

    .nav-link {
      color: var(--muted) !important;
      padding: 9px 16px !important;
      border-radius: var(--radius-pill);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
    }

    .nav-link:hover {
      color: var(--text) !important;
      background: rgba(40, 215, 255, .08);
    }

    .nav-link.active {
      color: var(--text) !important;
      background: linear-gradient(135deg, rgba(11, 92, 255, .88), rgba(40, 215, 255, .22));
      border: 1px solid rgba(40, 215, 255, .28);
      box-shadow: 0 0 22px rgba(11, 92, 255, .16);
    }

    .btn-glow,
    .btn-ghost,
    .btn-mini {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 0;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
      white-space: nowrap;
    }

    .btn-glow {
      min-height: 48px;
      padding: 13px 22px;
      border-radius: var(--radius-pill);
      color: white;
      font-weight: 760;
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .btn-glow:hover {
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 18px 54px rgba(40, 215, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .btn-ghost {
      min-height: 48px;
      padding: 12px 21px;
      border-radius: var(--radius-pill);
      color: var(--text);
      font-weight: 720;
      border: 1px solid var(--line);
      background: rgba(18, 35, 58, .38);
    }

    .btn-ghost:hover {
      color: var(--text);
      border-color: var(--line-strong);
      background: rgba(40, 215, 255, .08);
      transform: translateY(-2px);
      box-shadow: var(--glow);
    }

    .btn-mini {
      min-height: 38px;
      padding: 8px 14px;
      border-radius: var(--radius-pill);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      border: 1px solid rgba(120, 180, 255, .16);
      background: rgba(18, 35, 58, .46);
    }

    .btn-mini:hover {
      transform: translateY(-2px);
      border-color: rgba(40, 215, 255, .45);
      background: rgba(40, 215, 255, .08);
      color: var(--text);
    }

    .hero {
      min-height: calc(78vh - 78px);
      padding: 98px 0 76px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      right: -110px;
      top: 130px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(40, 215, 255, .22), rgba(124, 61, 255, .14) 38%, transparent 68%);
      filter: blur(8px);
      pointer-events: none;
    }

    .hero-brand-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 9px 14px;
      border-radius: var(--radius-pill);
      color: var(--text);
      border: 1px solid rgba(40, 215, 255, .22);
      background: rgba(18, 35, 58, .48);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 14px rgba(51, 225, 176, .85);
    }

    .gradient-text {
      background: linear-gradient(135deg, #fff, #dbeeff 45%, #71e4ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .hero-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 7px 12px;
      border-radius: var(--radius-pill);
      color: #cfe4f7;
      font-size: 13px;
      border: 1px solid rgba(120, 180, 255, .15);
      background: rgba(18, 35, 58, .36);
    }

    .pill strong {
      color: var(--text);
      font-weight: 760;
    }

    .glass-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(18, 35, 58, .62), rgba(9, 18, 32, .56));
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
    }

    .glass-card:hover {
      transform: translateY(-5px);
      border-color: rgba(40, 215, 255, .34);
      box-shadow: var(--shadow), var(--glow);
      background: linear-gradient(180deg, rgba(18, 35, 58, .74), rgba(9, 18, 32, .62));
    }

    .dashboard-card {
      position: relative;
      padding: 24px;
      min-height: 520px;
      overflow: hidden;
    }

    .dashboard-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: radial-gradient(circle at 24% 8%, rgba(40, 215, 255, .2), transparent 28%),
                  radial-gradient(circle at 92% 80%, rgba(124, 61, 255, .18), transparent 36%);
      pointer-events: none;
    }

    .dash-top,
    .dash-content,
    .dash-footer {
      position: relative;
      z-index: 1;
    }

    .dash-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
    }

    .dash-title {
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .dash-window {
      display: flex;
      gap: 6px;
    }

    .dash-window span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(154, 176, 198, .45);
    }

    .dash-window span:nth-child(1) { background: #ff6b8a; }
    .dash-window span:nth-child(2) { background: #ffd166; }
    .dash-window span:nth-child(3) { background: #33e1b0; }

    .abstract-cover {
      position: relative;
      overflow: hidden;
      min-height: 176px;
      border-radius: 26px;
      border: 1px solid rgba(120, 180, 255, .18);
      background:
        radial-gradient(circle at 20% 24%, rgba(40, 215, 255, .44), transparent 23%),
        radial-gradient(circle at 76% 34%, rgba(124, 61, 255, .5), transparent 28%),
        linear-gradient(135deg, rgba(11, 92, 255, .32), rgba(9, 18, 32, .8));
    }

    .abstract-cover::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(135deg, rgba(255,255,255,.1), transparent 50%);
      backdrop-filter: blur(8px);
    }

    .dash-list {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .dash-item {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 13px;
      border-radius: 19px;
      border: 1px solid rgba(120, 180, 255, .12);
      background: rgba(5, 9, 20, .34);
    }

    .dash-thumb {
      width: 44px;
      height: 44px;
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(40,215,255,.35), rgba(124,61,255,.28));
    }

    .dash-item strong {
      display: block;
      font-size: 14px;
      line-height: 1.3;
    }

    .dash-item small {
      color: var(--muted);
      font-size: 12px;
    }

    .dash-tag {
      padding: 5px 9px;
      border-radius: var(--radius-pill);
      color: #d9f7ff;
      font-size: 12px;
      background: rgba(40, 215, 255, .1);
      border: 1px solid rgba(40, 215, 255, .2);
    }

    .dash-footer {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .metric {
      padding: 14px;
      border-radius: 19px;
      border: 1px solid rgba(120, 180, 255, .12);
      background: rgba(18, 35, 58, .34);
    }

    .metric b {
      display: block;
      color: var(--text);
      font-size: 20px;
      line-height: 1.1;
    }

    .metric span {
      color: var(--muted);
      font-size: 12px;
    }

    .story-panel {
      padding: 30px;
    }

    .timeline-list {
      display: grid;
      gap: 18px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 16px;
      align-items: start;
    }

    .timeline-no {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--text);
      font-weight: 800;
      background: linear-gradient(135deg, rgba(11, 92, 255, .86), rgba(40, 215, 255, .28));
      border: 1px solid rgba(40, 215, 255, .28);
    }

    .timeline-item p {
      color: var(--muted);
      margin-bottom: 0;
      font-size: 15px;
    }

    .feature-rail {
      padding: 28px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 360px;
    }

    .rail-bars {
      display: grid;
      gap: 13px;
      margin-top: 22px;
    }

    .rail-bar {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(5, 9, 20, .34);
      border: 1px solid rgba(120, 180, 255, .12);
    }

    .rail-bar-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .bar-line {
      height: 7px;
      border-radius: 999px;
      background: rgba(120, 180, 255, .12);
      overflow: hidden;
    }

    .bar-line span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), var(--cyan));
      box-shadow: 0 0 16px rgba(40, 215, 255, .45);
    }

    .bento-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr .85fr;
      gap: 22px;
      grid-auto-flow: dense;
    }

    .bento-card {
      position: relative;
      padding: 24px;
      min-height: 220px;
      overflow: hidden;
    }

    .bento-card.large {
      grid-row: span 2;
      min-height: 462px;
    }

    .bento-card.wide {
      grid-column: span 2;
      min-height: 210px;
    }

    .bento-card::before {
      content: "";
      position: absolute;
      inset: auto -30% -50% auto;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(40, 215, 255, .22), transparent 68%);
      transition: transform .28s ease, opacity .28s ease;
      opacity: .7;
    }

    .bento-card:hover::before {
      transform: scale(1.18);
      opacity: 1;
    }

    .card-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 16px;
      padding: 7px 11px;
      border-radius: var(--radius-pill);
      color: #d9f7ff;
      font-size: 13px;
      background: rgba(40, 215, 255, .09);
      border: 1px solid rgba(40, 215, 255, .2);
    }

    .card-tag.purple {
      color: #eee5ff;
      background: rgba(124, 61, 255, .12);
      border-color: rgba(124, 61, 255, .26);
    }

    .bento-card p {
      color: var(--muted);
      margin-bottom: 18px;
      font-size: 15px;
    }

    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan);
      font-weight: 760;
      font-size: 14px;
    }

    .card-link span {
      transition: transform .22s ease;
    }

    .bento-card:hover .card-link span {
      transform: translateX(4px);
    }

    .mini-cover {
      height: 150px;
      border-radius: 24px;
      margin-bottom: 20px;
      border: 1px solid rgba(120, 180, 255, .16);
      background:
        linear-gradient(135deg, rgba(11, 92, 255, .24), rgba(124, 61, 255, .18)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
      overflow: hidden;
      position: relative;
    }

    .mini-cover::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      right: 22px;
      top: 20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(40, 215, 255, .48), transparent 70%);
      filter: blur(8px);
    }

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

    .trust-item {
      padding: 24px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: rgba(18, 35, 58, .42);
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .trust-item:hover {
      transform: translateY(-4px);
      border-color: rgba(40, 215, 255, .32);
      background: rgba(18, 35, 58, .56);
    }

    .icon-line {
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      border-radius: 16px;
      border: 1px solid rgba(40, 215, 255, .28);
      background: linear-gradient(135deg, rgba(11, 92, 255, .18), rgba(40, 215, 255, .08));
      position: relative;
    }

    .icon-line::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 8px;
      border: 2px solid rgba(234, 244, 255, .86);
    }

    .trust-item p {
      color: var(--muted);
      margin-bottom: 0;
      font-size: 14px;
    }

    .index-strip {
      padding: 24px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(40, 215, 255, .22);
      background:
        linear-gradient(135deg, rgba(11, 92, 255, .15), rgba(124, 61, 255, .1)),
        rgba(9, 18, 32, .62);
    }

    .strip-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .strip-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      border-radius: 20px;
      background: rgba(5, 9, 20, .36);
      border: 1px solid rgba(120, 180, 255, .12);
    }

    .strip-num {
      min-width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      font-weight: 820;
      color: var(--text);
      background: linear-gradient(135deg, rgba(11, 92, 255, .88), rgba(40, 215, 255, .2));
    }

    .strip-item span {
      display: block;
      color: var(--muted);
      font-size: 13px;
    }

    .accordion {
      --bs-accordion-bg: transparent;
      --bs-accordion-border-color: transparent;
      --bs-accordion-btn-focus-box-shadow: none;
      display: grid;
      gap: 14px;
    }

    .accordion-item {
      border: 1px solid var(--line) !important;
      border-radius: 22px !important;
      overflow: hidden;
      background: rgba(18, 35, 58, .42) !important;
      backdrop-filter: blur(18px);
    }

    .accordion-button {
      color: var(--text) !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 20px 22px;
      font-weight: 760;
      line-height: 1.5;
    }

    .accordion-button:not(.collapsed) {
      border-left: 3px solid var(--cyan);
      background: rgba(40, 215, 255, .055) !important;
    }

    .accordion-button::after {
      filter: invert(1) brightness(1.4);
      opacity: .7;
    }

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

    .cta-panel {
      position: relative;
      padding: 42px;
      border-radius: 34px;
      overflow: hidden;
      border: 1px solid rgba(40, 215, 255, .24);
      background:
        radial-gradient(circle at 18% 20%, rgba(40, 215, 255, .2), transparent 28%),
        radial-gradient(circle at 88% 30%, rgba(124, 61, 255, .2), transparent 34%),
        linear-gradient(135deg, rgba(18, 35, 58, .74), rgba(9, 18, 32, .72));
      box-shadow: var(--shadow), var(--glow);
    }

    .subscribe-form {
      display: flex;
      gap: 12px;
      padding: 8px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(120, 180, 255, .16);
      background: rgba(5, 9, 20, .45);
    }

    .subscribe-input {
      flex: 1;
      min-width: 0;
      height: 48px;
      padding: 0 18px;
      color: var(--text);
      border: 0;
      outline: 0;
      border-radius: var(--radius-pill);
      background: transparent;
    }

    .subscribe-input::placeholder {
      color: rgba(207, 228, 247, .62);
    }

    .subscribe-input:focus {
      background: rgba(40, 215, 255, .05);
    }

    .site-footer {
      padding: 70px 0 26px;
      background: rgba(2, 6, 14, .88);
      border-top: 1px solid rgba(120, 180, 255, .12);
    }

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

    .footer-title {
      font-weight: 820;
      letter-spacing: -.02em;
    }

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

    .footer-heading {
      font-size: 15px;
      margin-bottom: 14px;
      font-weight: 760;
      color: var(--text);
    }

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

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

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

    .footer-bottom {
      margin-top: 46px;
      padding-top: 22px;
      border-top: 1px solid rgba(120, 180, 255, .1);
      color: var(--muted-2);
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .age-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: var(--radius-pill);
      background: rgba(255, 209, 102, .08);
      border: 1px solid rgba(255, 209, 102, .18);
      color: #ffe7a8;
      font-size: 13px;
    }

    @media (max-width: 1199.98px) {
      .navbar-brand {
        min-width: auto;
      }

      .nav-center {
        margin-top: 16px;
        border-radius: 22px;
        padding: 10px;
      }

      .nav-link {
        padding: 11px 14px !important;
      }

      .hero {
        padding-top: 78px;
      }

      .dashboard-card {
        min-height: 470px;
      }

      .bento-grid {
        grid-template-columns: 1fr 1fr;
      }

      .bento-card.large,
      .bento-card.wide {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 260px;
      }

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

      .strip-row {
        grid-template-columns: 1fr;
      }
    }

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

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

      .navbar {
        min-height: 66px;
      }

      .navbar-collapse {
        margin-top: 14px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(5, 9, 20, .88);
      }

      .nav-center {
        align-items: stretch !important;
        background: transparent;
        border: 0;
        padding: 0;
        gap: 8px;
      }

      .nav-link {
        width: 100%;
      }

      .nav-cta {
        width: 100%;
        margin-top: 10px;
      }

      .hero {
        min-height: auto;
        padding: 58px 0 58px;
      }

      .hero-actions,
      .subscribe-form {
        flex-direction: column;
      }

      .hero-actions .btn-glow,
      .hero-actions .btn-ghost,
      .subscribe-form .btn-glow {
        width: 100%;
      }

      .dashboard-card {
        min-height: auto;
        margin-top: 26px;
        padding: 18px;
        border-radius: 26px;
      }

      .dash-footer {
        grid-template-columns: 1fr;
      }

      .dash-item {
        grid-template-columns: 38px 1fr;
      }

      .dash-tag {
        grid-column: 2;
        justify-self: start;
      }

      .story-panel,
      .feature-rail,
      .bento-card,
      .trust-item,
      .cta-panel {
        padding: 22px;
      }

      .bento-grid,
      .trust-grid {
        grid-template-columns: 1fr;
      }

      .strip-item {
        align-items: flex-start;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      h1 {
        letter-spacing: -.04em;
      }

      .logo-main {
        font-size: 13px;
      }

      .logo-sub {
        display: none;
      }

      .hero-brand-pill {
        align-items: flex-start;
        border-radius: 18px;
      }

      .pill {
        width: 100%;
        justify-content: center;
      }

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

      .mini-cover {
        height: 118px;
      }

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

/* roulang page: category2 */
:root{
      --bg:#050914;
      --bg-2:#07111f;
      --bg-3:#081827;
      --panel:rgba(12,24,42,.68);
      --panel-2:rgba(18,35,58,.52);
      --panel-strong:rgba(9,20,36,.88);
      --text:#eaf4ff;
      --muted:#9fb2c7;
      --muted-2:#7890aa;
      --line:rgba(120,180,255,.18);
      --line-strong:rgba(40,215,255,.38);
      --blue:#0b5cff;
      --blue-2:#137bff;
      --cyan:#28d7ff;
      --purple:#7c3dff;
      --green:#47e6a7;
      --danger:#ff6f91;
      --radius-xl:34px;
      --radius-lg:26px;
      --radius-md:20px;
      --radius-sm:14px;
      --shadow:0 24px 80px rgba(0,0,0,.42);
      --glow:0 0 32px rgba(40,215,255,.22),0 0 72px rgba(11,92,255,.16);
      --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      line-height:1.75;
      background:
        radial-gradient(circle at 10% 8%,rgba(11,92,255,.30),transparent 32%),
        radial-gradient(circle at 88% 12%,rgba(124,61,255,.28),transparent 30%),
        radial-gradient(circle at 54% 92%,rgba(40,215,255,.10),transparent 34%),
        linear-gradient(180deg,var(--bg),var(--bg-2) 42%,#03060d 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(120,180,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(120,180,255,.045) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 86%);
    }
    body:after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:linear-gradient(120deg,transparent 0%,rgba(40,215,255,.05) 38%,transparent 62%);
      opacity:.8;
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease,transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
    img{max-width:100%;display:block}
    button,input{font-family:inherit}
    ::selection{background:rgba(40,215,255,.28);color:#fff}
    .container{max-width:1200px}
    .section{padding:96px 0;position:relative}
    .section-tight{padding:70px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      color:#cfeaff;
      background:rgba(18,35,58,.42);
      font-size:14px;
      line-height:1.2;
      box-shadow:inset 0 0 18px rgba(40,215,255,.05);
    }
    .eyebrow:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 18px rgba(71,230,167,.8);
    }
    .section-title{
      margin:16px 0 12px;
      font-size:clamp(30px,4vw,46px);
      line-height:1.16;
      font-weight:800;
      letter-spacing:-.03em;
    }
    .section-desc{
      max-width:760px;
      color:var(--muted);
      font-size:17px;
      margin:0;
    }
    .text-gradient{
      background:linear-gradient(90deg,#fff,#cdeaff 48%,#59e7ff);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(5,9,20,.72);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(120,180,255,.13);
      box-shadow:0 16px 48px rgba(0,0,0,.20);
    }
    .site-header .navbar{min-height:78px;padding:0}
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      color:var(--text);
      padding:10px 0;
    }
    .logo-mark{
      width:42px;
      height:42px;
      border-radius:15px;
      position:relative;
      flex:0 0 auto;
      background:
        radial-gradient(circle at 35% 30%,#8ff3ff 0 9%,transparent 10%),
        linear-gradient(135deg,var(--blue),var(--purple) 58%,var(--cyan));
      box-shadow:0 0 26px rgba(40,215,255,.35), inset 0 0 16px rgba(255,255,255,.16);
    }
    .logo-mark:after{
      content:"";
      position:absolute;
      inset:9px;
      border:1px solid rgba(255,255,255,.35);
      border-radius:11px;
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
    .logo-main{
      color:#f2f8ff;
      font-weight:800;
      font-size:16px;
      letter-spacing:-.02em;
      white-space:nowrap;
    }
    .logo-sub{
      margin-top:4px;
      color:var(--muted-2);
      font-size:12px;
      white-space:nowrap;
    }
    .nav-center{
      gap:8px;
      padding:8px;
      border:1px solid rgba(120,180,255,.10);
      border-radius:999px;
      background:rgba(12,24,42,.34);
    }
    .navbar .nav-link{
      color:#b8c8dc;
      padding:9px 15px!important;
      border-radius:999px;
      font-size:14px;
      font-weight:650;
      position:relative;
    }
    .navbar .nav-link:hover{
      color:#fff;
      background:rgba(40,215,255,.10);
      box-shadow:inset 0 0 0 1px rgba(40,215,255,.14);
    }
    .navbar .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg,rgba(11,92,255,.92),rgba(40,215,255,.78));
      box-shadow:0 12px 34px rgba(11,92,255,.25);
    }
    .navbar-toggler{
      width:46px;
      height:42px;
      border:1px solid var(--line);
      border-radius:15px;
      background:rgba(18,35,58,.58);
      box-shadow:none!important;
      padding:0;
    }
    .navbar-toggler:focus{outline:3px solid rgba(40,215,255,.24)}
    .navbar-toggler-icon{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      height:100%;
      background:none;
    }
    .navbar-toggler-icon span,
    .navbar-toggler-icon span:before,
    .navbar-toggler-icon span:after{
      content:"";
      display:block;
      width:20px;
      height:2px;
      border-radius:999px;
      background:#d8efff;
      position:relative;
    }
    .navbar-toggler-icon span:before{position:absolute;top:-7px}
    .navbar-toggler-icon span:after{position:absolute;top:7px}
    .btn-glow,
    .btn-ghost{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border-radius:999px;
      min-height:46px;
      padding:12px 20px;
      font-weight:760;
      line-height:1.2;
      border:1px solid transparent;
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
      white-space:nowrap;
    }
    .btn-glow{
      color:#fff;
      background:linear-gradient(135deg,var(--blue),var(--cyan));
      box-shadow:0 16px 40px rgba(11,92,255,.32),0 0 24px rgba(40,215,255,.22);
    }
    .btn-glow:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 20px 56px rgba(11,92,255,.42),0 0 38px rgba(40,215,255,.30);
    }
    .btn-ghost{
      color:#dceeff;
      background:rgba(18,35,58,.45);
      border-color:var(--line);
    }
    .btn-ghost:hover{
      color:#fff;
      transform:translateY(-2px);
      border-color:var(--line-strong);
      background:rgba(40,215,255,.08);
      box-shadow:0 16px 34px rgba(0,0,0,.22);
    }
    .btn-glow:focus-visible,.btn-ghost:focus-visible,.form-control:focus{
      outline:3px solid rgba(40,215,255,.25);
      outline-offset:3px;
    }
    .nav-cta{min-width:126px}

    .topic-hero{padding:86px 0 52px}
    .hero-panel{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      background:
        radial-gradient(circle at 72% 22%,rgba(124,61,255,.24),transparent 34%),
        radial-gradient(circle at 18% 16%,rgba(40,215,255,.13),transparent 26%),
        linear-gradient(135deg,rgba(12,24,42,.82),rgba(8,16,31,.68));
      box-shadow:var(--shadow),var(--glow);
      padding:46px;
      isolation:isolate;
    }
    .hero-panel:before{
      content:"";
      position:absolute;
      width:360px;
      height:360px;
      right:-120px;
      top:-130px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(40,215,255,.22),transparent 64%);
      filter:blur(4px);
      z-index:-1;
    }
    .hero-title{
      max-width:680px;
      margin:18px 0 18px;
      font-size:clamp(36px,5.7vw,68px);
      line-height:1.08;
      font-weight:850;
      letter-spacing:-.055em;
    }
    .hero-subtitle{
      max-width:690px;
      color:#b8c9dd;
      font-size:18px;
      margin:0 0 26px;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:34px;
      max-width:720px;
    }
    .metric-pill{
      border:1px solid rgba(120,180,255,.16);
      border-radius:18px;
      background:rgba(5,13,26,.42);
      padding:14px 15px;
      min-width:0;
    }
    .metric-pill strong{
      display:block;
      color:#fff;
      font-size:20px;
      line-height:1.1;
    }
    .metric-pill span{
      display:block;
      margin-top:4px;
      color:var(--muted-2);
      font-size:13px;
    }
    .stack-showcase{
      position:relative;
      min-height:360px;
    }
    .cover-card{
      position:absolute;
      border:1px solid rgba(130,190,255,.18);
      border-radius:28px;
      background:linear-gradient(145deg,rgba(17,35,62,.86),rgba(10,18,34,.72));
      box-shadow:0 24px 80px rgba(0,0,0,.36),0 0 28px rgba(124,61,255,.16);
      overflow:hidden;
      backdrop-filter:blur(14px);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .cover-card:hover{
      transform:translateY(-6px) rotate(0deg)!important;
      border-color:rgba(40,215,255,.42);
      box-shadow:0 28px 84px rgba(0,0,0,.42),0 0 40px rgba(40,215,255,.18);
    }
    .cover-card.large{width:250px;height:300px;right:82px;top:8px;transform:rotate(-6deg)}
    .cover-card.mid{width:210px;height:248px;right:12px;top:84px;transform:rotate(8deg)}
    .cover-card.small{width:190px;height:190px;right:210px;top:136px;transform:rotate(-2deg)}
    .cover-art{
      height:58%;
      background:
        radial-gradient(circle at 30% 28%,rgba(40,215,255,.52),transparent 24%),
        radial-gradient(circle at 74% 46%,rgba(124,61,255,.55),transparent 28%),
        linear-gradient(135deg,rgba(11,92,255,.48),rgba(5,9,20,.92));
      position:relative;
    }
    .cover-art:after{
      content:"";
      position:absolute;
      inset:20px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.13);
      background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
    }
    .cover-body{padding:18px}
    .cover-body .tag{margin-bottom:10px}
    .cover-body h2,.cover-body h3{
      margin:0;
      font-size:18px;
      line-height:1.35;
      font-weight:800;
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(120,180,255,.18);
      background:rgba(40,215,255,.07);
      color:#caecff;
      font-size:13px;
      line-height:1.15;
      white-space:nowrap;
    }
    .tag.active{
      border-color:transparent;
      background:linear-gradient(135deg,rgba(11,92,255,.92),rgba(40,215,255,.78));
      color:#fff;
      box-shadow:0 10px 26px rgba(11,92,255,.28);
    }
    .filter-strip{
      margin-top:28px;
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding-bottom:6px;
      scrollbar-width:thin;
      scrollbar-color:rgba(40,215,255,.42) transparent;
    }
    .filter-strip .tag{flex:0 0 auto}

    .glass-card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:var(--panel);
      box-shadow:0 18px 60px rgba(0,0,0,.26);
      backdrop-filter:blur(16px);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
      overflow:hidden;
      height:100%;
    }
    .glass-card:hover{
      transform:translateY(-5px);
      border-color:rgba(40,215,255,.38);
      background:rgba(18,35,58,.66);
      box-shadow:0 24px 74px rgba(0,0,0,.34),0 0 34px rgba(40,215,255,.14);
    }
    .bento-grid{
      display:grid;
      grid-template-columns:1.35fr .9fr .9fr;
      grid-auto-rows:minmax(180px,auto);
      gap:22px;
    }
    .bento-card{padding:26px;position:relative;isolation:isolate}
    .bento-card:before{
      content:"";
      position:absolute;
      inset:auto -80px -110px auto;
      width:240px;
      height:240px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(40,215,255,.12),transparent 66%);
      z-index:-1;
    }
    .bento-card.feature{grid-row:span 2;min-height:420px}
    .bento-card.wide{grid-column:span 2}
    .card-kicker{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
    }
    .card-title{
      margin:0 0 12px;
      font-size:clamp(22px,2.6vw,32px);
      line-height:1.22;
      font-weight:820;
      letter-spacing:-.025em;
    }
    .card-desc{color:var(--muted);margin:0;font-size:16px}
    .card-arrow{
      display:inline-flex;
      align-items:center;
      margin-top:22px;
      color:#dff7ff;
      font-weight:760;
    }
    .card-arrow:after{
      content:"→";
      margin-left:8px;
      transition:transform .2s ease;
    }
    .glass-card:hover .card-arrow:after{transform:translateX(5px)}
    .abstract-cover{
      min-height:180px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.10);
      margin:24px 0;
      background:
        linear-gradient(115deg,rgba(255,255,255,.08),transparent 38%),
        radial-gradient(circle at 30% 35%,rgba(40,215,255,.48),transparent 20%),
        radial-gradient(circle at 70% 55%,rgba(124,61,255,.52),transparent 24%),
        linear-gradient(135deg,rgba(11,92,255,.42),rgba(8,17,32,.9));
      position:relative;
      overflow:hidden;
    }
    .abstract-cover:before{
      content:"";
      position:absolute;
      inset:20px;
      border-radius:20px;
      border:1px dashed rgba(207,234,255,.18);
    }
    .mini-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
    .mini-list li{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:13px 0;
      border-bottom:1px solid rgba(120,180,255,.10);
      color:#d5e6f8;
    }
    .mini-list li:last-child{border-bottom:0}
    .mini-list small{color:var(--muted-2);white-space:nowrap}
    .tag-cloud{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
    .update-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      padding:22px 24px;
      border:1px solid rgba(40,215,255,.22);
      border-radius:24px;
      background:linear-gradient(90deg,rgba(11,92,255,.14),rgba(124,61,255,.10),rgba(40,215,255,.08));
    }
    .update-bar strong{display:block;font-size:20px;color:#fff}
    .update-bar span{color:var(--muted);font-size:15px}

    .path-panel{
      padding:34px;
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:linear-gradient(135deg,rgba(12,24,42,.74),rgba(8,16,31,.60));
      box-shadow:var(--shadow);
    }
    .steps{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin-top:34px;
      position:relative;
    }
    .step-card{
      position:relative;
      padding:25px;
      border-radius:24px;
      border:1px solid rgba(120,180,255,.16);
      background:rgba(18,35,58,.42);
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }
    .step-card:hover{
      transform:translateY(-4px);
      border-color:rgba(40,215,255,.38);
      box-shadow:0 18px 50px rgba(0,0,0,.28);
    }
    .step-num{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:15px;
      color:#fff;
      font-weight:850;
      background:linear-gradient(135deg,var(--blue),var(--purple));
      box-shadow:0 0 24px rgba(124,61,255,.25);
      margin-bottom:18px;
    }
    .step-card h3{font-size:21px;margin:0 0 8px;font-weight:800}
    .step-card p{margin:0;color:var(--muted)}

    .signal-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .signal-card{
      padding:24px;
      border-radius:24px;
      border:1px solid var(--line);
      background:rgba(12,24,42,.58);
    }
    .signal-icon{
      width:46px;
      height:46px;
      border-radius:16px;
      border:1px solid rgba(40,215,255,.28);
      background:rgba(40,215,255,.08);
      display:grid;
      place-items:center;
      color:#aef3ff;
      font-weight:900;
      margin-bottom:16px;
      box-shadow:inset 0 0 20px rgba(40,215,255,.07);
    }
    .signal-card h3{font-size:19px;margin:0 0 8px;font-weight:800}
    .signal-card p{margin:0;color:var(--muted);font-size:15px}

    .subscribe-band{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
      padding:30px;
      border-radius:var(--radius-xl);
      border:1px solid rgba(40,215,255,.22);
      background:
        radial-gradient(circle at 15% 50%,rgba(40,215,255,.15),transparent 28%),
        linear-gradient(135deg,rgba(11,92,255,.20),rgba(18,35,58,.62));
      box-shadow:var(--shadow);
    }
    .subscribe-band h2{font-size:clamp(26px,3vw,38px);line-height:1.18;font-weight:850;margin:0 0 8px}
    .subscribe-band p{margin:0;color:var(--muted)}
    .subscribe-form{
      display:flex;
      gap:12px;
      min-width:420px;
    }
    .form-control{
      min-height:48px;
      border-radius:999px;
      border:1px solid rgba(120,180,255,.22);
      background:rgba(5,13,26,.58);
      color:#fff;
      padding:12px 17px;
      box-shadow:none!important;
    }
    .form-control::placeholder{color:#8fa7bd}
    .form-control:focus{
      color:#fff;
      background:rgba(5,13,26,.72);
      border-color:rgba(40,215,255,.58);
    }

    .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:transparent}
    .accordion-item{
      margin-bottom:14px;
      border:1px solid var(--line)!important;
      border-radius:22px!important;
      overflow:hidden;
      background:rgba(12,24,42,.58)!important;
      box-shadow:0 12px 38px rgba(0,0,0,.20);
    }
    .accordion-button{
      background:transparent!important;
      color:#eaf4ff!important;
      font-weight:800;
      padding:20px 22px;
      box-shadow:none!important;
    }
    .accordion-button:focus{box-shadow:inset 4px 0 0 rgba(40,215,255,.7)!important}
    .accordion-button:not(.collapsed){
      background:linear-gradient(90deg,rgba(40,215,255,.10),transparent)!important;
      border-left:4px solid var(--cyan);
    }
    .accordion-button:after{
      filter:invert(1) grayscale(1);
      opacity:.75;
    }
    .accordion-body{
      color:var(--muted);
      padding:0 22px 22px 26px;
    }

    .site-footer{
      padding:64px 0 28px;
      background:#03060d;
      border-top:1px solid rgba(120,180,255,.12);
      position:relative;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
    }
    .footer-title{
      color:#f2f8ff;
      font-size:18px;
      font-weight:850;
      line-height:1.2;
    }
    .footer-text{
      color:var(--muted);
      max-width:360px;
      margin:0;
      font-size:15px;
    }
    .footer-heading{
      color:#fff;
      font-size:16px;
      margin:0 0 16px;
      font-weight:820;
    }
    .footer-links{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:10px;
    }
    .footer-links a,.footer-links span{
      color:#8fa6bd;
      font-size:14px;
    }
    .footer-links a:hover{color:#56e6ff}
    .footer-bottom{
      margin-top:44px;
      padding-top:22px;
      border-top:1px solid rgba(120,180,255,.10);
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:#6f849b;
      font-size:13px;
    }

    @media (max-width:1199.98px){
      .site-header .navbar{padding:10px 0}
      .navbar-collapse{
        margin-top:12px;
        padding:18px;
        border:1px solid var(--line);
        border-radius:24px;
        background:rgba(5,13,26,.92);
        box-shadow:0 24px 70px rgba(0,0,0,.36);
      }
      .nav-center{
        border-radius:20px;
        background:transparent;
        border:0;
        padding:0;
        align-items:stretch!important;
      }
      .navbar .nav-link{padding:12px 14px!important}
      .nav-cta{width:100%}
      .hero-panel{padding:36px}
      .stack-showcase{min-height:320px;margin-top:24px}
      .cover-card.large{right:170px}
      .cover-card.mid{right:78px}
      .cover-card.small{right:300px}
      .bento-grid{grid-template-columns:1fr 1fr}
      .bento-card.feature{grid-row:span 1;grid-column:span 2}
      .signal-grid{grid-template-columns:repeat(2,1fr)}
      .subscribe-band{align-items:flex-start;flex-direction:column}
      .subscribe-form{min-width:0;width:100%}
    }
    @media (max-width:767.98px){
      .section{padding:66px 0}
      .section-tight{padding:54px 0}
      .topic-hero{padding:48px 0 34px}
      .hero-panel{padding:26px;border-radius:28px}
      .hero-subtitle{font-size:16px}
      .hero-actions{flex-direction:column}
      .hero-actions .btn-glow,.hero-actions .btn-ghost{width:100%}
      .hero-metrics{grid-template-columns:1fr;gap:10px}
      .stack-showcase{min-height:290px}
      .cover-card.large{width:210px;height:250px;left:6px;right:auto;top:8px}
      .cover-card.mid{width:182px;height:218px;right:0;top:62px}
      .cover-card.small{width:158px;height:166px;left:92px;right:auto;top:132px}
      .bento-grid{display:block}
      .bento-card{margin-bottom:18px}
      .bento-card.feature,.bento-card.wide{grid-column:auto}
      .update-bar{flex-direction:column;align-items:flex-start}
      .steps{grid-template-columns:1fr}
      .signal-grid{grid-template-columns:1fr}
      .subscribe-form{flex-direction:column}
      .subscribe-form .btn-glow{width:100%}
      .subscribe-band{padding:24px;border-radius:28px}
      .footer-bottom{flex-direction:column}
      .logo-main{font-size:14px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
      .logo-sub{font-size:11px}
    }
    @media (max-width:520px){
      .container{padding-left:18px;padding-right:18px}
      .hero-title{font-size:36px}
      .section-title{font-size:29px}
      .stack-showcase{transform:scale(.94);transform-origin:left top;margin-bottom:-18px}
      .cover-card.small{display:none}
      .filter-strip{margin-left:-4px;margin-right:-4px}
      .metric-pill strong{font-size:18px}
    }

/* roulang page: category1 */
:root{
  --bg:#050914;
  --bg-2:#07111F;
  --bg-3:#081827;
  --panel:rgba(12,24,42,.68);
  --panel-2:rgba(18,35,58,.48);
  --panel-3:rgba(8,18,34,.84);
  --text:#EAF4FF;
  --muted:#8FA6BD;
  --muted-2:#A7B7C8;
  --line:rgba(120,180,255,.16);
  --line-2:rgba(120,180,255,.26);
  --brand:#0B5CFF;
  --brand-2:#28D7FF;
  --brand-3:#7C3DFF;
  --glow:0 0 0 1px rgba(95,151,255,.12), 0 18px 50px rgba(0,0,0,.42), 0 0 44px rgba(19,123,255,.14);
  --glow-soft:0 10px 30px rgba(0,0,0,.28);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --header-h:80px;
  --container-max:1200px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(11,92,255,.20), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(124,61,255,.16), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(40,215,255,.10), transparent 36%),
    linear-gradient(180deg, #04070e 0%, #07111f 44%, #060b15 100%);
  overflow-x:hidden;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 88%);
  opacity:.36;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 24%, rgba(40,215,255,.08), transparent 22%),
    radial-gradient(circle at 78% 30%, rgba(124,61,255,.07), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(11,92,255,.06), transparent 26%);
  filter:blur(22px);
  opacity:.95;
  z-index:0;
}

::selection{
  background:rgba(40,215,255,.28);
  color:#fff;
}

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

a:hover{
  color:inherit;
}

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

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

button{
  border:none;
}

.container,
.container-lg{
  position:relative;
  z-index:1;
}

@media (min-width: 1200px){
  .container,
  .container-lg{
    max-width:var(--container-max);
  }
}

main{
  position:relative;
  z-index:1;
}

.skip-link{
  position:absolute;
  left:16px;
  top:12px;
  transform:translateY(-140%);
  background:rgba(8,24,39,.96);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  z-index:2000;
  transition:transform .25s ease;
}

.skip-link:focus{
  transform:translateY(0);
  outline:none;
  box-shadow:0 0 0 4px rgba(40,215,255,.18);
}

.site-header{
  position:sticky;
  top:0;
  z-index:1040;
  background:linear-gradient(180deg, rgba(4,8,16,.90), rgba(4,8,16,.72));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(120,180,255,.10);
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.site-header.is-scrolled{
  background:rgba(5,9,20,.94);
  box-shadow:0 14px 42px rgba(0,0,0,.22);
  border-bottom-color:rgba(120,180,255,.18);
}

.navbar{
  min-height:var(--header-h);
  padding:.6rem 0;
}

.navbar .container{
  gap:1rem;
}

.navbar-brand,
.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:var(--text);
}

.logo-mark{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--brand-2), var(--brand), var(--brand-3));
  box-shadow:0 0 0 4px rgba(40,215,255,.08), 0 0 28px rgba(40,215,255,.28);
  position:relative;
  flex:0 0 auto;
}

.logo-mark::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(40,215,255,.24);
  opacity:.7;
}

.logo-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.logo-main,
.footer-title{
 font-size:1.02rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.02em;
  background:linear-gradient(90deg, #F4FAFF 0%, #DDEBFF 46%, #91D4FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.logo-sub{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.2;
  letter-spacing:.06em;
}

.navbar-nav{
  gap:.35rem;
}

.nav-center{
  padding:0;
}

.nav-link{
  position:relative;
  color:var(--muted-2);
  padding:.9rem 1rem !important;
  border-radius:999px;
  font-weight:600;
  transition:all .22s ease;
}

.nav-link:hover,
.nav-link:focus{
  color:var(--text);
  background:rgba(40,215,255,.06);
}

.nav-link.active{
  color:var(--text);
  background:linear-gradient(135deg, rgba(11,92,255,.30), rgba(40,215,255,.16));
  box-shadow:inset 0 0 0 1px rgba(120,180,255,.22), 0 10px 24px rgba(11,92,255,.12);
}

.navbar-toggler{
  border:1px solid rgba(120,180,255,.18);
  background:rgba(12,24,42,.55);
  width:48px;
  height:44px;
  border-radius:14px;
  padding:0;
  box-shadow:var(--glow-soft);
}

.navbar-toggler:focus{
  box-shadow:0 0 0 4px rgba(40,215,255,.16);
}

.navbar-toggler-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  margin:0 auto;
  background:none;
}

.navbar-toggler-icon span,
.navbar-toggler-icon span::before,
.navbar-toggler-icon span::after{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, #F3FAFF, #8EDCFF);
  position:relative;
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}

.navbar-toggler-icon span::before,
.navbar-toggler-icon span::after{
  content:"";
  position:absolute;
  left:0;
}

.navbar-toggler-icon span::before{ top:-6px; }
.navbar-toggler-icon span::after{ top:6px; }

.btn-glow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.9rem 1.4rem;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  letter-spacing:.02em;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 14px 34px rgba(11,92,255,.26), 0 0 24px rgba(40,215,255,.18);
  border:1px solid rgba(164,229,255,.18);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn-glow:hover,
.btn-glow:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(11,92,255,.34), 0 0 32px rgba(40,215,255,.26);
  filter:saturate(1.04);
}

.btn-glow:focus{
  outline:none;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.35rem;
  border-radius:999px;
  color:var(--text);
  font-weight:700;
  background:rgba(10,20,36,.34);
  border:1px solid rgba(120,180,255,.20);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}

.btn-ghost:hover,
.btn-ghost:focus{
  color:var(--text);
  transform:translateY(-2px);
  background:rgba(17,31,52,.58);
  border-color:rgba(140,210,255,.34);
}

.btn-ghost:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(40,215,255,.14);
}

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

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

.section-title{
  font-size:clamp(1.9rem, 2.2vw + 1.3rem, 3rem);
  font-weight:800;
  line-height:1.12;
  margin:0 0 14px;
  letter-spacing:.01em;
}

.section-subtitle{
  color:var(--muted);
  font-size:1rem;
  max-width:760px;
  margin:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .85rem;
  border-radius:999px;
  color:#dff4ff;
  background:rgba(40,215,255,.08);
  border:1px solid rgba(40,215,255,.16);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.eyebrow-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow:0 0 18px rgba(40,215,255,.35);
}

.hero{
  padding:42px 0 38px;
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
}

.hero-shell{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(11,20,38,.88), rgba(8,16,30,.74)),
    radial-gradient(circle at 20% 12%, rgba(40,215,255,.12), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(124,61,255,.10), transparent 24%);
  border:1px solid rgba(120,180,255,.14);
  box-shadow:var(--glow);
  backdrop-filter:blur(18px);
}

.hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(40,215,255,.20), transparent 20%),
    radial-gradient(circle at 86% 26%, rgba(124,61,255,.16), transparent 20%),
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.05) 50%, transparent 80%);
  opacity:.6;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  z-index:1;
  padding:34px;
}

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

.hero h1{
  font-size:clamp(2.4rem, 4vw + 1rem, 4.8rem);
  line-height:1.06;
  font-weight:800;
  margin:12px 0 18px;
  letter-spacing:-.02em;
  max-width:11.2ch;
}

.hero-lead{
  color:var(--muted-2);
  font-size:1.05rem;
  max-width:640px;
  margin:0 0 24px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-bottom:22px;
}

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.mini-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.52rem .8rem;
  border-radius:999px;
  background:rgba(10,20,36,.56);
  border:1px solid rgba(120,180,255,.16);
  color:#d5e9ff;
  font-size:.88rem;
  white-space:nowrap;
}

.mini-pill i{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  background:linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow:0 0 14px rgba(40,215,255,.28);
}

.dashboard-card{
  height:100%;
  min-height:420px;
  padding:24px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(13,24,42,.72), rgba(7,14,26,.86));
  border:1px solid rgba(120,180,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 22px 48px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
}

.dashboard-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}

.dashboard-title{
  font-size:1.02rem;
  font-weight:700;
  margin:0;
  color:#f2f8ff;
}

.dashboard-note{
  color:var(--muted);
  font-size:.88rem;
  margin:4px 0 0;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, #52ffd7, #28d7ff);
  box-shadow:0 0 18px rgba(40,215,255,.42);
  margin-top:6px;
}

.dash-cover{
  height:172px;
  border-radius:24px;
  background:
    radial-gradient(circle at 28% 30%, rgba(40,215,255,.28), transparent 28%),
    radial-gradient(circle at 72% 42%, rgba(124,61,255,.22), transparent 30%),
    linear-gradient(135deg, rgba(11,92,255,.30), rgba(18,35,58,.28));
  border:1px solid rgba(144,210,255,.16);
  position:relative;
  overflow:hidden;
}

.dash-cover::before{
  content:"";
  position:absolute;
  inset:15px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg, rgba(255,255,255,.05), transparent);
}

.dash-list{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.dash-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(8,18,32,.52);
  border:1px solid rgba(120,180,255,.12);
}

.dash-thumb{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(11,92,255,.58), rgba(40,215,255,.24));
  flex:0 0 auto;
  position:relative;
  overflow:hidden;
}

.dash-thumb::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}

.dash-item h4{
  font-size:.95rem;
  margin:0 0 2px;
  font-weight:700;
}

.dash-item p{
  margin:0;
  color:var(--muted);
  font-size:.84rem;
}

.story-grid{
  display:grid;
  gap:24px;
}

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

.story-step{
  padding:18px 20px;
  border-radius:24px;
  background:rgba(11,19,33,.56);
  border:1px solid rgba(120,180,255,.14);
  position:relative;
}

.story-step::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow:0 0 18px rgba(40,215,255,.26);
}

.story-step h3{
  font-size:1.06rem;
  margin:0 0 8px 14px;
  font-weight:700;
}

.story-step p{
  margin:0 0 0 14px;
  color:var(--muted);
}

.glass-card{
  height:100%;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(16,30,52,.70), rgba(9,18,31,.86));
  border:1px solid rgba(120,180,255,.14);
  box-shadow:var(--glow-soft);
  padding:24px;
  backdrop-filter:blur(16px);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.glass-card:hover{
  transform:translateY(-4px);
  border-color:rgba(140,210,255,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.28), 0 0 36px rgba(40,215,255,.12);
}

.glass-card h3,
.glass-card h4{
  margin:0;
  color:#f4f9ff;
}

.feature-grid{
  display:grid;
  gap:18px;
}

.feature-card{
  border-radius:24px;
  padding:22px;
  background:linear-gradient(180deg, rgba(13,24,42,.66), rgba(8,16,30,.82));
  border:1px solid rgba(120,180,255,.12);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.feature-card::before{
  content:"";
  position:absolute;
  inset:auto -15% -35% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,215,255,.18), transparent 65%);
  filter:blur(8px);
  opacity:.7;
}

.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(144,210,255,.26);
  box-shadow:0 16px 34px rgba(0,0,0,.24), 0 0 28px rgba(11,92,255,.10);
}

.feature-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}

.feature-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(11,92,255,.34), rgba(40,215,255,.18));
  border:1px solid rgba(120,180,255,.18);
  display:grid;
  place-items:center;
  color:#eaf7ff;
  flex:0 0 auto;
}

.feature-title{
  font-size:1.08rem;
  font-weight:700;
  margin:0 0 8px;
}

.feature-text{
  color:var(--muted);
  margin:0;
  font-size:.95rem;
}

.bento-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:22px;
}

.bento-large{
  grid-column:span 7;
  min-height:330px;
}

.bento-small{
  grid-column:span 5;
  min-height:154px;
}

.bento-mini{
  grid-column:span 4;
  min-height:180px;
}

.bento-wide{
  grid-column:span 8;
  min-height:180px;
}

.bento-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(16,29,50,.74), rgba(8,16,30,.90));
  border:1px solid rgba(120,180,255,.14);
  box-shadow:var(--glow-soft);
  padding:22px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.bento-card:hover{
  transform:translateY(-4px);
  border-color:rgba(140,210,255,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.28), 0 0 30px rgba(40,215,255,.10);
}

.bento-card::after{
  content:"";
  position:absolute;
  inset:auto -10% -30% auto;
  width:210px;
  height:210px;
  background:radial-gradient(circle, rgba(40,215,255,.14), transparent 64%);
  pointer-events:none;
}

.card-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(40,215,255,.08);
  border:1px solid rgba(40,215,255,.16);
  color:#c6ecff;
  font-size:.78rem;
  margin-bottom:14px;
}

.card-title{
  font-size:1.24rem;
  font-weight:800;
  margin:0 0 10px;
  letter-spacing:.01em;
}

.card-text{
  color:var(--muted);
  margin:0 0 14px;
}

.cover-box{
  height:140px;
  border-radius:22px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(40,215,255,.26), transparent 28%),
    radial-gradient(circle at 80% 35%, rgba(124,61,255,.20), transparent 30%),
    linear-gradient(135deg, rgba(11,92,255,.26), rgba(18,35,58,.34));
  border:1px solid rgba(144,210,255,.14);
}

.cover-box.slim{
  height:92px;
  margin-bottom:12px;
}

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

.inline-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted-2);
}

.inline-list li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:.55rem;
  background:linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow:0 0 14px rgba(40,215,255,.26);
  flex:0 0 auto;
}

.quick-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.quick-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .85rem;
  border-radius:999px;
  color:#dcecff;
  background:rgba(10,20,36,.50);
  border:1px solid rgba(120,180,255,.14);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
  font-size:.88rem;
}

.quick-link:hover{
  transform:translateY(-2px);
  border-color:rgba(140,210,255,.3);
  background:rgba(15,27,46,.70);
}

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

.metric{
  padding:20px;
  border-radius:24px;
  background:rgba(12,24,42,.58);
  border:1px solid rgba(120,180,255,.14);
}

.metric .num{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.05;
  color:#f3fbff;
  margin-bottom:6px;
}

.metric .label{
  color:var(--muted);
  font-size:.92rem;
}

.list-layout{
  display:grid;
  gap:18px;
}

.content-card{
  display:grid;
  grid-template-columns:160px minmax(0, 1fr);
  gap:18px;
  align-items:stretch;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(13,24,42,.66), rgba(8,18,32,.84));
  border:1px solid rgba(120,180,255,.14);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.content-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, transparent, rgba(40,215,255,.78), rgba(11,92,255,.82), transparent);
  opacity:0;
  transition:opacity .25s ease;
}

.content-card:hover{
  transform:translateY(-4px);
  border-color:rgba(140,210,255,.30);
  box-shadow:0 18px 38px rgba(0,0,0,.24), 0 0 24px rgba(40,215,255,.08);
}

.content-card:hover::before{
  opacity:1;
}

.content-cover{
  border-radius:20px;
  min-height:124px;
  background:
    radial-gradient(circle at 24% 30%, rgba(40,215,255,.22), transparent 25%),
    radial-gradient(circle at 78% 40%, rgba(124,61,255,.18), transparent 26%),
    linear-gradient(135deg, rgba(11,92,255,.28), rgba(18,35,58,.40));
  border:1px solid rgba(144,210,255,.14);
  position:relative;
  overflow:hidden;
}

.content-cover::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
}

.content-title{
  font-size:1.08rem;
  font-weight:800;
  margin:0 0 8px;
}

.content-summary{
  color:var(--muted);
  margin:0 0 12px;
  font-size:.95rem;
}

.content-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.meta-pill{
  display:inline-flex;
  align-items:center;
  padding:.36rem .68rem;
  border-radius:999px;
  background:rgba(40,215,255,.08);
  border:1px solid rgba(40,215,255,.16);
  color:#dff7ff;
  font-size:.76rem;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#cfe8ff;
  font-weight:700;
}

.text-link span{
  transition:transform .22s ease;
}

.content-card:hover .text-link span{
  transform:translateX(3px);
}

.side-stack{
  display:grid;
  gap:18px;
}

.side-card{
  padding:22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(12,22,39,.70), rgba(8,16,30,.86));
  border:1px solid rgba(120,180,255,.12);
}

.side-card h3{
  font-size:1.05rem;
  margin:0 0 14px;
  font-weight:800;
}

.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sort-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.sort-btn{
  padding:.55rem .84rem;
  border-radius:999px;
  color:var(--muted-2);
  background:rgba(10,20,36,.42);
  border:1px solid rgba(120,180,255,.14);
  font-size:.88rem;
  transition:all .22s ease;
}

.sort-btn:hover,
.sort-btn.active{
  color:var(--text);
  border-color:rgba(140,210,255,.28);
  background:linear-gradient(135deg, rgba(11,92,255,.24), rgba(40,215,255,.12));
}

.pill-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,210,255,.30) transparent;
}

.pill-scroll::-webkit-scrollbar{
  height:8px;
}

.pill-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.pill-scroll::-webkit-scrollbar-thumb{
  background:rgba(140,210,255,.24);
  border-radius:999px;
}

.pill-tab{
  flex:0 0 auto;
  padding:.72rem 1rem;
  border-radius:999px;
  background:rgba(10,20,36,.46);
  border:1px solid rgba(120,180,255,.14);
  color:#cfe3f7;
  white-space:nowrap;
  transition:all .22s ease;
}

.pill-tab:hover,
.pill-tab.active{
  background:linear-gradient(135deg, rgba(11,92,255,.30), rgba(40,215,255,.16));
  border-color:rgba(140,210,255,.30);
  color:#fff;
  box-shadow:0 12px 24px rgba(11,92,255,.14);
}

.accordion-glass{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-color:transparent;
  --bs-accordion-btn-bg:rgba(10,20,36,.50);
  --bs-accordion-active-bg:rgba(11,20,38,.74);
  --bs-accordion-btn-color:var(--text);
  --bs-accordion-btn-focus-border-color:transparent;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-color:var(--text);
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23DCEEFF' viewBox='0 0 16 16'%3e%3cpath d='M8 11.5 2.5 6l1.06-1.06L8 9.38l4.44-4.44L13.5 6z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23EAF4FF' viewBox='0 0 16 16'%3e%3cpath d='M8 11.5 2.5 6l1.06-1.06L8 9.38l4.44-4.44L13.5 6z'/%3e%3c/svg%3e");
}

.accordion-item{
  background:transparent;
  border:none;
  margin-bottom:12px;
}

.accordion-button{
  border-radius:18px !important;
  padding:1rem 1.1rem;
  color:var(--text);
  font-weight:700;
  border:1px solid rgba(120,180,255,.14);
  background:rgba(10,20,36,.50);
  box-shadow:none;
}

.accordion-button:not(.collapsed){
  color:var(--text);
  background:linear-gradient(135deg, rgba(11,92,255,.16), rgba(40,215,255,.08));
  border-color:rgba(140,210,255,.26);
  box-shadow:inset 3px 0 0 rgba(40,215,255,.88);
}

.accordion-button::after{
  filter:brightness(1.2);
}

.accordion-body{
  margin-top:10px;
  border-radius:18px;
  background:rgba(9,18,31,.82);
  border:1px solid rgba(120,180,255,.12);
  color:var(--muted-2);
  padding:1rem 1.1rem;
}

.cta-panel{
  border-radius:34px;
  padding:30px;
  background:
    radial-gradient(circle at 18% 12%, rgba(40,215,255,.18), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(124,61,255,.16), transparent 24%),
    linear-gradient(180deg, rgba(15,28,48,.80), rgba(8,16,30,.92));
  border:1px solid rgba(120,180,255,.16);
  box-shadow:var(--glow);
  position:relative;
  overflow:hidden;
}

.cta-panel::after{
  content:"";
  position:absolute;
  inset:-20% auto auto 52%;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(40,215,255,.12), transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}

.cta-panel h2{
  font-size:clamp(1.8rem, 2vw + 1.2rem, 2.8rem);
  font-weight:800;
  margin:0 0 12px;
}

.cta-panel p{
  color:var(--muted-2);
  margin:0 0 22px;
  max-width:720px;
}

.subscribe-form{
  display:grid;
  grid-template-columns:1.4fr .9fr auto;
  gap:14px;
}

.form-control-dark{
  height:54px;
  border-radius:16px;
  background:rgba(8,18,32,.68);
  border:1px solid rgba(120,180,255,.18);
  color:var(--text);
  padding:0 16px;
}

.form-control-dark::placeholder{
  color:#89a0bb;
}

.form-control-dark:focus{
  background:rgba(10,20,36,.78);
  border-color:rgba(40,215,255,.38);
  color:var(--text);
  box-shadow:0 0 0 4px rgba(40,215,255,.14);
}

.page-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px;
}

.pagination-glass{
  gap:8px;
}

.pagination-glass .page-link{
  border:none;
  border-radius:14px !important;
  background:rgba(10,20,36,.50);
  color:#d3e6f7;
  min-width:42px;
  text-align:center;
  box-shadow:none;
  border:1px solid rgba(120,180,255,.14);
}

.pagination-glass .page-link:hover{
  color:#fff;
  background:rgba(17,31,52,.72);
  border-color:rgba(140,210,255,.28);
}

.pagination-glass .page-item.active .page-link{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 24px rgba(11,92,255,.16);
}

.footer-spacer{
  height:24px;
}

.site-footer{
  position:relative;
  z-index:1;
  padding:52px 0 24px;
  background:linear-gradient(180deg, rgba(4,8,15,.72), rgba(3,6,12,.96));
  border-top:1px solid rgba(120,180,255,.10);
}

.footer-title{
  font-size:1.02rem;
}

.footer-text{
  color:var(--muted);
  margin:16px 0 0;
  max-width:360px;
  font-size:.95rem;
}

.footer-heading{
  font-size:1rem;
  font-weight:800;
  margin:0 0 16px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:11px;
}

.footer-links a,
.footer-links span{
  color:var(--muted-2);
  transition:color .22s ease, transform .22s ease;
}

.footer-links a:hover{
  color:#dff7ff;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:18px;
  margin-top:26px;
  border-top:1px solid rgba(120,180,255,.10);
  color:var(--muted);
  font-size:.88rem;
}

.small-note{
  color:var(--muted);
  font-size:.9rem;
}

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(10,20,36,.52);
  border:1px solid rgba(120,180,255,.14);
  color:#d9ebff;
  font-size:.8rem;
}

.divider-line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,180,255,.18), transparent);
  margin:22px 0;
}

.top-anchor{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:30;
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(10,20,36,.72);
  border:1px solid rgba(120,180,255,.16);
  color:#dff3ff;
  box-shadow:0 12px 26px rgba(0,0,0,.30);
  opacity:.92;
}

.top-anchor:hover{
  color:#fff;
  border-color:rgba(140,210,255,.30);
  transform:translateY(-2px);
}

.navbar-collapse{
  padding:14px 0 4px;
}

@media (min-width: 1200px){
  .navbar-collapse{
    padding:0;
  }
  .nav-cta{
    min-width:142px;
  }
}

@media (max-width: 1199.98px){
  .hero{
    min-height:auto;
    padding:34px 0 28px;
  }
  .hero-grid{
    padding:28px;
  }
  .hero h1{
    max-width:12ch;
  }
  .dashboard-card{
    min-height:auto;
  }
  .subscribe-form{
    grid-template-columns:1fr;
  }
  .content-card{
    grid-template-columns:140px minmax(0, 1fr);
  }
  .metrics-strip{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .bento-large,
  .bento-small,
  .bento-mini,
  .bento-wide{
    grid-column:span 12;
  }
}

@media (max-width: 991.98px){
  .section{
    padding:72px 0;
  }
  .site-header{
    backdrop-filter:blur(14px);
  }
  .navbar-nav{
    gap:.45rem;
  }
  .navbar-collapse{
    background:rgba(7,14,25,.94);
    border:1px solid rgba(120,180,255,.12);
    border-radius:24px;
    padding:14px;
    margin-top:12px;
    box-shadow:0 20px 42px rgba(0,0,0,.30);
  }
  .nav-link{
    padding:.8rem 1rem !important;
  }
  .hero h1{
    max-width:none;
  }
  .story-grid{
    gap:18px;
  }
  .content-card{
    grid-template-columns:1fr;
  }
  .content-cover{
    min-height:150px;
  }
  .page-nav{
    justify-content:center;
  }
}

@media (max-width: 767.98px){
  :root{
    --header-h:68px;
  }
  .navbar{
    min-height:var(--header-h);
  }
  .hero-grid{
    padding:22px;
  }
  .hero h1{
    font-size:clamp(2.15rem, 8vw, 3.2rem);
  }
  .hero-lead{
    font-size:1rem;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn-glow,
  .hero-actions .btn-ghost{
    width:100%;
  }
  .dash-cover{
    height:150px;
  }
  .metrics-strip{
    grid-template-columns:1fr;
  }
  .section-title{
    font-size:clamp(1.6rem, 7vw, 2.2rem);
  }
  .cta-panel{
    padding:22px;
  }
  .footer-bottom{
    flex-direction:column;
  }
  .top-anchor{
    right:14px;
    bottom:14px;
  }
}

@media (max-width: 575.98px){
  .hero-shell,
  .glass-card,
  .feature-card,
  .bento-card,
  .content-card,
  .side-card,
  .cta-panel,
  .dashboard-card{
    border-radius:22px;
  }
  .hero-grid{
    padding:18px;
  }
  .dash-item{
    align-items:flex-start;
  }
  .dash-thumb{
    width:40px;
    height:40px;
  }
  .sort-bar,
  .pill-scroll{
    gap:8px;
  }
  .pill-tab,
  .sort-btn,
  .quick-link{
    padding:.58rem .78rem;
  }
  .accordion-button{
    padding:.92rem 1rem;
  }
  .form-control-dark{
    height:50px;
  }
}

.focus-ring:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(40,215,255,.16);
}