/* QC-Copy public styles. Extracted from index.html for browser caching. */
:root {
      --brand: #ff5a00;
      --brand-2: #ff8a3d;
      --ink: #101828;
      --ink-2: #263244;
      --muted: #667085;
      --soft: #f5f7fb;
      --soft-2: #eef3f8;
      --line: #dfe7f1;
      --panel: #ffffff;
      --green: #079455;
      --green-soft: #ecfdf3;
      --red: #d92d20;
      --red-soft: #fff1f0;
      --blue: #175cd3;
      --blue-soft: #eef4ff;
      --yellow: #b54708;
      --yellow-soft: #fffaeb;
      --dark: #111827;
      --shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
      --radius: 8px;
      --wide: 1440px;
      --page-gutter: 28px;
      --header-brand-width: 220px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: #f6f8fb;
      font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
      font-size: 14px;
      line-height: 1.45;
      overflow-x: hidden;
    }

    button, input, select { font: inherit; }
    button { cursor: pointer; }
    button:disabled { cursor: not-allowed; opacity: 0.55; }
    a { color: inherit; text-decoration: none; }
    .hidden { display: none !important; }
    .seo-summary {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .container { width: min(var(--wide), calc(100vw - 40px)); margin: 0 auto; }
    .page { min-height: calc(100vh - 64px); padding: 22px 0 38px; }
    .positive { color: var(--green) !important; }
    .negative { color: var(--red) !important; }
    .muted { color: var(--muted); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      height: 64px;
      background: rgba(255, 255, 255, 0.98);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
    }

    .header-inner {
      width: min(1440px, calc(100% - (var(--page-gutter) * 2)));
      max-width: 1440px;
      height: 64px;
      display: grid;
      grid-template-columns: var(--header-brand-width) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--ink);
      font-weight: 900;
      min-width: 0;
    }

    .brand-mark {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--brand);
      color: #fff;
      font-size: 19px;
      font-weight: 950;
      box-shadow: 0 10px 20px rgba(255, 90, 0, 0.22);
    }

    .brand strong { display: block; font-size: 17px; line-height: 1; }
    .brand span:last-child { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 800; }

    .main-nav {
      display: flex;
      justify-content: center;
      gap: 4px;
      min-width: 0;
    }

    .main-nav a {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      border-bottom: 2px solid transparent;
      color: #344054;
      font-weight: 850;
      white-space: nowrap;
    }

    .main-nav a.active,
    .main-nav a:hover {
      color: var(--brand);
      background: #fff5ef;
    }

    .main-nav a.active { border-bottom-color: var(--brand); border-radius: 8px 8px 0 0; }

    .header-actions {
      display: none;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      white-space: nowrap;
      min-width: 0;
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #182235;
      display: grid;
      place-items: center;
      font-size: 17px;
    }

    .icon-btn:hover { background: #f2f4f7; }

    .search-field {
      width: min(320px, 34vw);
      min-height: 36px;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
      color: #98a2b3;
    }

    .search-field input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
    }

    .header-text-btn {
      min-height: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 11px;
      background: #fff;
      color: #344054;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .header-text-btn:hover,
    .header-text-btn.active {
      border-color: #ffd8bd;
      background: #fff7f1;
      color: var(--brand);
    }

    .btn {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 15px;
      background: #fff;
      color: var(--ink-2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 900;
      white-space: nowrap;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); }
    .btn.primary { border-color: transparent; background: var(--brand); color: #fff; box-shadow: 0 12px 24px rgba(255, 90, 0, 0.24); }
    .btn.dark { border-color: transparent; background: #111827; color: #fff; }
    .btn.soft { border-color: #ffd8bd; background: #fff7f1; color: var(--brand); }
    .btn.blue { border-color: transparent; background: var(--blue); color: #fff; }
    .btn.compact { min-height: 32px; padding: 0 10px; font-size: 13px; }

    .home-page {
      padding-top: 0;
      background: #f6f8fb;
    }

    #homePage > .container {
      width: 100%;
      max-width: none;
    }

    .hero {
      position: relative;
      width: 100%;
      min-height: 520px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 58px 0 0;
      background:
        radial-gradient(circle at 50% 96%, rgba(255, 90, 0, 0.11), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fff 64%, rgba(238, 243, 248, 0.74) 100%);
      border-bottom: 1px solid #edf1f6;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 230px;
      background: linear-gradient(180deg, rgba(255,255,255,0), #f6f8fb);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
      margin: 0 auto;
    }

    .eyebrow {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border: 1px solid #ffd8bd;
      border-radius: 999px;
      background: #fff7f1;
      color: var(--brand);
      font-size: 12px;
      font-weight: 950;
      margin: 0 auto;
    }

    .hero h1 {
      margin: 20px auto 16px;
      max-width: 760px;
      font-size: clamp(42px, 4vw, 58px);
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: 0;
    }

    .hero h1 span { color: var(--brand); }
    .hero p {
      margin: 0 auto;
      max-width: 720px;
      color: #475467;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.8;
    }

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

    .hero-network {
      position: relative;
      height: 170px;
      margin: 24px auto 0;
      max-width: 980px;
      overflow: hidden;
    }

    .hero-network::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -92px;
      width: min(980px, 100%);
      height: 260px;
      transform: translateX(-50%);
      border-radius: 50% 50% 0 0;
      background:
        radial-gradient(circle at 50% 52%, rgba(255, 90, 0, 0.22), transparent 7%),
        radial-gradient(circle at 22% 72%, rgba(23, 92, 211, 0.16), transparent 7%),
        radial-gradient(circle at 78% 66%, rgba(7, 148, 85, 0.16), transparent 8%),
        linear-gradient(135deg, transparent 49.4%, rgba(148, 163, 184, 0.28) 49.6%, rgba(148, 163, 184, 0.28) 50.2%, transparent 50.4%),
        linear-gradient(45deg, transparent 49.4%, rgba(148, 163, 184, 0.2) 49.6%, rgba(148, 163, 184, 0.2) 50.2%, transparent 50.4%);
      background-size: 100% 100%, 100% 100%, 100% 100%, 155px 155px, 180px 180px;
      opacity: 0.95;
    }

    .network-node {
      position: absolute;
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 6px solid #edf2f7;
      border-radius: 50%;
      background: #fff;
      color: #182235;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
      font-size: 12px;
      font-weight: 950;
    }

    .network-node.primary {
      width: 72px;
      height: 72px;
      border-color: #fff3ea;
      background: var(--brand);
      color: #fff;
      font-size: 22px;
      left: calc(50% - 36px);
      bottom: 10px;
      z-index: 3;
    }

    .network-node:nth-child(2) { left: 15%; bottom: 30px; }
    .network-node:nth-child(3) { left: 26%; bottom: 78px; }
    .network-node:nth-child(4) { left: 39%; bottom: 42px; }
    .network-node:nth-child(5) { right: 39%; bottom: 78px; }
    .network-node:nth-child(6) { right: 26%; bottom: 42px; }
    .network-node:nth-child(7) { right: 15%; bottom: 78px; }
    .network-node:nth-child(8) { left: 7%; bottom: 78px; }

    .home-stat-band {
      position: relative;
      z-index: 2;
      width: min(1280px, calc(100% - (var(--page-gutter) * 2)));
      margin: -16px auto 20px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
    }

    .home-stat-band .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .home-stat-band .stat-card {
      min-height: 94px;
      padding: 16px;
      border-radius: 10px;
      box-shadow: none;
    }

    .home-page .section {
      width: min(1360px, calc(100% - (var(--page-gutter) * 2)));
      margin-left: auto;
      margin-right: auto;
    }

    .home-story-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .story-panel {
      min-height: 430px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .story-panel h2 {
      margin: 8px 0 10px;
      font-size: clamp(28px, 2.35vw, 34px);
      line-height: 1.14;
    }

    .story-panel p {
      margin: 0 0 18px;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.75;
    }

    .story-list {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }

    .story-list div {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 13px;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      background: #f8fafc;
    }

    .story-list i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #fff3ea;
      color: var(--brand);
      font-style: normal;
      font-weight: 950;
    }

    .story-list strong { display: block; font-size: 15px; }
    .story-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 750; }

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

    .leader-card {
      min-height: 250px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .leader-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .leader-id {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .leader-id strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .leader-id span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 780;
    }

    .leader-return {
      margin-top: 14px;
      font-size: 32px;
      line-height: 1;
      color: var(--green);
      font-weight: 950;
    }

    .leader-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .leader-metrics div {
      min-height: 58px;
      padding: 8px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #edf2f7;
    }

    .leader-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; }
    .leader-metrics strong { display: block; margin-top: 5px; font-size: 14px; }

    .home-capability-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .home-capability {
      min-height: 180px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    }

    .home-capability i {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #fff3ea;
      color: var(--brand);
      font-style: normal;
      font-weight: 950;
      margin-bottom: 14px;
    }

    .home-capability strong { display: block; font-size: 17px; }
    .home-capability p { margin: 8px 0 0; color: var(--muted); font-weight: 720; line-height: 1.7; }

    .home-risk-note {
      margin-top: 18px;
      padding: 18px 20px;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      background: #fff7ed;
      color: #7c2d12;
      font-weight: 760;
      line-height: 1.7;
    }

    .panel,
    .stat-card,
    .flow-card,
    .price-card,
    .feature-card,
    .metric-card,
    .chart-card,
    .signal-side-card,
    .service-strip {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
    }

    .ranking-card {
      padding: 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .ranking-head,
    .panel-title,
    .section-head,
    .detail-head,
    .chart-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .ranking-head strong { font-size: 15px; }
    .ranking-head a { color: var(--brand); font-size: 12px; font-weight: 900; }
    .ranking-list { display: grid; gap: 8px; margin-top: 10px; }
    .ranking-row {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 8px;
      border-radius: 8px;
      background: #fbfcff;
      border: 1px solid #edf2f7;
    }
    .ranking-row em {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: #fff0e7;
      color: var(--brand);
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .ranking-row strong { display: block; font-size: 13px; }
    .ranking-row span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
    .ranking-row b { color: var(--green); font-size: 12px; }

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

    .stat-card { padding: 18px; min-height: 112px; }
    .stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; }
    .stat-card strong { display: block; margin-top: 10px; font-size: 28px; line-height: 1.05; }
    .stat-card small { display: block; margin-top: 9px; color: var(--green); font-weight: 850; }

    .home-analytics {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 14px;
      margin-top: 14px;
    }

    .chart-card { padding: 16px; overflow: hidden; }
    .chart-title h3 { margin: 0; font-size: 16px; }
    .chart-title span { color: var(--muted); font-size: 12px; font-weight: 800; }
    .equity-svg { width: 100%; height: 230px; display: block; margin-top: 14px; }
    .echart-panel { width: 100%; min-height: 210px; }
    .mini-echart { width: 100%; height: 238px; min-height: 210px; }
    .chart-card .echart-panel { height: 230px; }
    .sparkline { width: 156px; height: 48px; display: block; overflow: visible; }
    .sparkline-area { filter: drop-shadow(0 6px 9px rgba(0, 166, 118, 0.12)); }
    .signal-sparkline-cell {
      width: 156px;
      min-height: 50px;
      display: grid;
      align-items: end;
    }
    .signal-growth-cell {
      min-width: 170px;
    }
    .signal-growth-cell strong {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 950;
    }

    .advantage-list { display: grid; gap: 14px; }
    .advantage-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .advantage-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 950;
    }
    .advantage-item strong { display: block; font-size: 13px; }
    .advantage-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }

    .section { padding: 24px 0; }
    .section-head { margin-bottom: 16px; }
    .kicker { color: var(--brand); font-size: 12px; font-weight: 950; text-transform: uppercase; }
    h2, .content-hero h1, .detail-head h1 {
      margin: 5px 0 0;
      color: var(--ink);
      font-size: clamp(24px, 2vw, 30px);
      line-height: 1.2;
      font-weight: 950;
    }
    .section-head p,
    .content-hero p,
    .detail-head p {
      margin: 7px 0 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.7;
    }

    .flow-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .flow-card { padding: 14px; min-height: 120px; position: relative; }
    .flow-card em {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #f2f4f7;
      color: var(--ink);
      font-style: normal;
      font-weight: 950;
      margin-bottom: 10px;
    }
    .flow-card strong { display: block; font-size: 14px; }
    .flow-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.55; }

    .service-strip {
      margin-top: 22px;
      padding: 18px 22px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px;
    }
    .service-item {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
    .service-item i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: var(--blue);
      font-style: normal;
      font-weight: 950;
    }
    .service-item strong { display: block; font-size: 15px; }
    .service-item span { display: block; color: var(--muted); font-size: 12px; font-weight: 750; }

    .content-hero {
      padding: 18px 20px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }

    .signals-page {
      background:
        linear-gradient(180deg, #f7f9fc 0%, #fff 160px, #f6f8fb 520px);
    }

    #signalsPage > .container {
      width: calc(100% - (var(--page-gutter) * 2));
      max-width: none;
    }

    .signal-market-shell {
      display: grid;
      gap: 16px;
    }

    .signal-market-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: start;
      min-height: calc(100vh - 126px);
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .signal-left-nav {
      min-height: calc(100vh - 126px);
      padding: 10px 14px 16px;
      border-right: 1px solid var(--line);
      background: #fbfcfe;
    }

    .signal-left-menu {
      display: grid;
      gap: 4px;
    }

    .signal-left-menu a,
    .signal-left-menu button {
      min-height: 32px;
      width: 100%;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #344054;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      text-align: left;
      font-weight: 820;
    }

    .signal-left-menu a.active,
    .signal-left-menu a:hover,
    .signal-left-menu button:hover {
      color: var(--brand);
      background: #fff7f1;
    }

    .signal-left-menu i {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      color: var(--green);
      font-style: normal;
      font-size: 13px;
      font-weight: 950;
    }

    .signal-left-promo {
      margin-top: 20px;
      padding: 16px;
      border: 1px solid #c7f0d7;
      border-radius: 10px;
      background: linear-gradient(180deg, #f3fff7, #fff);
      text-align: center;
    }

    .signal-left-promo .robot {
      width: 86px;
      height: 54px;
      margin: 0 auto 12px;
      border-radius: 18px 18px 12px 12px;
      background:
        radial-gradient(circle at 31% 48%, #fff 0 5px, transparent 6px),
        radial-gradient(circle at 69% 48%, #fff 0 5px, transparent 6px),
        linear-gradient(180deg, #a7d1ff, #72adf7);
      box-shadow: inset 0 -8px 0 rgba(23, 92, 211, 0.1);
    }

    .signal-left-promo strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
    }

    .signal-left-promo p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
    }

    .signal-main-panel {
      min-width: 0;
      padding: 18px;
      background: #fff;
    }

    .signal-market-hero {
      padding: 0 0 12px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      box-shadow: none;
    }

    .signal-market-hero h1 {
      margin: 6px 0 8px;
      font-size: 30px;
      line-height: 1.12;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .signal-market-hero p {
      margin: 0;
      max-width: 760px;
      color: var(--muted);
      font-weight: 760;
      overflow-wrap: anywhere;
    }

    .signal-market-search {
      margin-top: 0;
      display: grid;
      grid-template-columns: minmax(180px, 0.6fr) minmax(180px, 0.75fr) minmax(320px, 1.6fr) auto;
      gap: 10px;
      align-items: end;
    }

    .signal-filter-panel,
    .signal-results-panel,
    .signal-copy-card,
    .signal-detail-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    }

    .signal-filter-panel {
      padding: 15px;
      position: sticky;
      top: 80px;
    }

    .filter-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .filter-title strong { font-size: 16px; }
    .filter-title a { color: var(--brand); font-size: 12px; font-weight: 900; }
    .filter-stack { display: grid; gap: 12px; }

    .range-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .signal-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .signal-tag-cloud span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid var(--line);
      color: #475467;
      font-size: 12px;
      font-weight: 850;
    }

    .signal-tag-cloud span[data-sort-value] { cursor: pointer; }
    .signal-tag-cloud span.active {
      border-color: #ffd8bd;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-results-head {
      min-height: 58px;
      padding: 14px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .signal-results-head strong { font-size: 16px; }
    .signal-results-head span { color: var(--muted); font-size: 12px; font-weight: 850; }

    .sort-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .sort-pills button {
      min-height: 31px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: #475467;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .sort-pills button.active,
    .sort-pills button:hover {
      border-color: #ffd8bd;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-table-shell {
      border: 1px solid var(--line);
      background: #fff;
      overflow: hidden;
    }

    .signal-table-shell .table-wrap {
      max-width: 100%;
    }

    .signal-pagination {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .signal-pagination.hidden { display: none; }

    .signal-pagination button,
    .signal-pagination select {
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: #344054;
      font: inherit;
      font-weight: 850;
    }

    .signal-pagination button {
      min-width: 32px;
      padding: 0 10px;
      cursor: pointer;
    }

    .signal-pagination select {
      padding: 0 28px 0 10px;
    }

    .signal-pagination button:hover:not(:disabled),
    .signal-pagination button.active {
      border-color: #ffb27a;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-pagination button:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

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

    .signal-card-section {
      display: grid;
      gap: 12px;
    }

    .signal-section-head {
      min-height: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .signal-section-head strong {
      color: #2454a6;
      font-size: 16px;
    }

    .signal-section-head a {
      color: #2454a6;
      font-size: 12px;
      font-weight: 850;
    }

    .signal-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
      gap: 12px;
    }

    .market-signal-card {
      min-height: 236px;
      display: grid;
      grid-template-rows: auto auto minmax(78px, 1fr) auto auto;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 0;
      background: #fff;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .market-signal-card:hover {
      border-color: #b9d8ff;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
      transform: translateY(-1px);
    }

    .market-card-author {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .market-card-author .avatar {
      width: 42px;
      height: 42px;
      border-radius: 2px;
    }

    .market-card-author strong {
      display: block;
      overflow: hidden;
      color: #475467;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    .market-card-author span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .market-card-title {
      min-height: 36px;
      color: #2454a6;
      font-size: 16px;
      line-height: 1.18;
      font-weight: 950;
    }

    .market-card-growth {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .market-card-growth strong {
      color: #30a83a;
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
    }

    .market-card-growth small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      text-align: right;
      font-weight: 760;
    }

    .market-signal-card .sparkline {
      width: 100%;
      height: 68px;
      align-self: end;
    }

    .signal-bars {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
    }

    .signal-bars span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .signal-bars i {
      width: 34px;
      height: 10px;
      display: inline-block;
      background:
        linear-gradient(90deg, #36b24a 0 20%, transparent 20% 25%, #36b24a 25% 45%, transparent 45% 50%, #36b24a 50% 70%, transparent 70% 75%, #36b24a 75% 100%);
    }

    .signal-bars .algo i {
      background:
        linear-gradient(90deg, #377dff 0 20%, transparent 20% 25%, #377dff 25% 45%, transparent 45% 50%, #377dff 50% 70%, transparent 70% 75%, #d0d5dd 75% 100%);
    }

    .market-card-copy {
      margin: 0 -14px -14px;
      min-height: 38px;
      display: grid;
      place-items: center;
      border-top: 1px solid var(--line);
      color: #2454a6;
      font-size: 12px;
      font-weight: 860;
    }

    .mql-table {
      min-width: 1660px;
      font-size: 13px;
    }

    .mql-table th,
    .mql-table td {
      padding: 12px 13px;
    }

    .mql-table th {
      background: #fbfcfe;
      color: #596579;
      border-bottom: 1px solid var(--line);
    }

    .mql-table tbody tr {
      transition: background 0.14s ease;
      cursor: pointer;
    }

    .mql-table tbody tr:hover,
    .mql-table tbody tr.selected {
      background: #fff8f2;
    }

    .compact-signal-table td {
      min-height: 72px;
      height: 72px;
    }

    .compact-signal-table .sparkline {
      display: block;
      width: 156px;
      height: 48px;
      margin-bottom: 2px;
    }

    .mql-rank {
      color: #98a2b3;
      font-size: 15px;
      font-weight: 950;
      text-align: center;
    }

    .mql-signal-name {
      min-width: 250px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .mql-signal-name strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .mql-signal-name span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }

    .mql-price {
      color: #344054;
      font-weight: 900;
    }

    .mql-price small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .mql-copy {
      min-width: 64px;
      min-height: 30px;
      border: 0;
      border-radius: 7px;
      background: var(--brand);
      color: #fff;
      font-weight: 950;
      box-shadow: 0 10px 18px rgba(255, 90, 0, 0.2);
    }

    .mql-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
    }

    .mql-mobile-stat {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .mql-mobile-stat div {
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .mql-mobile-stat span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .mql-mobile-stat strong {
      display: block;
      margin-top: 4px;
      font-size: 14px;
    }

    .signal-preview-panel {
      margin-top: 14px;
    }

    .signal-preview-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr) minmax(280px, 0.72fr);
      gap: 14px;
    }

    .signal-detail-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 292px;
      gap: 10px;
      align-items: start;
      margin-bottom: 8px;
    }

    .signal-detail-summary {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .signal-detail-summary h1 {
      margin: 5px 0 3px;
      font-size: 23px;
      line-height: 1.16;
    }

    .signal-detail-summary p {
      margin: 0;
      color: var(--muted);
      font-weight: 780;
    }

    .signal-detail-breadcrumb {
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .signal-path-trail {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 9px;
      border: 1px solid #e6edf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #f8fbff, #fff);
      color: #667085;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.25;
    }

    .signal-path-trail span {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .signal-path-trail i {
      color: #c3ccd9;
      font-style: normal;
    }

    .signal-path-trail .current {
      padding: 3px 7px;
      border: 1px solid #fed7aa;
      border-radius: 999px;
      background: #fff7ed;
      color: #c2410c;
    }

    .detail-kpi-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .detail-kpi-row div {
      min-height: 54px;
      padding: 8px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .detail-kpi-row span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .detail-kpi-row strong {
      display: block;
      margin-top: 5px;
      font-size: 18px;
      line-height: 1.08;
    }

    .signal-copy-card {
      padding: 12px;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .copy-card-head,
    .copy-card-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
    }

    .copy-card-head {
      grid-template-columns: auto 1fr;
    }

    .signal-copy-card .btn {
      min-height: 32px;
      padding: 0 10px;
    }

    .signal-copy-card .risk-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 10px;
    }

    .copy-price {
      font-size: 23px;
      line-height: 1;
      font-weight: 950;
      text-align: right;
    }

    .copy-price small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .signal-warning {
      padding: 7px 9px;
      border: 1px solid #fedf89;
      border-radius: 8px;
      background: #fffaeb;
      color: #93370d;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
    }

    .signal-account-layout {
      display: grid;
      grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .signal-account-side {
      min-width: 0;
      display: grid;
      gap: 10px;
      position: sticky;
      top: 80px;
    }

    .signal-account-main {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .signal-profile-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin: 8px 0;
    }

    .signal-profile-head .avatar {
      width: 42px;
      height: 42px;
    }

    .signal-profile-head h1 {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 20px;
      line-height: 1.15;
    }

    .signal-profile-title {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .signal-profile-title h1 {
      min-width: 0;
      flex: 1;
    }

    .current-signal-badge {
      flex: 0 0 auto;
      padding: 4px 7px;
      border: 1px solid #bbf7d0;
      border-radius: 999px;
      background: linear-gradient(180deg, #f0fdf4, #dcfce7);
      color: #047857;
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
    }

    .signal-profile-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .signal-account-main .signal-detail-summary {
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    }

    .signal-primary-chart {
      min-width: 0;
      overflow: hidden;
    }

    .signal-primary-chart .equity-svg {
      aspect-ratio: auto;
      width: 100%;
      max-width: 100%;
      height: clamp(320px, 28vw, 430px);
      min-height: 320px;
      margin-top: 2px;
    }

    .account-profit-module {
      min-width: 0;
      overflow: hidden;
      padding: clamp(18px, 1.45vw, 28px);
      border: 1px solid #dfe8f3;
      border-radius: 14px;
      background:
        radial-gradient(circle at 13% 8%, rgba(16, 185, 129, 0.085), transparent 25%),
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
      box-shadow: 0 20px 48px rgba(15, 23, 42, 0.075);
    }

    .account-profit-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }

    .account-profit-title {
      min-width: 0;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .account-profit-icon,
    .account-kpi-icon,
    .account-status-icon {
      display: grid;
      place-items: center;
      border-radius: 999px;
      font-weight: 950;
    }

    .account-profit-icon {
      width: 58px;
      height: 58px;
      background: linear-gradient(145deg, #ecfdf3, #d1fadf);
      color: #079455;
      box-shadow: inset 0 0 0 1px rgba(18, 183, 106, 0.08);
      font-size: 25px;
    }

    .account-profit-title h3 {
      margin: 0;
      color: #101828;
      font-size: clamp(25px, 2.1vw, 34px);
      line-height: 1.1;
      letter-spacing: 0;
    }

    .account-profit-title p {
      margin: 6px 0 0;
      color: #667085;
      font-size: 14px;
      font-weight: 820;
    }

    .account-periods {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .account-periods button {
      min-width: 54px;
      height: 40px;
      padding: 0 14px;
      border: 1px solid #d9e3ef;
      border-radius: 9px;
      background: linear-gradient(180deg, #fff, #f8fafc);
      color: #475467;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
      cursor: pointer;
    }

    .account-periods button.active {
      border-color: #12b76a;
      background: linear-gradient(180deg, #f0fdf4, #ecfdf3);
      color: #079455;
      box-shadow: 0 10px 20px rgba(18, 183, 106, 0.12);
    }

    .account-periods button.calendar {
      min-width: 46px;
      padding: 0 12px;
      color: #667085;
    }

    .account-periods button:disabled {
      cursor: not-allowed;
      opacity: 0.58;
      background: #f8fafc;
    }

    .account-date-popover {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 20;
      width: min(320px, calc(100vw - 32px));
      padding: 14px;
      border: 1px solid #d9e3ef;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    }

    .account-date-popover[hidden] {
      display: none;
    }

    .account-date-popover label {
      display: grid;
      gap: 6px;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .account-date-popover input {
      height: 38px;
      min-width: 0;
      border: 1px solid #d9e3ef;
      border-radius: 8px;
      padding: 0 10px;
      color: #101828;
      font-weight: 850;
    }

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

    .account-date-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }

    .account-date-actions button {
      min-width: 64px;
      height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }

    .account-date-error {
      min-height: 18px;
      margin-top: 8px;
      color: #d92d20;
      font-size: 12px;
      font-weight: 850;
    }

    .account-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 12px;
      margin-top: clamp(16px, 1.3vw, 22px);
    }

    .account-kpi-card {
      min-width: 0;
      min-height: 104px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 15px 16px;
      border: 1px solid #e4ebf4;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 11px 25px rgba(15, 23, 42, 0.045);
    }

    .account-kpi-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(145deg, #ecfdf3, #dff8ea);
      color: #079455;
      font-size: 21px;
    }

    .account-kpi-card.negative .account-kpi-icon {
      background: linear-gradient(145deg, #fff1f2, #fee4e2);
      color: #d92d20;
    }

    .account-kpi-card.neutral .account-kpi-icon {
      background: linear-gradient(145deg, #f2f4f7, #e8eef6);
      color: #344054;
    }

    .account-kpi-text {
      min-width: 0;
    }

    .account-kpi-text span {
      display: block;
      color: #667085;
      font-size: 13px;
      font-weight: 900;
    }

    .account-kpi-text strong {
      display: block;
      margin-top: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #101828;
      font-size: clamp(20px, 1.45vw, 28px);
      line-height: 1.05;
    }

    .account-kpi-text small {
      display: block;
      margin-top: 5px;
      color: #98a2b3;
      font-size: 11px;
      font-weight: 850;
    }

    .account-kpi-card.positive .account-kpi-text strong,
    .account-status-value.positive {
      color: #079455;
    }

    .account-kpi-card.negative .account-kpi-text strong,
    .account-status-value.negative {
      color: #d92d20;
    }

    .account-snapshot-bars {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }

    .snapshot-bar-row {
      min-width: 0;
      display: grid;
      grid-template-columns: 62px 96px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .snapshot-bar-row span {
      color: #667085;
      text-align: right;
    }

    .snapshot-bar-row strong {
      color: var(--ink);
      font-size: 12px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .snapshot-bar-track {
      height: 24px;
      min-width: 0;
      overflow: hidden;
      border-radius: 3px;
      background: #f2f7fb;
      box-shadow: inset 0 0 0 1px #e4edf5;
    }

    .snapshot-bar-fill {
      display: block;
      height: 100%;
      width: var(--bar-width, 0%);
      min-width: 2px;
      background: linear-gradient(90deg, #7bd6ee, #1aa7cf);
    }

    .snapshot-bar-fill.negative {
      background: linear-gradient(90deg, #fecdd3, #fb7185);
    }

    .snapshot-bar-fill.neutral {
      background: linear-gradient(90deg, #dbeafe, #93c5fd);
    }

    .snapshot-bar-fill.empty {
      min-width: 0;
    }

    .account-main-chart {
      min-width: 0;
      margin-top: 14px;
      padding: clamp(12px, 1vw, 18px);
      border: 1px solid #e4ebf4;
      border-radius: 13px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .account-chart-tabs {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #e4ebf4;
    }

    .account-chart-tabs button {
      min-height: 34px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #475467;
      font-weight: 950;
      padding: 0 4px;
    }

    .account-chart-tabs button.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
    }

    .account-chart-panel:not(.active) {
      display: none;
    }

    .account-chart-panel .drawdown-bars {
      margin-top: 0;
    }

    .account-chart-panel .drawdown-bars .echart-panel {
      height: clamp(300px, 22vw, 420px);
      min-height: 300px;
    }

    .account-main-chart .equity-svg {
      aspect-ratio: auto;
      width: 100%;
      height: clamp(300px, 22vw, 420px);
      min-height: 300px;
      margin-top: 0;
    }

    .account-profit-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
      gap: 14px;
      margin-top: 14px;
    }

    .account-drawdown-panel,
    .account-status-panel {
      min-width: 0;
      padding: 14px;
      border: 1px solid #e4ebf4;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.86);
    }

    .account-drawdown-panel .drawdown-bars .echart-panel {
      height: clamp(166px, 10vw, 212px);
      min-height: 166px;
    }

    .account-status-panel {
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .account-status-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .account-status-head h3 {
      margin: 0;
      font-size: 16px;
    }

    .account-status-icon {
      width: 32px;
      height: 32px;
      background: #ecfdf3;
      color: #079455;
      border: 1px solid #d1fadf;
    }

    .account-status-list {
      display: grid;
      gap: 10px;
    }

    .account-status-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px dashed #d9e3ef;
    }

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

    .account-status-row .account-status-icon {
      width: 30px;
      height: 30px;
      font-size: 13px;
      background: #f2f4f7;
      color: #475467;
      border-color: #e4ebf4;
    }

    .account-status-label {
      color: #667085;
      font-weight: 850;
    }

    .account-status-value {
      color: #101828;
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .advanced-chart-svg,
    .mini-analytics-svg {
      width: 100%;
      display: block;
    }

    .quant-metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .quant-metric {
      min-height: 94px;
      padding: 11px;
      border: 1px solid #e6edf5;
      border-radius: 9px;
      background: linear-gradient(180deg, #fff, #f9fbfd);
    }

    .quant-metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .quant-metric strong {
      display: block;
      margin-top: 8px;
      font-size: 20px;
      line-height: 1;
    }

    .quant-metric small {
      display: block;
      margin-top: 7px;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }

    .quant-meter {
      height: 5px;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #edf2f7;
    }

    .quant-meter i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #12b76a, #37d67a);
    }

    .quant-metric.negative .quant-meter i {
      background: linear-gradient(90deg, #ff7a7a, #ef4444);
    }

    .chart-note-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }

    .chart-note-row b {
      color: var(--ink);
    }

    .monthly-heatmap {
      display: grid;
      grid-template-columns: 42px repeat(12, minmax(0, 1fr)) 58px;
      gap: 5px;
      align-items: stretch;
      margin-top: 10px;
    }

    .monthly-heatmap .heat-label,
    .monthly-heatmap .heat-total {
      min-height: 28px;
      display: grid;
      align-items: center;
      color: #667085;
      font-size: 11px;
      font-weight: 900;
    }

    .monthly-heatmap .heat-total {
      justify-items: end;
    }

    .monthly-heatmap .heat-cell {
      min-height: 28px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      color: #344054;
      font-size: 10px;
      font-weight: 900;
      background: #edf2f7;
    }

    .monthly-heatmap .up1 { background: #d8f3df; color: #067647; }
    .monthly-heatmap .up2 { background: #89d9a5; color: #035c37; }
    .monthly-heatmap .up3 { background: #3fbd79; color: #fff; }
    .monthly-heatmap .down1 { background: #ffe1e8; color: #b42318; }
    .monthly-heatmap .down2 { background: #f36b8f; color: #fff; }

    .allocation-analytics {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .allocation-table {
      display: grid;
      gap: 0;
    }

    .allocation-table div {
      min-height: 28px;
      display: grid;
      grid-template-columns: 1fr 54px 54px 58px;
      gap: 8px;
      align-items: center;
      border-bottom: 1px dashed var(--line);
      color: #475467;
      font-size: 11px;
      font-weight: 850;
    }

    .allocation-table strong {
      color: var(--ink);
      text-align: right;
      font-size: 12px;
    }

    .allocation-symbol {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .allocation-symbol i {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 2px;
    }

    .drawdown-chart {
      min-height: 190px;
    }

    .analytics-pair-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 10px;
    }

    .signal-detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.58fr) minmax(300px, 0.42fr);
      gap: 12px;
      align-items: start;
    }

    .signal-detail-main,
    .signal-detail-side {
      display: grid;
      gap: 10px;
    }

    .signal-detail-card {
      padding: 12px;
    }

    .signal-detail-card .chart-title {
      margin-bottom: 9px;
    }

    .signal-chart-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .signal-chart-tabs span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f8fafc;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .signal-chart-tabs span.active {
      background: #fff7f1;
      color: var(--brand);
    }

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

    .mql-stat-grid .info-row {
      min-height: 32px;
    }

    .risk-split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .signal-detail-card .equity-svg {
      min-height: 240px;
    }

    .signal-copy-card .risk-list div {
      min-height: 24px;
    }

    .signal-detail-card .risk-list div {
      min-height: 28px;
    }

    .signal-copy-card .risk-list span,
    .signal-copy-card .risk-list strong {
      font-size: 11px;
    }

    .filters {
      display: grid;
      grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(130px, 0.8fr)) auto;
      gap: 10px;
      margin-bottom: 14px;
    }
    .field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 900; min-width: 0; }
    .field input,
    .field select {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 0 11px;
      outline: 0;
    }

    .signals-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 14px;
      align-items: start;
    }
    .panel { overflow: hidden; }
    .panel-title {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      align-items: center;
    }
    .panel-title strong { font-size: 16px; }
    .panel-title span { color: var(--muted); font-size: 12px; font-weight: 850; }
    .table-wrap { overflow-x: auto; }
    .mobile-signal-list { display: none; }
    .data-table {
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
      background: #fff;
    }
    .data-table th,
    .data-table td {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
    }
    .data-table th {
      color: #667085;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 950;
    }
    .data-table tbody tr:hover { background: #fff8f2; }
    .data-table tbody tr.selected { background: #fff3ea; }
    .rank { color: #667085; font-weight: 950; }
    .signal-cell { min-width: 230px; display: flex; align-items: center; gap: 10px; }
    .avatar {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #101828;
      color: #fff;
      font-size: 13px;
      font-weight: 950;
      flex: 0 0 auto;
    }
    .signal-cell strong { display: block; }
    .signal-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 760; }
    .badge {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      border-radius: 999px;
      padding: 0 9px;
      font-size: 12px;
      font-weight: 950;
    }
    .badge.green { color: var(--green); background: var(--green-soft); }
    .badge.red { color: var(--red); background: var(--red-soft); }
    .badge.blue { color: var(--blue); background: var(--blue-soft); }
    .badge.orange { color: var(--yellow); background: var(--yellow-soft); }
    .badge.gray { color: #475467; background: #f2f4f7; }

    .signal-side-card { padding: 16px; }
    .signal-side-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .signal-side-head h3 { margin: 0; font-size: 17px; }
    .signal-side-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
    .featured-return { color: var(--green); font-size: 32px; line-height: 1; font-weight: 950; }
    .featured-return span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .mini-list { display: grid; gap: 9px; margin: 14px 0; }
    .mini-list div,
    .risk-list div,
    .info-row {
      min-height: 34px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .mini-list span,
    .risk-list span,
    .info-row span { color: var(--muted); font-size: 12px; font-weight: 850; }
    .mini-list strong,
    .risk-list strong,
    .info-row strong { color: var(--ink); font-size: 13px; }

    .preview-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px 330px;
      gap: 14px;
    }
    .heatmap {
      margin-top: 8px;
    }

    .detail-head {
      padding: 18px 20px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      margin-bottom: 14px;
      align-items: center;
    }
    .detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .detail-actions .tiny-link { color: #475467; font-size: 12px; font-weight: 850; }
    .tabs-line {
      display: flex;
      gap: 14px;
      border-bottom: 1px solid var(--line);
      margin: 0 0 10px;
      padding: 0 4px;
    }
    .tabs-line button {
      min-height: 34px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #475467;
      font-weight: 900;
    }
    .tabs-line button.active { color: var(--brand); border-bottom-color: var(--brand); }
    .signal-detail-tabs { margin-bottom: 0; }
    .signal-tab-panels { margin-top: 4px; }
    .signal-tab-panel:not(.active) { display: none; }
    .signal-tab-panel {
      min-height: 220px;
      display: grid;
      gap: 14px;
    }
    .signal-description-body {
      min-height: 180px;
      color: #344054;
      font-size: 14px;
      font-weight: 760;
      line-height: 1.85;
      white-space: pre-wrap;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .metric-card { padding: 15px; min-height: 82px; }
    .metric-card span { color: var(--muted); font-size: 12px; font-weight: 900; }
    .metric-card strong { display: block; margin-top: 8px; font-size: 22px; line-height: 1.05; }
    .metric-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }

    .detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
      gap: 14px;
      align-items: start;
    }
    .detail-left { display: grid; gap: 14px; }
    .detail-side { display: grid; gap: 14px; }
    .subgrid-2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; }
    .subgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .drawdown-bars { margin-top: 8px; }
    .drawdown-bars .echart-panel { height: 232px; min-height: 212px; }
    .heatmap .echart-panel { height: 96px; min-height: 96px; }
    .analytics-pair-grid .echart-panel { height: 252px; min-height: 230px; }
    .risk-radar .echart-panel { height: 252px; min-height: 240px; }
    .allocation-echart { width: 118px; height: 150px; min-height: 140px; }
    .drawdown-summary,
    .analytics-insight-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 6px;
    }
    .mql-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 36px;
    }
    .mql-stat-list {
      display: grid;
      gap: 0;
    }
    .mql-stat-row {
      min-height: 30px;
      display: grid;
      grid-template-columns: minmax(130px, 0.92fr) minmax(120px, 1.08fr);
      align-items: center;
      gap: 14px;
      border-bottom: 1px dashed #e4ebf4;
    }
    .mql-stat-row span {
      color: #52637a;
      font-size: 12px;
      font-weight: 850;
    }
    .mql-stat-row strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 920;
      text-align: right;
      white-space: nowrap;
    }
    .mql-stat-row strong.positive { color: var(--green); }
    .mql-stat-row strong.negative { color: var(--red); }
    .mql-stat-row strong.muted { color: var(--muted); }
    .mql-allocation {
      display: grid;
      gap: 24px;
    }
    .mql-allocation-section {
      display: grid;
      grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
      gap: 28px;
      align-items: start;
    }
    .mql-chart-title {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      margin-bottom: 6px;
      color: #52637a;
      font-size: 12px;
      font-weight: 920;
    }
    .mql-horizontal-chart,
    .mql-split-chart {
      display: grid;
      gap: 7px;
    }
    .mql-horizontal-row {
      min-height: 26px;
      display: grid;
      grid-template-columns: 120px 72px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }
    .mql-horizontal-row span,
    .mql-split-row span {
      color: #344054;
      font-size: 12px;
      font-weight: 820;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mql-horizontal-row strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      text-align: right;
      white-space: nowrap;
    }
    .mql-horizontal-row.positive strong { color: var(--green); }
    .mql-horizontal-row.negative strong { color: var(--red); }
    .mql-value-track {
      height: 22px;
      border-left: 1px solid #cfd9e6;
      background: linear-gradient(90deg, rgba(226,232,240,.34), rgba(255,255,255,0));
      position: relative;
      overflow: hidden;
    }
    .mql-value-track i {
      display: block;
      height: 18px;
      margin-top: 2px;
      width: var(--bar-width);
      background: rgba(37, 99, 235, .12);
      border: 1px solid rgba(37, 99, 235, .55);
      box-sizing: border-box;
    }
    .mql-horizontal-row.positive .mql-value-track i {
      background: rgba(34, 197, 94, .12);
      border-color: rgba(22, 163, 74, .55);
    }
    .mql-horizontal-row.negative .mql-value-track i {
      background: rgba(255, 237, 213, .8);
      border-color: rgba(255, 77, 45, .72);
    }
    .mql-split-head,
    .mql-split-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;
      align-items: center;
    }
    .mql-split-head {
      min-height: 22px;
      color: #52637a;
      font-size: 12px;
      font-weight: 920;
    }
    .mql-split-head b:first-of-type { text-align: right; padding-right: 8px; color: #344054; }
    .mql-split-head b:last-child { text-align: left; padding-left: 8px; color: #344054; }
    .mql-split-track {
      height: 22px;
      position: relative;
      background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(203,213,225,.52) 59px 60px);
    }
    .mql-split-track.sell {
      border-right: 1px solid #cfd9e6;
    }
    .mql-split-track.buy {
      border-left: 1px solid #cfd9e6;
    }
    .mql-split-track i {
      position: absolute;
      top: 2px;
      height: 18px;
      width: var(--bar-width);
      box-sizing: border-box;
    }
    .mql-split-track.sell i {
      right: 0;
      background: rgba(255, 237, 213, .86);
      border: 1px solid rgba(255, 77, 45, .72);
    }
    .mql-split-track.buy i {
      left: 0;
      background: rgba(220, 252, 231, .78);
      border: 1px solid rgba(22, 163, 74, .55);
    }
    .mql-allocation-empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 850;
      background: #f8fafc;
      border: 1px dashed #d8e2ee;
      border-radius: 8px;
    }
    .mql-risk-panel {
      display: grid;
      gap: 14px;
    }
    .mql-risk-chart-card {
      padding: 12px 12px 8px;
      border: 1px solid #dde7f2;
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .mql-risk-chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 4px;
    }
    .mql-risk-legend {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #52637a;
      font-size: 12px;
      font-weight: 880;
      flex-wrap: wrap;
    }
    .mql-risk-legend b {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink);
      font-weight: 920;
    }
    .mql-risk-legend i {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      display: inline-block;
      background: #1d9bf0;
      box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
    }
    .mql-risk-legend i.load {
      background: #64748b;
      box-shadow: 0 0 0 3px rgba(100, 116, 139, .12);
    }
    .mql-risk-toggle {
      display: inline-flex;
      border: 1px solid #d8e2ee;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
      flex: 0 0 auto;
    }
    .mql-risk-toggle span {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      color: #475467;
      font-size: 12px;
      font-weight: 920;
      border-left: 1px solid #d8e2ee;
    }
    .mql-risk-toggle span:first-child {
      border-left: 0;
      background: #eef6ff;
      color: #1467b3;
    }
    .mql-risk-chart {
      border-radius: 8px;
      overflow: hidden;
    }
    .mql-risk-chart svg,
    .mql-risk-histogram svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .mql-risk-range-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .mql-risk-range {
      display: grid;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff, #f9fbfd);
    }
    .mql-risk-range-labels {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #52637a;
      font-size: 12px;
      font-weight: 880;
    }
    .mql-risk-range-labels b {
      color: var(--green);
      font-weight: 920;
    }
    .mql-risk-range-labels b.negative { color: var(--red); }
    .mql-risk-range-track {
      height: 8px;
      display: grid;
      grid-template-columns: var(--green-width) var(--red-width);
      gap: 2px;
      border: 0;
      overflow: visible;
      background: #eef3f8;
      border-radius: 999px;
    }
    .mql-risk-range-track i:first-child {
      background: linear-gradient(90deg, #b7f2d1, #12b76a);
      border-radius: 999px;
    }
    .mql-risk-range-track i:last-child {
      background: linear-gradient(90deg, #ffb3b8, #ef4444);
      border-radius: 999px;
    }
    .mql-risk-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .mql-risk-metric strong {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.1;
    }
    .mql-risk-metric strong.positive { color: var(--green); }
    .mql-risk-metric strong.negative { color: var(--red); }
    .mql-risk-metric {
      padding: 11px 12px;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
      background: #fff;
    }
    .mql-risk-metric span {
      display: block;
      margin-top: 4px;
      color: #667085;
      font-size: 11px;
      font-weight: 850;
    }
    .mql-risk-note {
      color: #667085;
      font-size: 11px;
      font-weight: 780;
    }

    .drawdown-chip,
    .analytics-chip {
      padding: 8px 9px;
      border: 1px solid #e6edf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff, #f8fafc);
      min-width: 0;
    }

    .drawdown-chip span,
    .analytics-chip span {
      display: block;
      color: #667085;
      font-size: 10px;
      font-weight: 900;
    }

    .drawdown-chip strong,
    .analytics-chip strong {
      display: block;
      margin-top: 2px;
      color: #101828;
      font-size: 13px;
      font-weight: 950;
      white-space: nowrap;
    }
    .donut-layout { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: center; margin-top: 8px; }
    .donut {
      width: 98px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: conic-gradient(#2563eb 0 34%, #ffbe55 34% 58%, #19b78a 58% 75%, #6b7cff 75% 88%, #d0d5dd 88% 100%);
      position: relative;
    }
    .donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: #fff; }
    .legend { display: grid; gap: 6px; }
    .legend span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .legend i { width: 9px; height: 9px; display: inline-block; border-radius: 2px; margin-right: 6px; }
    .risk-radar {
      min-height: 252px;
      display: grid;
      place-items: center;
      margin-top: 4px;
    }
    .risk-radar svg { width: min(100%, 188px); height: auto; }
    .risk-bars { display: grid; gap: 8px; margin-top: 8px; }
    .risk-bars label { display: grid; grid-template-columns: 82px 1fr 38px; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 850; }
    .risk-bars span { height: 7px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
    .risk-bars span i { display: block; height: 100%; background: var(--green); border-radius: inherit; }

    .pricing-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .price-card { padding: 18px; position: relative; min-height: 330px; }
    .price-card.featured { border-color: #ffbd8f; box-shadow: var(--shadow); }
    .price-card h3 { margin: 0; font-size: 20px; }
    .price-card p { color: var(--muted); font-size: 12px; font-weight: 760; }
    .price { margin: 14px 0; font-size: 30px; font-weight: 950; }
    .price small { color: var(--muted); font-size: 13px; font-weight: 850; }
    .check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
    .check-list li { color: #344054; font-size: 13px; font-weight: 800; }
    .check-list li::before { content: "✓"; color: var(--green); margin-right: 8px; font-weight: 950; }

    .data-service-grid {
      display: grid;
      grid-template-columns: 1fr 0.9fr 0.9fr;
      gap: 14px;
      margin-top: 14px;
    }
    .account-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .account-summary div { padding: 12px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
    .account-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; }
    .account-summary strong { display: block; margin-top: 6px; font-size: 17px; }

    .faq-grid { display: grid; grid-template-columns: 1fr 0.62fr; gap: 14px; margin-top: 14px; }
    .faq-list { display: grid; gap: 0; }
    .faq-list div { min-height: 44px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); color: #344054; font-weight: 850; }
    .risk-note { background: #fff7f1; border-color: #ffd8bd; }

    .empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 850;
      text-align: center;
      padding: 20px;
    }
    .empty-row { color: var(--muted); text-align: center !important; }
    .demo-banner {
      min-height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 6px 12px;
      border: 1px solid #fedf89;
      background: #fffaf0;
      color: #9a3412;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 850;
    }

    .footer {
      padding: 16px 0;
      border-top: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      text-align: center;
      font-size: 12px;
      font-weight: 750;
    }

    .modal-root {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, 0.42);
      padding: 20px;
    }
    .modal {
      width: min(430px, 100%);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
    }
    .modal-head {
      min-height: 58px;
      padding: 0 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }
    .modal-head h3 { margin: 0; font-size: 18px; }
    .close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f2f4f7; font-size: 20px; }
    .modal-tabs { display: flex; gap: 8px; padding: 14px 18px 0; }
    .modal-tabs button {
      flex: 1;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--muted);
      font-weight: 850;
    }
    .modal-tabs button.active { border-color: #ffd8bd; background: #fff3ea; color: var(--brand); }
    .form { display: grid; gap: 12px; padding: 18px; }
    .form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .form input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; outline: 0; }
    .inline-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .form-message { min-height: 20px; color: var(--muted); font-size: 12px; font-weight: 750; }
    .form-message.error { color: var(--red); }
    .form-message.success { color: var(--green); }

    @media (max-width: 1220px) {
      .header-inner { grid-template-columns: 190px minmax(0, 1fr); height: auto; min-height: 64px; padding: 10px 0; }
      .site-header { height: auto; }
      .header-actions { grid-column: 1 / -1; justify-content: stretch; }
      .search-field { flex: 1; width: auto; }
      .hero,
      .home-analytics,
      .home-story-grid,
      .signals-layout,
      .signal-market-layout,
      .signal-market-search,
      .signal-preview-grid,
      .signal-account-layout,
      .signal-detail-top,
      .signal-detail-layout,
      .preview-grid,
      .detail-grid,
      .data-service-grid,
      .faq-grid { grid-template-columns: 1fr; }
      .signal-left-nav { position: static; min-height: auto; }
      .signal-account-side { position: static; }
      .account-profit-bottom { grid-template-columns: 1fr; }
      .signal-main-panel { padding: 16px; }
      .signal-filter-panel { position: static; }
      .detail-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .pricing-layout,
      .leader-grid,
      .home-capability-grid,
      .flow-grid,
      .service-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 1600px) {
      :root { --page-gutter: 36px; }
      .container { width: min(1520px, calc(100vw - 72px)); }
      .header-inner { width: min(1440px, calc(100% - (var(--page-gutter) * 2))); max-width: 1440px; }
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .hero { grid-template-columns: 1fr; }
      .data-table th,
      .data-table td { padding-left: 16px; padding-right: 16px; }
    }

    @media (max-width: 760px) {
      :root { --page-gutter: 12px; }
      .container { width: min(100% - 24px, var(--wide)); }
      .header-inner,
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .header-inner { display: flex; flex-direction: column; align-items: stretch; }
      .main-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
      .main-nav::-webkit-scrollbar { display: none; }
      .header-actions { flex-wrap: wrap; }
      .icon-btn { width: 36px; height: 36px; }
      .search-field { order: 3; width: 100%; flex-basis: 100%; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero { padding: 42px 0 24px; }
      .hero h1 { font-size: clamp(30px, 9vw, 36px); }
      .hero p {
        max-width: 340px;
        font-size: 13px;
        line-height: 1.75;
        overflow-wrap: anywhere;
      }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .drawdown-summary,
      .analytics-insight-row { grid-template-columns: 1fr; }
      .account-profit-module { padding: 16px; }
      .account-profit-head { display: grid; gap: 14px; }
      .account-profit-title { grid-template-columns: 48px minmax(0, 1fr); }
      .account-profit-icon { width: 48px; height: 48px; font-size: 21px; }
      .account-periods { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .account-periods::-webkit-scrollbar { display: none; }
      .account-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .account-kpi-card { min-height: 92px; padding: 12px; grid-template-columns: 38px minmax(0, 1fr); }
      .account-kpi-icon { width: 38px; height: 38px; font-size: 17px; }
      .snapshot-bar-row { grid-template-columns: 52px 82px minmax(80px, 1fr); gap: 7px; }
      .account-main-chart .equity-svg { height: 340px; min-height: 340px; }
      .account-profit-bottom { grid-template-columns: 1fr; }
      .hero-network { height: 178px; margin-top: 22px; }
      .network-node {
        width: 46px;
        height: 46px;
        border-width: 4px;
        font-size: 10px;
      }
      .network-node.primary {
        width: 64px;
        height: 64px;
        left: calc(50% - 32px);
        font-size: 20px;
      }
      .network-node:nth-child(2) { left: 7%; bottom: 16px; }
      .network-node:nth-child(3) { left: 20%; bottom: 88px; }
      .network-node:nth-child(4) { left: 33%; bottom: 48px; }
      .network-node:nth-child(5) { right: 33%; bottom: 88px; }
      .network-node:nth-child(6) { right: 20%; bottom: 48px; }
      .network-node:nth-child(7) { right: 7%; bottom: 92px; }
      .network-node:nth-child(8) { display: none; }
      .home-stat-band { margin-top: 0; padding: 12px; }
      .stats-grid,
      .metric-grid,
      .detail-kpi-row,
      .mql-stat-grid,
      .mql-stats-grid,
      .mql-allocation-section,
      .mql-risk-range-grid,
      .mql-risk-metrics,
      .risk-split-grid,
      .analytics-pair-grid,
      .quant-metric-grid,
      .pricing-layout,
      .leader-grid,
      .home-capability-grid,
      .home-story-grid,
      .flow-grid,
      .service-strip,
      .account-summary,
      .subgrid-2,
      .subgrid-3 { grid-template-columns: 1fr; }
      .stats-grid,
      .metric-grid,
      .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .filters { grid-template-columns: 1fr; }
      .signals-layout { gap: 12px; }
      .signal-market-layout { border-radius: 10px; }
      .signal-left-nav { padding: 12px; order: 2; }
      .signal-left-promo { display: none; }
      .signal-main-panel { padding: 14px; order: 1; }
      .signal-market-hero { padding: 4px 0 14px; }
      .signal-market-hero h1,
      .signal-detail-summary h1 { font-size: 24px; }
      .signal-market-hero h1 { font-size: 22px; line-height: 1.18; }
      .signal-results-head { display: grid; align-items: start; }
      .sort-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .sort-pills::-webkit-scrollbar { display: none; }
      .signal-filter-panel { padding: 12px; }
      .signal-preview-grid { grid-template-columns: 1fr; }
      .signal-detail-top,
      .signal-account-layout,
      .signal-detail-layout { grid-template-columns: 1fr; }
      .mql-mobile-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .signal-side-card { display: none; }
      .panel-title { align-items: flex-start; }
      #signalsListView .table-wrap { display: none; }
      .signal-card-grid { grid-template-columns: 1fr; }
      .mobile-signal-list {
        display: grid;
        gap: 10px;
        padding: 12px;
        background: #fff;
      }
      .mobile-signal-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        padding: 12px;
      }
      .mobile-signal-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .mobile-signal-title {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .mobile-signal-title strong,
      .mobile-signal-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-signal-title strong { display: block; max-width: 180px; }
      .mobile-signal-title span { display: block; max-width: 210px; color: var(--muted); font-size: 12px; font-weight: 760; }
      .mobile-signal-metrics {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-signal-metrics div {
        min-height: 58px;
        padding: 8px;
        border-radius: 8px;
        background: #f8fafc;
        border: 1px solid #edf2f7;
      }
      .mobile-signal-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; }
      .mobile-signal-metrics strong { display: block; margin-top: 5px; font-size: 15px; }
      .mobile-signal-actions {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .preview-grid { grid-template-columns: 1fr; }
      .detail-head { display: grid; gap: 14px; align-items: stretch; }
      .detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .detail-actions > * { justify-self: start; }
      .detail-actions .btn { grid-column: 1 / -1; }
      .detail-actions .btn { justify-self: stretch; }
      .tabs-line {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 2px;
      }
      .tabs-line::-webkit-scrollbar { display: none; }
      .metric-card { min-height: 74px; padding: 13px; }
      .metric-card strong { font-size: 18px; }
      .chart-card { padding: 13px; }
      .equity-svg { height: 180px; }
      .signal-primary-chart .equity-svg { height: 320px; }
      .drawdown-bars { height: auto; }
      .drawdown-bars .echart-panel,
      .analytics-pair-grid .echart-panel { height: 220px; min-height: 200px; }
      .heatmap .echart-panel { height: 96px; min-height: 96px; }
      .donut-layout { grid-template-columns: 110px minmax(0, 1fr); }
      .donut { width: 100px; }
      .account-summary { gap: 8px; }
      .price-card { min-height: auto; }
      .service-strip { padding: 14px; }
      .footer { padding: 14px 12px; }
    }

    @media (max-width: 420px) {
      :root { --page-gutter: 10px; }
      .container { width: min(100% - 20px, var(--wide)); }
      .header-inner,
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .brand strong { font-size: 16px; }
      .brand span:last-child { font-size: 10px; }
      .main-nav a { padding: 0 11px; font-size: 13px; }
      .btn { width: 100%; }
      .hero { padding-top: 12px; }
      .hero h1 { font-size: 29px; }
      .hero-network { height: 150px; }
      .ranking-card { padding: 12px; }
      .ranking-row { grid-template-columns: 22px minmax(0, 1fr); }
      .ranking-row b { grid-column: 2; margin-top: 2px; }
      .stat-card { min-height: 92px; padding: 14px; }
      .stat-card strong { font-size: 24px; }
      .signal-market-search,
      .detail-kpi-row,
      .mql-stat-grid,
      .mql-stats-grid,
      .mql-allocation-section,
      .mql-risk-range-grid,
      .mql-risk-metrics,
      .risk-split-grid,
      .account-kpi-grid { grid-template-columns: 1fr; }
      .account-main-chart .equity-svg { height: 300px; min-height: 300px; }
      .account-status-row { grid-template-columns: 28px minmax(0, 1fr); }
      .account-status-value { grid-column: 2; }
      .signal-market-hero h1,
      .signal-detail-summary h1 { font-size: 22px; }
      .signal-copy-card { padding: 14px; }
      .mobile-signal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mobile-signal-actions { grid-template-columns: 1fr; }
      .detail-actions { grid-template-columns: 1fr; }
      .modal-root { padding: 12px; }
    }
    }


    /* QC targeted update: homepage and product/service pages only. */
.main-nav {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 4px;
      min-width: 0;
    }

    .main-nav a {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      border-bottom: 2px solid transparent;
      color: #344054;
      font-weight: 850;
      white-space: nowrap;
    }

    .main-nav a.active,
    .main-nav a:hover {
      color: var(--brand);
      background: #fff5ef;
    }

    .main-nav a.active { border-bottom-color: var(--brand); border-radius: 8px 8px 0 0; }

    .nav-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
      align-self: stretch;
      min-height: 38px;
    }

    .nav-dropdown::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 49;
      display: none;
      width: 330px;
      height: 12px;
    }

    .nav-dropdown:hover::before,
    .nav-dropdown:focus-within::before {
      display: block;
    }

    .nav-dropdown > a::after {
      content: "⌄";
      margin-left: 7px;
      color: currentColor;
      font-size: 12px;
      line-height: 1;
    }

    .nav-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 50;
      width: 330px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 10px;
      background:
        linear-gradient(140deg, rgba(13, 18, 32, 0.96), rgba(24, 31, 49, 0.96)),
        radial-gradient(circle at 20% 10%, rgba(255, 90, 0, 0.22), transparent 32%);
      box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    .nav-dropdown:hover .nav-menu,
    .nav-dropdown:focus-within .nav-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .main-nav .nav-menu a {
      min-height: 52px;
      width: 100%;
      display: grid;
      align-items: center;
      justify-content: stretch;
      padding: 8px 12px;
      border: 0;
      border-radius: 8px;
      color: #fff;
      background: transparent;
      font-weight: 920;
      text-align: left;
    }

    .main-nav .nav-menu a strong {
      display: block;
      font-size: 14px;
      line-height: 1.2;
    }

    .main-nav .nav-menu a span {
      display: block;
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.64);
      font-size: 11px;
      line-height: 1.35;
      font-weight: 760;
    }

    .main-nav .nav-menu a:hover,
    .main-nav .nav-menu a.active {
      color: #fff;
      background: rgba(255, 90, 0, 0.18);
      box-shadow: inset 3px 0 0 var(--brand);
    }

.product-page {
      --product-wide: min(1520px, calc(100vw - 56px));
      --product-accent-rgb: 255, 90, 0;
      padding-top: 22px;
      background:
        radial-gradient(circle at 86% 0%, rgba(255, 90, 0, 0.055), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f6f8fb 48%, #eef3f8 100%);
    }

    .product-page > .container {
      width: 100%;
      max-width: none;
    }

    .product-hero {
      position: relative;
      width: var(--product-wide);
      min-height: auto;
      display: block;
      margin: 0 auto 30px;
      padding: 28px 30px;
      text-align: left;
      overflow: hidden;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.08), transparent 28%),
        linear-gradient(138deg, rgba(255, 255, 255, 0.76), rgba(247, 250, 253, 0.98) 54%, rgba(240, 245, 251, 0.94));
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    }

    .product-hero::before {
      display: none;
    }

    .product-eyebrow,
    .product-kicker {
      min-height: 30px;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid #ffd8bd;
      border-radius: 999px;
      color: var(--brand);
      background: rgba(255, 247, 241, 0.88);
      font-size: 12px;
      font-weight: 950;
    }

    .product-hero .product-eyebrow {
      margin: 0 0 14px;
    }

    .product-title {
      max-width: 980px;
      margin: 0;
      color: var(--ink);
      font-size: clamp(32px, 2.7vw, 48px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 950;
    }

    .product-title span {
      color: var(--brand);
    }

    .product-lead {
      max-width: 980px;
      margin: 16px 0 0;
      color: #344054;
      font-size: 15px;
      line-height: 1.78;
      font-weight: 820;
    }

    .product-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 22px;
    }

    .product-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 860;
    }

    .product-breadcrumb a {
      color: #344054;
      font-weight: 900;
    }

    .product-breadcrumb span:last-child {
      color: var(--brand);
    }

    .product-subnav {
      width: var(--product-wide);
      display: flex;
      gap: 8px;
      align-items: center;
      margin: -14px auto 24px;
      padding: 8px;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 12px 26px rgba(16, 24, 40, 0.05);
      overflow-x: auto;
    }

    .product-subnav::-webkit-scrollbar {
      display: none;
    }

    .product-subnav a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .product-subnav a.active,
    .product-subnav a:hover {
      border-color: #ffd8bd;
      background: #fff5ef;
      color: var(--brand);
    }

    .product-layout {
      width: var(--product-wide);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 22px;
      align-items: start;
      margin: 0 auto 36px;
    }

    .product-main {
      min-width: 0;
    }

    .product-main .product-section {
      width: 100%;
      margin: 0 0 28px;
    }

    .product-layout .product-split {
      grid-template-columns: 1fr;
    }

    .product-main .product-section h2,
    .product-main .product-panel h2 {
      font-size: clamp(24px, 2vw, 34px);
    }

    .product-side {
      position: sticky;
      top: 86px;
      display: grid;
      gap: 14px;
    }

    .product-side-card {
      position: relative;
      overflow: hidden;
      padding: 20px;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 90% 8%, rgba(var(--product-accent-rgb), 0.10), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.92));
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    }

    .product-side-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.28;
      font-weight: 950;
    }

    .product-side-card p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.68;
      font-weight: 780;
    }

    .product-side-list {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-side-list li {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr);
      gap: 9px;
      color: #344054;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 850;
    }

    .product-side-list li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 999px;
      background: var(--brand);
    }

    .product-side-card .product-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .product-side-card .btn {
      width: 100%;
    }

    .product-mini-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    .product-mini-stats div {
      padding: 11px;
      border: 1px solid rgba(207, 217, 230, 0.82);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.64);
    }

    .product-mini-stats span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .product-mini-stats strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .product-feature-groups {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .product-feature-group {
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.66);
    }

    .product-feature-group b {
      display: block;
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .product-feature-group span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.58;
      font-weight: 780;
    }

    .product-scenario-list {
      display: grid;
      gap: 0;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.68);
    }

    .product-scenario-list li {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 18px;
      padding: 15px 16px;
      border-bottom: 1px solid #e9eff6;
      color: #344054;
      font-size: 13px;
      line-height: 1.58;
      font-weight: 820;
    }

    .product-scenario-list li:last-child {
      border-bottom: 0;
    }

    .product-scenario-list b {
      color: var(--ink);
      font-weight: 950;
    }

    .product-hero-panel,
    .product-card,
    .product-panel,
    .product-price-card,
    .product-faq-item,
    .product-service-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 86% 12%, rgba(var(--product-accent-rgb), 0.08), transparent 34%),
        linear-gradient(138deg, rgba(255, 255, 255, 0.70), rgba(247, 250, 253, 0.95) 52%, rgba(240, 245, 251, 0.90));
      background-size: 180% 180%;
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
      transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background-position 0.7s ease;
    }

    .product-hero-panel::before,
    .product-card::before,
    .product-panel::before,
    .product-price-card::before,
    .product-faq-item::before,
    .product-service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.46) 42%, transparent 66%);
      opacity: 0;
      transform: translateX(-65%);
      transition: opacity 0.28s ease, transform 0.8s ease;
      pointer-events: none;
    }

    .product-hero-panel:hover,
    .product-card:hover,
    .product-panel:hover,
    .product-price-card:hover,
    .product-faq-item:hover,
    .product-service-card:hover {
      transform: translateY(-4px);
      background-position: 100% 0;
      border-color: rgba(var(--product-accent-rgb), 0.28);
      box-shadow: 0 20px 46px rgba(16, 24, 40, 0.095), 0 0 0 1px rgba(var(--product-accent-rgb), 0.12);
    }

    .product-hero-panel:hover::before,
    .product-card:hover::before,
    .product-panel:hover::before,
    .product-price-card:hover::before,
    .product-faq-item:hover::before,
    .product-service-card:hover::before {
      opacity: 1;
      transform: translateX(65%);
    }

    .product-hero-panel {
      width: min(1450px, 100%);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 24px 0 0;
      padding: 14px;
      text-align: left;
    }

    .product-hero-panel::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px dashed #d7e1ec;
      border-radius: 14px;
      pointer-events: none;
    }

    .product-hero-item {
      position: relative;
      z-index: 1;
      min-height: 112px;
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.62);
    }

    .product-hero-item strong,
    .product-card strong,
    .product-service-card strong,
    .product-faq-item strong {
      display: block;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.22;
      font-weight: 950;
    }

    .product-hero-item span,
    .product-card span,
    .product-service-card span,
    .product-faq-item span {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.64;
      font-weight: 780;
    }

    .product-section {
      width: var(--product-wide);
      margin: 0 auto 36px;
    }

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

    .product-section h2,
    .product-panel h2 {
      max-width: 1030px;
      margin: 12px 0 0;
      color: var(--ink);
      font-size: clamp(30px, 2.35vw, 42px);
      line-height: 1.16;
      letter-spacing: 0;
      font-weight: 950;
    }

    .product-section-head p,
    .product-panel p,
    .product-price-card p,
    .product-service-card p {
      max-width: 940px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.76;
      font-weight: 780;
    }

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

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

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

    .product-card {
      min-height: 178px;
      padding: 22px;
    }

    .product-card:nth-child(2),
    .product-service-card:nth-child(2) { --product-accent-rgb: 23, 92, 211; }
    .product-card:nth-child(3),
    .product-service-card:nth-child(3) { --product-accent-rgb: 7, 148, 85; }
    .product-card:nth-child(4) { --product-accent-rgb: 181, 71, 8; }
    .product-card:nth-child(5) { --product-accent-rgb: 83, 67, 181; }
    .product-card:nth-child(6) { --product-accent-rgb: 8, 127, 127; }
    .product-card:nth-child(7) { --product-accent-rgb: 255, 90, 0; }
    .product-card:nth-child(8) { --product-accent-rgb: 23, 92, 211; }

    .product-panel {
      padding: 30px;
    }

    .product-flow {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .product-flow-step {
      min-height: 142px;
      padding: 17px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.62);
      position: relative;
    }

    .product-flow-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -12px;
      width: 12px;
      height: 1px;
      background: rgba(255, 90, 0, 0.34);
    }

    .product-flow-step b {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
    }

    .product-flow-step span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
      font-weight: 780;
    }

    .product-price-card {
      min-height: 360px;
      padding: 26px;
    }

    .product-price-card.featured {
      border-color: #ffbd8f;
      box-shadow: 0 18px 44px rgba(255, 90, 0, 0.12);
    }

    .product-price-card h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: 26px;
      font-weight: 950;
    }

    .product-price {
      position: relative;
      z-index: 1;
      margin: 18px 0 4px;
      color: var(--brand);
      font-size: 34px;
      line-height: 1;
      font-weight: 950;
    }

    .product-price small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .product-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-list li {
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 9px 11px;
      border: 1px solid rgba(207, 217, 230, 0.78);
      border-radius: 8px;
      color: #344054;
      background: rgba(255, 255, 255, 0.62);
      font-size: 13px;
      font-weight: 860;
    }

    .product-list li::before {
      content: "";
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      margin-right: 8px;
      border-radius: 999px;
      background: var(--brand);
    }

    .product-split {
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
      gap: 18px;
      align-items: stretch;
    }

    .product-checklist {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 24px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-checklist li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-height: 44px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(207, 217, 230, 0.86);
      color: #344054;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 850;
    }

    .product-checklist li::before {
      content: "";
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(var(--product-accent-rgb), 1), rgba(255, 138, 61, 0.92));
      box-shadow: 0 8px 18px rgba(var(--product-accent-rgb), 0.18);
    }

    .product-diagram,
    .product-table-panel,
    .product-example-panel,
    .product-timeline-panel {
      position: relative;
      overflow: hidden;
      padding: 30px;
      border: 1px solid #d9e3ef;
      border-radius: 16px;
      background:
        radial-gradient(circle at 8% 12%, rgba(var(--product-accent-rgb), 0.12), transparent 34%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82));
      box-shadow: 0 20px 46px rgba(16, 24, 40, 0.075);
    }

    .product-diagram::before,
    .product-table-panel::before,
    .product-example-panel::before,
    .product-timeline-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.48) 44%, transparent 76%);
      opacity: 0;
      transform: translateX(-72%);
      transition: opacity 0.42s ease, transform 0.72s ease;
      pointer-events: none;
    }

    .product-diagram:hover::before,
    .product-table-panel:hover::before,
    .product-example-panel:hover::before,
    .product-timeline-panel:hover::before {
      opacity: 1;
      transform: translateX(68%);
    }

    .product-diagram h3,
    .product-table-panel h3,
    .product-example-panel h3,
    .product-timeline-panel h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--ink);
      font-size: 24px;
      line-height: 1.2;
      font-weight: 950;
    }

    .product-diagram p,
    .product-table-panel p,
    .product-example-panel p,
    .product-timeline-panel p {
      position: relative;
      z-index: 1;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.72;
      font-weight: 780;
    }

    .diagram-lanes {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .product-split .diagram-lanes {
      grid-template-columns: 1fr;
    }

    .product-split .diagram-lane::after {
      display: none;
    }

    .product-layout .product-split .diagram-lanes {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .diagram-lane {
      position: relative;
      min-height: 168px;
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.9);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.68);
    }

    .diagram-lane:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -13px;
      width: 13px;
      height: 2px;
      background: linear-gradient(90deg, rgba(var(--product-accent-rgb), 0.22), rgba(var(--product-accent-rgb), 0.72));
    }

    .diagram-lane b {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.28;
      font-weight: 950;
    }

    .diagram-lane span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.58;
      font-weight: 780;
    }

    .diagram-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .diagram-tag-row i {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 0 8px;
      border: 1px solid rgba(var(--product-accent-rgb), 0.18);
      border-radius: 999px;
      background: rgba(var(--product-accent-rgb), 0.08);
      color: #344054;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .product-example-panel {
      min-height: 100%;
    }

    .example-screen {
      position: relative;
      z-index: 1;
      overflow: hidden;
      margin-top: 20px;
      border: 1px solid rgba(207, 217, 230, 0.94);
      border-radius: 12px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .example-screen-head {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border-bottom: 1px solid #e6edf5;
      background: linear-gradient(90deg, #f8fbff, #fff7f1);
      color: var(--ink);
      font-size: 12px;
      font-weight: 950;
    }

    .example-dots {
      display: inline-flex;
      gap: 5px;
    }

    .example-dots i {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ff5a00;
    }

    .example-dots i:nth-child(2) { background: #f6b742; }
    .example-dots i:nth-child(3) { background: #16a34a; }

    .example-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      font-weight: 820;
    }

    .example-table th,
    .example-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #edf2f7;
      text-align: left;
      white-space: nowrap;
    }

    .example-table th {
      color: #667085;
      background: #fbfdff;
      font-size: 11px;
      font-weight: 950;
    }

    .example-table td {
      color: #1d2939;
    }

    .example-table .positive { color: #079455; }
    .example-table .warning { color: var(--brand); }

    .product-table-wrap {
      position: relative;
      z-index: 1;
      overflow-x: auto;
      margin-top: 20px;
      border: 1px solid rgba(207, 217, 230, 0.94);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
    }

    .product-table {
      width: 100%;
      min-width: 780px;
      border-collapse: collapse;
      font-size: 13px;
      font-weight: 820;
    }

    .product-split .product-table {
      min-width: 640px;
    }

    .product-table th,
    .product-table td {
      padding: 14px 16px;
      border-bottom: 1px solid #e9eff6;
      color: #344054;
      text-align: left;
      vertical-align: top;
    }

    .product-table th {
      color: var(--ink);
      background: linear-gradient(180deg, #f7fbff, #fff);
      font-size: 12px;
      font-weight: 950;
    }

    .product-table tr:last-child td { border-bottom: 0; }
    .product-table strong { color: var(--ink); font-weight: 950; }
    .product-table .yes { color: #079455; font-weight: 950; }
    .product-table .weak { color: #667085; }

    .product-timeline {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-timeline li {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 18px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(207, 217, 230, 0.86);
    }

    .product-timeline li:last-child { border-bottom: 0; }

    .product-timeline em {
      display: inline-flex;
      width: 54px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(var(--product-accent-rgb), 0.1);
      color: var(--brand);
      font-size: 12px;
      font-style: normal;
      font-weight: 950;
    }

    .product-timeline b {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
    }

    .product-timeline span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.58;
      font-weight: 780;
    }

    .download-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: 18px;
      align-items: stretch;
    }

    .download-box {
      min-height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .download-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

    .download-meta div {
      padding: 12px;
      border: 1px solid rgba(207, 217, 230, 0.78);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.62);
    }

    .download-meta span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .download-meta strong {
      display: block;
      margin-top: 5px;
      font-size: 15px;
      font-weight: 950;
    }

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

    .product-faq-item {
      min-height: 122px;
      padding: 20px;
    }

    .product-service-card {
      min-height: 310px;
      padding: 26px;
    }

    .product-cta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
    }

    .empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 850;
      text-align: center;
      padding: 20px;
    }
    .empty-row { color: var(--muted); text-align: center !important; }
    .demo-banner {
      min-height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 6px 12px;
      border: 1px solid #fedf89;
      background: #fffaf0;
      color: #9a3412;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 850;
    }

    .footer {
      padding: 16px 0;
      border-top: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      text-align: center;
      font-size: 12px;
      font-weight: 750;
    }

    .modal-root {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, 0.42);
      padding: 20px;
    }
    .modal {
      width: min(430px, 100%);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
    }
    .modal-head {
      min-height: 58px;
      padding: 0 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }
    .modal-head h3 { margin: 0; font-size: 18px; }
    .close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f2f4f7; font-size: 20px; }
    .modal-tabs { display: flex; gap: 8px; padding: 14px 18px 0; }
    .modal-tabs button {
      flex: 1;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--muted);
      font-weight: 850;
    }
    .modal-tabs button.active { border-color: #ffd8bd; background: #fff3ea; color: var(--brand); }
    .form { display: grid; gap: 12px; padding: 18px; }
    .form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .form input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; outline: 0; }
    .inline-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .form-message { min-height: 20px; color: var(--muted); font-size: 12px; font-weight: 750; }
    .form-message.error { color: var(--red); }
    .form-message.success { color: var(--green); }

    #copyPage.copy-v2 {
      --copy-wide: min(1520px, calc(100vw - 56px));
      --copy-orange: #ff5a00;
      --copy-ink: #0f172a;
      --copy-muted: #667085;
      --copy-line: #e8edf4;
      --copy-soft: #fff8f3;
      --copy-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 36px;
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 90, 0, 0.06), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(255, 138, 61, 0.05), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 46%, #fff 100%);
    }

    #copyPage.copy-v2 > .container > :not(.copy-v2-shell) {
      display: none !important;
    }

    .copy-v2-shell {
      width: var(--copy-wide);
      margin: 0 auto;
      color: var(--copy-ink);
    }

    .copy-v2-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--copy-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.055), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
      box-shadow: var(--copy-shadow);
    }

    .copy-v2-hero {
      min-height: 510px;
      display: grid;
      grid-template-columns: minmax(340px, 0.76fr) minmax(0, 1.55fr);
      align-items: center;
      gap: 34px;
      padding: 40px 34px 24px;
    }

    .copy-v2-hero::before {
      content: "";
      position: absolute;
      left: -120px;
      top: -190px;
      width: 420px;
      height: 420px;
      border: 1px solid rgba(255, 90, 0, 0.10);
      border-radius: 50%;
      box-shadow: 0 0 0 64px rgba(255, 90, 0, 0.025);
      pointer-events: none;
    }

    .copy-v2-kicker {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      border-radius: 999px;
      color: var(--copy-orange);
      background: #fff3ea;
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
    }

    .copy-v2-title {
      max-width: 510px;
      margin: 22px 0 0;
      color: var(--copy-ink);
      font-size: clamp(38px, 3.5vw, 60px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 950;
    }

    .copy-v2-title span {
      color: var(--copy-orange);
    }

    .copy-v2-lead {
      max-width: 500px;
      margin: 18px 0 0;
      color: #344054;
      font-size: 17px;
      line-height: 1.82;
      font-weight: 820;
    }

    .copy-v2-checks,
    .copy-v2-side-list {
      display: grid;
      gap: 13px;
      margin: 26px 0 0;
      padding: 0;
      list-style: none;
    }

    .copy-v2-checks li,
    .copy-v2-side-list li {
      position: relative;
      padding-left: 28px;
      color: #344054;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 850;
    }

    .copy-v2-checks li::before,
    .copy-v2-side-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 18px;
      height: 18px;
      border: 2px solid var(--copy-orange);
      border-radius: 50%;
      background:
        linear-gradient(135deg, transparent 44%, var(--copy-orange) 45% 56%, transparent 57%) 5px 2px / 8px 11px no-repeat,
        #fff;
    }

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

    .copy-v2-actions .btn {
      min-width: 140px;
      justify-content: center;
      border-radius: 7px;
    }

    .copy-v2-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
      max-width: 560px;
    }

    .copy-v2-stat {
      min-width: 0;
    }

    .copy-v2-stat strong {
      display: block;
      color: var(--copy-ink);
      font-size: 22px;
      line-height: 1.05;
      font-weight: 950;
    }

    .copy-v2-stat span {
      display: block;
      margin-top: 5px;
      color: var(--copy-muted);
      font-size: 12px;
      font-weight: 850;
    }

    .copy-v2-hero-map {
      position: relative;
      display: grid;
      grid-template-columns: 0.9fr 1.02fr 0.9fr;
      align-items: center;
      gap: 32px;
      min-height: 430px;
    }

    .copy-v2-hero-map::before,
    .copy-v2-hero-map::after {
      content: "";
      position: absolute;
      top: 50%;
      height: 1px;
      border-top: 1px dashed rgba(42, 116, 232, 0.55);
      pointer-events: none;
    }

    .copy-v2-hero-map::before {
      left: 24%;
      right: 57%;
    }

    .copy-v2-hero-map::after {
      left: 58%;
      right: 24%;
    }

    .copy-v2-stack-title {
      margin: 0 0 16px;
      text-align: center;
      color: #172033;
      font-size: 14px;
      font-weight: 950;
    }

    .copy-v2-account-stack {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 13px;
      padding: 26px;
      border: 1px solid var(--copy-line);
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 16px 34px rgba(16, 24, 40, 0.052);
    }

    .copy-v2-account,
    .copy-v2-engine-step,
    .copy-v2-dashboard-card,
    .copy-v2-module,
    .copy-v2-scenario,
    .copy-v2-compare-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--copy-line);
      border-radius: 9px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.94));
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
    }

    .copy-v2-account {
      min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      color: #344054;
      font-size: 14px;
      font-weight: 920;
    }

    .copy-v2-icon {
      --icon-color: var(--copy-orange);
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      position: relative;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 26%, white);
      border-radius: 9px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 9%, white), #fff);
    }

    .copy-v2-icon::before,
    .copy-v2-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .copy-v2-icon::before {
      width: 15px;
      height: 15px;
      border: 2px solid var(--icon-color);
      border-radius: 4px;
    }

    .copy-v2-icon.account::before {
      width: 15px;
      height: 11px;
      border-radius: 3px;
    }

    .copy-v2-icon.account::after {
      width: 7px;
      height: 7px;
      border: 2px solid var(--icon-color);
      border-radius: 50%;
      transform: translateY(-7px);
      background: #fff;
    }

    .copy-v2-icon.lock::before {
      width: 15px;
      height: 13px;
      border-radius: 4px;
      transform: translateY(3px);
    }

    .copy-v2-icon.lock::after {
      width: 13px;
      height: 10px;
      border: 2px solid var(--icon-color);
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      transform: translateY(-6px);
    }

    .copy-v2-icon.layers::before {
      width: 18px;
      height: 14px;
      border: 0;
      background:
        linear-gradient(145deg, transparent 47%, var(--icon-color) 48% 54%, transparent 55%) 0 0 / 18px 14px,
        linear-gradient(35deg, transparent 47%, var(--icon-color) 48% 54%, transparent 55%) 0 0 / 18px 14px;
      box-shadow: 0 6px 0 -2px var(--icon-color), 0 12px 0 -2px var(--icon-color);
    }

    .copy-v2-icon.user::before {
      width: 18px;
      height: 20px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 10px, transparent 11px);
    }

    .copy-v2-icon.shield::before {
      width: 18px;
      height: 21px;
      border: 0;
      border-radius: 0;
      background: var(--icon-color);
      clip-path: polygon(50% 0, 88% 14%, 84% 66%, 50% 100%, 16% 66%, 12% 14%);
    }

    .copy-v2-icon.flow::before {
      width: 19px;
      height: 14px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 10px / 10px 2px no-repeat;
    }

    .copy-v2-icon.chart::before {
      width: 18px;
      height: 17px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 15px 13px no-repeat;
    }

    .copy-v2-engine {
      position: relative;
      z-index: 2;
      padding: 28px 22px 18px;
      border: 1px solid rgba(255, 90, 0, 0.38);
      border-radius: 10px;
      background: rgba(255, 250, 247, 0.90);
      box-shadow: 0 20px 44px rgba(255, 90, 0, 0.10);
    }

    .copy-v2-engine-title {
      position: absolute;
      left: 50%;
      top: -36px;
      transform: translateX(-50%);
      color: var(--copy-orange);
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .copy-v2-engine-title::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 26px;
      width: 2px;
      height: 18px;
      transform: translateX(-50%);
      background: var(--copy-orange);
    }

    .copy-v2-engine-step {
      min-height: 64px;
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      margin-bottom: 10px;
      border-color: #ffd8bd;
      background:
        radial-gradient(circle at 0 0, rgba(255, 90, 0, 0.12), transparent 42%),
        #fff;
    }

    .copy-v2-engine-step:last-child {
      margin-bottom: 0;
    }

    .copy-v2-engine-step b {
      display: block;
      color: var(--copy-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .copy-v2-engine-step span {
      display: block;
      margin-top: 4px;
      color: var(--copy-muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 820;
    }

    .copy-v2-section {
      margin-top: 14px;
      padding: 26px 28px;
    }

    .copy-v2-section-head {
      max-width: 680px;
      margin: 0 auto 24px;
      text-align: center;
    }

    .copy-v2-section-head h2,
    .copy-v2-text h2 {
      margin: 0;
      color: var(--copy-ink);
      font-size: clamp(26px, 2.25vw, 38px);
      line-height: 1.18;
      letter-spacing: 0;
      font-weight: 950;
    }

    .copy-v2-section-head p,
    .copy-v2-text p {
      margin: 10px 0 0;
      color: var(--copy-muted);
      font-size: 14px;
      line-height: 1.78;
      font-weight: 820;
    }

    .copy-v2-modules {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 14px;
    }

    .copy-v2-module {
      min-height: 135px;
      padding: 20px 14px;
      text-align: center;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .copy-v2-module:hover,
    .copy-v2-scenario:hover,
    .copy-v2-compare-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .copy-v2-module .copy-v2-icon,
    .copy-v2-scenario .copy-v2-icon {
      margin: 0 auto 12px;
    }

    .copy-v2-module b,
    .copy-v2-scenario b {
      display: block;
      color: var(--copy-ink);
      font-size: 14px;
      line-height: 1.3;
      font-weight: 950;
    }

    .copy-v2-module span,
    .copy-v2-scenario span {
      display: block;
      margin-top: 8px;
      color: var(--copy-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .copy-v2-monitor {
      display: grid;
      grid-template-columns: minmax(300px, 0.45fr) minmax(0, 1fr);
      align-items: center;
      gap: 34px;
      min-height: 320px;
    }

    .copy-v2-dashboard {
      padding: 18px;
      border: 1px solid var(--copy-line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 22px 48px rgba(16, 24, 40, 0.06);
    }

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

    .copy-v2-dashboard-brand {
      color: var(--copy-orange);
      font-size: 13px;
      font-weight: 950;
    }

    .copy-v2-dashboard-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      flex: 1;
      max-width: 620px;
    }

    .copy-v2-dashboard-metrics div {
      padding: 9px 10px;
      border-radius: 8px;
      background: #f8fafc;
    }

    .copy-v2-dashboard-metrics span {
      display: block;
      color: #98a2b3;
      font-size: 11px;
      font-weight: 800;
    }

    .copy-v2-dashboard-metrics strong {
      display: block;
      margin-top: 3px;
      color: var(--copy-ink);
      font-size: 18px;
      font-weight: 950;
    }

    .copy-v2-dashboard-grid {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) 190px 190px;
      gap: 14px;
      align-items: stretch;
    }

    .copy-v2-dashboard-card {
      min-height: 164px;
      padding: 14px;
      box-shadow: none;
    }

    .copy-v2-dashboard-card h3 {
      margin: 0 0 12px;
      color: var(--copy-ink);
      font-size: 13px;
      font-weight: 950;
    }

    .copy-v2-source-row,
    .copy-v2-follow-row,
    .copy-v2-risk-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 32px;
      color: #344054;
      font-size: 12px;
      font-weight: 820;
      border-bottom: 1px solid #eef2f7;
    }

    .copy-v2-source-row:last-child,
    .copy-v2-follow-row:last-child,
    .copy-v2-risk-row:last-child {
      border-bottom: 0;
    }

    .copy-v2-dot {
      width: 7px;
      height: 7px;
      display: inline-block;
      margin-right: 6px;
      border-radius: 50%;
      background: #12b76a;
    }

    .copy-v2-chart {
      position: relative;
      height: 116px;
      margin-top: 10px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background:
        linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 28px;
    }

    .copy-v2-chart::before {
      content: "";
      position: absolute;
      inset: 18px 12px 22px;
      background:
        linear-gradient(140deg, transparent 0 8%, #2a7de1 9% 10%, transparent 11% 20%, #2a7de1 21% 22%, transparent 23% 30%, #2a7de1 31% 32%, transparent 33% 46%, #ff5a00 47% 48%, transparent 49% 60%, #ff5a00 61% 62%, transparent 63% 74%, #2a7de1 75% 76%, transparent 77%);
      filter: drop-shadow(0 8px 10px rgba(255, 90, 0, 0.10));
    }

    .copy-v2-compare {
      display: grid;
      grid-template-columns: 0.72fr repeat(3, 1fr);
      gap: 22px;
      align-items: stretch;
    }

    .copy-v2-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 245px;
    }

    .copy-v2-compare-card {
      min-height: 245px;
      padding: 28px;
      box-shadow: none;
    }

    .copy-v2-compare-card.featured {
      border-color: rgba(255, 90, 0, 0.72);
      box-shadow: 0 18px 42px rgba(255, 90, 0, 0.08);
    }

    .copy-v2-compare-card h3 {
      margin: 0 0 18px;
      text-align: center;
      color: var(--copy-ink);
      font-size: 17px;
      font-weight: 950;
    }

    .copy-v2-compare-card.featured h3 {
      color: var(--copy-orange);
    }

    .copy-v2-compare-card ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .copy-v2-compare-card li {
      position: relative;
      padding-left: 22px;
      color: #475467;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 820;
    }

    .copy-v2-compare-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 14px;
      height: 14px;
      border: 1px solid #ffb17a;
      border-radius: 50%;
      background: #fff7f1;
    }

    .copy-v2-scenarios {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
    }

    .copy-v2-scenario {
      min-height: 150px;
      padding: 24px 20px;
      text-align: center;
    }

    .copy-v2-cta {
      min-height: 180px;
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr) auto;
      align-items: center;
      gap: 42px;
      margin-top: 14px;
      padding: 26px 42px;
      border-radius: 10px;
      color: #fff;
      background:
        radial-gradient(circle at 15% 44%, rgba(255, 90, 0, 0.38), transparent 20%),
        radial-gradient(circle at 84% 20%, rgba(255, 90, 0, 0.28), transparent 26%),
        linear-gradient(135deg, #06152d, #06254b 58%, #071f3f);
      box-shadow: 0 24px 50px rgba(16, 24, 40, 0.16);
      overflow: hidden;
    }

    .copy-v2-cube-scene {
      position: relative;
      min-height: 128px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .copy-v2-cube-scene::before {
      content: "";
      position: absolute;
      width: 250px;
      height: 86px;
      border: 1px solid rgba(255, 138, 61, 0.40);
      border-radius: 50%;
      transform: rotate(-16deg);
      box-shadow: 0 0 28px rgba(255, 90, 0, 0.22);
    }

    .copy-v2-cube {
      position: relative;
      width: 94px;
      height: 94px;
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(145deg, #ff9a4f, #ff5a00 68%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 28px 42px rgba(255, 90, 0, 0.40);
      animation: copyCubeFloat 4.8s ease-in-out infinite;
    }

    .copy-v2-cube::before,
    .copy-v2-cube::after {
      content: "";
      position: absolute;
      background: inherit;
      filter: brightness(0.82);
    }

    .copy-v2-cube::before {
      width: 48px;
      inset: 0 auto 0 100%;
      transform-origin: left center;
      transform: rotateY(90deg);
    }

    .copy-v2-cube::after {
      height: 48px;
      inset: 100% 0 auto 0;
      transform-origin: center top;
      transform: rotateX(-90deg);
    }

    .copy-v2-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(25px, 2.1vw, 36px);
      line-height: 1.22;
      font-weight: 950;
    }

    .copy-v2-cta p {
      max-width: 620px;
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 800;
    }

    .copy-v2-cta .btn:not(.primary) {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
    }

    @keyframes copyCubeFloat {
      0%, 100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #copyPage.copy-v2 {
        --copy-wide: min(1120px, calc(100vw - 36px));
      }

      .copy-v2-hero,
      .copy-v2-monitor,
      .copy-v2-compare,
      .copy-v2-cta {
        grid-template-columns: 1fr;
      }

      .copy-v2-modules {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .copy-v2-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      #copyPage.copy-v2 {
        --copy-wide: calc(100% - 28px);
        padding-top: 14px;
      }

      .copy-v2-hero,
      .copy-v2-section,
      .copy-v2-cta {
        padding: 22px 18px;
      }

      .copy-v2-title {
        font-size: 36px;
      }

      .copy-v2-hero-map,
      .copy-v2-stats,
      .copy-v2-modules,
      .copy-v2-scenarios,
      .copy-v2-dashboard-grid,
      .copy-v2-dashboard-metrics {
        grid-template-columns: 1fr;
      }

      .copy-v2-hero-map::before,
      .copy-v2-hero-map::after {
        display: none;
      }

      .copy-v2-engine-title {
        position: static;
        display: block;
        margin-bottom: 14px;
        text-align: center;
        transform: none;
      }

      .copy-v2-engine-title::after {
        display: none;
      }
    }

    #clientApiPage.api-v2 {
      --api-wide: min(1520px, calc(100vw - 56px));
      --api-orange: #ff5a00;
      --api-blue: #2b78e4;
      --api-green: #18a957;
      --api-ink: #0f172a;
      --api-muted: #667085;
      --api-line: #e8edf4;
      --api-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 36px;
      background:
        radial-gradient(circle at 7% 0%, rgba(255, 90, 0, 0.055), transparent 24%),
        radial-gradient(circle at 92% 5%, rgba(43, 120, 228, 0.045), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 48%, #fff 100%);
    }

    #clientApiPage.api-v2 > .container > :not(.api-v2-shell) {
      display: none !important;
    }

    body:has(#clientApiPage.api-v2:not(.hidden)) .footer {
      display: none;
    }

    .api-v2-shell {
      width: var(--api-wide);
      margin: 0 auto;
      color: var(--api-ink);
    }

    .api-v2-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 10%, rgba(255, 90, 0, 0.05), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
      box-shadow: var(--api-shadow);
    }

    .api-v2-hero {
      display: grid;
      grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.42fr);
      gap: 34px;
      align-items: center;
      min-height: 510px;
      padding: 42px 34px 26px;
    }

    .api-v2-title {
      max-width: 560px;
      margin: 0;
      color: var(--api-ink);
      font-size: clamp(38px, 3.5vw, 60px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 950;
    }

    .api-v2-title span {
      display: block;
    }

    .api-v2-lead {
      max-width: 570px;
      margin: 18px 0 0;
      color: #344054;
      font-size: 18px;
      line-height: 1.72;
      font-weight: 860;
    }

    .api-v2-desc {
      max-width: 590px;
      margin: 26px 0 0;
      color: var(--api-muted);
      font-size: 14px;
      line-height: 1.86;
      font-weight: 780;
    }

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

    .api-v2-actions .btn {
      min-width: 142px;
      justify-content: center;
      border-radius: 7px;
    }

    .api-v2-pills {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      max-width: 560px;
      margin-top: 28px;
    }

    .api-v2-pill {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--api-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .api-v2-pill::before {
      content: "";
      width: 13px;
      height: 13px;
      border: 2px solid #98a2b3;
      border-radius: 50%;
    }

    .api-v2-visual {
      display: grid;
      grid-template-columns: 190px minmax(260px, 1fr) 1fr;
      gap: 14px;
      min-height: 390px;
    }

    .api-v2-window {
      padding: 18px;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 16px 34px rgba(16, 24, 40, 0.05);
    }

    .api-v2-window h3 {
      margin: 0 0 16px;
      color: var(--api-ink);
      font-size: 13px;
      line-height: 1.35;
      font-weight: 950;
    }

    .api-v2-api-list {
      display: grid;
      gap: 10px;
    }

    .api-v2-api-item,
    .api-v2-form-row,
    .api-v2-system-node {
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border: 1px solid var(--api-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 12px;
      font-weight: 880;
    }

    .api-v2-icon {
      --icon-color: var(--api-orange);
      position: relative;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 26%, white);
      border-radius: 9px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 9%, white), #fff);
    }

    .api-v2-icon::before,
    .api-v2-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .api-v2-icon::before {
      width: 15px;
      height: 15px;
      border: 2px solid var(--icon-color);
      border-radius: 4px;
    }

    .api-v2-icon.user::before {
      width: 18px;
      height: 20px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 10px, transparent 11px);
    }

    .api-v2-icon.trade::before {
      width: 18px;
      height: 14px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 10px / 10px 2px no-repeat;
    }

    .api-v2-icon.position::before {
      width: 17px;
      height: 15px;
      border: 0;
      background:
        linear-gradient(35deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) 0 0 / 17px 15px,
        linear-gradient(145deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) 0 0 / 17px 15px;
      box-shadow: 0 7px 0 -2px var(--icon-color);
    }

    .api-v2-icon.chart::before {
      width: 18px;
      height: 17px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 15px 13px no-repeat;
    }

    .api-v2-icon.doc::before {
      width: 16px;
      height: 19px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 6px / 8px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 11px / 8px 2px no-repeat;
    }

    .api-v2-icon.server::before {
      width: 18px;
      height: 16px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 3px 5px / 12px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 3px 10px / 12px 2px no-repeat;
    }

    .api-v2-endpoint {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid #dbe7fa;
      border-radius: 7px;
      background: #f6f9ff;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .api-v2-endpoint b {
      min-width: 42px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 5px;
      color: #fff;
      background: var(--api-blue);
      font-size: 11px;
    }

    .api-v2-form {
      display: grid;
      gap: 9px;
      margin-top: 16px;
    }

    .api-v2-form label {
      color: var(--api-ink);
      font-size: 12px;
      font-weight: 930;
    }

    .api-v2-form-row {
      justify-content: space-between;
      color: #98a2b3;
      font-size: 11px;
    }

    .api-v2-code {
      margin: 16px 0 0;
      padding: 16px;
      min-height: 150px;
      border-radius: 8px;
      color: #b9fbc0;
      background: #071323;
      font: 700 12px/1.55 Consolas, Monaco, monospace;
      white-space: pre;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }

    .api-v2-system-map {
      position: relative;
      min-height: 310px;
      display: grid;
      grid-template-rows: auto auto auto;
      place-items: center;
      gap: 34px;
      padding-top: 8px;
    }

    .api-v2-system-row {
      display: flex;
      gap: 18px;
      justify-content: center;
      width: 100%;
    }

    .api-v2-system-node {
      min-width: 145px;
      justify-content: center;
      min-height: 54px;
      box-shadow: 0 12px 24px rgba(16, 24, 40, 0.045);
    }

    .api-v2-system-node.gateway {
      min-width: 185px;
      color: var(--api-ink);
      font-weight: 950;
    }

    .api-v2-system-map::before,
    .api-v2-system-map::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      height: 34px;
      background: var(--api-blue);
      transform: translateX(-50%);
    }

    .api-v2-system-map::before {
      top: 70px;
    }

    .api-v2-system-map::after {
      top: 170px;
    }

    .api-v2-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      margin-top: 14px;
      padding: 20px 0;
    }

    .api-v2-stat {
      min-height: 92px;
      display: grid;
      grid-template-columns: 50px 1fr;
      align-items: center;
      gap: 14px;
      padding: 0 28px;
      border-right: 1px solid var(--api-line);
    }

    .api-v2-stat:last-child {
      border-right: 0;
    }

    .api-v2-stat strong {
      display: block;
      color: var(--api-ink);
      font-size: 25px;
      line-height: 1.05;
      font-weight: 950;
    }

    .api-v2-stat span {
      display: block;
      margin-top: 5px;
      color: var(--api-muted);
      font-size: 12px;
      font-weight: 850;
    }

    .api-v2-section {
      margin-top: 14px;
      padding: 28px 28px 30px;
    }

    .api-v2-section-head {
      max-width: 720px;
      margin: 0 auto 26px;
      text-align: center;
    }

    .api-v2-section-head h2 {
      position: relative;
      margin: 0;
      color: var(--api-ink);
      font-size: clamp(26px, 2.25vw, 38px);
      line-height: 1.18;
      font-weight: 950;
    }

    .api-v2-section-head h2::after {
      content: "";
      display: block;
      width: 34px;
      height: 3px;
      margin: 12px auto 0;
      border-radius: 999px;
      background: var(--api-orange);
    }

    .api-v2-section-head p {
      margin: 10px 0 0;
      color: var(--api-muted);
      font-size: 14px;
      line-height: 1.7;
      font-weight: 820;
    }

    .api-v2-cards-8,
    .api-v2-business,
    .api-v2-support,
    .api-v2-advantages {
      display: grid;
      gap: 18px;
    }

    .api-v2-cards-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .api-v2-business {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .api-v2-support,
    .api-v2-advantages {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .api-v2-card,
    .api-v2-category,
    .api-v2-business-card,
    .api-v2-support-card,
    .api-v2-advantage {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--api-line);
      border-radius: 9px;
      background:
        radial-gradient(circle at 86% 12%, rgba(255, 90, 0, 0.05), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.94));
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .api-v2-card:hover,
    .api-v2-category:hover,
    .api-v2-business-card:hover,
    .api-v2-support-card:hover,
    .api-v2-advantage:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .api-v2-card {
      min-height: 136px;
      padding: 20px 14px;
      text-align: center;
    }

    .api-v2-card .api-v2-icon,
    .api-v2-business-card .api-v2-icon {
      margin: 0 auto 12px;
    }

    .api-v2-card b,
    .api-v2-business-card b,
    .api-v2-support-card b,
    .api-v2-advantage b {
      display: block;
      color: var(--api-ink);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 950;
    }

    .api-v2-card span,
    .api-v2-business-card span,
    .api-v2-support-card span,
    .api-v2-advantage span {
      display: block;
      margin-top: 8px;
      color: var(--api-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .api-v2-categories {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .api-v2-category {
      min-height: 126px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 16px;
      padding: 22px;
      align-items: start;
    }

    .api-v2-category h3 {
      margin: 0;
      color: var(--api-ink);
      font-size: 17px;
      font-weight: 950;
    }

    .api-v2-category p {
      margin: 7px 0 0;
      color: var(--api-muted);
      font-size: 13px;
      line-height: 1.62;
      font-weight: 800;
    }

    .api-v2-category a,
    .api-v2-support-card a {
      display: inline-flex;
      margin-top: 12px;
      color: var(--api-orange);
      font-size: 12px;
      font-weight: 950;
    }

    .api-v2-process {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .api-v2-step {
      position: relative;
      text-align: center;
    }

    .api-v2-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: calc(50% + 46px);
      top: 38px;
      width: calc(100% - 68px);
      border-top: 1px dashed #98a2b3;
    }

    .api-v2-step-no {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      margin: 0 auto 8px;
      border-radius: 50%;
      color: #fff;
      background: var(--api-orange);
      font-size: 12px;
      font-weight: 950;
    }

    .api-v2-step-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 24px rgba(16, 24, 40, 0.045);
    }

    .api-v2-step b {
      display: block;
      color: var(--api-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .api-v2-step span {
      display: block;
      margin-top: 8px;
      color: var(--api-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .api-v2-business-card {
      min-height: 92px;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: center;
      padding: 18px;
    }

    .api-v2-business-card .api-v2-icon {
      margin: 0;
    }

    .api-v2-support-card {
      min-height: 130px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      padding: 20px;
    }

    .api-v2-support-card .api-v2-icon {
      --icon-color: var(--api-blue);
    }

    .api-v2-advantage {
      min-height: 106px;
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 14px;
      align-items: center;
      padding: 18px;
      box-shadow: none;
    }

    .api-v2-advantage .api-v2-icon {
      --icon-color: var(--api-blue);
    }

    .api-v2-cta {
      min-height: 170px;
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr) auto;
      align-items: center;
      gap: 38px;
      margin-top: 14px;
      padding: 26px 42px;
      border-radius: 10px;
      color: #fff;
      background:
        radial-gradient(circle at 17% 44%, rgba(255, 90, 0, 0.38), transparent 22%),
        radial-gradient(circle at 84% 20%, rgba(255, 90, 0, 0.28), transparent 26%),
        linear-gradient(135deg, #06152d, #06254b 58%, #071f3f);
      box-shadow: 0 24px 50px rgba(16, 24, 40, 0.16);
      overflow: hidden;
    }

    .api-v2-cta-art {
      position: relative;
      min-height: 118px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .api-v2-cta-art::before {
      content: "";
      position: absolute;
      width: 245px;
      height: 86px;
      border: 1px solid rgba(255, 138, 61, 0.40);
      border-radius: 50%;
      transform: rotate(-16deg);
      box-shadow: 0 0 28px rgba(255, 90, 0, 0.22);
    }

    .api-v2-cta-cube {
      position: relative;
      width: 88px;
      height: 88px;
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(145deg, #ff9a4f, #ff5a00 68%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 28px 42px rgba(255, 90, 0, 0.40);
      animation: apiCubeFloat 4.8s ease-in-out infinite;
    }

    .api-v2-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(25px, 2.1vw, 36px);
      line-height: 1.22;
      font-weight: 950;
    }

    .api-v2-cta p {
      max-width: 680px;
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 800;
    }

    .api-v2-cta .btn:not(.primary) {
      color: #101828;
      background: #fff;
    }

    .api-v2-footer {
      margin-top: 28px;
      padding: 38px 8px 24px;
      border-top: 1px solid var(--api-line);
      color: var(--api-muted);
    }

    .api-v2-footer-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(120px, 0.7fr)) minmax(220px, 1fr);
      gap: 30px;
      align-items: start;
    }

    .api-v2-footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--api-ink);
      font-weight: 950;
    }

    .api-v2-footer-logo {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--api-orange);
      box-shadow: 0 10px 20px rgba(255, 90, 0, 0.20);
      font-size: 22px;
      line-height: 1;
      font-weight: 950;
    }

    .api-v2-footer-brand span:last-child span {
      display: block;
      margin-top: 2px;
      color: #6b7280;
      font-size: 11px;
      line-height: 1.1;
      font-weight: 850;
    }

    .api-v2-footer-intro {
      max-width: 320px;
      margin: 16px 0 0;
      color: #697586;
      font-size: 13px;
      line-height: 1.75;
      font-weight: 780;
    }

    .api-v2-footer h3 {
      margin: 0 0 12px;
      color: var(--api-ink);
      font-size: 13px;
      font-weight: 950;
    }

    .api-v2-footer a,
    .api-v2-footer-contact span {
      display: block;
      margin-top: 9px;
      color: #667085;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 820;
      text-decoration: none;
    }

    .api-v2-footer a:hover {
      color: var(--api-orange);
    }

    .api-v2-footer-contact {
      padding: 16px;
      border: 1px solid var(--api-line);
      border-radius: 12px;
      background: #f8fafc;
    }

    .api-v2-footer-social {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .api-v2-footer-social i {
      width: 20px;
      height: 20px;
      display: block;
      border: 1px solid #d8dee8;
      border-radius: 50%;
      background: #fff;
    }

    .api-v2-footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid var(--api-line);
      color: #7a8699;
      font-size: 12px;
      font-weight: 800;
    }

    @keyframes apiCubeFloat {
      0%, 100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #clientApiPage.api-v2 {
        --api-wide: min(1120px, calc(100vw - 36px));
      }

      .api-v2-hero,
      .api-v2-cta {
        grid-template-columns: 1fr;
      }

      .api-v2-cards-8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .api-v2-business,
      .api-v2-support,
      .api-v2-advantages,
      .api-v2-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .api-v2-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .api-v2-step::after {
        display: none;
      }
    }

    @media (max-width: 760px) {
      #clientApiPage.api-v2 {
        --api-wide: calc(100% - 28px);
        padding-top: 14px;
      }

      .api-v2-hero,
      .api-v2-section,
      .api-v2-cta {
        padding: 22px 18px;
      }

      .api-v2-title {
        font-size: 36px;
      }

      .api-v2-visual,
      .api-v2-pills,
      .api-v2-stats,
      .api-v2-cards-8,
      .api-v2-categories,
      .api-v2-business,
      .api-v2-support,
      .api-v2-advantages,
      .api-v2-process {
        grid-template-columns: 1fr;
      }

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

      .api-v2-footer-bottom {
        display: block;
      }

      .api-v2-footer-bottom span:last-child {
        display: block;
        margin-top: 8px;
      }

      .api-v2-stat {
        border-right: 0;
        border-bottom: 1px solid var(--api-line);
      }

      .api-v2-stat:last-child {
        border-bottom: 0;
      }
    }

    #copyCommunityPage.community-v2,
    #strategyCustomPage.strategy-v2 {
      --svc-wide: min(1520px, calc(100vw - 56px));
      --svc-orange: #ff5a00;
      --svc-blue: #2563eb;
      --svc-green: #16a34a;
      --svc-purple: #7c3aed;
      --svc-ink: #0f172a;
      --svc-muted: #667085;
      --svc-line: #e8edf4;
      --svc-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 0;
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 90, 0, 0.055), transparent 24%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 46%, #fff 100%);
    }

    #copyCommunityPage.community-v2 > .container > :not(.svc-v2-shell):not(.svc-footer),
    #strategyCustomPage.strategy-v2 > .container > :not(.svc-v2-shell):not(.svc-footer) {
      display: none !important;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .footer,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .footer {
      display: none;
    }

    .service-nav-only,
    .header-text-btn.service-register,
    .header-text-btn.service-demo {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .main-nav > a[data-route-link="signals"] {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .service-nav-only,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .service-nav-only {
      display: inline-flex;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-actions > button:nth-of-type(1),
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-actions > button:nth-of-type(1) {
      display: none;
    }

    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .search-field {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-text-btn.service-demo,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-text-btn.service-register {
      display: inline-flex;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-actions .header-text-btn[data-auth-open="login"],
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-actions .header-text-btn[data-auth-open="login"] {
      background: #fff;
      color: #0f172a;
      border-color: #d0d5dd;
    }

    .svc-v2-shell {
      width: var(--svc-wide);
      margin: 0 auto;
      color: var(--svc-ink);
    }

    .svc-panel,
    .svc-card,
    .svc-table-panel,
    .svc-screen-card,
    .svc-footer-contact {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 10%, rgba(255, 90, 0, 0.045), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.95));
      box-shadow: var(--svc-shadow);
    }

    .svc-hero {
      min-height: 510px;
      display: grid;
      grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.18fr);
      align-items: center;
      gap: 44px;
      padding: 44px 38px 28px;
      margin-bottom: 14px;
    }

    .svc-title {
      max-width: 680px;
      margin: 0;
      color: var(--svc-ink);
      font-size: clamp(40px, 3.9vw, 68px);
      line-height: 1.10;
      letter-spacing: 0;
      font-weight: 950;
    }

    .svc-title span {
      color: var(--svc-orange);
    }

    .strategy-v2 .svc-title span {
      color: var(--svc-ink);
    }

    .svc-subtitle {
      margin: 16px 0 0;
      color: var(--svc-orange);
      font-size: clamp(20px, 1.8vw, 30px);
      line-height: 1.35;
      font-weight: 950;
    }

    .strategy-v2 .svc-subtitle {
      max-width: 690px;
      color: var(--svc-ink);
      font-size: clamp(19px, 1.55vw, 25px);
    }

    .svc-lead {
      max-width: 690px;
      margin: 22px 0 0;
      color: #344054;
      font-size: 16px;
      line-height: 1.88;
      font-weight: 820;
    }

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

    .svc-actions .btn {
      min-width: 146px;
      justify-content: center;
      border-radius: 7px;
    }

    .svc-hero-tags {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
      padding-top: 8px;
    }

    .svc-hero-tag {
      min-height: 72px;
      display: grid;
      place-items: center;
      gap: 8px;
      color: #344054;
      text-align: center;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 850;
    }

    .svc-icon {
      --icon-color: var(--svc-orange);
      position: relative;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: inline-grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 28%, white);
      border-radius: 11px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 10%, white), #fff);
      box-shadow: 0 10px 20px rgba(16, 24, 40, 0.045);
    }

    .svc-icon::before,
    .svc-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .svc-icon::before {
      width: 17px;
      height: 17px;
      border: 2px solid var(--icon-color);
      border-radius: 5px;
    }

    .svc-icon.code::before {
      width: 20px;
      height: 16px;
      border: 0;
      background:
        linear-gradient(135deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) left center / 9px 16px no-repeat,
        linear-gradient(45deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) right center / 9px 16px no-repeat;
    }

    .svc-icon.flow::before {
      width: 20px;
      height: 16px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 11px / 10px 2px no-repeat;
    }

    .svc-icon.shield::before {
      width: 19px;
      height: 22px;
      border: 0;
      border-radius: 0;
      background: var(--icon-color);
      clip-path: polygon(50% 0, 88% 14%, 84% 66%, 50% 100%, 16% 66%, 12% 14%);
    }

    .svc-icon.db::before {
      width: 20px;
      height: 18px;
      border-radius: 50% / 32%;
      box-shadow: 0 6px 0 -2px var(--icon-color), 0 12px 0 -2px var(--icon-color);
    }

    .svc-icon.chart::before {
      width: 20px;
      height: 18px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 17px 14px no-repeat;
    }

    .svc-icon.user::before {
      width: 20px;
      height: 22px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 11px, transparent 12px);
    }

    .svc-icon.cloud::before {
      width: 24px;
      height: 16px;
      border: 0;
      border-radius: 12px;
      background:
        radial-gradient(circle at 35% 45%, var(--icon-color) 0 8px, transparent 9px),
        radial-gradient(circle at 60% 34%, var(--icon-color) 0 9px, transparent 10px),
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 8px / 18px 8px no-repeat;
    }

    .svc-icon.card::before {
      width: 21px;
      height: 16px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 0 5px / 100% 2px no-repeat;
    }

    .svc-icon.server::before {
      width: 21px;
      height: 17px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 5px / 13px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 10px / 13px 2px no-repeat;
    }

    .svc-icon.bell::before {
      width: 18px;
      height: 19px;
      border-radius: 10px 10px 7px 7px;
    }

    .svc-section {
      margin-top: 14px;
      padding: 30px 28px 32px;
    }

    .svc-section-head {
      max-width: 760px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .svc-section-head h2,
    .svc-split-text h2 {
      position: relative;
      margin: 0;
      color: var(--svc-ink);
      font-size: clamp(28px, 2.25vw, 40px);
      line-height: 1.18;
      font-weight: 950;
    }

    .svc-section-head h2::after {
      content: "";
      display: block;
      width: 36px;
      height: 3px;
      margin: 12px auto 0;
      border-radius: 999px;
      background: var(--svc-orange);
    }

    .svc-section-head p,
    .svc-split-text p {
      margin: 10px 0 0;
      color: var(--svc-muted);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 820;
    }

    .svc-grid-6,
    .svc-grid-7,
    .svc-grid-8,
    .svc-grid-5,
    .svc-grid-4 {
      display: grid;
      gap: 18px;
    }

    .svc-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .svc-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .svc-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svc-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .svc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .svc-card {
      min-height: 145px;
      padding: 24px 18px;
      text-align: center;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .svc-card:hover,
    .svc-screen-card:hover,
    .svc-table-panel:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .svc-card .svc-icon {
      margin: 0 auto 14px;
    }

    .svc-card b {
      display: block;
      color: var(--svc-ink);
      font-size: 16px;
      line-height: 1.35;
      font-weight: 950;
    }

    .svc-card span {
      display: block;
      margin-top: 9px;
      color: var(--svc-muted);
      font-size: 13px;
      line-height: 1.58;
      font-weight: 780;
    }

    .svc-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      margin-top: 14px;
    }

    .svc-stat {
      min-height: 118px;
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 16px;
      align-items: center;
      padding: 22px 26px;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
    }

    .svc-stat strong {
      display: block;
      color: var(--svc-ink);
      font-size: 30px;
      line-height: 1.05;
      font-weight: 950;
    }

    .svc-stat span {
      display: block;
      margin-top: 6px;
      color: var(--svc-muted);
      font-size: 13px;
      font-weight: 820;
    }

    .svc-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      overflow: hidden;
      border-radius: 10px;
    }

    .svc-table th,
    .svc-table td {
      padding: 15px 18px;
      border: 1px solid var(--svc-line);
      color: #475467;
      line-height: 1.55;
      text-align: center;
      font-weight: 820;
    }

    .svc-table th {
      color: var(--svc-ink);
      background: #f8fafc;
      font-weight: 950;
    }

    .svc-table td:first-child {
      color: var(--svc-ink);
      font-weight: 950;
    }

    .svc-table .highlight {
      color: var(--svc-orange);
      background: #fff7f1;
      font-weight: 950;
    }

    .svc-split {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
      gap: 24px;
      align-items: stretch;
    }

    .strategy-code-layout {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: stretch;
    }

    .strategy-tabs {
      display: grid;
      gap: 10px;
    }

    .strategy-tabs span {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border: 1px solid var(--svc-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
    }

    .strategy-tabs span.active {
      border-color: #ffd8bd;
      color: var(--svc-orange);
      background: #fff7f1;
    }

    .svc-code-window {
      overflow: hidden;
      border-radius: 10px;
      background: #071323;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
    }

    .svc-code-head {
      display: flex;
      gap: 7px;
      align-items: center;
      min-height: 42px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: #94a3b8;
      font-size: 12px;
      font-weight: 850;
    }

    .svc-code-head i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #ff5a5f;
    }

    .svc-code-head i:nth-child(2) { background: #ffbd2e; }
    .svc-code-head i:nth-child(3) { background: #28c840; margin-right: 14px; }

    .svc-code {
      min-height: 260px;
      padding: 18px;
      color: #b9fbc0;
      font: 700 13px/1.65 Consolas, Monaco, monospace;
      white-space: pre;
    }

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

    .strategy-side-row {
      min-height: 54px;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: center;
      padding: 10px 14px;
      border: 1px solid var(--svc-line);
      border-radius: 9px;
      background: #fff;
      color: #475467;
      font-size: 13px;
      font-weight: 820;
    }

    .strategy-side-row b {
      display: block;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-mini-chart {
      min-height: 240px;
      padding: 20px;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
    }

    .svc-chart-line {
      position: relative;
      height: 145px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background: linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 34px;
    }

    .svc-chart-line::before {
      content: "";
      position: absolute;
      inset: 18px 12px 22px;
      background: linear-gradient(140deg, transparent 0 8%, var(--svc-green) 9% 10%, transparent 11% 20%, var(--svc-green) 21% 22%, transparent 23% 38%, var(--svc-green) 39% 40%, transparent 41% 55%, var(--svc-green) 56% 57%, transparent 58% 70%, var(--svc-green) 71% 72%, transparent 73%);
      filter: drop-shadow(0 8px 10px rgba(16, 185, 129, .12));
    }

    .svc-chart-kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .svc-chart-kpis div {
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      color: var(--svc-muted);
      font-size: 12px;
      font-weight: 820;
    }

    .svc-chart-kpis strong {
      display: block;
      margin-top: 4px;
      color: var(--svc-green);
      font-size: 20px;
      font-weight: 950;
    }

    .svc-process {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 20px;
      align-items: start;
    }

    .svc-process-step {
      position: relative;
      text-align: center;
    }

    .svc-process-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: calc(50% + 42px);
      top: 28px;
      width: calc(100% - 54px);
      border-top: 1px dashed #98a2b3;
    }

    .svc-process-step .svc-icon {
      margin-bottom: 12px;
    }

    .svc-process-step b {
      display: block;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-process-step span {
      display: block;
      margin-top: 7px;
      color: var(--svc-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .strategy-hero-art {
      position: relative;
      min-height: 420px;
      display: grid;
      gap: 18px;
      align-content: center;
    }

    .strategy-hero-top {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, .78fr);
      gap: 18px;
      align-items: end;
    }

    .strategy-code-card {
      transform: translateY(-8px);
    }

    .strategy-code-card .svc-code {
      min-height: 190px;
      color: #d1e9ff;
      line-height: 1.55;
    }

    .strategy-chart-card {
      margin-left: -46px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      background: #071323;
      color: #fff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
      transform: translateY(48px);
    }

    .strategy-chart-card h3 {
      margin: 0 0 12px;
      font-size: 14px;
      color: #fff;
    }

    .strategy-chart-card .svc-chart-line {
      height: 150px;
      border-color: rgba(255,255,255,.10);
      background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 30px;
    }

    .strategy-chart-card .svc-chart-line::before {
      background:
        linear-gradient(145deg, transparent 0 7%, #3b82f6 8% 9%, transparent 10% 20%, #3b82f6 21% 22%, transparent 23% 36%, #3b82f6 37% 38%, transparent 39% 52%, #3b82f6 53% 54%, transparent 55% 68%, #3b82f6 69% 70%, transparent 71%),
        linear-gradient(150deg, transparent 0 10%, #ff8a3d 11% 12%, transparent 13% 30%, #ff8a3d 31% 32%, transparent 33% 46%, #ff8a3d 47% 48%, transparent 49% 64%, #ff8a3d 65% 66%, transparent 67%);
    }

    .strategy-hero-flow {
      display: grid;
      grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 116px;
      gap: 8px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--svc-line);
      border-radius: 12px;
      background: rgba(255,255,255,.80);
      box-shadow: 0 12px 30px rgba(16,24,40,.055);
    }

    .strategy-flow-node,
    .strategy-api-stack span {
      min-height: 72px;
      display: grid;
      place-items: center;
      gap: 4px;
      padding: 10px;
      text-align: center;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
      color: #475467;
      font-size: 12px;
      font-weight: 820;
    }

    .strategy-flow-node b,
    .strategy-api-stack b {
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .strategy-flow-arrow {
      color: var(--svc-orange);
      text-align: center;
      font-size: 22px;
      font-weight: 950;
    }

    .strategy-api-stack {
      display: grid;
      gap: 8px;
    }

    .community-hero-art {
      position: relative;
      min-height: 420px;
    }

    .community-rank,
    .community-profile,
    .community-feed,
    .community-phone {
      position: absolute;
      border: 1px solid var(--svc-line);
      border-radius: 12px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 22px 46px rgba(16,24,40,.09);
    }

    .community-rank {
      left: 0;
      top: 28px;
      width: 230px;
      padding: 16px;
    }

    .community-profile {
      left: 210px;
      top: 0;
      width: 450px;
      min-height: 250px;
      padding: 18px;
    }

    .community-feed {
      left: 350px;
      bottom: 10px;
      width: 330px;
      min-height: 142px;
      padding: 16px;
    }

    .community-phone {
      right: 0;
      top: 98px;
      width: 134px;
      height: 280px;
      border-radius: 24px;
      padding: 16px 10px;
    }

    .community-rank h3,
    .community-feed h3 {
      margin: 0 0 12px;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .community-rank-row {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 8px;
      align-items: center;
      min-height: 34px;
      color: #344054;
      font-size: 12px;
      font-weight: 850;
    }

    .community-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff9a4f, #ff5a00);
    }

    .community-profit {
      color: var(--svc-green);
      font-weight: 950;
    }

    .community-profile-head {
      display: grid;
      grid-template-columns: 52px 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .community-profile-name b {
      display: block;
      color: var(--svc-ink);
      font-size: 16px;
      font-weight: 950;
    }

    .community-profile-name span {
      color: var(--svc-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .community-profit-big {
      margin-top: 18px;
      color: var(--svc-green);
      font-size: 28px;
      font-weight: 950;
    }

    .community-curve {
      position: relative;
      height: 100px;
      margin-top: 14px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background: linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 25px;
    }

    .community-curve::before {
      content: "";
      position: absolute;
      inset: 18px 8px 18px;
      background: linear-gradient(140deg, transparent 0 8%, var(--svc-blue) 9% 10%, transparent 11% 18%, var(--svc-blue) 19% 20%, transparent 21% 32%, var(--svc-blue) 33% 34%, transparent 35% 48%, var(--svc-blue) 49% 50%, transparent 51% 66%, var(--svc-blue) 67% 68%, transparent 69%);
    }

    .community-feed-row {
      min-height: 42px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 10px;
      align-items: center;
      border-bottom: 1px solid #eef2f7;
      color: #475467;
      font-size: 12px;
      font-weight: 820;
    }

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

    .community-phone .community-avatar {
      margin: 0 auto 10px;
    }

    .community-phone-line {
      height: 8px;
      margin: 9px 12px;
      border-radius: 99px;
      background: #e8edf4;
    }

    .community-phone-chart {
      height: 74px;
      margin: 14px 6px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(255,255,255,.7));
    }

    .community-pages {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
    }

    .community-page-shot {
      min-height: 145px;
      border: 1px solid var(--svc-line);
      border-radius: 8px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(255,90,0,.16), rgba(37,99,235,.12)) border-box;
      box-shadow: 0 10px 24px rgba(16,24,40,.045);
      overflow: hidden;
    }

    .community-page-shot::before {
      content: "";
      display: block;
      height: 24px;
      border-bottom: 1px solid var(--svc-line);
      background: #f8fafc;
    }

    .community-page-shot::after {
      content: "";
      display: block;
      width: calc(100% - 28px);
      height: 88px;
      margin: 14px;
      border-radius: 8px;
      background:
        linear-gradient(90deg, #ff5a00 0 34%, transparent 35%) 0 0 / 100% 12px no-repeat,
        linear-gradient(#e7edf5, #e7edf5) 0 26px / 80% 8px no-repeat,
        linear-gradient(#e7edf5, #e7edf5) 0 44px / 58% 8px no-repeat,
        linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,90,0,.12));
    }

    .community-pages-caption {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
      margin-top: 10px;
      text-align: center;
      color: var(--svc-ink);
      font-size: 13px;
      font-weight: 950;
    }

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

    .svc-arch-node {
      position: relative;
      min-height: 132px;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 16px;
      text-align: center;
      border: 1px solid var(--svc-line);
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16,24,40,.045);
    }

    .svc-arch-node:not(:last-child)::after {
      content: ">";
      position: absolute;
      right: -14px;
      top: 50%;
      color: var(--svc-orange);
      font-weight: 950;
      transform: translateY(-50%);
    }

    .svc-arch-node b {
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-arch-node span {
      color: var(--svc-muted);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 780;
    }

    .svc-cta {
      min-height: 250px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 440px;
      align-items: center;
      gap: 32px;
      margin-top: 14px;
      padding: 42px 46px;
      color: #fff;
      border-radius: 0;
      background:
        radial-gradient(circle at 78% 50%, rgba(255,90,0,.34), transparent 30%),
        linear-gradient(135deg, #06152d, #08264b 56%, #06152d);
      box-shadow: 0 26px 58px rgba(16,24,40,.20);
    }

    .svc-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(30px, 2.6vw, 46px);
      line-height: 1.22;
      font-weight: 950;
    }

    .svc-cta p {
      max-width: 760px;
      margin: 14px 0 0;
      color: rgba(255,255,255,.78);
      font-size: 16px;
      line-height: 1.76;
      font-weight: 800;
    }

    .svc-cta-art {
      position: relative;
      height: 210px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .svc-cta-art::before {
      content: "";
      position: absolute;
      width: 340px;
      height: 120px;
      border: 1px solid rgba(255, 138, 61, .36);
      border-radius: 50%;
      transform: rotate(-16deg);
    }

    .svc-cta-cube {
      width: 110px;
      height: 110px;
      border-radius: 18px;
      background: linear-gradient(145deg, #ff9a4f, #ff5a00 70%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 32px 52px rgba(255,90,0,.40);
      animation: svcCubeFloat 4.8s ease-in-out infinite;
    }

    .svc-footer {
      padding: 38px 8px 24px;
      color: rgba(255,255,255,.72);
      background: #06152d;
    }

    .svc-footer-inner {
      width: var(--svc-wide);
      margin: 0 auto;
    }

    .svc-footer-grid {
      display: grid;
      grid-template-columns: minmax(250px, 1.5fr) repeat(4, minmax(120px, .72fr)) minmax(230px, 1fr);
      gap: 30px;
      align-items: start;
    }

    .svc-footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-weight: 950;
    }

    .svc-footer-logo {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--svc-orange);
      font-weight: 950;
    }

    .svc-footer p {
      max-width: 320px;
      margin: 16px 0 0;
      font-size: 13px;
      line-height: 1.75;
      font-weight: 780;
    }

    .svc-footer h3 {
      margin: 0 0 12px;
      color: #fff;
      font-size: 13px;
      font-weight: 950;
    }

    .svc-footer a,
    .svc-footer span {
      display: block;
      margin-top: 9px;
      color: rgba(255,255,255,.68);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 820;
      text-decoration: none;
    }

    .svc-footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: 12px;
      font-weight: 800;
    }

    /* 产品与服务页：统一卡片标题为“图标 + 标题”同排 */
    #copyPage.copy-v2 .copy-v2-module,
    #copyPage.copy-v2 .copy-v2-scenario,
    #clientApiPage.api-v2 .api-v2-card,
    #copyCommunityPage.community-v2 .svc-card,
    #strategyCustomPage.strategy-v2 .svc-card,
    #copyCommunityPage.community-v2 .svc-arch-node,
    #strategyCustomPage.strategy-v2 .svc-arch-node,
    #strategyCustomPage.strategy-v2 .svc-process-step {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-content: start;
      align-items: center;
      place-items: initial;
      column-gap: 12px;
      row-gap: 9px;
      text-align: left;
    }

    #copyPage.copy-v2 .copy-v2-module > .copy-v2-icon,
    #copyPage.copy-v2 .copy-v2-scenario > .copy-v2-icon,
    #clientApiPage.api-v2 .api-v2-card > .api-v2-icon,
    #copyCommunityPage.community-v2 .svc-card > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-card > .svc-icon,
    #copyCommunityPage.community-v2 .svc-arch-node > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-arch-node > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-process-step > .svc-icon {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      justify-self: start;
      display: inline-grid;
      margin: 0;
    }

    #copyPage.copy-v2 .copy-v2-module > b,
    #copyPage.copy-v2 .copy-v2-scenario > b,
    #clientApiPage.api-v2 .api-v2-card > b,
    #copyCommunityPage.community-v2 .svc-card > b,
    #strategyCustomPage.strategy-v2 .svc-card > b,
    #copyCommunityPage.community-v2 .svc-arch-node > b,
    #strategyCustomPage.strategy-v2 .svc-arch-node > b,
    #strategyCustomPage.strategy-v2 .svc-process-step > b {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      min-width: 0;
      margin: 0;
      text-align: left;
    }

    #copyPage.copy-v2 .copy-v2-module > span:not(.copy-v2-icon),
    #copyPage.copy-v2 .copy-v2-scenario > span:not(.copy-v2-icon),
    #clientApiPage.api-v2 .api-v2-card > span:not(.api-v2-icon),
    #copyCommunityPage.community-v2 .svc-card > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-card > span:not(.svc-icon),
    #copyCommunityPage.community-v2 .svc-arch-node > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-arch-node > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-process-step > span:not(.svc-icon) {
      grid-column: 1 / -1;
      grid-row: auto;
      margin-top: 0;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-content: start;
      align-items: center;
      column-gap: 12px;
      row-gap: 8px;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step-no {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: center;
    }

    #clientApiPage.api-v2 .api-v2-step-icon {
      grid-column: 1;
      grid-row: 2;
      margin: 0;
      justify-self: start;
    }

    #clientApiPage.api-v2 .api-v2-step > b {
      grid-column: 2;
      grid-row: 2;
      align-self: center;
      min-width: 0;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step > span:not(.api-v2-step-no) {
      grid-column: 1 / -1;
      grid-row: auto;
      text-align: left;
    }

    @keyframes svcCubeFloat {
      0%,100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #copyCommunityPage.community-v2,
      #strategyCustomPage.strategy-v2 {
        --svc-wide: min(1120px, calc(100vw - 36px));
      }

      .svc-hero,
      .svc-split,
      .strategy-code-layout,
      .strategy-hero-top,
      .strategy-hero-flow,
      .svc-cta {
        grid-template-columns: 1fr;
      }

      .strategy-chart-card {
        margin-left: 0;
        transform: none;
      }

      .svc-grid-8,
      .svc-grid-7,
      .svc-grid-6,
      .svc-grid-5,
      .svc-grid-4,
      .svc-process,
      .svc-arch,
      .community-pages,
      .community-pages-caption {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .svc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .svc-process-step::after,
      .svc-arch-node::after {
        display: none;
      }
    }

    @media (max-width: 760px) {
      #copyCommunityPage.community-v2,
      #strategyCustomPage.strategy-v2 {
        --svc-wide: calc(100% - 28px);
      }

      .svc-hero,
      .svc-section,
      .svc-cta {
        padding: 22px 18px;
      }

      .svc-title {
        font-size: 36px;
      }

      .svc-hero-tags,
      .svc-grid-8,
      .svc-grid-7,
      .svc-grid-6,
      .svc-grid-5,
      .svc-grid-4,
      .svc-stats,
      .svc-process,
      .svc-arch,
      .community-pages,
      .community-pages-caption,
      .svc-footer-grid {
        grid-template-columns: 1fr;
      }

      .community-hero-art {
        min-height: 760px;
      }

      .strategy-hero-art {
        min-height: auto;
      }

      .community-rank,
      .community-profile,
      .community-feed,
      .community-phone {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin-top: 14px;
      }

      .svc-footer-bottom {
        display: block;
      }
    }

#homePage.home-v4 {
      --home-card-accent: 255, 90, 0;
      --home-card-base: rgba(255, 255, 255, 0.70);
      --home-card-mid: rgba(247, 250, 253, 0.92);
      --home-card-end: rgba(239, 244, 250, 0.90);
    }

    #homePage .home-v4-map,
    #homePage .home-v4-rail,
    #homePage .home-v4-primary-service,
    #homePage .home-v4-service-card,
    #homePage .home-v4-wide-panel,
    #homePage .home-v4-table-panel,
    #homePage .home-v4-community-panel,
    #homePage .home-v4-arch,
    #homePage .home-v4-scenario,
    #homePage .home-v4-cta,
    #homePage .home-v4-map-card,
    #homePage .home-v4-map-center,
    #homePage .home-v4-copy-feature,
    #homePage .home-v4-community-box,
    #homePage .home-v4-flow-node,
    #homePage .home-v4-service-points div,
    #homePage .home-v4-tags span {
      background:
        radial-gradient(circle at 88% 10%, rgba(var(--home-card-accent), 0.105), transparent 32%),
        linear-gradient(138deg, var(--home-card-base) 0%, var(--home-card-mid) 48%, var(--home-card-end) 100%);
      background-size: 180% 180%;
      border-color: rgba(210, 221, 234, 0.88);
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    }

    #homePage .home-v4-primary-service,
    #homePage .home-v4-service-card,
    #homePage .home-v4-wide-panel,
    #homePage .home-v4-table-panel,
    #homePage .home-v4-community-panel,
    #homePage .home-v4-arch,
    #homePage .home-v4-scenario,
    #homePage .home-v4-cta,
    #homePage .home-v4-map-card,
    #homePage .home-v4-map-center,
    #homePage .home-v4-copy-feature,
    #homePage .home-v4-community-box,
    #homePage .home-v4-flow-node,
    #homePage .home-v4-service-points div,
    #homePage .home-v4-tags span,
    #homePage .home-v4-rail-item {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition:
        transform 0.26s ease,
        border-color 0.26s ease,
        box-shadow 0.26s ease,
        background-position 0.7s ease;
    }

    #homePage .home-v4-primary-service::before,
    #homePage .home-v4-service-card::before,
    #homePage .home-v4-wide-panel::before,
    #homePage .home-v4-table-panel::before,
    #homePage .home-v4-community-panel::before,
    #homePage .home-v4-arch::before,
    #homePage .home-v4-scenario::before,
    #homePage .home-v4-cta::before,
    #homePage .home-v4-map-card::before,
    #homePage .home-v4-map-center::before,
    #homePage .home-v4-copy-feature::before,
    #homePage .home-v4-community-box::before,
    #homePage .home-v4-flow-node::before,
    #homePage .home-v4-service-points div::before,
    #homePage .home-v4-tags span::before,
    #homePage .home-v4-rail-item::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.50) 42%, transparent 66%);
      opacity: 0;
      transform: translateX(-65%);
      transition: opacity 0.28s ease, transform 0.8s ease;
      pointer-events: none;
    }

    #homePage .home-v4-service-card:nth-child(1),
    #homePage .home-v4-copy-feature:nth-child(1),
    #homePage .home-v4-community-box:nth-child(1),
    #homePage .home-v4-flow-node:nth-child(1),
    #homePage .home-v4-scenario:nth-child(1),
    #homePage .home-v4-map-card:nth-child(1) {
      --home-card-accent: 255, 90, 0;
    }

    #homePage .home-v4-service-card:nth-child(2),
    #homePage .home-v4-copy-feature:nth-child(2),
    #homePage .home-v4-community-box:nth-child(2),
    #homePage .home-v4-flow-node:nth-child(2),
    #homePage .home-v4-scenario:nth-child(2),
    #homePage .home-v4-map-card:nth-child(2) {
      --home-card-accent: 23, 92, 211;
    }

    #homePage .home-v4-service-card:nth-child(3),
    #homePage .home-v4-copy-feature:nth-child(3),
    #homePage .home-v4-community-box:nth-child(3),
    #homePage .home-v4-flow-node:nth-child(3),
    #homePage .home-v4-scenario:nth-child(3),
    #homePage .home-v4-map-card:nth-child(3) {
      --home-card-accent: 7, 148, 85;
    }

    #homePage .home-v4-service-card:nth-child(4),
    #homePage .home-v4-community-box:nth-child(4),
    #homePage .home-v4-flow-node:nth-child(4),
    #homePage .home-v4-scenario:nth-child(4),
    #homePage .home-v4-map-card:nth-child(4) {
      --home-card-accent: 181, 71, 8;
    }

    #homePage .home-v4-community-box:nth-child(5),
    #homePage .home-v4-flow-node:nth-child(5),
    #homePage .home-v4-scenario:nth-child(5),
    #homePage .home-v4-map-card:nth-child(5) {
      --home-card-accent: 83, 67, 181;
    }

    #homePage .home-v4-community-box:nth-child(6),
    #homePage .home-v4-flow-node:nth-child(6) {
      --home-card-accent: 8, 127, 127;
    }

    #homePage .home-v4-rail-item:nth-child(1) { --home-card-accent: 255, 90, 0; }
    #homePage .home-v4-rail-item:nth-child(2) { --home-card-accent: 23, 92, 211; }
    #homePage .home-v4-rail-item:nth-child(3) { --home-card-accent: 7, 148, 85; }
    #homePage .home-v4-rail-item:nth-child(4) { --home-card-accent: 181, 71, 8; }
    #homePage .home-v4-rail-item:nth-child(5) { --home-card-accent: 83, 67, 181; }

    #homePage .home-v4-rail-item {
      background:
        radial-gradient(circle at 86% 12%, rgba(var(--home-card-accent), 0.095), transparent 34%),
        linear-gradient(138deg, rgba(255, 255, 255, 0.66), rgba(247, 250, 253, 0.94) 52%, rgba(240, 245, 251, 0.90));
    }

    #homePage .home-v4-map-card:hover,
    #homePage .home-v4-primary-service:hover,
    #homePage .home-v4-service-card:hover,
    #homePage .home-v4-wide-panel:hover,
    #homePage .home-v4-table-panel:hover,
    #homePage .home-v4-community-panel:hover,
    #homePage .home-v4-arch:hover,
    #homePage .home-v4-scenario:hover,
    #homePage .home-v4-cta:hover,
    #homePage .home-v4-copy-feature:hover,
    #homePage .home-v4-community-box:hover,
    #homePage .home-v4-flow-node:hover,
    #homePage .home-v4-service-points div:hover,
    #homePage .home-v4-tags span:hover,
    #homePage .home-v4-rail-item:hover {
      transform: translateY(-4px);
      background-position: 100% 0;
      border-color: rgba(var(--home-card-accent), 0.28);
      box-shadow:
        0 20px 46px rgba(16, 24, 40, 0.095),
        0 0 0 1px rgba(var(--home-card-accent), 0.12);
    }

    #homePage .home-v4-map-card:hover::before,
    #homePage .home-v4-primary-service:hover::before,
    #homePage .home-v4-service-card:hover::before,
    #homePage .home-v4-wide-panel:hover::before,
    #homePage .home-v4-table-panel:hover::before,
    #homePage .home-v4-community-panel:hover::before,
    #homePage .home-v4-arch:hover::before,
    #homePage .home-v4-scenario:hover::before,
    #homePage .home-v4-cta:hover::before,
    #homePage .home-v4-copy-feature:hover::before,
    #homePage .home-v4-community-box:hover::before,
    #homePage .home-v4-flow-node:hover::before,
    #homePage .home-v4-service-points div:hover::before,
    #homePage .home-v4-tags span:hover::before,
    #homePage .home-v4-rail-item:hover::before {
      opacity: 1;
      transform: translateX(65%);
    }

    #homePage .home-v4-map,
    #homePage .home-v4-rail,
    #homePage .home-v4-primary-service,
    #homePage .home-v4-service-card,
    #homePage .home-v4-wide-panel,
    #homePage .home-v4-table-panel,
    #homePage .home-v4-community-panel,
    #homePage .home-v4-arch,
    #homePage .home-v4-scenario,
    #homePage .home-v4-cta {
      animation: homeCardGradient 16s ease-in-out infinite alternate;
    }

    #homePage .home-v4-service-mark,
    #homePage .home-v4-map-card span {
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 245, 238, 0.88)),
        radial-gradient(circle at 80% 12%, rgba(255, 90, 0, 0.16), transparent 40%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    }

    #homePage .home-v4-map-card:hover span,
    #homePage .home-v4-primary-service:hover .home-v4-service-mark,
    #homePage .home-v4-service-card:hover .home-v4-service-mark {
      transform: translateY(-2px) scale(1.03);
      border-color: rgba(255, 90, 0, 0.34);
      box-shadow: 0 10px 20px rgba(255, 90, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    #homePage .home-v4-map-card > span,
    #homePage .home-v4-service-mark {
      display: none;
    }

    #homePage .home-v4-map-card strong,
    #homePage .home-v4-service-card h3,
    #homePage .home-v4-primary-service h3 {
      margin-top: 0;
    }

    #homePage .home-v4-api-table tr {
      transition: background 0.2s ease, transform 0.2s ease;
    }

    #homePage .home-v4-api-table tbody tr:hover {
      background: rgba(255, 90, 0, 0.045);
    }

    @keyframes homeCardGradient {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }

    @keyframes fxBrandSweep {
      0%, 34% { opacity: 0; transform: translateX(-82%); }
      48% { opacity: 0.75; }
      68%, 100% { opacity: 0; transform: translateX(82%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .home-v4-fx-brand::before {
        animation: none;
      }

      #homePage .home-v4-map,
      #homePage .home-v4-rail,
      #homePage .home-v4-primary-service,
      #homePage .home-v4-service-card,
      #homePage .home-v4-wide-panel,
      #homePage .home-v4-table-panel,
      #homePage .home-v4-community-panel,
      #homePage .home-v4-arch,
      #homePage .home-v4-scenario,
      #homePage .home-v4-cta {
        animation: none;
      }

      #homePage .home-v4-map-card,
      #homePage .home-v4-primary-service,
      #homePage .home-v4-service-card,
      #homePage .home-v4-wide-panel,
      #homePage .home-v4-table-panel,
      #homePage .home-v4-community-panel,
      #homePage .home-v4-arch,
      #homePage .home-v4-scenario,
      #homePage .home-v4-cta,
      #homePage .home-v4-copy-feature,
      #homePage .home-v4-community-box,
      #homePage .home-v4-flow-node,
      #homePage .home-v4-service-points div,
      #homePage .home-v4-tags span,
      #homePage .home-v4-rail-item {
        transition: none;
      }
    }

    .home-page {
      padding-top: 0;
      background: #f6f8fb;
    }

    #homePage > .container {
      width: 100%;
      max-width: none;
    }

    .hero {
      position: relative;
      width: 100%;
      min-height: 520px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 58px 0 0;
      background:
        radial-gradient(circle at 50% 96%, rgba(255, 90, 0, 0.11), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fff 64%, rgba(238, 243, 248, 0.74) 100%);
      border-bottom: 1px solid #edf1f6;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 230px;
      background: linear-gradient(180deg, rgba(255,255,255,0), #f6f8fb);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
      margin: 0 auto;
    }

    .eyebrow {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border: 1px solid #ffd8bd;
      border-radius: 999px;
      background: #fff7f1;
      color: var(--brand);
      font-size: 12px;
      font-weight: 950;
      margin: 0 auto;
    }

    .hero h1 {
      margin: 20px auto 16px;
      max-width: 760px;
      font-size: clamp(42px, 4vw, 58px);
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: 0;
    }

    .hero h1 span { color: var(--brand); }
    .hero p {
      margin: 0 auto;
      max-width: 720px;
      color: #475467;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.8;
    }

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

    .hero-network {
      position: relative;
      height: 170px;
      margin: 24px auto 0;
      max-width: 980px;
      overflow: hidden;
    }

    .hero-network::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -92px;
      width: min(980px, 100%);
      height: 260px;
      transform: translateX(-50%);
      border-radius: 50% 50% 0 0;
      background:
        radial-gradient(circle at 50% 52%, rgba(255, 90, 0, 0.22), transparent 7%),
        radial-gradient(circle at 22% 72%, rgba(23, 92, 211, 0.16), transparent 7%),
        radial-gradient(circle at 78% 66%, rgba(7, 148, 85, 0.16), transparent 8%),
        linear-gradient(135deg, transparent 49.4%, rgba(148, 163, 184, 0.28) 49.6%, rgba(148, 163, 184, 0.28) 50.2%, transparent 50.4%),
        linear-gradient(45deg, transparent 49.4%, rgba(148, 163, 184, 0.2) 49.6%, rgba(148, 163, 184, 0.2) 50.2%, transparent 50.4%);
      background-size: 100% 100%, 100% 100%, 100% 100%, 155px 155px, 180px 180px;
      opacity: 0.95;
    }

    .network-node {
      position: absolute;
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 6px solid #edf2f7;
      border-radius: 50%;
      background: #fff;
      color: #182235;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
      font-size: 12px;
      font-weight: 950;
    }

    .network-node.primary {
      width: 72px;
      height: 72px;
      border-color: #fff3ea;
      background: var(--brand);
      color: #fff;
      font-size: 22px;
      left: calc(50% - 36px);
      bottom: 10px;
      z-index: 3;
    }

    .network-node:nth-child(2) { left: 15%; bottom: 30px; }
    .network-node:nth-child(3) { left: 26%; bottom: 78px; }
    .network-node:nth-child(4) { left: 39%; bottom: 42px; }
    .network-node:nth-child(5) { right: 39%; bottom: 78px; }
    .network-node:nth-child(6) { right: 26%; bottom: 42px; }
    .network-node:nth-child(7) { right: 15%; bottom: 78px; }
    .network-node:nth-child(8) { left: 7%; bottom: 78px; }

    .home-stat-band {
      position: relative;
      z-index: 2;
      width: min(1280px, calc(100% - (var(--page-gutter) * 2)));
      margin: -16px auto 20px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
    }

    .home-stat-band .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .home-stat-band .stat-card {
      min-height: 94px;
      padding: 16px;
      border-radius: 10px;
      box-shadow: none;
    }

    .home-page .section {
      width: min(1360px, calc(100% - (var(--page-gutter) * 2)));
      margin-left: auto;
      margin-right: auto;
    }

    .home-story-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .story-panel {
      min-height: 430px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .story-panel h2 {
      margin: 8px 0 10px;
      font-size: clamp(28px, 2.35vw, 34px);
      line-height: 1.14;
    }

    .story-panel p {
      margin: 0 0 18px;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.75;
    }

    .story-list {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }

    .story-list div {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 13px;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      background: #f8fafc;
    }

    .story-list i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #fff3ea;
      color: var(--brand);
      font-style: normal;
      font-weight: 950;
    }

    .story-list strong { display: block; font-size: 15px; }
    .story-list span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 750; }

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

    .leader-card {
      min-height: 250px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    }

    .leader-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .leader-id {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .leader-id strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .leader-id span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 780;
    }

    .leader-return {
      margin-top: 14px;
      font-size: 32px;
      line-height: 1;
      color: var(--green);
      font-weight: 950;
    }

    .leader-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 14px;
    }

    .leader-metrics div {
      min-height: 58px;
      padding: 8px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #edf2f7;
    }

    .leader-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; }
    .leader-metrics strong { display: block; margin-top: 5px; font-size: 14px; }

    .home-capability-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .home-capability {
      min-height: 180px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    }

    .home-capability i {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #fff3ea;
      color: var(--brand);
      font-style: normal;
      font-weight: 950;
      margin-bottom: 14px;
    }

    .home-capability strong { display: block; font-size: 17px; }
    .home-capability p { margin: 8px 0 0; color: var(--muted); font-weight: 720; line-height: 1.7; }

    .home-risk-note {
      margin-top: 18px;
      padding: 18px 20px;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      background: #fff7ed;
      color: #7c2d12;
      font-weight: 760;
      line-height: 1.7;
    }

    .panel,
    .stat-card,
    .flow-card,
    .price-card,
    .feature-card,
    .metric-card,
    .chart-card,
    .signal-side-card,
    .service-strip {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
    }

    .ranking-card {
      padding: 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .ranking-head,
    .panel-title,
    .section-head,
    .detail-head,
    .chart-title {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .ranking-head strong { font-size: 15px; }
    .ranking-head a { color: var(--brand); font-size: 12px; font-weight: 900; }
    .ranking-list { display: grid; gap: 8px; margin-top: 10px; }
    .ranking-row {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 8px;
      border-radius: 8px;
      background: #fbfcff;
      border: 1px solid #edf2f7;
    }
    .ranking-row em {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: #fff0e7;
      color: var(--brand);
      font-style: normal;
      font-size: 12px;
      font-weight: 950;
    }
    .ranking-row strong { display: block; font-size: 13px; }
    .ranking-row span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
    .ranking-row b { color: var(--green); font-size: 12px; }

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

    .stat-card { padding: 18px; min-height: 112px; }
    .stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; }
    .stat-card strong { display: block; margin-top: 10px; font-size: 28px; line-height: 1.05; }
    .stat-card small { display: block; margin-top: 9px; color: var(--green); font-weight: 850; }

    .home-analytics {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 14px;
      margin-top: 14px;
    }

    .chart-card { padding: 16px; overflow: hidden; }
    .chart-title h3 { margin: 0; font-size: 16px; }
    .chart-title span { color: var(--muted); font-size: 12px; font-weight: 800; }
    .equity-svg { width: 100%; height: 230px; display: block; margin-top: 14px; }
    .echart-panel { width: 100%; min-height: 210px; }
    .mini-echart { width: 100%; height: 238px; min-height: 210px; }
    .chart-card .echart-panel { height: 230px; }
    .sparkline { width: 156px; height: 48px; display: block; overflow: visible; }
    .sparkline-area { filter: drop-shadow(0 6px 9px rgba(0, 166, 118, 0.12)); }
    .signal-sparkline-cell {
      width: 156px;
      min-height: 50px;
      display: grid;
      align-items: end;
    }
    .signal-growth-cell {
      min-width: 170px;
    }
    .signal-growth-cell strong {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      font-weight: 950;
    }

    .advantage-list { display: grid; gap: 14px; }
    .advantage-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .advantage-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 950;
    }
    .advantage-item strong { display: block; font-size: 13px; }
    .advantage-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }

    .section { padding: 24px 0; }
    .section-head { margin-bottom: 16px; }
    .kicker { color: var(--brand); font-size: 12px; font-weight: 950; text-transform: uppercase; }
    h2, .content-hero h1, .detail-head h1 {
      margin: 5px 0 0;
      color: var(--ink);
      font-size: clamp(24px, 2vw, 30px);
      line-height: 1.2;
      font-weight: 950;
    }
    .section-head p,
    .content-hero p,
    .detail-head p {
      margin: 7px 0 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.7;
    }

    .flow-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .flow-card { padding: 14px; min-height: 120px; position: relative; }
    .flow-card em {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #f2f4f7;
      color: var(--ink);
      font-style: normal;
      font-weight: 950;
      margin-bottom: 10px;
    }
    .flow-card strong { display: block; font-size: 14px; }
    .flow-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.55; }

    .service-strip {
      margin-top: 22px;
      padding: 18px 22px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 20px;
    }
    .service-item {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
    .service-item i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid var(--line);
      color: var(--blue);
      font-style: normal;
      font-weight: 950;
    }
    .service-item strong { display: block; font-size: 15px; }
    .service-item span { display: block; color: var(--muted); font-size: 12px; font-weight: 750; }

    .content-hero {
      padding: 18px 20px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }

    .signals-page {
      background:
        linear-gradient(180deg, #f7f9fc 0%, #fff 160px, #f6f8fb 520px);
    }

    #signalsPage > .container {
      width: calc(100% - (var(--page-gutter) * 2));
      max-width: none;
    }

    .signal-market-shell {
      display: grid;
      gap: 16px;
    }

    .signal-market-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: start;
      min-height: calc(100vh - 126px);
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .signal-left-nav {
      min-height: calc(100vh - 126px);
      padding: 10px 14px 16px;
      border-right: 1px solid var(--line);
      background: #fbfcfe;
    }

    .signal-left-menu {
      display: grid;
      gap: 4px;
    }

    .signal-left-menu a,
    .signal-left-menu button {
      min-height: 32px;
      width: 100%;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #344054;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      text-align: left;
      font-weight: 820;
    }

    .signal-left-menu a.active,
    .signal-left-menu a:hover,
    .signal-left-menu button:hover {
      color: var(--brand);
      background: #fff7f1;
    }

    .signal-left-menu i {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      color: var(--green);
      font-style: normal;
      font-size: 13px;
      font-weight: 950;
    }

    .signal-left-promo {
      margin-top: 20px;
      padding: 16px;
      border: 1px solid #c7f0d7;
      border-radius: 10px;
      background: linear-gradient(180deg, #f3fff7, #fff);
      text-align: center;
    }

    .signal-left-promo .robot {
      width: 86px;
      height: 54px;
      margin: 0 auto 12px;
      border-radius: 18px 18px 12px 12px;
      background:
        radial-gradient(circle at 31% 48%, #fff 0 5px, transparent 6px),
        radial-gradient(circle at 69% 48%, #fff 0 5px, transparent 6px),
        linear-gradient(180deg, #a7d1ff, #72adf7);
      box-shadow: inset 0 -8px 0 rgba(23, 92, 211, 0.1);
    }

    .signal-left-promo strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
    }

    .signal-left-promo p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.55;
    }

    .signal-main-panel {
      min-width: 0;
      padding: 18px;
      background: #fff;
    }

    .signal-market-hero {
      padding: 0 0 12px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      box-shadow: none;
    }

    .signal-market-hero h1 {
      margin: 6px 0 8px;
      font-size: 30px;
      line-height: 1.12;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .signal-market-hero p {
      margin: 0;
      max-width: 760px;
      color: var(--muted);
      font-weight: 760;
      overflow-wrap: anywhere;
    }

    .signal-market-search {
      margin-top: 0;
      display: grid;
      grid-template-columns: minmax(180px, 0.6fr) minmax(180px, 0.75fr) minmax(320px, 1.6fr) auto;
      gap: 10px;
      align-items: end;
    }

    .signal-filter-panel,
    .signal-results-panel,
    .signal-copy-card,
    .signal-detail-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    }

    .signal-filter-panel {
      padding: 15px;
      position: sticky;
      top: 80px;
    }

    .filter-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .filter-title strong { font-size: 16px; }
    .filter-title a { color: var(--brand); font-size: 12px; font-weight: 900; }
    .filter-stack { display: grid; gap: 12px; }

    .range-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .signal-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .signal-tag-cloud span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid var(--line);
      color: #475467;
      font-size: 12px;
      font-weight: 850;
    }

    .signal-tag-cloud span[data-sort-value] { cursor: pointer; }
    .signal-tag-cloud span.active {
      border-color: #ffd8bd;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-results-head {
      min-height: 58px;
      padding: 14px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .signal-results-head strong { font-size: 16px; }
    .signal-results-head span { color: var(--muted); font-size: 12px; font-weight: 850; }

    .sort-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .sort-pills button {
      min-height: 31px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: #475467;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .sort-pills button.active,
    .sort-pills button:hover {
      border-color: #ffd8bd;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-table-shell {
      border: 1px solid var(--line);
      background: #fff;
      overflow: hidden;
    }

    .signal-table-shell .table-wrap {
      max-width: 100%;
    }

    .signal-pagination {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .signal-pagination.hidden { display: none; }

    .signal-pagination button,
    .signal-pagination select {
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: #344054;
      font: inherit;
      font-weight: 850;
    }

    .signal-pagination button {
      min-width: 32px;
      padding: 0 10px;
      cursor: pointer;
    }

    .signal-pagination select {
      padding: 0 28px 0 10px;
    }

    .signal-pagination button:hover:not(:disabled),
    .signal-pagination button.active {
      border-color: #ffb27a;
      background: #fff7f1;
      color: var(--brand);
    }

    .signal-pagination button:disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }

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

    .signal-card-section {
      display: grid;
      gap: 12px;
    }

    .signal-section-head {
      min-height: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .signal-section-head strong {
      color: #2454a6;
      font-size: 16px;
    }

    .signal-section-head a {
      color: #2454a6;
      font-size: 12px;
      font-weight: 850;
    }

    .signal-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
      gap: 12px;
    }

    .market-signal-card {
      min-height: 236px;
      display: grid;
      grid-template-rows: auto auto minmax(78px, 1fr) auto auto;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 0;
      background: #fff;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .market-signal-card:hover {
      border-color: #b9d8ff;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
      transform: translateY(-1px);
    }

    .market-card-author {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    .market-card-author .avatar {
      width: 42px;
      height: 42px;
      border-radius: 2px;
    }

    .market-card-author strong {
      display: block;
      overflow: hidden;
      color: #475467;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    .market-card-author span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .market-card-title {
      min-height: 36px;
      color: #2454a6;
      font-size: 16px;
      line-height: 1.18;
      font-weight: 950;
    }

    .market-card-growth {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .market-card-growth strong {
      color: #30a83a;
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
    }

    .market-card-growth small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      text-align: right;
      font-weight: 760;
    }

    .market-signal-card .sparkline {
      width: 100%;
      height: 68px;
      align-self: end;
    }

    .signal-bars {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
    }

    .signal-bars span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .signal-bars i {
      width: 34px;
      height: 10px;
      display: inline-block;
      background:
        linear-gradient(90deg, #36b24a 0 20%, transparent 20% 25%, #36b24a 25% 45%, transparent 45% 50%, #36b24a 50% 70%, transparent 70% 75%, #36b24a 75% 100%);
    }

    .signal-bars .algo i {
      background:
        linear-gradient(90deg, #377dff 0 20%, transparent 20% 25%, #377dff 25% 45%, transparent 45% 50%, #377dff 50% 70%, transparent 70% 75%, #d0d5dd 75% 100%);
    }

    .market-card-copy {
      margin: 0 -14px -14px;
      min-height: 38px;
      display: grid;
      place-items: center;
      border-top: 1px solid var(--line);
      color: #2454a6;
      font-size: 12px;
      font-weight: 860;
    }

    .mql-table {
      min-width: 1660px;
      font-size: 13px;
    }

    .mql-table th,
    .mql-table td {
      padding: 12px 13px;
    }

    .mql-table th {
      background: #fbfcfe;
      color: #596579;
      border-bottom: 1px solid var(--line);
    }

    .mql-table tbody tr {
      transition: background 0.14s ease;
      cursor: pointer;
    }

    .mql-table tbody tr:hover,
    .mql-table tbody tr.selected {
      background: #fff8f2;
    }

    .compact-signal-table td {
      min-height: 72px;
      height: 72px;
    }

    .compact-signal-table .sparkline {
      display: block;
      width: 156px;
      height: 48px;
      margin-bottom: 2px;
    }

    .mql-rank {
      color: #98a2b3;
      font-size: 15px;
      font-weight: 950;
      text-align: center;
    }

    .mql-signal-name {
      min-width: 250px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .mql-signal-name strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .mql-signal-name span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }

    .mql-price {
      color: #344054;
      font-weight: 900;
    }

    .mql-price small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .mql-copy {
      min-width: 64px;
      min-height: 30px;
      border: 0;
      border-radius: 7px;
      background: var(--brand);
      color: #fff;
      font-weight: 950;
      box-shadow: 0 10px 18px rgba(255, 90, 0, 0.2);
    }

    .mql-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
    }

    .mql-mobile-stat {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .mql-mobile-stat div {
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .mql-mobile-stat span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .mql-mobile-stat strong {
      display: block;
      margin-top: 4px;
      font-size: 14px;
    }

    .signal-preview-panel {
      margin-top: 14px;
    }

    .signal-preview-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr) minmax(280px, 0.72fr);
      gap: 14px;
    }

    .signal-detail-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 292px;
      gap: 10px;
      align-items: start;
      margin-bottom: 8px;
    }

    .signal-detail-summary {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .signal-detail-summary h1 {
      margin: 5px 0 3px;
      font-size: 23px;
      line-height: 1.16;
    }

    .signal-detail-summary p {
      margin: 0;
      color: var(--muted);
      font-weight: 780;
    }

    .signal-detail-breadcrumb {
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .signal-path-trail {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 9px;
      border: 1px solid #e6edf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #f8fbff, #fff);
      color: #667085;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.25;
    }

    .signal-path-trail span {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .signal-path-trail i {
      color: #c3ccd9;
      font-style: normal;
    }

    .signal-path-trail .current {
      padding: 3px 7px;
      border: 1px solid #fed7aa;
      border-radius: 999px;
      background: #fff7ed;
      color: #c2410c;
    }

    .detail-kpi-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .detail-kpi-row div {
      min-height: 54px;
      padding: 8px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fafc;
    }

    .detail-kpi-row span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .detail-kpi-row strong {
      display: block;
      margin-top: 5px;
      font-size: 18px;
      line-height: 1.08;
    }

    .signal-copy-card {
      padding: 12px;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .copy-card-head,
    .copy-card-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
    }

    .copy-card-head {
      grid-template-columns: auto 1fr;
    }

    .signal-copy-card .btn {
      min-height: 32px;
      padding: 0 10px;
    }

    .signal-copy-card .risk-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 10px;
    }

    .copy-price {
      font-size: 23px;
      line-height: 1;
      font-weight: 950;
      text-align: right;
    }

    .copy-price small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .signal-warning {
      padding: 7px 9px;
      border: 1px solid #fedf89;
      border-radius: 8px;
      background: #fffaeb;
      color: #93370d;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
    }

    .signal-account-layout {
      display: grid;
      grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .signal-account-side {
      min-width: 0;
      display: grid;
      gap: 10px;
      position: sticky;
      top: 80px;
    }

    .signal-account-main {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .signal-profile-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      margin: 8px 0;
    }

    .signal-profile-head .avatar {
      width: 42px;
      height: 42px;
    }

    .signal-profile-head h1 {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 20px;
      line-height: 1.15;
    }

    .signal-profile-title {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .signal-profile-title h1 {
      min-width: 0;
      flex: 1;
    }

    .current-signal-badge {
      flex: 0 0 auto;
      padding: 4px 7px;
      border: 1px solid #bbf7d0;
      border-radius: 999px;
      background: linear-gradient(180deg, #f0fdf4, #dcfce7);
      color: #047857;
      font-size: 11px;
      font-style: normal;
      font-weight: 950;
      line-height: 1;
    }

    .signal-profile-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .signal-account-main .signal-detail-summary {
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    }

    .signal-primary-chart {
      min-width: 0;
      overflow: hidden;
    }

    .signal-primary-chart .equity-svg {
      aspect-ratio: auto;
      width: 100%;
      max-width: 100%;
      height: clamp(320px, 28vw, 430px);
      min-height: 320px;
      margin-top: 2px;
    }

    .account-profit-module {
      min-width: 0;
      overflow: hidden;
      padding: clamp(18px, 1.45vw, 28px);
      border: 1px solid #dfe8f3;
      border-radius: 14px;
      background:
        radial-gradient(circle at 13% 8%, rgba(16, 185, 129, 0.085), transparent 25%),
        linear-gradient(180deg, #fff 0%, #fbfdff 100%);
      box-shadow: 0 20px 48px rgba(15, 23, 42, 0.075);
    }

    .account-profit-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }

    .account-profit-title {
      min-width: 0;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
    }

    .account-profit-icon,
    .account-kpi-icon,
    .account-status-icon {
      display: grid;
      place-items: center;
      border-radius: 999px;
      font-weight: 950;
    }

    .account-profit-icon {
      width: 58px;
      height: 58px;
      background: linear-gradient(145deg, #ecfdf3, #d1fadf);
      color: #079455;
      box-shadow: inset 0 0 0 1px rgba(18, 183, 106, 0.08);
      font-size: 25px;
    }

    .account-profit-title h3 {
      margin: 0;
      color: #101828;
      font-size: clamp(25px, 2.1vw, 34px);
      line-height: 1.1;
      letter-spacing: 0;
    }

    .account-profit-title p {
      margin: 6px 0 0;
      color: #667085;
      font-size: 14px;
      font-weight: 820;
    }

    .account-periods {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .account-periods button {
      min-width: 54px;
      height: 40px;
      padding: 0 14px;
      border: 1px solid #d9e3ef;
      border-radius: 9px;
      background: linear-gradient(180deg, #fff, #f8fafc);
      color: #475467;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
      cursor: pointer;
    }

    .account-periods button.active {
      border-color: #12b76a;
      background: linear-gradient(180deg, #f0fdf4, #ecfdf3);
      color: #079455;
      box-shadow: 0 10px 20px rgba(18, 183, 106, 0.12);
    }

    .account-periods button.calendar {
      min-width: 46px;
      padding: 0 12px;
      color: #667085;
    }

    .account-periods button:disabled {
      cursor: not-allowed;
      opacity: 0.58;
      background: #f8fafc;
    }

    .account-date-popover {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 20;
      width: min(320px, calc(100vw - 32px));
      padding: 14px;
      border: 1px solid #d9e3ef;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    }

    .account-date-popover[hidden] {
      display: none;
    }

    .account-date-popover label {
      display: grid;
      gap: 6px;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .account-date-popover input {
      height: 38px;
      min-width: 0;
      border: 1px solid #d9e3ef;
      border-radius: 8px;
      padding: 0 10px;
      color: #101828;
      font-weight: 850;
    }

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

    .account-date-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }

    .account-date-actions button {
      min-width: 64px;
      height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }

    .account-date-error {
      min-height: 18px;
      margin-top: 8px;
      color: #d92d20;
      font-size: 12px;
      font-weight: 850;
    }

    .account-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
      gap: 12px;
      margin-top: clamp(16px, 1.3vw, 22px);
    }

    .account-kpi-card {
      min-width: 0;
      min-height: 104px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 15px 16px;
      border: 1px solid #e4ebf4;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 11px 25px rgba(15, 23, 42, 0.045);
    }

    .account-kpi-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(145deg, #ecfdf3, #dff8ea);
      color: #079455;
      font-size: 21px;
    }

    .account-kpi-card.negative .account-kpi-icon {
      background: linear-gradient(145deg, #fff1f2, #fee4e2);
      color: #d92d20;
    }

    .account-kpi-card.neutral .account-kpi-icon {
      background: linear-gradient(145deg, #f2f4f7, #e8eef6);
      color: #344054;
    }

    .account-kpi-text {
      min-width: 0;
    }

    .account-kpi-text span {
      display: block;
      color: #667085;
      font-size: 13px;
      font-weight: 900;
    }

    .account-kpi-text strong {
      display: block;
      margin-top: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #101828;
      font-size: clamp(20px, 1.45vw, 28px);
      line-height: 1.05;
    }

    .account-kpi-text small {
      display: block;
      margin-top: 5px;
      color: #98a2b3;
      font-size: 11px;
      font-weight: 850;
    }

    .account-kpi-card.positive .account-kpi-text strong,
    .account-status-value.positive {
      color: #079455;
    }

    .account-kpi-card.negative .account-kpi-text strong,
    .account-status-value.negative {
      color: #d92d20;
    }

    .account-snapshot-bars {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }

    .snapshot-bar-row {
      min-width: 0;
      display: grid;
      grid-template-columns: 62px 96px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .snapshot-bar-row span {
      color: #667085;
      text-align: right;
    }

    .snapshot-bar-row strong {
      color: var(--ink);
      font-size: 12px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .snapshot-bar-track {
      height: 24px;
      min-width: 0;
      overflow: hidden;
      border-radius: 3px;
      background: #f2f7fb;
      box-shadow: inset 0 0 0 1px #e4edf5;
    }

    .snapshot-bar-fill {
      display: block;
      height: 100%;
      width: var(--bar-width, 0%);
      min-width: 2px;
      background: linear-gradient(90deg, #7bd6ee, #1aa7cf);
    }

    .snapshot-bar-fill.negative {
      background: linear-gradient(90deg, #fecdd3, #fb7185);
    }

    .snapshot-bar-fill.neutral {
      background: linear-gradient(90deg, #dbeafe, #93c5fd);
    }

    .snapshot-bar-fill.empty {
      min-width: 0;
    }

    .account-main-chart {
      min-width: 0;
      margin-top: 14px;
      padding: clamp(12px, 1vw, 18px);
      border: 1px solid #e4ebf4;
      border-radius: 13px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .account-main-chart .equity-svg {
      aspect-ratio: auto;
      width: 100%;
      height: clamp(300px, 22vw, 420px);
      min-height: 300px;
      margin-top: 0;
    }

    .account-profit-bottom {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
      gap: 14px;
      margin-top: 14px;
    }

    .account-drawdown-panel,
    .account-status-panel {
      min-width: 0;
      padding: 14px;
      border: 1px solid #e4ebf4;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.86);
    }

    .account-drawdown-panel .drawdown-bars .echart-panel {
      height: clamp(166px, 10vw, 212px);
      min-height: 166px;
    }

    .account-status-panel {
      display: grid;
      align-content: start;
      gap: 12px;
    }

    .account-status-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .account-status-head h3 {
      margin: 0;
      font-size: 16px;
    }

    .account-status-icon {
      width: 32px;
      height: 32px;
      background: #ecfdf3;
      color: #079455;
      border: 1px solid #d1fadf;
    }

    .account-status-list {
      display: grid;
      gap: 10px;
    }

    .account-status-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px dashed #d9e3ef;
    }

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

    .account-status-row .account-status-icon {
      width: 30px;
      height: 30px;
      font-size: 13px;
      background: #f2f4f7;
      color: #475467;
      border-color: #e4ebf4;
    }

    .account-status-label {
      color: #667085;
      font-weight: 850;
    }

    .account-status-value {
      color: #101828;
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .advanced-chart-svg,
    .mini-analytics-svg {
      width: 100%;
      display: block;
    }

    .quant-metric-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .quant-metric {
      min-height: 94px;
      padding: 11px;
      border: 1px solid #e6edf5;
      border-radius: 9px;
      background: linear-gradient(180deg, #fff, #f9fbfd);
    }

    .quant-metric span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .quant-metric strong {
      display: block;
      margin-top: 8px;
      font-size: 20px;
      line-height: 1;
    }

    .quant-metric small {
      display: block;
      margin-top: 7px;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }

    .quant-meter {
      height: 5px;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #edf2f7;
    }

    .quant-meter i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #12b76a, #37d67a);
    }

    .quant-metric.negative .quant-meter i {
      background: linear-gradient(90deg, #ff7a7a, #ef4444);
    }

    .chart-note-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }

    .chart-note-row b {
      color: var(--ink);
    }

    .monthly-heatmap {
      display: grid;
      grid-template-columns: 42px repeat(12, minmax(0, 1fr)) 58px;
      gap: 5px;
      align-items: stretch;
      margin-top: 10px;
    }

    .monthly-heatmap .heat-label,
    .monthly-heatmap .heat-total {
      min-height: 28px;
      display: grid;
      align-items: center;
      color: #667085;
      font-size: 11px;
      font-weight: 900;
    }

    .monthly-heatmap .heat-total {
      justify-items: end;
    }

    .monthly-heatmap .heat-cell {
      min-height: 28px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      color: #344054;
      font-size: 10px;
      font-weight: 900;
      background: #edf2f7;
    }

    .monthly-heatmap .up1 { background: #d8f3df; color: #067647; }
    .monthly-heatmap .up2 { background: #89d9a5; color: #035c37; }
    .monthly-heatmap .up3 { background: #3fbd79; color: #fff; }
    .monthly-heatmap .down1 { background: #ffe1e8; color: #b42318; }
    .monthly-heatmap .down2 { background: #f36b8f; color: #fff; }

    .allocation-analytics {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .allocation-table {
      display: grid;
      gap: 0;
    }

    .allocation-table div {
      min-height: 28px;
      display: grid;
      grid-template-columns: 1fr 54px 54px 58px;
      gap: 8px;
      align-items: center;
      border-bottom: 1px dashed var(--line);
      color: #475467;
      font-size: 11px;
      font-weight: 850;
    }

    .allocation-table strong {
      color: var(--ink);
      text-align: right;
      font-size: 12px;
    }

    .allocation-symbol {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .allocation-symbol i {
      width: 8px;
      height: 8px;
      display: inline-block;
      border-radius: 2px;
    }

    .drawdown-chart {
      min-height: 190px;
    }

    .analytics-pair-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 10px;
    }

    .signal-detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.58fr) minmax(300px, 0.42fr);
      gap: 12px;
      align-items: start;
    }

    .signal-detail-main,
    .signal-detail-side {
      display: grid;
      gap: 10px;
    }

    .signal-detail-card {
      padding: 12px;
    }

    .signal-detail-card .chart-title {
      margin-bottom: 9px;
    }

    .signal-chart-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .signal-chart-tabs span {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      background: #f8fafc;
      color: #475467;
      font-size: 12px;
      font-weight: 900;
    }

    .signal-chart-tabs span.active {
      background: #fff7f1;
      color: var(--brand);
    }

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

    .mql-stat-grid .info-row {
      min-height: 32px;
    }

    .risk-split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .signal-detail-card .equity-svg {
      min-height: 240px;
    }

    .signal-copy-card .risk-list div {
      min-height: 24px;
    }

    .signal-detail-card .risk-list div {
      min-height: 28px;
    }

    .signal-copy-card .risk-list span,
    .signal-copy-card .risk-list strong {
      font-size: 11px;
    }

    .filters {
      display: grid;
      grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(130px, 0.8fr)) auto;
      gap: 10px;
      margin-bottom: 14px;
    }
    .field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 900; min-width: 0; }
    .field input,
    .field select {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 0 11px;
      outline: 0;
    }

    .signals-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 14px;
      align-items: start;
    }
    .panel { overflow: hidden; }
    .panel-title {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: #fff;
      align-items: center;
    }
    .panel-title strong { font-size: 16px; }
    .panel-title span { color: var(--muted); font-size: 12px; font-weight: 850; }
    .table-wrap { overflow-x: auto; }
    .mobile-signal-list { display: none; }
    .data-table {
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
      background: #fff;
    }
    .data-table th,
    .data-table td {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
      vertical-align: middle;
    }
    .data-table th {
      color: #667085;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 950;
    }
    .data-table tbody tr:hover { background: #fff8f2; }
    .data-table tbody tr.selected { background: #fff3ea; }
    .rank { color: #667085; font-weight: 950; }
    .signal-cell { min-width: 230px; display: flex; align-items: center; gap: 10px; }
    .avatar {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #101828;
      color: #fff;
      font-size: 13px;
      font-weight: 950;
      flex: 0 0 auto;
    }
    .signal-cell strong { display: block; }
    .signal-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 760; }
    .badge {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      border-radius: 999px;
      padding: 0 9px;
      font-size: 12px;
      font-weight: 950;
    }
    .badge.green { color: var(--green); background: var(--green-soft); }
    .badge.red { color: var(--red); background: var(--red-soft); }
    .badge.blue { color: var(--blue); background: var(--blue-soft); }
    .badge.orange { color: var(--yellow); background: var(--yellow-soft); }
    .badge.gray { color: #475467; background: #f2f4f7; }

    .signal-side-card { padding: 16px; }
    .signal-side-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .signal-side-head h3 { margin: 0; font-size: 17px; }
    .signal-side-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
    .featured-return { color: var(--green); font-size: 32px; line-height: 1; font-weight: 950; }
    .featured-return span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .mini-list { display: grid; gap: 9px; margin: 14px 0; }
    .mini-list div,
    .risk-list div,
    .info-row {
      min-height: 34px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .mini-list span,
    .risk-list span,
    .info-row span { color: var(--muted); font-size: 12px; font-weight: 850; }
    .mini-list strong,
    .risk-list strong,
    .info-row strong { color: var(--ink); font-size: 13px; }

    .preview-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px 330px;
      gap: 14px;
    }
    .heatmap {
      margin-top: 8px;
    }

    .detail-head {
      padding: 18px 20px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      margin-bottom: 14px;
      align-items: center;
    }
    .detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .detail-actions .tiny-link { color: #475467; font-size: 12px; font-weight: 850; }
    .tabs-line {
      display: flex;
      gap: 14px;
      border-bottom: 1px solid var(--line);
      margin: 0 0 10px;
      padding: 0 4px;
    }
    .tabs-line button {
      min-height: 34px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: #475467;
      font-weight: 900;
    }
    .tabs-line button.active { color: var(--brand); border-bottom-color: var(--brand); }
    .signal-detail-tabs { margin-bottom: 0; }
    .signal-tab-panels { margin-top: 4px; }
    .signal-tab-panel:not(.active) { display: none; }
    .signal-tab-panel {
      min-height: 220px;
      display: grid;
      gap: 14px;
    }
    .signal-description-body {
      min-height: 180px;
      color: #344054;
      font-size: 14px;
      font-weight: 760;
      line-height: 1.85;
      white-space: pre-wrap;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }
    .metric-card { padding: 15px; min-height: 82px; }
    .metric-card span { color: var(--muted); font-size: 12px; font-weight: 900; }
    .metric-card strong { display: block; margin-top: 8px; font-size: 22px; line-height: 1.05; }
    .metric-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }

    .detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
      gap: 14px;
      align-items: start;
    }
    .detail-left { display: grid; gap: 14px; }
    .detail-side { display: grid; gap: 14px; }
    .subgrid-2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; }
    .subgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .drawdown-bars { margin-top: 8px; }
    .drawdown-bars .echart-panel { height: 232px; min-height: 212px; }
    .heatmap .echart-panel { height: 96px; min-height: 96px; }
    .analytics-pair-grid .echart-panel { height: 252px; min-height: 230px; }
    .risk-radar .echart-panel { height: 252px; min-height: 240px; }
    .allocation-echart { width: 118px; height: 150px; min-height: 140px; }
    .drawdown-summary,
    .analytics-insight-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 6px;
    }
    .mql-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 36px;
    }
    .mql-stat-list {
      display: grid;
      gap: 0;
    }
    .mql-stat-row {
      min-height: 30px;
      display: grid;
      grid-template-columns: minmax(130px, 0.92fr) minmax(120px, 1.08fr);
      align-items: center;
      gap: 14px;
      border-bottom: 1px dashed #e4ebf4;
    }
    .mql-stat-row span {
      color: #52637a;
      font-size: 12px;
      font-weight: 850;
    }
    .mql-stat-row strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 920;
      text-align: right;
      white-space: nowrap;
    }
    .mql-stat-row strong.positive { color: var(--green); }
    .mql-stat-row strong.negative { color: var(--red); }
    .mql-stat-row strong.muted { color: var(--muted); }
    .mql-allocation {
      display: grid;
      gap: 24px;
    }
    .mql-allocation-section {
      display: grid;
      grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
      gap: 28px;
      align-items: start;
    }
    .mql-chart-title {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      margin-bottom: 6px;
      color: #52637a;
      font-size: 12px;
      font-weight: 920;
    }
    .mql-horizontal-chart,
    .mql-split-chart {
      display: grid;
      gap: 7px;
    }
    .mql-horizontal-row {
      min-height: 26px;
      display: grid;
      grid-template-columns: 120px 72px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }
    .mql-horizontal-row span,
    .mql-split-row span {
      color: #344054;
      font-size: 12px;
      font-weight: 820;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mql-horizontal-row strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      text-align: right;
      white-space: nowrap;
    }
    .mql-horizontal-row.positive strong { color: var(--green); }
    .mql-horizontal-row.negative strong { color: var(--red); }
    .mql-value-track {
      height: 22px;
      border-left: 1px solid #cfd9e6;
      background: linear-gradient(90deg, rgba(226,232,240,.34), rgba(255,255,255,0));
      position: relative;
      overflow: hidden;
    }
    .mql-value-track i {
      display: block;
      height: 18px;
      margin-top: 2px;
      width: var(--bar-width);
      background: rgba(37, 99, 235, .12);
      border: 1px solid rgba(37, 99, 235, .55);
      box-sizing: border-box;
    }
    .mql-horizontal-row.positive .mql-value-track i {
      background: rgba(34, 197, 94, .12);
      border-color: rgba(22, 163, 74, .55);
    }
    .mql-horizontal-row.negative .mql-value-track i {
      background: rgba(255, 237, 213, .8);
      border-color: rgba(255, 77, 45, .72);
    }
    .mql-split-head,
    .mql-split-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;
      align-items: center;
    }
    .mql-split-head {
      min-height: 22px;
      color: #52637a;
      font-size: 12px;
      font-weight: 920;
    }
    .mql-split-head b:first-of-type { text-align: right; padding-right: 8px; color: #344054; }
    .mql-split-head b:last-child { text-align: left; padding-left: 8px; color: #344054; }
    .mql-split-track {
      height: 22px;
      position: relative;
      background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(203,213,225,.52) 59px 60px);
    }
    .mql-split-track.sell {
      border-right: 1px solid #cfd9e6;
    }
    .mql-split-track.buy {
      border-left: 1px solid #cfd9e6;
    }
    .mql-split-track i {
      position: absolute;
      top: 2px;
      height: 18px;
      width: var(--bar-width);
      box-sizing: border-box;
    }
    .mql-split-track.sell i {
      right: 0;
      background: rgba(255, 237, 213, .86);
      border: 1px solid rgba(255, 77, 45, .72);
    }
    .mql-split-track.buy i {
      left: 0;
      background: rgba(220, 252, 231, .78);
      border: 1px solid rgba(22, 163, 74, .55);
    }
    .mql-allocation-empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 850;
      background: #f8fafc;
      border: 1px dashed #d8e2ee;
      border-radius: 8px;
    }
    .mql-risk-panel {
      display: grid;
      gap: 14px;
    }
    .mql-risk-chart-card {
      padding: 12px 12px 8px;
      border: 1px solid #dde7f2;
      border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }
    .mql-risk-chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 4px;
    }
    .mql-risk-legend {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #52637a;
      font-size: 12px;
      font-weight: 880;
      flex-wrap: wrap;
    }
    .mql-risk-legend b {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink);
      font-weight: 920;
    }
    .mql-risk-legend i {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      display: inline-block;
      background: #1d9bf0;
      box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
    }
    .mql-risk-legend i.load {
      background: #64748b;
      box-shadow: 0 0 0 3px rgba(100, 116, 139, .12);
    }
    .mql-risk-toggle {
      display: inline-flex;
      border: 1px solid #d8e2ee;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
      flex: 0 0 auto;
    }
    .mql-risk-toggle span {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      color: #475467;
      font-size: 12px;
      font-weight: 920;
      border-left: 1px solid #d8e2ee;
    }
    .mql-risk-toggle span:first-child {
      border-left: 0;
      background: #eef6ff;
      color: #1467b3;
    }
    .mql-risk-chart {
      border-radius: 8px;
      overflow: hidden;
    }
    .mql-risk-chart svg,
    .mql-risk-histogram svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .mql-risk-range-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .mql-risk-range {
      display: grid;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff, #f9fbfd);
    }
    .mql-risk-range-labels {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #52637a;
      font-size: 12px;
      font-weight: 880;
    }
    .mql-risk-range-labels b {
      color: var(--green);
      font-weight: 920;
    }
    .mql-risk-range-labels b.negative { color: var(--red); }
    .mql-risk-range-track {
      height: 8px;
      display: grid;
      grid-template-columns: var(--green-width) var(--red-width);
      gap: 2px;
      border: 0;
      overflow: visible;
      background: #eef3f8;
      border-radius: 999px;
    }
    .mql-risk-range-track i:first-child {
      background: linear-gradient(90deg, #b7f2d1, #12b76a);
      border-radius: 999px;
    }
    .mql-risk-range-track i:last-child {
      background: linear-gradient(90deg, #ffb3b8, #ef4444);
      border-radius: 999px;
    }
    .mql-risk-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .mql-risk-metric strong {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
      line-height: 1.1;
    }
    .mql-risk-metric strong.positive { color: var(--green); }
    .mql-risk-metric strong.negative { color: var(--red); }
    .mql-risk-metric {
      padding: 11px 12px;
      border: 1px solid #e3ebf5;
      border-radius: 8px;
      background: #fff;
    }
    .mql-risk-metric span {
      display: block;
      margin-top: 4px;
      color: #667085;
      font-size: 11px;
      font-weight: 850;
    }
    .mql-risk-note {
      color: #667085;
      font-size: 11px;
      font-weight: 780;
    }

    .drawdown-chip,
    .analytics-chip {
      padding: 8px 9px;
      border: 1px solid #e6edf5;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff, #f8fafc);
      min-width: 0;
    }

    .drawdown-chip span,
    .analytics-chip span {
      display: block;
      color: #667085;
      font-size: 10px;
      font-weight: 900;
    }

    .drawdown-chip strong,
    .analytics-chip strong {
      display: block;
      margin-top: 2px;
      color: #101828;
      font-size: 13px;
      font-weight: 950;
      white-space: nowrap;
    }
    .donut-layout { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: center; margin-top: 8px; }
    .donut {
      width: 98px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: conic-gradient(#2563eb 0 34%, #ffbe55 34% 58%, #19b78a 58% 75%, #6b7cff 75% 88%, #d0d5dd 88% 100%);
      position: relative;
    }
    .donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: #fff; }
    .legend { display: grid; gap: 6px; }
    .legend span { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .legend i { width: 9px; height: 9px; display: inline-block; border-radius: 2px; margin-right: 6px; }
    .risk-radar {
      min-height: 252px;
      display: grid;
      place-items: center;
      margin-top: 4px;
    }
    .risk-radar svg { width: min(100%, 188px); height: auto; }
    .risk-bars { display: grid; gap: 8px; margin-top: 8px; }
    .risk-bars label { display: grid; grid-template-columns: 82px 1fr 38px; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 850; }
    .risk-bars span { height: 7px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
    .risk-bars span i { display: block; height: 100%; background: var(--green); border-radius: inherit; }

    .pricing-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .price-card { padding: 18px; position: relative; min-height: 330px; }
    .price-card.featured { border-color: #ffbd8f; box-shadow: var(--shadow); }
    .price-card h3 { margin: 0; font-size: 20px; }
    .price-card p { color: var(--muted); font-size: 12px; font-weight: 760; }
    .price { margin: 14px 0; font-size: 30px; font-weight: 950; }
    .price small { color: var(--muted); font-size: 13px; font-weight: 850; }
    .check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
    .check-list li { color: #344054; font-size: 13px; font-weight: 800; }
    .check-list li::before { content: "✓"; color: var(--green); margin-right: 8px; font-weight: 950; }

    .data-service-grid {
      display: grid;
      grid-template-columns: 1fr 0.9fr 0.9fr;
      gap: 14px;
      margin-top: 14px;
    }
    .account-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .account-summary div { padding: 12px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
    .account-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; }
    .account-summary strong { display: block; margin-top: 6px; font-size: 17px; }

    .faq-grid { display: grid; grid-template-columns: 1fr 0.62fr; gap: 14px; margin-top: 14px; }
    .faq-list { display: grid; gap: 0; }
    .faq-list div { min-height: 44px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); color: #344054; font-weight: 850; }
    .risk-note { background: #fff7f1; border-color: #ffd8bd; }

    .product-page {
      --product-wide: min(1520px, calc(100vw - 56px));
      --product-accent-rgb: 255, 90, 0;
      padding-top: 22px;
      background:
        radial-gradient(circle at 86% 0%, rgba(255, 90, 0, 0.055), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #f6f8fb 48%, #eef3f8 100%);
    }

    .product-page > .container {
      width: 100%;
      max-width: none;
    }

    .product-hero {
      position: relative;
      width: var(--product-wide);
      min-height: auto;
      display: block;
      margin: 0 auto 30px;
      padding: 28px 30px;
      text-align: left;
      overflow: hidden;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.08), transparent 28%),
        linear-gradient(138deg, rgba(255, 255, 255, 0.76), rgba(247, 250, 253, 0.98) 54%, rgba(240, 245, 251, 0.94));
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    }

    .product-hero::before {
      display: none;
    }

    .product-eyebrow,
    .product-kicker {
      min-height: 30px;
      width: fit-content;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid #ffd8bd;
      border-radius: 999px;
      color: var(--brand);
      background: rgba(255, 247, 241, 0.88);
      font-size: 12px;
      font-weight: 950;
    }

    .product-hero .product-eyebrow {
      margin: 0 0 14px;
    }

    .product-title {
      max-width: 980px;
      margin: 0;
      color: var(--ink);
      font-size: clamp(32px, 2.7vw, 48px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 950;
    }

    .product-title span {
      color: var(--brand);
    }

    .product-lead {
      max-width: 980px;
      margin: 16px 0 0;
      color: #344054;
      font-size: 15px;
      line-height: 1.78;
      font-weight: 820;
    }

    .product-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 22px;
    }

    .product-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 860;
    }

    .product-breadcrumb a {
      color: #344054;
      font-weight: 900;
    }

    .product-breadcrumb span:last-child {
      color: var(--brand);
    }

    .product-subnav {
      width: var(--product-wide);
      display: flex;
      gap: 8px;
      align-items: center;
      margin: -14px auto 24px;
      padding: 8px;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 12px 26px rgba(16, 24, 40, 0.05);
      overflow-x: auto;
    }

    .product-subnav::-webkit-scrollbar {
      display: none;
    }

    .product-subnav a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .product-subnav a.active,
    .product-subnav a:hover {
      border-color: #ffd8bd;
      background: #fff5ef;
      color: var(--brand);
    }

    .product-layout {
      width: var(--product-wide);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 22px;
      align-items: start;
      margin: 0 auto 36px;
    }

    .product-main {
      min-width: 0;
    }

    .product-main .product-section {
      width: 100%;
      margin: 0 0 28px;
    }

    .product-layout .product-split {
      grid-template-columns: 1fr;
    }

    .product-main .product-section h2,
    .product-main .product-panel h2 {
      font-size: clamp(24px, 2vw, 34px);
    }

    .product-side {
      position: sticky;
      top: 86px;
      display: grid;
      gap: 14px;
    }

    .product-side-card {
      position: relative;
      overflow: hidden;
      padding: 20px;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 90% 8%, rgba(var(--product-accent-rgb), 0.10), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.92));
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    }

    .product-side-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.28;
      font-weight: 950;
    }

    .product-side-card p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.68;
      font-weight: 780;
    }

    .product-side-list {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-side-list li {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr);
      gap: 9px;
      color: #344054;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 850;
    }

    .product-side-list li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 999px;
      background: var(--brand);
    }

    .product-side-card .product-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .product-side-card .btn {
      width: 100%;
    }

    .product-mini-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    .product-mini-stats div {
      padding: 11px;
      border: 1px solid rgba(207, 217, 230, 0.82);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.64);
    }

    .product-mini-stats span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .product-mini-stats strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .product-feature-groups {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .product-feature-group {
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.66);
    }

    .product-feature-group b {
      display: block;
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .product-feature-group span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.58;
      font-weight: 780;
    }

    .product-scenario-list {
      display: grid;
      gap: 0;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.68);
    }

    .product-scenario-list li {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 18px;
      padding: 15px 16px;
      border-bottom: 1px solid #e9eff6;
      color: #344054;
      font-size: 13px;
      line-height: 1.58;
      font-weight: 820;
    }

    .product-scenario-list li:last-child {
      border-bottom: 0;
    }

    .product-scenario-list b {
      color: var(--ink);
      font-weight: 950;
    }

    .product-hero-panel,
    .product-card,
    .product-panel,
    .product-price-card,
    .product-faq-item,
    .product-service-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(207, 217, 230, 0.92);
      border-radius: 14px;
      background:
        radial-gradient(circle at 86% 12%, rgba(var(--product-accent-rgb), 0.08), transparent 34%),
        linear-gradient(138deg, rgba(255, 255, 255, 0.70), rgba(247, 250, 253, 0.95) 52%, rgba(240, 245, 251, 0.90));
      background-size: 180% 180%;
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
      transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background-position 0.7s ease;
    }

    .product-hero-panel::before,
    .product-card::before,
    .product-panel::before,
    .product-price-card::before,
    .product-faq-item::before,
    .product-service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.46) 42%, transparent 66%);
      opacity: 0;
      transform: translateX(-65%);
      transition: opacity 0.28s ease, transform 0.8s ease;
      pointer-events: none;
    }

    .product-hero-panel:hover,
    .product-card:hover,
    .product-panel:hover,
    .product-price-card:hover,
    .product-faq-item:hover,
    .product-service-card:hover {
      transform: translateY(-4px);
      background-position: 100% 0;
      border-color: rgba(var(--product-accent-rgb), 0.28);
      box-shadow: 0 20px 46px rgba(16, 24, 40, 0.095), 0 0 0 1px rgba(var(--product-accent-rgb), 0.12);
    }

    .product-hero-panel:hover::before,
    .product-card:hover::before,
    .product-panel:hover::before,
    .product-price-card:hover::before,
    .product-faq-item:hover::before,
    .product-service-card:hover::before {
      opacity: 1;
      transform: translateX(65%);
    }

    .product-hero-panel {
      width: min(1450px, 100%);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 24px 0 0;
      padding: 14px;
      text-align: left;
    }

    .product-hero-panel::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px dashed #d7e1ec;
      border-radius: 14px;
      pointer-events: none;
    }

    .product-hero-item {
      position: relative;
      z-index: 1;
      min-height: 112px;
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.62);
    }

    .product-hero-item strong,
    .product-card strong,
    .product-service-card strong,
    .product-faq-item strong {
      display: block;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.22;
      font-weight: 950;
    }

    .product-hero-item span,
    .product-card span,
    .product-service-card span,
    .product-faq-item span {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.64;
      font-weight: 780;
    }

    .product-section {
      width: var(--product-wide);
      margin: 0 auto 36px;
    }

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

    .product-section h2,
    .product-panel h2 {
      max-width: 1030px;
      margin: 12px 0 0;
      color: var(--ink);
      font-size: clamp(30px, 2.35vw, 42px);
      line-height: 1.16;
      letter-spacing: 0;
      font-weight: 950;
    }

    .product-section-head p,
    .product-panel p,
    .product-price-card p,
    .product-service-card p {
      max-width: 940px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.76;
      font-weight: 780;
    }

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

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

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

    .product-card {
      min-height: 178px;
      padding: 22px;
    }

    .product-card:nth-child(2),
    .product-service-card:nth-child(2) { --product-accent-rgb: 23, 92, 211; }
    .product-card:nth-child(3),
    .product-service-card:nth-child(3) { --product-accent-rgb: 7, 148, 85; }
    .product-card:nth-child(4) { --product-accent-rgb: 181, 71, 8; }
    .product-card:nth-child(5) { --product-accent-rgb: 83, 67, 181; }
    .product-card:nth-child(6) { --product-accent-rgb: 8, 127, 127; }
    .product-card:nth-child(7) { --product-accent-rgb: 255, 90, 0; }
    .product-card:nth-child(8) { --product-accent-rgb: 23, 92, 211; }

    .product-panel {
      padding: 30px;
    }

    .product-flow {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

    .product-flow-step {
      min-height: 142px;
      padding: 17px;
      border: 1px solid rgba(207, 217, 230, 0.86);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.62);
      position: relative;
    }

    .product-flow-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -12px;
      width: 12px;
      height: 1px;
      background: rgba(255, 90, 0, 0.34);
    }

    .product-flow-step b {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
    }

    .product-flow-step span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
      font-weight: 780;
    }

    .product-price-card {
      min-height: 360px;
      padding: 26px;
    }

    .product-price-card.featured {
      border-color: #ffbd8f;
      box-shadow: 0 18px 44px rgba(255, 90, 0, 0.12);
    }

    .product-price-card h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: 26px;
      font-weight: 950;
    }

    .product-price {
      position: relative;
      z-index: 1;
      margin: 18px 0 4px;
      color: var(--brand);
      font-size: 34px;
      line-height: 1;
      font-weight: 950;
    }

    .product-price small {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .product-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-list li {
      min-height: 38px;
      display: flex;
      align-items: center;
      padding: 9px 11px;
      border: 1px solid rgba(207, 217, 230, 0.78);
      border-radius: 8px;
      color: #344054;
      background: rgba(255, 255, 255, 0.62);
      font-size: 13px;
      font-weight: 860;
    }

    .product-list li::before {
      content: "";
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      margin-right: 8px;
      border-radius: 999px;
      background: var(--brand);
    }

    .product-split {
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
      gap: 18px;
      align-items: stretch;
    }

    .product-checklist {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 24px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-checklist li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      min-height: 44px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(207, 217, 230, 0.86);
      color: #344054;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 850;
    }

    .product-checklist li::before {
      content: "";
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(var(--product-accent-rgb), 1), rgba(255, 138, 61, 0.92));
      box-shadow: 0 8px 18px rgba(var(--product-accent-rgb), 0.18);
    }

    .product-diagram,
    .product-table-panel,
    .product-example-panel,
    .product-timeline-panel {
      position: relative;
      overflow: hidden;
      padding: 30px;
      border: 1px solid #d9e3ef;
      border-radius: 16px;
      background:
        radial-gradient(circle at 8% 12%, rgba(var(--product-accent-rgb), 0.12), transparent 34%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.82));
      box-shadow: 0 20px 46px rgba(16, 24, 40, 0.075);
    }

    .product-diagram::before,
    .product-table-panel::before,
    .product-example-panel::before,
    .product-timeline-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.48) 44%, transparent 76%);
      opacity: 0;
      transform: translateX(-72%);
      transition: opacity 0.42s ease, transform 0.72s ease;
      pointer-events: none;
    }

    .product-diagram:hover::before,
    .product-table-panel:hover::before,
    .product-example-panel:hover::before,
    .product-timeline-panel:hover::before {
      opacity: 1;
      transform: translateX(68%);
    }

    .product-diagram h3,
    .product-table-panel h3,
    .product-example-panel h3,
    .product-timeline-panel h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--ink);
      font-size: 24px;
      line-height: 1.2;
      font-weight: 950;
    }

    .product-diagram p,
    .product-table-panel p,
    .product-example-panel p,
    .product-timeline-panel p {
      position: relative;
      z-index: 1;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.72;
      font-weight: 780;
    }

    .diagram-lanes {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .product-split .diagram-lanes {
      grid-template-columns: 1fr;
    }

    .product-split .diagram-lane::after {
      display: none;
    }

    .product-layout .product-split .diagram-lanes {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .diagram-lane {
      position: relative;
      min-height: 168px;
      padding: 16px;
      border: 1px solid rgba(207, 217, 230, 0.9);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.68);
    }

    .diagram-lane:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -13px;
      width: 13px;
      height: 2px;
      background: linear-gradient(90deg, rgba(var(--product-accent-rgb), 0.22), rgba(var(--product-accent-rgb), 0.72));
    }

    .diagram-lane b {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.28;
      font-weight: 950;
    }

    .diagram-lane span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.58;
      font-weight: 780;
    }

    .diagram-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .diagram-tag-row i {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 0 8px;
      border: 1px solid rgba(var(--product-accent-rgb), 0.18);
      border-radius: 999px;
      background: rgba(var(--product-accent-rgb), 0.08);
      color: #344054;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .product-example-panel {
      min-height: 100%;
    }

    .example-screen {
      position: relative;
      z-index: 1;
      overflow: hidden;
      margin-top: 20px;
      border: 1px solid rgba(207, 217, 230, 0.94);
      border-radius: 12px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .example-screen-head {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border-bottom: 1px solid #e6edf5;
      background: linear-gradient(90deg, #f8fbff, #fff7f1);
      color: var(--ink);
      font-size: 12px;
      font-weight: 950;
    }

    .example-dots {
      display: inline-flex;
      gap: 5px;
    }

    .example-dots i {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ff5a00;
    }

    .example-dots i:nth-child(2) { background: #f6b742; }
    .example-dots i:nth-child(3) { background: #16a34a; }

    .example-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      font-weight: 820;
    }

    .example-table th,
    .example-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #edf2f7;
      text-align: left;
      white-space: nowrap;
    }

    .example-table th {
      color: #667085;
      background: #fbfdff;
      font-size: 11px;
      font-weight: 950;
    }

    .example-table td {
      color: #1d2939;
    }

    .example-table .positive { color: #079455; }
    .example-table .warning { color: var(--brand); }

    .product-table-wrap {
      position: relative;
      z-index: 1;
      overflow-x: auto;
      margin-top: 20px;
      border: 1px solid rgba(207, 217, 230, 0.94);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
    }

    .product-table {
      width: 100%;
      min-width: 780px;
      border-collapse: collapse;
      font-size: 13px;
      font-weight: 820;
    }

    .product-split .product-table {
      min-width: 640px;
    }

    .product-table th,
    .product-table td {
      padding: 14px 16px;
      border-bottom: 1px solid #e9eff6;
      color: #344054;
      text-align: left;
      vertical-align: top;
    }

    .product-table th {
      color: var(--ink);
      background: linear-gradient(180deg, #f7fbff, #fff);
      font-size: 12px;
      font-weight: 950;
    }

    .product-table tr:last-child td { border-bottom: 0; }
    .product-table strong { color: var(--ink); font-weight: 950; }
    .product-table .yes { color: #079455; font-weight: 950; }
    .product-table .weak { color: #667085; }

    .product-timeline {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .product-timeline li {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 18px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(207, 217, 230, 0.86);
    }

    .product-timeline li:last-child { border-bottom: 0; }

    .product-timeline em {
      display: inline-flex;
      width: 54px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(var(--product-accent-rgb), 0.1);
      color: var(--brand);
      font-size: 12px;
      font-style: normal;
      font-weight: 950;
    }

    .product-timeline b {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
    }

    .product-timeline span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.58;
      font-weight: 780;
    }

    .download-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: 18px;
      align-items: stretch;
    }

    .download-box {
      min-height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .download-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

    .download-meta div {
      padding: 12px;
      border: 1px solid rgba(207, 217, 230, 0.78);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.62);
    }

    .download-meta span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .download-meta strong {
      display: block;
      margin-top: 5px;
      font-size: 15px;
      font-weight: 950;
    }

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

    .product-faq-item {
      min-height: 122px;
      padding: 20px;
    }

    .product-service-card {
      min-height: 310px;
      padding: 26px;
    }

    .product-cta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
    }

    .empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 850;
      text-align: center;
      padding: 20px;
    }
    .empty-row { color: var(--muted); text-align: center !important; }
    .demo-banner {
      min-height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 6px 12px;
      border: 1px solid #fedf89;
      background: #fffaf0;
      color: #9a3412;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 850;
    }

    .footer {
      padding: 16px 0;
      border-top: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      text-align: center;
      font-size: 12px;
      font-weight: 750;
    }

    .modal-root {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      background: rgba(15, 23, 42, 0.42);
      padding: 20px;
    }
    .modal {
      width: min(430px, 100%);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
    }
    .modal-head {
      min-height: 58px;
      padding: 0 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }
    .modal-head h3 { margin: 0; font-size: 18px; }
    .close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f2f4f7; font-size: 20px; }
    .modal-tabs { display: flex; gap: 8px; padding: 14px 18px 0; }
    .modal-tabs button {
      flex: 1;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--muted);
      font-weight: 850;
    }
    .modal-tabs button.active { border-color: #ffd8bd; background: #fff3ea; color: var(--brand); }
    .form { display: grid; gap: 12px; padding: 18px; }
    .form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .form input { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; outline: 0; }
    .inline-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .form-message { min-height: 20px; color: var(--muted); font-size: 12px; font-weight: 750; }
    .form-message.error { color: var(--red); }
    .form-message.success { color: var(--green); }

    #copyPage.copy-v2 {
      --copy-wide: min(1520px, calc(100vw - 56px));
      --copy-orange: #ff5a00;
      --copy-ink: #0f172a;
      --copy-muted: #667085;
      --copy-line: #e8edf4;
      --copy-soft: #fff8f3;
      --copy-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 36px;
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 90, 0, 0.06), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(255, 138, 61, 0.05), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 46%, #fff 100%);
    }

    #copyPage.copy-v2 > .container > :not(.copy-v2-shell) {
      display: none !important;
    }

    .copy-v2-shell {
      width: var(--copy-wide);
      margin: 0 auto;
      color: var(--copy-ink);
    }

    .copy-v2-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--copy-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.055), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
      box-shadow: var(--copy-shadow);
    }

    .copy-v2-hero {
      min-height: 510px;
      display: grid;
      grid-template-columns: minmax(340px, 0.76fr) minmax(0, 1.55fr);
      align-items: center;
      gap: 34px;
      padding: 40px 34px 24px;
    }

    .copy-v2-hero::before {
      content: "";
      position: absolute;
      left: -120px;
      top: -190px;
      width: 420px;
      height: 420px;
      border: 1px solid rgba(255, 90, 0, 0.10);
      border-radius: 50%;
      box-shadow: 0 0 0 64px rgba(255, 90, 0, 0.025);
      pointer-events: none;
    }

    .copy-v2-kicker {
      width: fit-content;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      border-radius: 999px;
      color: var(--copy-orange);
      background: #fff3ea;
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
    }

    .copy-v2-title {
      max-width: 510px;
      margin: 22px 0 0;
      color: var(--copy-ink);
      font-size: clamp(38px, 3.5vw, 60px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 950;
    }

    .copy-v2-title span {
      color: var(--copy-orange);
    }

    .copy-v2-lead {
      max-width: 500px;
      margin: 18px 0 0;
      color: #344054;
      font-size: 17px;
      line-height: 1.82;
      font-weight: 820;
    }

    .copy-v2-checks,
    .copy-v2-side-list {
      display: grid;
      gap: 13px;
      margin: 26px 0 0;
      padding: 0;
      list-style: none;
    }

    .copy-v2-checks li,
    .copy-v2-side-list li {
      position: relative;
      padding-left: 28px;
      color: #344054;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 850;
    }

    .copy-v2-checks li::before,
    .copy-v2-side-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 18px;
      height: 18px;
      border: 2px solid var(--copy-orange);
      border-radius: 50%;
      background:
        linear-gradient(135deg, transparent 44%, var(--copy-orange) 45% 56%, transparent 57%) 5px 2px / 8px 11px no-repeat,
        #fff;
    }

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

    .copy-v2-actions .btn {
      min-width: 140px;
      justify-content: center;
      border-radius: 7px;
    }

    .copy-v2-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
      max-width: 560px;
    }

    .copy-v2-stat {
      min-width: 0;
    }

    .copy-v2-stat strong {
      display: block;
      color: var(--copy-ink);
      font-size: 22px;
      line-height: 1.05;
      font-weight: 950;
    }

    .copy-v2-stat span {
      display: block;
      margin-top: 5px;
      color: var(--copy-muted);
      font-size: 12px;
      font-weight: 850;
    }

    .copy-v2-hero-map {
      position: relative;
      display: grid;
      grid-template-columns: 0.9fr 1.02fr 0.9fr;
      align-items: center;
      gap: 32px;
      min-height: 430px;
    }

    .copy-v2-hero-map::before,
    .copy-v2-hero-map::after {
      content: "";
      position: absolute;
      top: 50%;
      height: 1px;
      border-top: 1px dashed rgba(42, 116, 232, 0.55);
      pointer-events: none;
    }

    .copy-v2-hero-map::before {
      left: 24%;
      right: 57%;
    }

    .copy-v2-hero-map::after {
      left: 58%;
      right: 24%;
    }

    .copy-v2-stack-title {
      margin: 0 0 16px;
      text-align: center;
      color: #172033;
      font-size: 14px;
      font-weight: 950;
    }

    .copy-v2-account-stack {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 13px;
      padding: 26px;
      border: 1px solid var(--copy-line);
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 16px 34px rgba(16, 24, 40, 0.052);
    }

    .copy-v2-account,
    .copy-v2-engine-step,
    .copy-v2-dashboard-card,
    .copy-v2-module,
    .copy-v2-scenario,
    .copy-v2-compare-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--copy-line);
      border-radius: 9px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.94));
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
    }

    .copy-v2-account {
      min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      color: #344054;
      font-size: 14px;
      font-weight: 920;
    }

    .copy-v2-icon {
      --icon-color: var(--copy-orange);
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      position: relative;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 26%, white);
      border-radius: 9px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 9%, white), #fff);
    }

    .copy-v2-icon::before,
    .copy-v2-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .copy-v2-icon::before {
      width: 15px;
      height: 15px;
      border: 2px solid var(--icon-color);
      border-radius: 4px;
    }

    .copy-v2-icon.account::before {
      width: 15px;
      height: 11px;
      border-radius: 3px;
    }

    .copy-v2-icon.account::after {
      width: 7px;
      height: 7px;
      border: 2px solid var(--icon-color);
      border-radius: 50%;
      transform: translateY(-7px);
      background: #fff;
    }

    .copy-v2-icon.lock::before {
      width: 15px;
      height: 13px;
      border-radius: 4px;
      transform: translateY(3px);
    }

    .copy-v2-icon.lock::after {
      width: 13px;
      height: 10px;
      border: 2px solid var(--icon-color);
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      transform: translateY(-6px);
    }

    .copy-v2-icon.layers::before {
      width: 18px;
      height: 14px;
      border: 0;
      background:
        linear-gradient(145deg, transparent 47%, var(--icon-color) 48% 54%, transparent 55%) 0 0 / 18px 14px,
        linear-gradient(35deg, transparent 47%, var(--icon-color) 48% 54%, transparent 55%) 0 0 / 18px 14px;
      box-shadow: 0 6px 0 -2px var(--icon-color), 0 12px 0 -2px var(--icon-color);
    }

    .copy-v2-icon.user::before {
      width: 18px;
      height: 20px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 10px, transparent 11px);
    }

    .copy-v2-icon.shield::before {
      width: 18px;
      height: 21px;
      border: 0;
      border-radius: 0;
      background: var(--icon-color);
      clip-path: polygon(50% 0, 88% 14%, 84% 66%, 50% 100%, 16% 66%, 12% 14%);
    }

    .copy-v2-icon.flow::before {
      width: 19px;
      height: 14px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 10px / 10px 2px no-repeat;
    }

    .copy-v2-icon.chart::before {
      width: 18px;
      height: 17px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 15px 13px no-repeat;
    }

    .copy-v2-engine {
      position: relative;
      z-index: 2;
      padding: 28px 22px 18px;
      border: 1px solid rgba(255, 90, 0, 0.38);
      border-radius: 10px;
      background: rgba(255, 250, 247, 0.90);
      box-shadow: 0 20px 44px rgba(255, 90, 0, 0.10);
    }

    .copy-v2-engine-title {
      position: absolute;
      left: 50%;
      top: -36px;
      transform: translateX(-50%);
      color: var(--copy-orange);
      font-size: 15px;
      font-weight: 950;
      white-space: nowrap;
    }

    .copy-v2-engine-title::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 26px;
      width: 2px;
      height: 18px;
      transform: translateX(-50%);
      background: var(--copy-orange);
    }

    .copy-v2-engine-step {
      min-height: 64px;
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      margin-bottom: 10px;
      border-color: #ffd8bd;
      background:
        radial-gradient(circle at 0 0, rgba(255, 90, 0, 0.12), transparent 42%),
        #fff;
    }

    .copy-v2-engine-step:last-child {
      margin-bottom: 0;
    }

    .copy-v2-engine-step b {
      display: block;
      color: var(--copy-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .copy-v2-engine-step span {
      display: block;
      margin-top: 4px;
      color: var(--copy-muted);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 820;
    }

    .copy-v2-section {
      margin-top: 14px;
      padding: 26px 28px;
    }

    .copy-v2-section-head {
      max-width: 680px;
      margin: 0 auto 24px;
      text-align: center;
    }

    .copy-v2-section-head h2,
    .copy-v2-text h2 {
      margin: 0;
      color: var(--copy-ink);
      font-size: clamp(26px, 2.25vw, 38px);
      line-height: 1.18;
      letter-spacing: 0;
      font-weight: 950;
    }

    .copy-v2-section-head p,
    .copy-v2-text p {
      margin: 10px 0 0;
      color: var(--copy-muted);
      font-size: 14px;
      line-height: 1.78;
      font-weight: 820;
    }

    .copy-v2-modules {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 14px;
    }

    .copy-v2-module {
      min-height: 135px;
      padding: 20px 14px;
      text-align: center;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .copy-v2-module:hover,
    .copy-v2-scenario:hover,
    .copy-v2-compare-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .copy-v2-module .copy-v2-icon,
    .copy-v2-scenario .copy-v2-icon {
      margin: 0 auto 12px;
    }

    .copy-v2-module b,
    .copy-v2-scenario b {
      display: block;
      color: var(--copy-ink);
      font-size: 14px;
      line-height: 1.3;
      font-weight: 950;
    }

    .copy-v2-module span,
    .copy-v2-scenario span {
      display: block;
      margin-top: 8px;
      color: var(--copy-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .copy-v2-monitor {
      display: grid;
      grid-template-columns: minmax(300px, 0.45fr) minmax(0, 1fr);
      align-items: center;
      gap: 34px;
      min-height: 320px;
    }

    .copy-v2-dashboard {
      padding: 18px;
      border: 1px solid var(--copy-line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 22px 48px rgba(16, 24, 40, 0.06);
    }

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

    .copy-v2-dashboard-brand {
      color: var(--copy-orange);
      font-size: 13px;
      font-weight: 950;
    }

    .copy-v2-dashboard-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      flex: 1;
      max-width: 620px;
    }

    .copy-v2-dashboard-metrics div {
      padding: 9px 10px;
      border-radius: 8px;
      background: #f8fafc;
    }

    .copy-v2-dashboard-metrics span {
      display: block;
      color: #98a2b3;
      font-size: 11px;
      font-weight: 800;
    }

    .copy-v2-dashboard-metrics strong {
      display: block;
      margin-top: 3px;
      color: var(--copy-ink);
      font-size: 18px;
      font-weight: 950;
    }

    .copy-v2-dashboard-grid {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr) 190px 190px;
      gap: 14px;
      align-items: stretch;
    }

    .copy-v2-dashboard-card {
      min-height: 164px;
      padding: 14px;
      box-shadow: none;
    }

    .copy-v2-dashboard-card h3 {
      margin: 0 0 12px;
      color: var(--copy-ink);
      font-size: 13px;
      font-weight: 950;
    }

    .copy-v2-source-row,
    .copy-v2-follow-row,
    .copy-v2-risk-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 32px;
      color: #344054;
      font-size: 12px;
      font-weight: 820;
      border-bottom: 1px solid #eef2f7;
    }

    .copy-v2-source-row:last-child,
    .copy-v2-follow-row:last-child,
    .copy-v2-risk-row:last-child {
      border-bottom: 0;
    }

    .copy-v2-dot {
      width: 7px;
      height: 7px;
      display: inline-block;
      margin-right: 6px;
      border-radius: 50%;
      background: #12b76a;
    }

    .copy-v2-chart {
      position: relative;
      height: 116px;
      margin-top: 10px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background:
        linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 28px;
    }

    .copy-v2-chart::before {
      content: "";
      position: absolute;
      inset: 18px 12px 22px;
      background:
        linear-gradient(140deg, transparent 0 8%, #2a7de1 9% 10%, transparent 11% 20%, #2a7de1 21% 22%, transparent 23% 30%, #2a7de1 31% 32%, transparent 33% 46%, #ff5a00 47% 48%, transparent 49% 60%, #ff5a00 61% 62%, transparent 63% 74%, #2a7de1 75% 76%, transparent 77%);
      filter: drop-shadow(0 8px 10px rgba(255, 90, 0, 0.10));
    }

    .copy-v2-compare {
      display: grid;
      grid-template-columns: 0.72fr repeat(3, 1fr);
      gap: 22px;
      align-items: stretch;
    }

    .copy-v2-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 245px;
    }

    .copy-v2-compare-card {
      min-height: 245px;
      padding: 28px;
      box-shadow: none;
    }

    .copy-v2-compare-card.featured {
      border-color: rgba(255, 90, 0, 0.72);
      box-shadow: 0 18px 42px rgba(255, 90, 0, 0.08);
    }

    .copy-v2-compare-card h3 {
      margin: 0 0 18px;
      text-align: center;
      color: var(--copy-ink);
      font-size: 17px;
      font-weight: 950;
    }

    .copy-v2-compare-card.featured h3 {
      color: var(--copy-orange);
    }

    .copy-v2-compare-card ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .copy-v2-compare-card li {
      position: relative;
      padding-left: 22px;
      color: #475467;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 820;
    }

    .copy-v2-compare-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 14px;
      height: 14px;
      border: 1px solid #ffb17a;
      border-radius: 50%;
      background: #fff7f1;
    }

    .copy-v2-scenarios {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
    }

    .copy-v2-scenario {
      min-height: 150px;
      padding: 24px 20px;
      text-align: center;
    }

    .copy-v2-cta {
      min-height: 180px;
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr) auto;
      align-items: center;
      gap: 42px;
      margin-top: 14px;
      padding: 26px 42px;
      border-radius: 10px;
      color: #fff;
      background:
        radial-gradient(circle at 15% 44%, rgba(255, 90, 0, 0.38), transparent 20%),
        radial-gradient(circle at 84% 20%, rgba(255, 90, 0, 0.28), transparent 26%),
        linear-gradient(135deg, #06152d, #06254b 58%, #071f3f);
      box-shadow: 0 24px 50px rgba(16, 24, 40, 0.16);
      overflow: hidden;
    }

    .copy-v2-cube-scene {
      position: relative;
      min-height: 128px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .copy-v2-cube-scene::before {
      content: "";
      position: absolute;
      width: 250px;
      height: 86px;
      border: 1px solid rgba(255, 138, 61, 0.40);
      border-radius: 50%;
      transform: rotate(-16deg);
      box-shadow: 0 0 28px rgba(255, 90, 0, 0.22);
    }

    .copy-v2-cube {
      position: relative;
      width: 94px;
      height: 94px;
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(145deg, #ff9a4f, #ff5a00 68%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 28px 42px rgba(255, 90, 0, 0.40);
      animation: copyCubeFloat 4.8s ease-in-out infinite;
    }

    .copy-v2-cube::before,
    .copy-v2-cube::after {
      content: "";
      position: absolute;
      background: inherit;
      filter: brightness(0.82);
    }

    .copy-v2-cube::before {
      width: 48px;
      inset: 0 auto 0 100%;
      transform-origin: left center;
      transform: rotateY(90deg);
    }

    .copy-v2-cube::after {
      height: 48px;
      inset: 100% 0 auto 0;
      transform-origin: center top;
      transform: rotateX(-90deg);
    }

    .copy-v2-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(25px, 2.1vw, 36px);
      line-height: 1.22;
      font-weight: 950;
    }

    .copy-v2-cta p {
      max-width: 620px;
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 800;
    }

    .copy-v2-cta .btn:not(.primary) {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
    }

    @keyframes copyCubeFloat {
      0%, 100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #copyPage.copy-v2 {
        --copy-wide: min(1120px, calc(100vw - 36px));
      }

      .copy-v2-hero,
      .copy-v2-monitor,
      .copy-v2-compare,
      .copy-v2-cta {
        grid-template-columns: 1fr;
      }

      .copy-v2-modules {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .copy-v2-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      #copyPage.copy-v2 {
        --copy-wide: calc(100% - 28px);
        padding-top: 14px;
      }

      .copy-v2-hero,
      .copy-v2-section,
      .copy-v2-cta {
        padding: 22px 18px;
      }

      .copy-v2-title {
        font-size: 36px;
      }

      .copy-v2-hero-map,
      .copy-v2-stats,
      .copy-v2-modules,
      .copy-v2-scenarios,
      .copy-v2-dashboard-grid,
      .copy-v2-dashboard-metrics {
        grid-template-columns: 1fr;
      }

      .copy-v2-hero-map::before,
      .copy-v2-hero-map::after {
        display: none;
      }

      .copy-v2-engine-title {
        position: static;
        display: block;
        margin-bottom: 14px;
        text-align: center;
        transform: none;
      }

      .copy-v2-engine-title::after {
        display: none;
      }
    }

    #clientApiPage.api-v2 {
      --api-wide: min(1520px, calc(100vw - 56px));
      --api-orange: #ff5a00;
      --api-blue: #2b78e4;
      --api-green: #18a957;
      --api-ink: #0f172a;
      --api-muted: #667085;
      --api-line: #e8edf4;
      --api-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 36px;
      background:
        radial-gradient(circle at 7% 0%, rgba(255, 90, 0, 0.055), transparent 24%),
        radial-gradient(circle at 92% 5%, rgba(43, 120, 228, 0.045), transparent 28%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 48%, #fff 100%);
    }

    #clientApiPage.api-v2 > .container > :not(.api-v2-shell) {
      display: none !important;
    }

    body:has(#clientApiPage.api-v2:not(.hidden)) .footer {
      display: none;
    }

    .api-v2-shell {
      width: var(--api-wide);
      margin: 0 auto;
      color: var(--api-ink);
    }

    .api-v2-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 10%, rgba(255, 90, 0, 0.05), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
      box-shadow: var(--api-shadow);
    }

    .api-v2-hero {
      display: grid;
      grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.42fr);
      gap: 34px;
      align-items: center;
      min-height: 510px;
      padding: 42px 34px 26px;
    }

    .api-v2-title {
      max-width: 560px;
      margin: 0;
      color: var(--api-ink);
      font-size: clamp(38px, 3.5vw, 60px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 950;
    }

    .api-v2-title span {
      display: block;
    }

    .api-v2-lead {
      max-width: 570px;
      margin: 18px 0 0;
      color: #344054;
      font-size: 18px;
      line-height: 1.72;
      font-weight: 860;
    }

    .api-v2-desc {
      max-width: 590px;
      margin: 26px 0 0;
      color: var(--api-muted);
      font-size: 14px;
      line-height: 1.86;
      font-weight: 780;
    }

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

    .api-v2-actions .btn {
      min-width: 142px;
      justify-content: center;
      border-radius: 7px;
    }

    .api-v2-pills {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      max-width: 560px;
      margin-top: 28px;
    }

    .api-v2-pill {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--api-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .api-v2-pill::before {
      content: "";
      width: 13px;
      height: 13px;
      border: 2px solid #98a2b3;
      border-radius: 50%;
    }

    .api-v2-visual {
      display: grid;
      grid-template-columns: 190px minmax(260px, 1fr) 1fr;
      gap: 14px;
      min-height: 390px;
    }

    .api-v2-window {
      padding: 18px;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 16px 34px rgba(16, 24, 40, 0.05);
    }

    .api-v2-window h3 {
      margin: 0 0 16px;
      color: var(--api-ink);
      font-size: 13px;
      line-height: 1.35;
      font-weight: 950;
    }

    .api-v2-api-list {
      display: grid;
      gap: 10px;
    }

    .api-v2-api-item,
    .api-v2-form-row,
    .api-v2-system-node {
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border: 1px solid var(--api-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 12px;
      font-weight: 880;
    }

    .api-v2-icon {
      --icon-color: var(--api-orange);
      position: relative;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 26%, white);
      border-radius: 9px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 9%, white), #fff);
    }

    .api-v2-icon::before,
    .api-v2-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .api-v2-icon::before {
      width: 15px;
      height: 15px;
      border: 2px solid var(--icon-color);
      border-radius: 4px;
    }

    .api-v2-icon.user::before {
      width: 18px;
      height: 20px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 10px, transparent 11px);
    }

    .api-v2-icon.trade::before {
      width: 18px;
      height: 14px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 10px / 10px 2px no-repeat;
    }

    .api-v2-icon.position::before {
      width: 17px;
      height: 15px;
      border: 0;
      background:
        linear-gradient(35deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) 0 0 / 17px 15px,
        linear-gradient(145deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) 0 0 / 17px 15px;
      box-shadow: 0 7px 0 -2px var(--icon-color);
    }

    .api-v2-icon.chart::before {
      width: 18px;
      height: 17px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 15px 13px no-repeat;
    }

    .api-v2-icon.doc::before {
      width: 16px;
      height: 19px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 6px / 8px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 11px / 8px 2px no-repeat;
    }

    .api-v2-icon.server::before {
      width: 18px;
      height: 16px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 3px 5px / 12px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 3px 10px / 12px 2px no-repeat;
    }

    .api-v2-endpoint {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid #dbe7fa;
      border-radius: 7px;
      background: #f6f9ff;
      color: #344054;
      font-size: 12px;
      font-weight: 900;
    }

    .api-v2-endpoint b {
      min-width: 42px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 5px;
      color: #fff;
      background: var(--api-blue);
      font-size: 11px;
    }

    .api-v2-form {
      display: grid;
      gap: 9px;
      margin-top: 16px;
    }

    .api-v2-form label {
      color: var(--api-ink);
      font-size: 12px;
      font-weight: 930;
    }

    .api-v2-form-row {
      justify-content: space-between;
      color: #98a2b3;
      font-size: 11px;
    }

    .api-v2-code {
      margin: 16px 0 0;
      padding: 16px;
      min-height: 150px;
      border-radius: 8px;
      color: #b9fbc0;
      background: #071323;
      font: 700 12px/1.55 Consolas, Monaco, monospace;
      white-space: pre;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }

    .api-v2-system-map {
      position: relative;
      min-height: 310px;
      display: grid;
      grid-template-rows: auto auto auto;
      place-items: center;
      gap: 34px;
      padding-top: 8px;
    }

    .api-v2-system-row {
      display: flex;
      gap: 18px;
      justify-content: center;
      width: 100%;
    }

    .api-v2-system-node {
      min-width: 145px;
      justify-content: center;
      min-height: 54px;
      box-shadow: 0 12px 24px rgba(16, 24, 40, 0.045);
    }

    .api-v2-system-node.gateway {
      min-width: 185px;
      color: var(--api-ink);
      font-weight: 950;
    }

    .api-v2-system-map::before,
    .api-v2-system-map::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 1px;
      height: 34px;
      background: var(--api-blue);
      transform: translateX(-50%);
    }

    .api-v2-system-map::before {
      top: 70px;
    }

    .api-v2-system-map::after {
      top: 170px;
    }

    .api-v2-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      margin-top: 14px;
      padding: 20px 0;
    }

    .api-v2-stat {
      min-height: 92px;
      display: grid;
      grid-template-columns: 50px 1fr;
      align-items: center;
      gap: 14px;
      padding: 0 28px;
      border-right: 1px solid var(--api-line);
    }

    .api-v2-stat:last-child {
      border-right: 0;
    }

    .api-v2-stat strong {
      display: block;
      color: var(--api-ink);
      font-size: 25px;
      line-height: 1.05;
      font-weight: 950;
    }

    .api-v2-stat span {
      display: block;
      margin-top: 5px;
      color: var(--api-muted);
      font-size: 12px;
      font-weight: 850;
    }

    .api-v2-section {
      margin-top: 14px;
      padding: 28px 28px 30px;
    }

    .api-v2-section-head {
      max-width: 720px;
      margin: 0 auto 26px;
      text-align: center;
    }

    .api-v2-section-head h2 {
      position: relative;
      margin: 0;
      color: var(--api-ink);
      font-size: clamp(26px, 2.25vw, 38px);
      line-height: 1.18;
      font-weight: 950;
    }

    .api-v2-section-head h2::after {
      content: "";
      display: block;
      width: 34px;
      height: 3px;
      margin: 12px auto 0;
      border-radius: 999px;
      background: var(--api-orange);
    }

    .api-v2-section-head p {
      margin: 10px 0 0;
      color: var(--api-muted);
      font-size: 14px;
      line-height: 1.7;
      font-weight: 820;
    }

    .api-v2-cards-8,
    .api-v2-business,
    .api-v2-support,
    .api-v2-advantages {
      display: grid;
      gap: 18px;
    }

    .api-v2-cards-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .api-v2-business {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .api-v2-support,
    .api-v2-advantages {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .api-v2-card,
    .api-v2-category,
    .api-v2-business-card,
    .api-v2-support-card,
    .api-v2-advantage {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--api-line);
      border-radius: 9px;
      background:
        radial-gradient(circle at 86% 12%, rgba(255, 90, 0, 0.05), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.94));
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .api-v2-card:hover,
    .api-v2-category:hover,
    .api-v2-business-card:hover,
    .api-v2-support-card:hover,
    .api-v2-advantage:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .api-v2-card {
      min-height: 136px;
      padding: 20px 14px;
      text-align: center;
    }

    .api-v2-card .api-v2-icon,
    .api-v2-business-card .api-v2-icon {
      margin: 0 auto 12px;
    }

    .api-v2-card b,
    .api-v2-business-card b,
    .api-v2-support-card b,
    .api-v2-advantage b {
      display: block;
      color: var(--api-ink);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 950;
    }

    .api-v2-card span,
    .api-v2-business-card span,
    .api-v2-support-card span,
    .api-v2-advantage span {
      display: block;
      margin-top: 8px;
      color: var(--api-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .api-v2-categories {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .api-v2-category {
      min-height: 126px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 16px;
      padding: 22px;
      align-items: start;
    }

    .api-v2-category h3 {
      margin: 0;
      color: var(--api-ink);
      font-size: 17px;
      font-weight: 950;
    }

    .api-v2-category p {
      margin: 7px 0 0;
      color: var(--api-muted);
      font-size: 13px;
      line-height: 1.62;
      font-weight: 800;
    }

    .api-v2-category a,
    .api-v2-support-card a {
      display: inline-flex;
      margin-top: 12px;
      color: var(--api-orange);
      font-size: 12px;
      font-weight: 950;
    }

    .api-v2-process {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }

    .api-v2-step {
      position: relative;
      text-align: center;
    }

    .api-v2-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: calc(50% + 46px);
      top: 38px;
      width: calc(100% - 68px);
      border-top: 1px dashed #98a2b3;
    }

    .api-v2-step-no {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      margin: 0 auto 8px;
      border-radius: 50%;
      color: #fff;
      background: var(--api-orange);
      font-size: 12px;
      font-weight: 950;
    }

    .api-v2-step-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
      border: 1px solid var(--api-line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 24px rgba(16, 24, 40, 0.045);
    }

    .api-v2-step b {
      display: block;
      color: var(--api-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .api-v2-step span {
      display: block;
      margin-top: 8px;
      color: var(--api-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .api-v2-business-card {
      min-height: 92px;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: center;
      padding: 18px;
    }

    .api-v2-business-card .api-v2-icon {
      margin: 0;
    }

    .api-v2-support-card {
      min-height: 130px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      padding: 20px;
    }

    .api-v2-support-card .api-v2-icon {
      --icon-color: var(--api-blue);
    }

    .api-v2-advantage {
      min-height: 106px;
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 14px;
      align-items: center;
      padding: 18px;
      box-shadow: none;
    }

    .api-v2-advantage .api-v2-icon {
      --icon-color: var(--api-blue);
    }

    .api-v2-cta {
      min-height: 170px;
      display: grid;
      grid-template-columns: 330px minmax(0, 1fr) auto;
      align-items: center;
      gap: 38px;
      margin-top: 14px;
      padding: 26px 42px;
      border-radius: 10px;
      color: #fff;
      background:
        radial-gradient(circle at 17% 44%, rgba(255, 90, 0, 0.38), transparent 22%),
        radial-gradient(circle at 84% 20%, rgba(255, 90, 0, 0.28), transparent 26%),
        linear-gradient(135deg, #06152d, #06254b 58%, #071f3f);
      box-shadow: 0 24px 50px rgba(16, 24, 40, 0.16);
      overflow: hidden;
    }

    .api-v2-cta-art {
      position: relative;
      min-height: 118px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .api-v2-cta-art::before {
      content: "";
      position: absolute;
      width: 245px;
      height: 86px;
      border: 1px solid rgba(255, 138, 61, 0.40);
      border-radius: 50%;
      transform: rotate(-16deg);
      box-shadow: 0 0 28px rgba(255, 90, 0, 0.22);
    }

    .api-v2-cta-cube {
      position: relative;
      width: 88px;
      height: 88px;
      border-radius: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(145deg, #ff9a4f, #ff5a00 68%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 28px 42px rgba(255, 90, 0, 0.40);
      animation: apiCubeFloat 4.8s ease-in-out infinite;
    }

    .api-v2-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(25px, 2.1vw, 36px);
      line-height: 1.22;
      font-weight: 950;
    }

    .api-v2-cta p {
      max-width: 680px;
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 800;
    }

    .api-v2-cta .btn:not(.primary) {
      color: #101828;
      background: #fff;
    }

    .api-v2-footer {
      margin-top: 28px;
      padding: 38px 8px 24px;
      border-top: 1px solid var(--api-line);
      color: var(--api-muted);
    }

    .api-v2-footer-grid {
      display: grid;
      grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(120px, 0.7fr)) minmax(220px, 1fr);
      gap: 30px;
      align-items: start;
    }

    .api-v2-footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--api-ink);
      font-weight: 950;
    }

    .api-v2-footer-logo {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--api-orange);
      box-shadow: 0 10px 20px rgba(255, 90, 0, 0.20);
      font-size: 22px;
      line-height: 1;
      font-weight: 950;
    }

    .api-v2-footer-brand span:last-child span {
      display: block;
      margin-top: 2px;
      color: #6b7280;
      font-size: 11px;
      line-height: 1.1;
      font-weight: 850;
    }

    .api-v2-footer-intro {
      max-width: 320px;
      margin: 16px 0 0;
      color: #697586;
      font-size: 13px;
      line-height: 1.75;
      font-weight: 780;
    }

    .api-v2-footer h3 {
      margin: 0 0 12px;
      color: var(--api-ink);
      font-size: 13px;
      font-weight: 950;
    }

    .api-v2-footer a,
    .api-v2-footer-contact span {
      display: block;
      margin-top: 9px;
      color: #667085;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 820;
      text-decoration: none;
    }

    .api-v2-footer a:hover {
      color: var(--api-orange);
    }

    .api-v2-footer-contact {
      padding: 16px;
      border: 1px solid var(--api-line);
      border-radius: 12px;
      background: #f8fafc;
    }

    .api-v2-footer-social {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .api-v2-footer-social i {
      width: 20px;
      height: 20px;
      display: block;
      border: 1px solid #d8dee8;
      border-radius: 50%;
      background: #fff;
    }

    .api-v2-footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid var(--api-line);
      color: #7a8699;
      font-size: 12px;
      font-weight: 800;
    }

    @keyframes apiCubeFloat {
      0%, 100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #clientApiPage.api-v2 {
        --api-wide: min(1120px, calc(100vw - 36px));
      }

      .api-v2-hero,
      .api-v2-cta {
        grid-template-columns: 1fr;
      }

      .api-v2-cards-8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .api-v2-business,
      .api-v2-support,
      .api-v2-advantages,
      .api-v2-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .api-v2-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .api-v2-step::after {
        display: none;
      }
    }

    @media (max-width: 760px) {
      #clientApiPage.api-v2 {
        --api-wide: calc(100% - 28px);
        padding-top: 14px;
      }

      .api-v2-hero,
      .api-v2-section,
      .api-v2-cta {
        padding: 22px 18px;
      }

      .api-v2-title {
        font-size: 36px;
      }

      .api-v2-visual,
      .api-v2-pills,
      .api-v2-stats,
      .api-v2-cards-8,
      .api-v2-categories,
      .api-v2-business,
      .api-v2-support,
      .api-v2-advantages,
      .api-v2-process {
        grid-template-columns: 1fr;
      }

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

      .api-v2-footer-bottom {
        display: block;
      }

      .api-v2-footer-bottom span:last-child {
        display: block;
        margin-top: 8px;
      }

      .api-v2-stat {
        border-right: 0;
        border-bottom: 1px solid var(--api-line);
      }

      .api-v2-stat:last-child {
        border-bottom: 0;
      }
    }

    #copyCommunityPage.community-v2,
    #strategyCustomPage.strategy-v2 {
      --svc-wide: min(1520px, calc(100vw - 56px));
      --svc-orange: #ff5a00;
      --svc-blue: #2563eb;
      --svc-green: #16a34a;
      --svc-purple: #7c3aed;
      --svc-ink: #0f172a;
      --svc-muted: #667085;
      --svc-line: #e8edf4;
      --svc-shadow: 0 18px 48px rgba(16, 24, 40, 0.055);
      padding: 18px 0 0;
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 90, 0, 0.055), transparent 24%),
        linear-gradient(180deg, #fff 0%, #fbfcfe 46%, #fff 100%);
    }

    #copyCommunityPage.community-v2 > .container > :not(.svc-v2-shell):not(.svc-footer),
    #strategyCustomPage.strategy-v2 > .container > :not(.svc-v2-shell):not(.svc-footer) {
      display: none !important;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .footer,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .footer {
      display: none;
    }

    .service-nav-only,
    .header-text-btn.service-register,
    .header-text-btn.service-demo {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .main-nav > a[data-route-link="signals"] {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .service-nav-only,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .service-nav-only {
      display: inline-flex;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-actions > button:nth-of-type(1),
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-actions > button:nth-of-type(1) {
      display: none;
    }

    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .search-field {
      display: none;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-text-btn.service-demo,
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-text-btn.service-register {
      display: inline-flex;
    }

    body:has(#copyCommunityPage.community-v2:not(.hidden)) .header-actions .header-text-btn[data-auth-open="login"],
    body:has(#strategyCustomPage.strategy-v2:not(.hidden)) .header-actions .header-text-btn[data-auth-open="login"] {
      background: #fff;
      color: #0f172a;
      border-color: #d0d5dd;
    }

    .svc-v2-shell {
      width: var(--svc-wide);
      margin: 0 auto;
      color: var(--svc-ink);
    }

    .svc-panel,
    .svc-card,
    .svc-table-panel,
    .svc-screen-card,
    .svc-footer-contact {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background:
        radial-gradient(circle at 92% 10%, rgba(255, 90, 0, 0.045), transparent 26%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(252, 253, 255, 0.95));
      box-shadow: var(--svc-shadow);
    }

    .svc-hero {
      min-height: 510px;
      display: grid;
      grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.18fr);
      align-items: center;
      gap: 44px;
      padding: 44px 38px 28px;
      margin-bottom: 14px;
    }

    .svc-title {
      max-width: 680px;
      margin: 0;
      color: var(--svc-ink);
      font-size: clamp(40px, 3.9vw, 68px);
      line-height: 1.10;
      letter-spacing: 0;
      font-weight: 950;
    }

    .svc-title span {
      color: var(--svc-orange);
    }

    .strategy-v2 .svc-title span {
      color: var(--svc-ink);
    }

    .svc-subtitle {
      margin: 16px 0 0;
      color: var(--svc-orange);
      font-size: clamp(20px, 1.8vw, 30px);
      line-height: 1.35;
      font-weight: 950;
    }

    .strategy-v2 .svc-subtitle {
      max-width: 690px;
      color: var(--svc-ink);
      font-size: clamp(19px, 1.55vw, 25px);
    }

    .svc-lead {
      max-width: 690px;
      margin: 22px 0 0;
      color: #344054;
      font-size: 16px;
      line-height: 1.88;
      font-weight: 820;
    }

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

    .svc-actions .btn {
      min-width: 146px;
      justify-content: center;
      border-radius: 7px;
    }

    .svc-hero-tags {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
      margin-top: 34px;
      padding-top: 8px;
    }

    .svc-hero-tag {
      min-height: 72px;
      display: grid;
      place-items: center;
      gap: 8px;
      color: #344054;
      text-align: center;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 850;
    }

    .svc-icon {
      --icon-color: var(--svc-orange);
      position: relative;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: inline-grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--icon-color) 28%, white);
      border-radius: 11px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--icon-color) 10%, white), #fff);
      box-shadow: 0 10px 20px rgba(16, 24, 40, 0.045);
    }

    .svc-icon::before,
    .svc-icon::after {
      content: "";
      position: absolute;
      display: block;
    }

    .svc-icon::before {
      width: 17px;
      height: 17px;
      border: 2px solid var(--icon-color);
      border-radius: 5px;
    }

    .svc-icon.code::before {
      width: 20px;
      height: 16px;
      border: 0;
      background:
        linear-gradient(135deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) left center / 9px 16px no-repeat,
        linear-gradient(45deg, transparent 44%, var(--icon-color) 45% 55%, transparent 56%) right center / 9px 16px no-repeat;
    }

    .svc-icon.flow::before {
      width: 20px;
      height: 16px;
      border: 0;
      background:
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left top / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) right center / 8px 8px no-repeat,
        radial-gradient(circle, var(--icon-color) 0 3px, transparent 4px) left bottom / 8px 8px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 4px / 10px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 6px 11px / 10px 2px no-repeat;
    }

    .svc-icon.shield::before {
      width: 19px;
      height: 22px;
      border: 0;
      border-radius: 0;
      background: var(--icon-color);
      clip-path: polygon(50% 0, 88% 14%, 84% 66%, 50% 100%, 16% 66%, 12% 14%);
    }

    .svc-icon.db::before {
      width: 20px;
      height: 18px;
      border-radius: 50% / 32%;
      box-shadow: 0 6px 0 -2px var(--icon-color), 0 12px 0 -2px var(--icon-color);
    }

    .svc-icon.chart::before {
      width: 20px;
      height: 18px;
      border: 0;
      border-left: 2px solid var(--icon-color);
      border-bottom: 2px solid var(--icon-color);
      background:
        linear-gradient(135deg, transparent 45%, var(--icon-color) 46% 52%, transparent 53%) 2px 1px / 17px 14px no-repeat;
    }

    .svc-icon.user::before {
      width: 20px;
      height: 22px;
      border: 0;
      background:
        radial-gradient(circle at 50% 25%, var(--icon-color) 0 5px, transparent 6px),
        radial-gradient(ellipse at 50% 94%, var(--icon-color) 0 11px, transparent 12px);
    }

    .svc-icon.cloud::before {
      width: 24px;
      height: 16px;
      border: 0;
      border-radius: 12px;
      background:
        radial-gradient(circle at 35% 45%, var(--icon-color) 0 8px, transparent 9px),
        radial-gradient(circle at 60% 34%, var(--icon-color) 0 9px, transparent 10px),
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 8px / 18px 8px no-repeat;
    }

    .svc-icon.card::before {
      width: 21px;
      height: 16px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 0 5px / 100% 2px no-repeat;
    }

    .svc-icon.server::before {
      width: 21px;
      height: 17px;
      border-radius: 4px;
      background:
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 5px / 13px 2px no-repeat,
        linear-gradient(var(--icon-color), var(--icon-color)) 4px 10px / 13px 2px no-repeat;
    }

    .svc-icon.bell::before {
      width: 18px;
      height: 19px;
      border-radius: 10px 10px 7px 7px;
    }

    .svc-section {
      margin-top: 14px;
      padding: 30px 28px 32px;
    }

    .svc-section-head {
      max-width: 760px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .svc-section-head h2,
    .svc-split-text h2 {
      position: relative;
      margin: 0;
      color: var(--svc-ink);
      font-size: clamp(28px, 2.25vw, 40px);
      line-height: 1.18;
      font-weight: 950;
    }

    .svc-section-head h2::after {
      content: "";
      display: block;
      width: 36px;
      height: 3px;
      margin: 12px auto 0;
      border-radius: 999px;
      background: var(--svc-orange);
    }

    .svc-section-head p,
    .svc-split-text p {
      margin: 10px 0 0;
      color: var(--svc-muted);
      font-size: 14px;
      line-height: 1.75;
      font-weight: 820;
    }

    .svc-grid-6,
    .svc-grid-7,
    .svc-grid-8,
    .svc-grid-5,
    .svc-grid-4 {
      display: grid;
      gap: 18px;
    }

    .svc-grid-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .svc-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .svc-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svc-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .svc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .svc-card {
      min-height: 145px;
      padding: 24px 18px;
      text-align: center;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .svc-card:hover,
    .svc-screen-card:hover,
    .svc-table-panel:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 20px 42px rgba(255, 90, 0, 0.09);
    }

    .svc-card .svc-icon {
      margin: 0 auto 14px;
    }

    .svc-card b {
      display: block;
      color: var(--svc-ink);
      font-size: 16px;
      line-height: 1.35;
      font-weight: 950;
    }

    .svc-card span {
      display: block;
      margin-top: 9px;
      color: var(--svc-muted);
      font-size: 13px;
      line-height: 1.58;
      font-weight: 780;
    }

    .svc-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      margin-top: 14px;
    }

    .svc-stat {
      min-height: 118px;
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 16px;
      align-items: center;
      padding: 22px 26px;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 24, 40, 0.045);
    }

    .svc-stat strong {
      display: block;
      color: var(--svc-ink);
      font-size: 30px;
      line-height: 1.05;
      font-weight: 950;
    }

    .svc-stat span {
      display: block;
      margin-top: 6px;
      color: var(--svc-muted);
      font-size: 13px;
      font-weight: 820;
    }

    .svc-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      overflow: hidden;
      border-radius: 10px;
    }

    .svc-table th,
    .svc-table td {
      padding: 15px 18px;
      border: 1px solid var(--svc-line);
      color: #475467;
      line-height: 1.55;
      text-align: center;
      font-weight: 820;
    }

    .svc-table th {
      color: var(--svc-ink);
      background: #f8fafc;
      font-weight: 950;
    }

    .svc-table td:first-child {
      color: var(--svc-ink);
      font-weight: 950;
    }

    .svc-table .highlight {
      color: var(--svc-orange);
      background: #fff7f1;
      font-weight: 950;
    }

    .svc-split {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
      gap: 24px;
      align-items: stretch;
    }

    .strategy-code-layout {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) 360px;
      gap: 18px;
      align-items: stretch;
    }

    .strategy-tabs {
      display: grid;
      gap: 10px;
    }

    .strategy-tabs span {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border: 1px solid var(--svc-line);
      border-radius: 8px;
      background: #fff;
      color: #344054;
      font-size: 13px;
      font-weight: 900;
    }

    .strategy-tabs span.active {
      border-color: #ffd8bd;
      color: var(--svc-orange);
      background: #fff7f1;
    }

    .svc-code-window {
      overflow: hidden;
      border-radius: 10px;
      background: #071323;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
    }

    .svc-code-head {
      display: flex;
      gap: 7px;
      align-items: center;
      min-height: 42px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: #94a3b8;
      font-size: 12px;
      font-weight: 850;
    }

    .svc-code-head i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #ff5a5f;
    }

    .svc-code-head i:nth-child(2) { background: #ffbd2e; }
    .svc-code-head i:nth-child(3) { background: #28c840; margin-right: 14px; }

    .svc-code {
      min-height: 260px;
      padding: 18px;
      color: #b9fbc0;
      font: 700 13px/1.65 Consolas, Monaco, monospace;
      white-space: pre;
    }

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

    .strategy-side-row {
      min-height: 54px;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: center;
      padding: 10px 14px;
      border: 1px solid var(--svc-line);
      border-radius: 9px;
      background: #fff;
      color: #475467;
      font-size: 13px;
      font-weight: 820;
    }

    .strategy-side-row b {
      display: block;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-mini-chart {
      min-height: 240px;
      padding: 20px;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
    }

    .svc-chart-line {
      position: relative;
      height: 145px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background: linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 34px;
    }

    .svc-chart-line::before {
      content: "";
      position: absolute;
      inset: 18px 12px 22px;
      background: linear-gradient(140deg, transparent 0 8%, var(--svc-green) 9% 10%, transparent 11% 20%, var(--svc-green) 21% 22%, transparent 23% 38%, var(--svc-green) 39% 40%, transparent 41% 55%, var(--svc-green) 56% 57%, transparent 58% 70%, var(--svc-green) 71% 72%, transparent 73%);
      filter: drop-shadow(0 8px 10px rgba(16, 185, 129, .12));
    }

    .svc-chart-kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .svc-chart-kpis div {
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      color: var(--svc-muted);
      font-size: 12px;
      font-weight: 820;
    }

    .svc-chart-kpis strong {
      display: block;
      margin-top: 4px;
      color: var(--svc-green);
      font-size: 20px;
      font-weight: 950;
    }

    .svc-process {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 20px;
      align-items: start;
    }

    .svc-process-step {
      position: relative;
      text-align: center;
    }

    .svc-process-step:not(:last-child)::after {
      content: "";
      position: absolute;
      left: calc(50% + 42px);
      top: 28px;
      width: calc(100% - 54px);
      border-top: 1px dashed #98a2b3;
    }

    .svc-process-step .svc-icon {
      margin-bottom: 12px;
    }

    .svc-process-step b {
      display: block;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-process-step span {
      display: block;
      margin-top: 7px;
      color: var(--svc-muted);
      font-size: 12px;
      line-height: 1.55;
      font-weight: 780;
    }

    .strategy-hero-art {
      position: relative;
      min-height: 420px;
      display: grid;
      gap: 18px;
      align-content: center;
    }

    .strategy-hero-top {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, .78fr);
      gap: 18px;
      align-items: end;
    }

    .strategy-code-card {
      transform: translateY(-8px);
    }

    .strategy-code-card .svc-code {
      min-height: 190px;
      color: #d1e9ff;
      line-height: 1.55;
    }

    .strategy-chart-card {
      margin-left: -46px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      background: #071323;
      color: #fff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
      transform: translateY(48px);
    }

    .strategy-chart-card h3 {
      margin: 0 0 12px;
      font-size: 14px;
      color: #fff;
    }

    .strategy-chart-card .svc-chart-line {
      height: 150px;
      border-color: rgba(255,255,255,.10);
      background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 30px;
    }

    .strategy-chart-card .svc-chart-line::before {
      background:
        linear-gradient(145deg, transparent 0 7%, #3b82f6 8% 9%, transparent 10% 20%, #3b82f6 21% 22%, transparent 23% 36%, #3b82f6 37% 38%, transparent 39% 52%, #3b82f6 53% 54%, transparent 55% 68%, #3b82f6 69% 70%, transparent 71%),
        linear-gradient(150deg, transparent 0 10%, #ff8a3d 11% 12%, transparent 13% 30%, #ff8a3d 31% 32%, transparent 33% 46%, #ff8a3d 47% 48%, transparent 49% 64%, #ff8a3d 65% 66%, transparent 67%);
    }

    .strategy-hero-flow {
      display: grid;
      grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 116px;
      gap: 8px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--svc-line);
      border-radius: 12px;
      background: rgba(255,255,255,.80);
      box-shadow: 0 12px 30px rgba(16,24,40,.055);
    }

    .strategy-flow-node,
    .strategy-api-stack span {
      min-height: 72px;
      display: grid;
      place-items: center;
      gap: 4px;
      padding: 10px;
      text-align: center;
      border: 1px solid var(--svc-line);
      border-radius: 10px;
      background: #fff;
      color: #475467;
      font-size: 12px;
      font-weight: 820;
    }

    .strategy-flow-node b,
    .strategy-api-stack b {
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .strategy-flow-arrow {
      color: var(--svc-orange);
      text-align: center;
      font-size: 22px;
      font-weight: 950;
    }

    .strategy-api-stack {
      display: grid;
      gap: 8px;
    }

    .community-hero-art {
      position: relative;
      min-height: 420px;
    }

    .community-rank,
    .community-profile,
    .community-feed,
    .community-phone {
      position: absolute;
      border: 1px solid var(--svc-line);
      border-radius: 12px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 22px 46px rgba(16,24,40,.09);
    }

    .community-rank {
      left: 0;
      top: 28px;
      width: 230px;
      padding: 16px;
    }

    .community-profile {
      left: 210px;
      top: 0;
      width: 450px;
      min-height: 250px;
      padding: 18px;
    }

    .community-feed {
      left: 350px;
      bottom: 10px;
      width: 330px;
      min-height: 142px;
      padding: 16px;
    }

    .community-phone {
      right: 0;
      top: 98px;
      width: 134px;
      height: 280px;
      border-radius: 24px;
      padding: 16px 10px;
    }

    .community-rank h3,
    .community-feed h3 {
      margin: 0 0 12px;
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .community-rank-row {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 8px;
      align-items: center;
      min-height: 34px;
      color: #344054;
      font-size: 12px;
      font-weight: 850;
    }

    .community-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ff9a4f, #ff5a00);
    }

    .community-profit {
      color: var(--svc-green);
      font-weight: 950;
    }

    .community-profile-head {
      display: grid;
      grid-template-columns: 52px 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .community-profile-name b {
      display: block;
      color: var(--svc-ink);
      font-size: 16px;
      font-weight: 950;
    }

    .community-profile-name span {
      color: var(--svc-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .community-profit-big {
      margin-top: 18px;
      color: var(--svc-green);
      font-size: 28px;
      font-weight: 950;
    }

    .community-curve {
      position: relative;
      height: 100px;
      margin-top: 14px;
      border-left: 1px solid #e6ebf2;
      border-bottom: 1px solid #e6ebf2;
      background: linear-gradient(#f1f4f8 1px, transparent 1px) 0 0 / 100% 25px;
    }

    .community-curve::before {
      content: "";
      position: absolute;
      inset: 18px 8px 18px;
      background: linear-gradient(140deg, transparent 0 8%, var(--svc-blue) 9% 10%, transparent 11% 18%, var(--svc-blue) 19% 20%, transparent 21% 32%, var(--svc-blue) 33% 34%, transparent 35% 48%, var(--svc-blue) 49% 50%, transparent 51% 66%, var(--svc-blue) 67% 68%, transparent 69%);
    }

    .community-feed-row {
      min-height: 42px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 10px;
      align-items: center;
      border-bottom: 1px solid #eef2f7;
      color: #475467;
      font-size: 12px;
      font-weight: 820;
    }

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

    .community-phone .community-avatar {
      margin: 0 auto 10px;
    }

    .community-phone-line {
      height: 8px;
      margin: 9px 12px;
      border-radius: 99px;
      background: #e8edf4;
    }

    .community-phone-chart {
      height: 74px;
      margin: 14px 6px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(255,255,255,.7));
    }

    .community-pages {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
    }

    .community-page-shot {
      min-height: 145px;
      border: 1px solid var(--svc-line);
      border-radius: 8px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(255,90,0,.16), rgba(37,99,235,.12)) border-box;
      box-shadow: 0 10px 24px rgba(16,24,40,.045);
      overflow: hidden;
    }

    .community-page-shot::before {
      content: "";
      display: block;
      height: 24px;
      border-bottom: 1px solid var(--svc-line);
      background: #f8fafc;
    }

    .community-page-shot::after {
      content: "";
      display: block;
      width: calc(100% - 28px);
      height: 88px;
      margin: 14px;
      border-radius: 8px;
      background:
        linear-gradient(90deg, #ff5a00 0 34%, transparent 35%) 0 0 / 100% 12px no-repeat,
        linear-gradient(#e7edf5, #e7edf5) 0 26px / 80% 8px no-repeat,
        linear-gradient(#e7edf5, #e7edf5) 0 44px / 58% 8px no-repeat,
        linear-gradient(135deg, rgba(37,99,235,.14), rgba(255,90,0,.12));
    }

    .community-pages-caption {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
      margin-top: 10px;
      text-align: center;
      color: var(--svc-ink);
      font-size: 13px;
      font-weight: 950;
    }

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

    .svc-arch-node {
      position: relative;
      min-height: 132px;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 16px;
      text-align: center;
      border: 1px solid var(--svc-line);
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16,24,40,.045);
    }

    .svc-arch-node:not(:last-child)::after {
      content: ">";
      position: absolute;
      right: -14px;
      top: 50%;
      color: var(--svc-orange);
      font-weight: 950;
      transform: translateY(-50%);
    }

    .svc-arch-node b {
      color: var(--svc-ink);
      font-size: 14px;
      font-weight: 950;
    }

    .svc-arch-node span {
      color: var(--svc-muted);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 780;
    }

    .svc-cta {
      min-height: 250px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 440px;
      align-items: center;
      gap: 32px;
      margin-top: 14px;
      padding: 42px 46px;
      color: #fff;
      border-radius: 0;
      background:
        radial-gradient(circle at 78% 50%, rgba(255,90,0,.34), transparent 30%),
        linear-gradient(135deg, #06152d, #08264b 56%, #06152d);
      box-shadow: 0 26px 58px rgba(16,24,40,.20);
    }

    .svc-cta h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(30px, 2.6vw, 46px);
      line-height: 1.22;
      font-weight: 950;
    }

    .svc-cta p {
      max-width: 760px;
      margin: 14px 0 0;
      color: rgba(255,255,255,.78);
      font-size: 16px;
      line-height: 1.76;
      font-weight: 800;
    }

    .svc-cta-art {
      position: relative;
      height: 210px;
      display: grid;
      place-items: center;
      perspective: 720px;
    }

    .svc-cta-art::before {
      content: "";
      position: absolute;
      width: 340px;
      height: 120px;
      border: 1px solid rgba(255, 138, 61, .36);
      border-radius: 50%;
      transform: rotate(-16deg);
    }

    .svc-cta-cube {
      width: 110px;
      height: 110px;
      border-radius: 18px;
      background: linear-gradient(145deg, #ff9a4f, #ff5a00 70%, #e54b00);
      transform: rotateX(58deg) rotateZ(45deg);
      box-shadow: 0 32px 52px rgba(255,90,0,.40);
      animation: svcCubeFloat 4.8s ease-in-out infinite;
    }

    .svc-footer {
      padding: 38px 8px 24px;
      color: rgba(255,255,255,.72);
      background: #06152d;
    }

    .svc-footer-inner {
      width: var(--svc-wide);
      margin: 0 auto;
    }

    .svc-footer-grid {
      display: grid;
      grid-template-columns: minmax(250px, 1.5fr) repeat(4, minmax(120px, .72fr)) minmax(230px, 1fr);
      gap: 30px;
      align-items: start;
    }

    .svc-footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-weight: 950;
    }

    .svc-footer-logo {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--svc-orange);
      font-weight: 950;
    }

    .svc-footer p {
      max-width: 320px;
      margin: 16px 0 0;
      font-size: 13px;
      line-height: 1.75;
      font-weight: 780;
    }

    .svc-footer h3 {
      margin: 0 0 12px;
      color: #fff;
      font-size: 13px;
      font-weight: 950;
    }

    .svc-footer a,
    .svc-footer span {
      display: block;
      margin-top: 9px;
      color: rgba(255,255,255,.68);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 820;
      text-decoration: none;
    }

    .svc-footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: 12px;
      font-weight: 800;
    }

    /* 产品与服务页：统一卡片标题为“图标 + 标题”同排 */
    #copyPage.copy-v2 .copy-v2-module,
    #copyPage.copy-v2 .copy-v2-scenario,
    #clientApiPage.api-v2 .api-v2-card,
    #copyCommunityPage.community-v2 .svc-card,
    #strategyCustomPage.strategy-v2 .svc-card,
    #copyCommunityPage.community-v2 .svc-arch-node,
    #strategyCustomPage.strategy-v2 .svc-arch-node,
    #strategyCustomPage.strategy-v2 .svc-process-step {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-content: start;
      align-items: center;
      place-items: initial;
      column-gap: 12px;
      row-gap: 9px;
      text-align: left;
    }

    #copyPage.copy-v2 .copy-v2-module > .copy-v2-icon,
    #copyPage.copy-v2 .copy-v2-scenario > .copy-v2-icon,
    #clientApiPage.api-v2 .api-v2-card > .api-v2-icon,
    #copyCommunityPage.community-v2 .svc-card > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-card > .svc-icon,
    #copyCommunityPage.community-v2 .svc-arch-node > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-arch-node > .svc-icon,
    #strategyCustomPage.strategy-v2 .svc-process-step > .svc-icon {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      justify-self: start;
      display: inline-grid;
      margin: 0;
    }

    #copyPage.copy-v2 .copy-v2-module > b,
    #copyPage.copy-v2 .copy-v2-scenario > b,
    #clientApiPage.api-v2 .api-v2-card > b,
    #copyCommunityPage.community-v2 .svc-card > b,
    #strategyCustomPage.strategy-v2 .svc-card > b,
    #copyCommunityPage.community-v2 .svc-arch-node > b,
    #strategyCustomPage.strategy-v2 .svc-arch-node > b,
    #strategyCustomPage.strategy-v2 .svc-process-step > b {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      min-width: 0;
      margin: 0;
      text-align: left;
    }

    #copyPage.copy-v2 .copy-v2-module > span:not(.copy-v2-icon),
    #copyPage.copy-v2 .copy-v2-scenario > span:not(.copy-v2-icon),
    #clientApiPage.api-v2 .api-v2-card > span:not(.api-v2-icon),
    #copyCommunityPage.community-v2 .svc-card > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-card > span:not(.svc-icon),
    #copyCommunityPage.community-v2 .svc-arch-node > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-arch-node > span:not(.svc-icon),
    #strategyCustomPage.strategy-v2 .svc-process-step > span:not(.svc-icon) {
      grid-column: 1 / -1;
      grid-row: auto;
      margin-top: 0;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-content: start;
      align-items: center;
      column-gap: 12px;
      row-gap: 8px;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step-no {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: center;
    }

    #clientApiPage.api-v2 .api-v2-step-icon {
      grid-column: 1;
      grid-row: 2;
      margin: 0;
      justify-self: start;
    }

    #clientApiPage.api-v2 .api-v2-step > b {
      grid-column: 2;
      grid-row: 2;
      align-self: center;
      min-width: 0;
      text-align: left;
    }

    #clientApiPage.api-v2 .api-v2-step > span:not(.api-v2-step-no) {
      grid-column: 1 / -1;
      grid-row: auto;
      text-align: left;
    }

    @keyframes svcCubeFloat {
      0%,100% { transform: rotateX(58deg) rotateZ(45deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(45deg) translateY(-8px); }
    }

    @media (max-width: 1280px) {
      #copyCommunityPage.community-v2,
      #strategyCustomPage.strategy-v2 {
        --svc-wide: min(1120px, calc(100vw - 36px));
      }

      .svc-hero,
      .svc-split,
      .strategy-code-layout,
      .strategy-hero-top,
      .strategy-hero-flow,
      .svc-cta {
        grid-template-columns: 1fr;
      }

      .strategy-chart-card {
        margin-left: 0;
        transform: none;
      }

      .svc-grid-8,
      .svc-grid-7,
      .svc-grid-6,
      .svc-grid-5,
      .svc-grid-4,
      .svc-process,
      .svc-arch,
      .community-pages,
      .community-pages-caption {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .svc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .svc-process-step::after,
      .svc-arch-node::after {
        display: none;
      }
    }

    @media (max-width: 760px) {
      #copyCommunityPage.community-v2,
      #strategyCustomPage.strategy-v2 {
        --svc-wide: calc(100% - 28px);
      }

      .svc-hero,
      .svc-section,
      .svc-cta {
        padding: 22px 18px;
      }

      .svc-title {
        font-size: 36px;
      }

      .svc-hero-tags,
      .svc-grid-8,
      .svc-grid-7,
      .svc-grid-6,
      .svc-grid-5,
      .svc-grid-4,
      .svc-stats,
      .svc-process,
      .svc-arch,
      .community-pages,
      .community-pages-caption,
      .svc-footer-grid {
        grid-template-columns: 1fr;
      }

      .community-hero-art {
        min-height: 760px;
      }

      .strategy-hero-art {
        min-height: auto;
      }

      .community-rank,
      .community-profile,
      .community-feed,
      .community-phone {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin-top: 14px;
      }

      .svc-footer-bottom {
        display: block;
      }
    }

    @media (max-width: 1220px) {
      .header-inner { grid-template-columns: 190px minmax(0, 1fr); height: auto; min-height: 64px; padding: 10px 0; }
      .site-header { height: auto; }
      .header-actions { grid-column: 1 / -1; justify-content: stretch; }
      .search-field { flex: 1; width: auto; }
      .hero,
      .home-analytics,
      .home-story-grid,
      .signals-layout,
      .signal-market-layout,
      .signal-market-search,
      .signal-preview-grid,
      .signal-account-layout,
      .signal-detail-top,
      .signal-detail-layout,
      .preview-grid,
      .detail-grid,
      .data-service-grid,
      .faq-grid,
      .product-hero-panel,
      .product-split,
      .product-layout,
      .product-grid-2,
      .product-grid-3,
      .download-panel,
      .product-cta { grid-template-columns: 1fr; }
      .product-side { position: static; }
      .signal-left-nav { position: static; min-height: auto; }
      .signal-account-side { position: static; }
      .account-profit-bottom { grid-template-columns: 1fr; }
      .signal-main-panel { padding: 16px; }
      .signal-filter-panel { position: static; }
      .detail-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .pricing-layout,
      .leader-grid,
      .home-capability-grid,
      .flow-grid,
      .service-strip,
      .product-grid-4,
      .product-checklist,
      .diagram-lanes,
      .product-feature-groups,
      .product-flow,
      .product-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .diagram-lane::after { display: none; }
      .product-flow-step::after { display: none; }
    }

    @media (min-width: 1600px) {
      :root { --page-gutter: 36px; }
      .container { width: min(1520px, calc(100vw - 72px)); }
      .header-inner { width: min(1440px, calc(100% - (var(--page-gutter) * 2))); max-width: 1440px; }
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .hero { grid-template-columns: 1fr; }
      .data-table th,
      .data-table td { padding-left: 16px; padding-right: 16px; }
    }

    @media (max-width: 760px) {
      :root { --page-gutter: 12px; }
      .container { width: min(100% - 24px, var(--wide)); }
      .header-inner,
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .header-inner { display: flex; flex-direction: column; align-items: stretch; }
      .main-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
      .main-nav::-webkit-scrollbar { display: none; }
      .nav-menu { left: 0; width: min(330px, calc(100vw - 24px)); transform: translate(0, 8px); }
      .nav-dropdown:hover .nav-menu,
      .nav-dropdown:focus-within .nav-menu { transform: translate(0, 0); }
      .header-actions { flex-wrap: wrap; }
      .icon-btn { width: 36px; height: 36px; }
      .search-field { order: 3; width: 100%; flex-basis: 100%; }
      .hero { grid-template-columns: 1fr; min-height: auto; }
      .hero { padding: 42px 0 24px; }
      .hero h1 { font-size: clamp(30px, 9vw, 36px); }
      .hero p {
        max-width: 340px;
        font-size: 13px;
        line-height: 1.75;
        overflow-wrap: anywhere;
      }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .drawdown-summary,
      .analytics-insight-row { grid-template-columns: 1fr; }
      .account-profit-module { padding: 16px; }
      .account-profit-head { display: grid; gap: 14px; }
      .account-profit-title { grid-template-columns: 48px minmax(0, 1fr); }
      .account-profit-icon { width: 48px; height: 48px; font-size: 21px; }
      .account-periods { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .account-periods::-webkit-scrollbar { display: none; }
      .account-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .account-kpi-card { min-height: 92px; padding: 12px; grid-template-columns: 38px minmax(0, 1fr); }
      .account-kpi-icon { width: 38px; height: 38px; font-size: 17px; }
      .snapshot-bar-row { grid-template-columns: 52px 82px minmax(80px, 1fr); gap: 7px; }
      .account-main-chart .equity-svg { height: 340px; min-height: 340px; }
      .account-profit-bottom { grid-template-columns: 1fr; }
      .hero-network { height: 178px; margin-top: 22px; }
      .network-node {
        width: 46px;
        height: 46px;
        border-width: 4px;
        font-size: 10px;
      }
      .network-node.primary {
        width: 64px;
        height: 64px;
        left: calc(50% - 32px);
        font-size: 20px;
      }
      .network-node:nth-child(2) { left: 7%; bottom: 16px; }
      .network-node:nth-child(3) { left: 20%; bottom: 88px; }
      .network-node:nth-child(4) { left: 33%; bottom: 48px; }
      .network-node:nth-child(5) { right: 33%; bottom: 88px; }
      .network-node:nth-child(6) { right: 20%; bottom: 48px; }
      .network-node:nth-child(7) { right: 7%; bottom: 92px; }
      .network-node:nth-child(8) { display: none; }
      .home-stat-band { margin-top: 0; padding: 12px; }
      .stats-grid,
      .metric-grid,
      .detail-kpi-row,
      .mql-stat-grid,
      .mql-stats-grid,
      .mql-allocation-section,
      .mql-risk-range-grid,
      .mql-risk-metrics,
      .risk-split-grid,
      .analytics-pair-grid,
      .quant-metric-grid,
      .pricing-layout,
      .leader-grid,
      .home-capability-grid,
      .home-story-grid,
      .flow-grid,
      .service-strip,
      .account-summary,
      .subgrid-2,
      .subgrid-3 { grid-template-columns: 1fr; }
      .stats-grid,
      .metric-grid,
      .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .filters { grid-template-columns: 1fr; }
      .signals-layout { gap: 12px; }
      .signal-market-layout { border-radius: 10px; }
      .signal-left-nav { padding: 12px; order: 2; }
      .signal-left-promo { display: none; }
      .signal-main-panel { padding: 14px; order: 1; }
      .signal-market-hero { padding: 4px 0 14px; }
      .signal-market-hero h1,
      .signal-detail-summary h1 { font-size: 24px; }
      .signal-market-hero h1 { font-size: 22px; line-height: 1.18; }
      .signal-results-head { display: grid; align-items: start; }
      .sort-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
      .sort-pills::-webkit-scrollbar { display: none; }
      .signal-filter-panel { padding: 12px; }
      .signal-preview-grid { grid-template-columns: 1fr; }
      .signal-detail-top,
      .signal-account-layout,
      .signal-detail-layout { grid-template-columns: 1fr; }
      .mql-mobile-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .signal-side-card { display: none; }
      .panel-title { align-items: flex-start; }
      #signalsListView .table-wrap { display: none; }
      .signal-card-grid { grid-template-columns: 1fr; }
      .mobile-signal-list {
        display: grid;
        gap: 10px;
        padding: 12px;
        background: #fff;
      }
      .mobile-signal-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        padding: 12px;
      }
      .mobile-signal-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .mobile-signal-title {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .mobile-signal-title strong,
      .mobile-signal-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mobile-signal-title strong { display: block; max-width: 180px; }
      .mobile-signal-title span { display: block; max-width: 210px; color: var(--muted); font-size: 12px; font-weight: 760; }
      .mobile-signal-metrics {
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-signal-metrics div {
        min-height: 58px;
        padding: 8px;
        border-radius: 8px;
        background: #f8fafc;
        border: 1px solid #edf2f7;
      }
      .mobile-signal-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; }
      .mobile-signal-metrics strong { display: block; margin-top: 5px; font-size: 15px; }
      .mobile-signal-actions {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .preview-grid { grid-template-columns: 1fr; }
      .detail-head { display: grid; gap: 14px; align-items: stretch; }
      .detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .detail-actions > * { justify-self: start; }
      .detail-actions .btn { grid-column: 1 / -1; }
      .detail-actions .btn { justify-self: stretch; }
      .tabs-line {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 2px;
      }
      .tabs-line::-webkit-scrollbar { display: none; }
      .metric-card { min-height: 74px; padding: 13px; }
      .metric-card strong { font-size: 18px; }
      .chart-card { padding: 13px; }
      .equity-svg { height: 180px; }
      .signal-primary-chart .equity-svg { height: 320px; }
      .drawdown-bars { height: auto; }
      .drawdown-bars .echart-panel,
      .analytics-pair-grid .echart-panel { height: 220px; min-height: 200px; }
      .heatmap .echart-panel { height: 96px; min-height: 96px; }
      .donut-layout { grid-template-columns: 110px minmax(0, 1fr); }
      .donut { width: 100px; }
      .account-summary { gap: 8px; }
      .price-card { min-height: auto; }
      .service-strip { padding: 14px; }
      .footer { padding: 14px 12px; }
    }

    @media (max-width: 420px) {
      :root { --page-gutter: 10px; }
      .container { width: min(100% - 20px, var(--wide)); }
      .header-inner,
      #signalsPage > .container { width: calc(100% - (var(--page-gutter) * 2)); max-width: none; }
      #homePage > .container { width: 100%; max-width: none; }
      .brand strong { font-size: 16px; }
      .brand span:last-child { font-size: 10px; }
      .main-nav a { padding: 0 11px; font-size: 13px; }
      .btn { width: 100%; }
      .hero { padding-top: 12px; }
      .hero h1 { font-size: 29px; }
      .hero-network { height: 150px; }
      .ranking-card { padding: 12px; }
      .ranking-row { grid-template-columns: 22px minmax(0, 1fr); }
      .ranking-row b { grid-column: 2; margin-top: 2px; }
      .stat-card { min-height: 92px; padding: 14px; }
      .stat-card strong { font-size: 24px; }
      .signal-market-search,
      .detail-kpi-row,
      .mql-stat-grid,
      .mql-stats-grid,
      .mql-allocation-section,
      .mql-risk-range-grid,
      .mql-risk-metrics,
      .risk-split-grid,
      .account-kpi-grid { grid-template-columns: 1fr; }
      .account-main-chart .equity-svg { height: 300px; min-height: 300px; }
      .account-status-row { grid-template-columns: 28px minmax(0, 1fr); }
      .account-status-value { grid-column: 2; }
      .signal-market-hero h1,
      .signal-detail-summary h1 { font-size: 22px; }
      .signal-copy-card { padding: 14px; }
      .mobile-signal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mobile-signal-actions { grid-template-columns: 1fr; }
      .detail-actions { grid-template-columns: 1fr; }
      .modal-root { padding: 12px; }
      .product-page { --product-wide: calc(100% - 28px); }
      .product-hero { min-height: auto; padding: 20px; }
      .product-title { font-size: 30px; }
      .product-lead { font-size: 15px; }
      .product-actions,
      .product-cta,
      .download-meta { display: grid; grid-template-columns: 1fr; }
      .product-subnav {
        width: calc(100% - 28px);
        margin: -12px auto 18px;
      }
      .product-layout {
        width: calc(100% - 28px);
      }
      .product-grid-4,
      .product-grid-3,
      .product-checklist,
      .diagram-lanes,
      .product-feature-groups,
      .product-flow,
      .product-faq-grid { grid-template-columns: 1fr; }
      .product-scenario-list li { grid-template-columns: 1fr; gap: 6px; }
      .product-section-head { display: block; }
      .product-panel,
      .product-diagram,
      .product-table-panel,
      .product-example-panel,
      .product-timeline-panel,
      .product-price-card,
      .product-service-card { padding: 20px; }
      .product-timeline li { grid-template-columns: 1fr; gap: 8px; }
    }
    }
    /* =========================================
       首页暗黑科技风：仅作用于首页，不影响信号页和其它页面
       ========================================= */
    #homePage.home-dark-tech {
      --ink: #f8fafc;
      --ink-2: #e2e8f0;
      --muted: #94a3b8;
      --line: rgba(255, 255, 255, 0.10);
      --panel: rgba(17, 24, 39, 0.66);
      --soft: rgba(30, 41, 59, 0.45);
      --dark-bg: #090e17;
      --glass-blur: blur(16px);
      --brand-glow: rgba(255, 90, 0, 0.28);
      position: relative;
      isolation: isolate;
      background: var(--dark-bg);
      color: var(--ink);
    }

    #homePage.home-dark-tech::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    #homePage.home-dark-tech > .container {
      position: relative;
      z-index: 1;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) {
      background: #090e17 !important;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) main,
    body:has(#homePage:not(.hidden).home-dark-tech) #homePage,
    body:has(#homePage:not(.hidden).home-dark-tech) #homePage > .container {
      background: #090e17 !important;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .site-header {
      background: rgba(9, 14, 23, 0.76);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .brand {
      color: #fff;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .brand span:last-child {
      color: #94a3b8;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .main-nav a {
      color: #e2e8f0;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .main-nav a.active,
    body:has(#homePage:not(.hidden).home-dark-tech) .main-nav a:hover {
      background: rgba(255, 90, 0, 0.12);
      color: var(--brand);
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .search-field {
      background: rgba(255, 255, 255, 0.055);
      border-color: rgba(255, 255, 255, 0.10);
      color: #94a3b8;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .search-field input {
      color: #fff;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .search-field:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 12px rgba(255, 90, 0, 0.24);
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .header-text-btn {
      background: rgba(255, 255, 255, 0.055);
      border-color: rgba(255, 255, 255, 0.10);
      color: #e2e8f0;
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .header-text-btn:hover,
    body:has(#homePage:not(.hidden).home-dark-tech) .header-text-btn.active {
      background: rgba(255, 90, 0, 0.12);
      border-color: rgba(255, 90, 0, 0.34);
      color: var(--brand);
    }

    body:has(#homePage:not(.hidden).home-dark-tech) .footer {
      background: #090e17;
      border-top-color: rgba(255, 255, 255, 0.08);
      color: #94a3b8;
    }

    #homePage.home-dark-tech .home-v4-hero {
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 90, 0, 0.18), transparent 42%),
        radial-gradient(circle at 15% 80%, rgba(23, 92, 211, 0.16), transparent 32%),
        radial-gradient(circle at 86% 70%, rgba(7, 148, 85, 0.10), transparent 30%),
        linear-gradient(180deg, #090e17 0%, #0d1422 70%, #090e17 100%);
    }

    #homePage.home-dark-tech .home-v4-hero::before {
      border-color: rgba(255, 90, 0, 0.20);
    }

    #homePage.home-dark-tech .home-v4-hero::after {
      display: none;
    }

    #homePage.home-dark-tech .home-v4-eyebrow,
    #homePage.home-dark-tech .home-v4-kicker,
    #homePage.home-dark-tech .home-v4-tags span {
      background: rgba(255, 90, 0, 0.10);
      border-color: rgba(255, 90, 0, 0.32);
      color: #ffb27a;
    }

    #homePage.home-dark-tech .home-v4-fx-brand {
      background:
        radial-gradient(circle at 16% 12%, rgba(255, 90, 0, 0.20), transparent 34%),
        rgba(17, 24, 39, 0.62);
      border-color: rgba(255, 90, 0, 0.34);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), 0 0 34px rgba(255, 90, 0, 0.10);
    }

    #homePage.home-dark-tech .home-v4-fx-brand::before {
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.16) 42%, transparent 72%);
    }

    #homePage.home-dark-tech .home-v4-title,
    #homePage.home-dark-tech .home-v4-fx-name,
    #homePage.home-dark-tech .home-v4-fx-slogan,
    #homePage.home-dark-tech .home-v4-section h2,
    #homePage.home-dark-tech .home-v4-cta h2,
    #homePage.home-dark-tech .home-v4-map-center strong,
    #homePage.home-dark-tech .home-v4-map-card strong,
    #homePage.home-dark-tech .home-v4-rail-item strong,
    #homePage.home-dark-tech .home-v4-primary-service h3,
    #homePage.home-dark-tech .home-v4-service-card h3,
    #homePage.home-dark-tech .home-v4-copy-feature h3,
    #homePage.home-dark-tech .home-v4-community-box strong,
    #homePage.home-dark-tech .home-v4-flow-node b,
    #homePage.home-dark-tech .home-v4-scenario h3 {
      color: #fff;
    }

    #homePage.home-dark-tech .home-v4-title span,
    #homePage.home-dark-tech .home-v4-map-center b {
      color: var(--brand);
    }

    #homePage.home-dark-tech .home-v4-lead,
    #homePage.home-dark-tech .home-v4-fx-sub,
    #homePage.home-dark-tech .home-v4-section-head p,
    #homePage.home-dark-tech .home-v4-copy-text p,
    #homePage.home-dark-tech .home-v4-cta p,
    #homePage.home-dark-tech .home-v4-map-card small,
    #homePage.home-dark-tech .home-v4-primary-service p,
    #homePage.home-dark-tech .home-v4-service-card p,
    #homePage.home-dark-tech .home-v4-copy-feature p,
    #homePage.home-dark-tech .home-v4-community-box span,
    #homePage.home-dark-tech .home-v4-flow-node span,
    #homePage.home-dark-tech .home-v4-scenario p {
      color: #cbd5e1;
    }

    #homePage.home-dark-tech .home-v4-map,
    #homePage.home-dark-tech .home-v4-rail,
    #homePage.home-dark-tech .home-v4-primary-service,
    #homePage.home-dark-tech .home-v4-service-card,
    #homePage.home-dark-tech .home-v4-wide-panel,
    #homePage.home-dark-tech .home-v4-table-panel,
    #homePage.home-dark-tech .home-v4-community-panel,
    #homePage.home-dark-tech .home-v4-arch,
    #homePage.home-dark-tech .home-v4-scenario,
    #homePage.home-dark-tech .home-v4-cta {
      background: var(--panel);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-color: var(--line);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    }

    #homePage.home-dark-tech .home-v4-map::after {
      border-color: rgba(255, 255, 255, 0.12);
    }

    #homePage.home-dark-tech .home-v4-map::before {
      background: linear-gradient(90deg, transparent, rgba(255, 90, 0, 0.42) 10%, rgba(255, 90, 0, 0.42) 90%, transparent);
      box-shadow: 0 0 14px rgba(255, 90, 0, 0.22);
    }

    #homePage.home-dark-tech .home-v4-map-center {
      background:
        radial-gradient(circle at 85% 18%, rgba(255, 90, 0, 0.18), transparent 34%),
        rgba(255, 90, 0, 0.08);
      border-color: rgba(255, 90, 0, 0.36);
      box-shadow: 0 0 32px rgba(255, 90, 0, 0.16);
    }

    #homePage.home-dark-tech .home-v4-map-card,
    #homePage.home-dark-tech .home-v4-copy-feature,
    #homePage.home-dark-tech .home-v4-community-box,
    #homePage.home-dark-tech .home-v4-flow-node,
    #homePage.home-dark-tech .home-v4-service-points div {
      background: rgba(255, 255, 255, 0.035);
      border-color: var(--line);
    }

    #homePage.home-dark-tech .home-v4-map-card span,
    #homePage.home-dark-tech .home-v4-service-mark {
      background: rgba(255, 90, 0, 0.10);
      border-color: rgba(255, 90, 0, 0.34);
      color: #ffb27a;
    }

    #homePage.home-dark-tech .home-v4-service-points div {
      color: #e2e8f0;
    }

    #homePage.home-dark-tech .home-v4-rail-item {
      border-right-color: var(--line);
    }

    #homePage.home-dark-tech .home-v4-rail-item span,
    #homePage.home-dark-tech .home-v4-rail-item small {
      color: #94a3b8;
    }

    #homePage.home-dark-tech .home-v4-rail-item small,
    #homePage.home-dark-tech .home-v4-green {
      color: #34d399;
    }

    #homePage.home-dark-tech .btn {
      background: rgba(255, 255, 255, 0.055);
      border-color: var(--line);
      color: var(--ink);
    }

    #homePage.home-dark-tech .btn:hover {
      background: rgba(255, 255, 255, 0.10);
    }

    #homePage.home-dark-tech .btn.primary {
      background: var(--brand);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 0 24px var(--brand-glow);
    }

    #homePage.home-dark-tech .btn.primary:hover {
      box-shadow: 0 0 34px rgba(255, 90, 0, 0.52);
      filter: brightness(1.08);
    }

    #homePage.home-dark-tech .btn.soft {
      background: rgba(255, 90, 0, 0.10);
      border-color: rgba(255, 90, 0, 0.34);
      color: #ffb27a;
    }

    #homePage.home-dark-tech .home-v4-service-card,
    #homePage.home-dark-tech .home-v4-map-card,
    #homePage.home-dark-tech .home-v4-copy-feature,
    #homePage.home-dark-tech .home-v4-scenario {
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }

    #homePage.home-dark-tech .home-v4-service-card:hover,
    #homePage.home-dark-tech .home-v4-map-card:hover,
    #homePage.home-dark-tech .home-v4-copy-feature:hover,
    #homePage.home-dark-tech .home-v4-scenario:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 90, 0, 0.55);
      box-shadow:
        0 16px 36px rgba(255, 90, 0, 0.14),
        inset 0 0 20px rgba(255, 90, 0, 0.045);
    }

    #homePage.home-dark-tech .home-v4-api-table th,
    #homePage.home-dark-tech .home-v4-api-table td {
      border-bottom-color: var(--line);
    }

    #homePage.home-dark-tech .home-v4-api-table th {
      background: rgba(255, 255, 255, 0.045);
      color: #cbd5e1;
    }

    #homePage.home-dark-tech .home-v4-api-table td {
      color: #cbd5e1;
    }

    #homePage.home-dark-tech .home-v4-api-table td:first-child,
    #homePage.home-dark-tech .home-v4-blue {
      color: #93c5fd;
    }

    #homePage.home-dark-tech .home-v4-orange {
      color: #ffb27a;
    }

    #homePage.home-dark-tech .home-v4-flow-node::after {
      background: var(--brand);
      box-shadow: 0 0 10px var(--brand);
      opacity: .55;
    }

    #homePage.home-dark-tech .home-v4-risk {
      background: rgba(255, 90, 0, 0.08);
      border-color: rgba(255, 90, 0, 0.28);
      color: #ffcfb0;
    }

    @media (max-width: 720px) {
      #homePage.home-dark-tech .home-v4-rail-item {
        border-right: 0;
        border-bottom-color: var(--line);
      }
    }

    /* 首页暗黑视觉兜底：覆盖早期浅色卡片背景 */
    #homePage.home-dark-tech .home-v4-map,
    #homePage.home-dark-tech .home-v4-rail,
    #homePage.home-dark-tech .home-v4-primary-service,
    #homePage.home-dark-tech .home-v4-service-card,
    #homePage.home-dark-tech .home-v4-wide-panel,
    #homePage.home-dark-tech .home-v4-table-panel,
    #homePage.home-dark-tech .home-v4-community-panel,
    #homePage.home-dark-tech .home-v4-arch,
    #homePage.home-dark-tech .home-v4-scenario,
    #homePage.home-dark-tech .home-v4-cta {
      background: rgba(17, 24, 39, 0.72) !important;
      border-color: rgba(255, 255, 255, 0.10) !important;
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
    }

    #homePage.home-dark-tech .home-v4-map-card,
    #homePage.home-dark-tech .home-v4-map-center,
    #homePage.home-dark-tech .home-v4-copy-feature,
    #homePage.home-dark-tech .home-v4-community-box,
    #homePage.home-dark-tech .home-v4-flow-node,
    #homePage.home-dark-tech .home-v4-service-points div {
      background: rgba(15, 23, 42, 0.72) !important;
      border-color: rgba(255, 255, 255, 0.10) !important;
    }

    #homePage.home-dark-tech .home-v4-map-center {
      background:
        radial-gradient(circle at 85% 18%, rgba(255, 90, 0, 0.20), transparent 34%),
        rgba(255, 90, 0, 0.10) !important;
      border-color: rgba(255, 90, 0, 0.38) !important;
    }

    #homePage.home-dark-tech .home-v4-map-card span,
    #homePage.home-dark-tech .home-v4-service-mark {
      background: rgba(255, 90, 0, 0.12) !important;
      border-color: rgba(255, 90, 0, 0.36) !important;
      color: #ffb27a !important;
    }
    #homePage.home-v4 {
      background:
        linear-gradient(180deg, #ffffff 0%, #fffaf6 48%, #ffffff 100%);
    }

    #homePage .home-v4-hero,
    #homePage > .container > .home-v4-rail,
    #homePage > .container > .home-v4-section,
    #homePage > .container > .home-v4-risk,
    #homeAdvantages {
      display: none !important;
    }

    .home-fx-hero {
      position: relative;
      overflow: hidden;
      padding: 28px 0 18px;
      border-bottom: 1px solid #f0e6df;
      background:
        linear-gradient(110deg, rgba(255, 90, 0, 0.075) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, #fff 0%, #fffaf7 100%);
    }

    .home-fx-hero::before,
    .home-fx-hero::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .home-fx-hero::before {
      left: -120px;
      top: -270px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(255, 90, 0, 0.16);
      border-radius: 50%;
      box-shadow: 0 0 0 72px rgba(255, 90, 0, 0.045);
    }

    .home-fx-hero::after {
      right: -280px;
      bottom: -360px;
      width: 680px;
      height: 680px;
      border: 1px solid rgba(255, 90, 0, 0.12);
      border-radius: 50%;
    }

    .home-fx-hero-inner,
    .home-fx-section {
      position: relative;
      z-index: 1;
      width: min(1440px, calc(100% - 48px));
      margin: 0 auto;
    }

    .home-fx-hero-grid {
      min-height: 455px;
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(500px, 1.04fr);
      align-items: center;
      gap: 58px;
    }

    .home-fx-copy {
      max-width: 720px;
      min-width: 0;
    }

    .home-fx-eyebrow {
      width: fit-content;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid #ffd8bd;
      border-radius: 10px;
      color: var(--brand);
      background: rgba(255, 247, 241, 0.92);
      font-size: 13px;
      font-weight: 950;
    }

    .home-fx-title {
      margin: 22px 0 0;
      color: #121827;
      font-size: clamp(58px, 5.8vw, 88px);
      line-height: 1;
      letter-spacing: 0;
      font-weight: 950;
    }

    .home-fx-title span {
      color: var(--brand);
    }

    .home-fx-slogan {
      max-width: 700px;
      margin-top: 18px;
      color: #111827;
      font-size: clamp(28px, 2.55vw, 40px);
      line-height: 1.18;
      letter-spacing: 0;
      font-weight: 950;
    }

    .home-fx-slogan span {
      display: inline;
    }

    .home-fx-slogan span + span::before {
      content: " ";
    }

    .home-fx-lead {
      max-width: 650px;
      margin: 22px 0 0;
      color: #536176;
      font-size: 17px;
      line-height: 1.9;
      font-weight: 800;
    }

    .home-fx-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .home-fx-actions .btn {
      min-width: 156px;
      justify-content: center;
      border-radius: 7px;
    }

    .home-fx-actions .btn.soft {
      border-color: #ff9f6a;
      background: rgba(255, 255, 255, 0.76);
    }

    .home-fx-benefits {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 30px;
      margin-top: 26px;
    }

    .home-fx-benefit {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #536176;
      font-size: 13px;
      font-weight: 850;
    }

    .home-fx-benefit::before {
      content: "";
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      border: 2px solid #ff873d;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 90, 0, 0.12), rgba(255, 255, 255, 0.8));
      box-shadow: inset 0 0 0 4px #fff;
    }

    .home-fx-visual {
      --fx-tilt-x: 0deg;
      --fx-tilt-y: 0deg;
      --fx-move-x: 0px;
      --fx-move-y: 0px;
      --fx-node-x: 0px;
      --fx-node-y: 0px;
      --fx-scale: 1;
      position: relative;
      min-height: 420px;
      display: grid;
      place-items: center;
      overflow: hidden;
      perspective: 1100px;
      isolation: isolate;
    }

    .home-fx-visual::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 90, 0, 0.15), rgba(255, 90, 0, 0.045) 44%, transparent 68%),
        radial-gradient(circle at 58% 42%, rgba(29, 78, 216, 0.08), transparent 46%);
      transform: translate(-50%, -50%);
      filter: blur(2px);
      animation: fxCoreGlow 4.8s ease-in-out infinite;
    }

    .home-fx-connection-map {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .home-fx-signal-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 248px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255, 90, 0, 0.68), rgba(37, 99, 235, 0.28), transparent);
      background-size: 220% 100%;
      opacity: 0.72;
      transform-origin: left center;
      filter: drop-shadow(0 0 10px rgba(255, 90, 0, 0.22));
      animation: fxSignalFlow 2.8s linear infinite;
    }

    .home-fx-signal-line.one {
      transform: translate(-8px, -22px) rotate(-25deg);
    }

    .home-fx-signal-line.two {
      width: 226px;
      transform: translate(-12px, 24px) rotate(25deg);
      animation-delay: -0.7s;
    }

    .home-fx-signal-line.three {
      width: 174px;
      transform: translate(-142px, 78px) rotate(-145deg);
      animation-delay: -1.2s;
    }

    .home-fx-signal-line.four {
      width: 184px;
      transform: translate(-178px, -44px) rotate(204deg);
      animation-delay: -1.8s;
    }

    .home-fx-hero-art {
      display: none;
    }

    .home-fx-world {
      position: absolute;
      right: 2%;
      top: 38px;
      z-index: 0;
      width: 88%;
      height: 260px;
      opacity: 0.38;
      background-image: radial-gradient(circle, rgba(99, 112, 132, 0.28) 1.2px, transparent 1.8px);
      background-size: 11px 11px;
      clip-path: polygon(3% 35%, 15% 22%, 29% 30%, 37% 17%, 49% 20%, 59% 34%, 72% 23%, 91% 34%, 98% 54%, 87% 70%, 66% 62%, 52% 78%, 36% 68%, 22% 78%, 8% 60%);
    }

    .home-fx-orbit {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      border: 1px solid rgba(255, 90, 0, 0.42);
      border-radius: 50%;
      transform-origin: center;
      animation: fxOrbit 15s linear infinite;
    }

    .home-fx-orbit.one {
      width: 540px;
      height: 176px;
      transform: translate(-50%, -44%) rotate(-10deg);
    }

    .home-fx-orbit.two {
      width: 476px;
      height: 210px;
      transform: translate(-50%, -42%) rotate(28deg);
      animation-duration: 19s;
      border-color: rgba(255, 138, 61, 0.32);
    }

    .home-fx-stack {
      position: relative;
      z-index: 3;
      width: 390px;
      height: 330px;
      transform-style: preserve-3d;
      animation: fxStackFloat 4.8s ease-in-out infinite;
      will-change: transform;
    }

    .home-fx-layer {
      position: absolute;
      left: 50%;
      width: 286px;
      height: 178px;
      border: 1px solid rgba(255, 255, 255, 0.86);
      border-radius: 34px;
      transform: translateX(-50%) rotateX(62deg) rotateZ(-45deg);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 234, 220, 0.88)),
        linear-gradient(45deg, rgba(255, 90, 0, 0.12), rgba(255, 255, 255, 0));
      box-shadow:
        0 34px 58px rgba(16, 24, 40, 0.14),
        inset 0 0 0 12px rgba(255, 255, 255, 0.38);
    }

    .home-fx-layer::before {
      content: "";
      position: absolute;
      inset: 22px;
      border: 2px solid rgba(255, 90, 0, 0.32);
      border-radius: 24px;
    }

    .home-fx-layer.base {
      top: 150px;
      width: 330px;
      height: 205px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(237, 243, 249, 0.9));
    }

    .home-fx-layer.mid {
      top: 98px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 220, 196, 0.9));
    }

    .home-fx-layer.top {
      top: 45px;
      width: 238px;
      height: 148px;
      background: linear-gradient(145deg, #ff8a3d, #ff5a00);
      box-shadow:
        0 30px 52px rgba(255, 90, 0, 0.28),
        inset 0 0 0 12px rgba(255, 255, 255, 0.23);
    }

    .home-fx-stack-mark {
      position: absolute;
      left: 50%;
      top: 84px;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 222, 202, 0.68);
      border-radius: 28px;
      color: #fff;
      background: linear-gradient(135deg, #ff8a3d, #ff5a00);
      box-shadow: 0 18px 34px rgba(255, 90, 0, 0.36);
      transform: translateX(-50%);
      font-size: 0;
      line-height: 1;
      font-weight: 950;
    }

    .home-fx-core-ring {
      position: absolute;
      left: 50%;
      top: 76px;
      width: 116px;
      height: 116px;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 34px;
      transform: translateX(-50%) rotate(11deg);
      box-shadow:
        0 0 0 10px rgba(255, 90, 0, 0.08),
        inset 0 0 0 12px rgba(255, 255, 255, 0.12);
      animation: fxCoreHalo 8s linear infinite;
    }

    .home-fx-curve-ribbon {
      position: absolute;
      left: 34px;
      top: 14px;
      width: 300px;
      height: 126px;
      border-bottom: 4px solid rgba(255, 90, 0, 0.54);
      border-radius: 0 0 50% 50%;
      transform: rotateX(62deg) rotateZ(-23deg);
      opacity: 0.86;
      filter: drop-shadow(0 10px 16px rgba(255, 90, 0, 0.18));
      animation: fxRibbonRise 3.6s ease-in-out infinite;
    }

    .home-fx-curve-ribbon::before,
    .home-fx-curve-ribbon::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: var(--brand);
    }

    .home-fx-curve-ribbon::before {
      right: 28px;
      bottom: -8px;
      width: 12px;
      height: 12px;
      box-shadow: -78px 8px 0 -2px rgba(255, 90, 0, 0.55), -150px 15px 0 -4px rgba(255, 90, 0, 0.34);
    }

    .home-fx-curve-ribbon::after {
      right: 18px;
      bottom: -12px;
      width: 42px;
      height: 4px;
      transform: rotate(-28deg);
    }

    .home-fx-api-port {
      position: absolute;
      z-index: 4;
      width: 14px;
      height: 14px;
      border: 3px solid rgba(255, 255, 255, 0.88);
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 7px rgba(255, 90, 0, 0.11);
      animation: fxPortBlink 2.4s ease-in-out infinite;
    }

    .home-fx-api-port.one {
      left: 86px;
      top: 118px;
    }

    .home-fx-api-port.two {
      right: 88px;
      top: 164px;
      animation-delay: -0.8s;
    }

    .home-fx-api-port.three {
      left: 150px;
      bottom: 58px;
      animation-delay: -1.6s;
    }

    .home-fx-node {
      position: absolute;
      z-index: 4;
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 216, 189, 0.9);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 16px 32px rgba(16, 24, 40, 0.08);
      transform: translate3d(var(--fx-node-x), var(--fx-node-y), 0);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      pointer-events: auto;
    }

    .home-fx-node::before {
      content: "";
      width: 24px;
      height: 24px;
      display: block;
      border: 3px solid var(--brand);
    }

    .home-fx-node:hover {
      border-color: rgba(255, 90, 0, 0.42);
      box-shadow: 0 20px 38px rgba(255, 90, 0, 0.16);
      transform: translate3d(var(--fx-node-x), var(--fx-node-y), 0) scale(1.07);
    }

    .home-fx-node.master {
      left: 9%;
      top: 38%;
    }

    .home-fx-node.risk {
      right: 12%;
      top: 22%;
    }

    .home-fx-node.api {
      right: 8%;
      bottom: 28%;
    }

    .home-fx-node.follower {
      left: 20%;
      bottom: 17%;
    }

    .home-fx-node.data {
      left: 49%;
      top: 8%;
    }

    .home-fx-node.master::before {
      border-radius: 50% 50% 42% 42%;
      border-bottom-width: 8px;
    }

    .home-fx-node.risk::before {
      width: 25px;
      height: 28px;
      border: 0;
      border-radius: 0;
      background: linear-gradient(135deg, #ff8a3d, #ff5a00);
      clip-path: polygon(50% 0, 86% 16%, 78% 68%, 50% 100%, 22% 68%, 14% 16%);
      box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.36);
    }

    .home-fx-node.api::before {
      width: 32px;
      height: 22px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle, var(--brand) 0 4px, transparent 5px) 0 50% / 12px 12px no-repeat,
        radial-gradient(circle, var(--brand) 0 4px, transparent 5px) 100% 50% / 12px 12px no-repeat,
        linear-gradient(var(--brand), var(--brand)) 50% 50% / 22px 4px no-repeat;
    }

    .home-fx-node.follower::before {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle, var(--brand) 0 4px, transparent 5px) 0 0 / 15px 15px,
        radial-gradient(circle, rgba(255, 138, 61, 0.78) 0 4px, transparent 5px) 7px 7px / 15px 15px;
    }

    .home-fx-node.data::before {
      width: 32px;
      height: 26px;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(var(--brand), var(--brand)) 4px 14px / 4px 12px no-repeat,
        linear-gradient(var(--brand), var(--brand)) 14px 6px / 4px 20px no-repeat,
        linear-gradient(var(--brand), var(--brand)) 24px 0 / 4px 26px no-repeat,
        linear-gradient(135deg, transparent 46%, var(--brand) 48% 54%, transparent 56%) 0 0 / 32px 26px no-repeat;
    }

    .home-fx-art-shell {
      position: relative;
      z-index: 3;
      width: min(790px, 118%);
      margin-right: -7%;
      transform-style: preserve-3d;
      animation: fxArtFloat 8s ease-in-out infinite;
      will-change: transform;
      isolation: isolate;
    }

    .home-fx-art-shell::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 53%;
      z-index: 0;
      width: 72%;
      height: 44%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 90, 0, 0.13), rgba(255, 90, 0, 0.045) 46%, transparent 72%);
      transform: translate(-50%, -50%);
      opacity: 0.5;
      pointer-events: none;
    }

    .home-fx-art-shell::after {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          #fffaf7 0%,
          rgba(255, 250, 247, 0.98) 6%,
          rgba(255, 250, 247, 0.76) 16%,
          rgba(255, 250, 247, 0.24) 28%,
          transparent 40%,
          transparent 72%,
          rgba(255, 250, 247, 0.26) 88%,
          rgba(255, 250, 247, 0.82) 96%,
          #fffaf7 100%),
        linear-gradient(180deg,
          #fff 0%,
          rgba(255, 255, 255, 0.74) 12%,
          transparent 28%,
          transparent 72%,
          rgba(255, 250, 247, 0.72) 91%,
          #fffaf7 100%);
    }

    .home-fx-trading-art {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      display: block;
      opacity: 0.98;
      user-select: none;
      pointer-events: none;
    }

    .home-fx-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 12px auto 0;
      border: 1px solid #eef0f3;
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 247, 0.92));
      box-shadow: 0 22px 48px rgba(16, 24, 40, 0.06);
      overflow: hidden;
    }

    .home-fx-stat {
      min-height: 112px;
      display: grid;
      grid-template-columns: 58px 1fr;
      align-items: center;
      gap: 16px;
      padding: 22px 34px;
      border-right: 1px solid #edf0f4;
    }

    .home-fx-stat:last-child {
      border-right: 0;
    }

    .home-fx-stat-icon,
    .home-fx-card-icon {
      position: relative;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: linear-gradient(135deg, #ff9f5f, #ff5a00);
      box-shadow: 0 14px 24px rgba(255, 90, 0, 0.2);
    }

    .home-fx-stat-icon::before,
    .home-fx-card-icon::before {
      content: "";
      width: 22px;
      height: 22px;
      border: 2px solid #fff;
      border-radius: 6px;
      opacity: 0.96;
    }

    .home-fx-stat strong {
      display: block;
      color: #121827;
      font-size: 26px;
      line-height: 1.05;
      font-weight: 950;
    }

    .home-fx-stat div > span {
      display: block;
      margin-top: 7px;
      color: #536176;
      font-size: 13px;
      font-weight: 820;
    }

    .home-fx-why {
      padding: 24px 0 18px;
    }

    .home-fx-section-head {
      max-width: 760px;
      margin: 0 auto 24px;
      text-align: center;
    }

    .home-fx-section-title {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin: 0;
      color: #121827;
      font-size: clamp(28px, 2.3vw, 38px);
      line-height: 1.16;
      font-weight: 950;
      letter-spacing: 0;
    }

    .home-fx-section-title::before,
    .home-fx-section-title::after {
      content: "";
      width: 86px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 90, 0, 0.5));
    }

    .home-fx-section-title::after {
      background: linear-gradient(90deg, rgba(255, 90, 0, 0.5), transparent);
    }

    .home-fx-section-title b {
      color: var(--brand);
    }

    .home-fx-section-head p {
      margin: 10px auto 0;
      color: #697586;
      font-size: 14px;
      line-height: 1.7;
      font-weight: 800;
    }

    .home-fx-why-grid,
    .home-fx-service-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

    .home-fx-why-card,
    .home-fx-service-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #e9edf3;
      border-radius: 13px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 243, 0.9)),
        linear-gradient(135deg, rgba(255, 90, 0, 0.08), rgba(255, 255, 255, 0));
      box-shadow: 0 14px 34px rgba(16, 24, 40, 0.045);
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .home-fx-why-card::after,
    .home-fx-service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.58) 45%, transparent 72%);
      transform: translateX(-120%);
      animation: fxCardSheen 8.4s ease-in-out infinite;
      pointer-events: none;
    }

    .home-fx-why-card:hover,
    .home-fx-service-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 90, 0, 0.28);
      box-shadow: 0 22px 48px rgba(255, 90, 0, 0.11);
    }

    .home-fx-why-card {
      min-height: 126px;
      padding: 22px;
    }

    .home-fx-card-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      box-shadow: none;
      background: rgba(255, 247, 241, 0.95);
      border: 1px solid #ffd8bd;
    }

    .home-fx-card-icon::before {
      width: 16px;
      height: 16px;
      border-color: var(--brand);
      border-radius: 5px;
    }

    .home-fx-card-icon.data::before {
      border-radius: 50%;
      box-shadow: inset 0 -6px 0 rgba(255, 90, 0, 0.2);
    }

    .home-fx-card-icon.flex::before {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(255, 90, 0, 0.12);
    }

    .home-fx-card-icon.safe::before {
      height: 18px;
      border-radius: 8px 8px 10px 10px;
    }

    .home-fx-card-icon.support::before {
      border-radius: 50%;
      border-bottom-color: transparent;
    }

    .home-fx-why-card h3,
    .home-fx-service-card h3 {
      position: relative;
      z-index: 1;
      margin: 14px 0 8px;
      color: #121827;
      font-size: 16px;
      line-height: 1.32;
      font-weight: 950;
    }

    .home-fx-why-card p,
    .home-fx-service-card p,
    .home-fx-service-card li {
      position: relative;
      z-index: 1;
      color: #697586;
      font-size: 13px;
      line-height: 1.68;
      font-weight: 780;
    }

    .home-fx-platform {
      width: min(1540px, calc(100% - 48px));
      margin-top: 0;
      margin-bottom: 48px;
      padding: 34px 0 36px;
      border: 1px solid #f1e2d8;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 247, 241, 0.96), rgba(255, 255, 255, 0.96));
      box-shadow: 0 22px 54px rgba(255, 90, 0, 0.07);
    }

    .home-fx-platform-inner {
      width: min(1320px, calc(100% - 48px));
      margin: 0 auto;
    }

    .home-fx-platform .home-fx-section-head {
      margin-bottom: 24px;
    }

    .home-fx-service-card {
      min-height: 230px;
      padding: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 246, 0.93)),
        linear-gradient(135deg, rgba(255, 90, 0, 0.07), rgba(255, 255, 255, 0));
    }

    .home-fx-service-card ul {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .home-fx-service-card li {
      position: relative;
      padding-left: 14px;
    }

    .home-fx-service-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand);
    }

    .home-fx-more {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      margin-top: 18px;
      color: var(--brand);
      font-size: 13px;
      font-weight: 950;
    }

    .home-fx-more::after {
      content: ">";
      margin-left: 7px;
    }

    .home-fx-band {
      width: min(1320px, calc(100% - 48px));
      margin: 0 auto;
      padding: 34px 0;
      border-top: 1px solid #eef1f5;
    }

    .home-fx-band:first-of-type {
      border-top: 0;
    }

    .home-fx-split {
      display: grid;
      grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
      align-items: center;
      gap: 60px;
    }

    .home-fx-copy-block {
      max-width: 430px;
    }

    .home-fx-label {
      width: fit-content;
      min-height: 25px;
      display: inline-flex;
      align-items: center;
      margin-bottom: 14px;
      padding: 0 10px;
      border-radius: 8px;
      color: var(--brand);
      background: #fff2e9;
      font-size: 12px;
      font-weight: 950;
    }

    .home-fx-copy-block h2,
    .home-fx-flow-head h2 {
      margin: 0;
      color: #121827;
      font-size: clamp(30px, 3vw, 44px);
      line-height: 1.16;
      letter-spacing: 0;
      font-weight: 950;
    }

    .home-fx-copy-block p,
    .home-fx-flow-head p {
      margin: 14px 0 0;
      color: #617086;
      font-size: 15px;
      line-height: 1.8;
      font-weight: 800;
    }

    .home-fx-mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .home-fx-mini-card,
    .home-fx-table-panel,
    .home-fx-community-card,
    .home-fx-flow-card,
    .home-fx-scenario-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #e9edf3;
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.94)),
        linear-gradient(135deg, rgba(255, 90, 0, 0.055), rgba(255, 255, 255, 0));
      box-shadow: 0 18px 42px rgba(16, 24, 40, 0.045);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .home-fx-mini-card:hover,
    .home-fx-community-card:hover,
    .home-fx-flow-card:hover,
    .home-fx-scenario-card:hover {
      transform: translateY(-5px);
      border-color: rgba(255, 90, 0, 0.26);
      box-shadow: 0 24px 48px rgba(255, 90, 0, 0.10);
    }

    .home-fx-mini-card {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      padding: 24px;
    }

    .home-fx-mini-card h3,
    .home-fx-community-card h3,
    .home-fx-flow-card h3,
    .home-fx-scenario-card h3 {
      margin: 14px 0 9px;
      color: #121827;
      font-size: 17px;
      line-height: 1.34;
      font-weight: 950;
    }

    .home-fx-mini-card p,
    .home-fx-community-card p,
    .home-fx-flow-card p,
    .home-fx-scenario-card p {
      margin: 0;
      color: #697586;
      font-size: 13px;
      line-height: 1.72;
      font-weight: 780;
    }

    .home-fx-illustration {
      position: relative;
      flex: 1;
      min-height: 126px;
      margin-top: 18px;
      border-radius: 12px;
      background:
        var(--fx-illus, none) center bottom / contain no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 243, 235, 0.34));
    }

    .home-fx-list-illus::before,
    .home-fx-chart-illus::before,
    .home-fx-shield-illus::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .home-fx-list-illus::before {
      width: 86px;
      height: 94px;
      border-radius: 12px;
      background:
        linear-gradient(#dce8ff 0 0) 22px 22px / 42px 5px no-repeat,
        linear-gradient(#dce8ff 0 0) 22px 44px / 54px 5px no-repeat,
        linear-gradient(#dce8ff 0 0) 22px 66px / 36px 5px no-repeat,
        #fff;
      box-shadow: 0 16px 28px rgba(16, 24, 40, 0.08);
    }

    .home-fx-list-illus::after {
      content: "";
      position: absolute;
      right: 42px;
      bottom: 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #367cff;
      box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.92);
    }

    .home-fx-chart-illus::before {
      width: 112px;
      height: 72px;
      border-left: 2px solid #ffd8bd;
      border-bottom: 2px solid #ffd8bd;
      background:
        linear-gradient(135deg, transparent 45%, #ff6a18 46% 50%, transparent 51%) 14px 18px / 82px 42px no-repeat;
    }

    .home-fx-shield-illus::before {
      width: 84px;
      height: 92px;
      border-radius: 42px 42px 28px 28px;
      background: linear-gradient(145deg, #ff9f5f, #ff5a00);
      clip-path: polygon(50% 0, 88% 14%, 84% 70%, 50% 100%, 16% 70%, 12% 14%);
      box-shadow: 0 20px 34px rgba(255, 90, 0, 0.24);
    }

    .home-fx-api-wrap {
      display: grid;
      gap: 16px;
    }

    .home-fx-table-panel {
      padding: 0;
    }

    .home-fx-api-table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      font-size: 13px;
    }

    .home-fx-api-table th,
    .home-fx-api-table td {
      padding: 18px 20px;
      border: 1px solid #e7edf4;
      text-align: left;
      vertical-align: top;
      line-height: 1.66;
    }

    .home-fx-api-table th {
      color: #121827;
      background: #fffaf6;
      font-weight: 950;
    }

    .home-fx-api-table td {
      color: #617086;
      font-weight: 800;
    }

    .home-fx-api-table td:first-child {
      color: #1769e0;
      font-weight: 950;
      white-space: nowrap;
    }

    .home-fx-chip-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }

    .home-fx-chip {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #ffd8bd;
      border-radius: 9px;
      color: #4b5565;
      background: #fffdfb;
      font-size: 12px;
      font-weight: 900;
    }

    .home-fx-chip::before {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid #ff7a2f;
      border-radius: 50%;
    }

    .home-fx-community-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .home-fx-community-card {
      min-height: 138px;
      padding: 22px;
    }

    .home-fx-flow-section {
      width: min(1320px, calc(100% - 48px));
      margin: 0 auto;
      padding: 38px 0 34px;
      border-top: 1px solid #eef1f5;
    }

    .home-fx-flow-head {
      max-width: 620px;
      margin-bottom: 28px;
    }

    .home-fx-flow-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
    }

    .home-fx-flow-card {
      min-height: 164px;
      padding: 20px;
      text-align: center;
      overflow: visible;
    }

    .home-fx-flow-card:not(:last-child)::after {
      content: ">";
      position: absolute;
      right: -14px;
      top: 50%;
      z-index: 2;
      color: var(--brand);
      font-size: 24px;
      font-weight: 950;
      transform: translateY(-50%);
    }

    .home-fx-flow-card .home-fx-card-icon,
    .home-fx-scenario-card .home-fx-card-icon {
      margin: 0 auto;
    }

    .home-fx-scenario-section {
      width: min(1320px, calc(100% - 48px));
      margin: 0 auto;
      padding: 34px 0;
      border-top: 1px solid #eef1f5;
    }

    .home-fx-scenario-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
      margin-top: 22px;
    }

    .home-fx-scenario-card {
      min-height: 156px;
      padding: 24px 18px;
      text-align: center;
    }

    .home-fx-cta-panel {
      width: min(1320px, calc(100% - 48px));
      min-height: 268px;
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      align-items: center;
      gap: 34px;
      margin: 18px auto 34px;
      padding: 40px 48px;
      border-radius: 18px;
      color: #fff;
      background:
        radial-gradient(circle at 86% 44%, rgba(255, 90, 0, 0.52), transparent 32%),
        linear-gradient(135deg, #06152b, #0b1933 56%, #141f33);
      box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
      overflow: hidden;
    }

    .home-fx-cta-panel h2 {
      max-width: 620px;
      margin: 0;
      color: #fff;
      font-size: clamp(30px, 3vw, 44px);
      line-height: 1.2;
      letter-spacing: 0;
      font-weight: 950;
    }

    .home-fx-cta-panel p {
      max-width: 610px;
      margin: 16px 0 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 15px;
      line-height: 1.78;
      font-weight: 800;
    }

    .home-fx-cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .home-fx-cta-actions .btn:not(.primary) {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.36);
      background: rgba(255, 255, 255, 0.08);
    }

    .home-fx-cube-scene {
      position: relative;
      min-height: 230px;
      display: grid;
      place-items: center;
      perspective: 780px;
      justify-items: end;
    }

    .home-fx-cta-art {
      width: min(435px, 100%);
      height: auto;
      display: block;
      mix-blend-mode: screen;
      filter: drop-shadow(0 24px 42px rgba(255, 90, 0, 0.30));
      -webkit-mask-image: radial-gradient(ellipse at 52% 52%, #000 42%, rgba(0, 0, 0, 0.92) 61%, transparent 100%);
      mask-image: radial-gradient(ellipse at 52% 52%, #000 42%, rgba(0, 0, 0, 0.92) 61%, transparent 100%);
    }

    .home-fx-cube-scene.has-art .home-fx-cta-art {
      display: none;
    }

    .home-fx-cube-scene::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 132px;
      border: 1px solid rgba(255, 138, 61, 0.54);
      border-radius: 50%;
      transform: rotate(-18deg);
    }

    .home-fx-cube {
      position: relative;
      width: 154px;
      height: 154px;
      transform: rotateX(58deg) rotateZ(45deg);
      transform-style: preserve-3d;
      animation: fxCubePulse 4.8s ease-in-out infinite;
    }

    .home-fx-cube span {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: linear-gradient(145deg, #ff8a3d, #ff5a00);
      box-shadow: 0 26px 58px rgba(255, 90, 0, 0.34);
      color: #fff;
      font-size: 28px;
      font-weight: 950;
    }

    .home-fx-cube span:nth-child(2) {
      transform-origin: right;
      transform: rotateY(90deg);
      filter: brightness(0.82);
    }

    .home-fx-cube span:nth-child(3) {
      transform-origin: bottom;
      transform: rotateX(-90deg);
      filter: brightness(0.72);
    }

    .home-fx-risk-note {
      width: min(1320px, calc(100% - 48px));
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 auto 34px;
      padding: 0 18px;
      border: 1px solid #ffd8bd;
      border-radius: 10px;
      color: #617086;
      background: #fffaf6;
      font-size: 13px;
      font-weight: 820;
    }

    .home-fx-risk-note::before {
      content: "";
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      border: 2px solid var(--brand);
      border-radius: 7px;
    }

    .home-fx-footer {
      width: min(1320px, calc(100% - 48px));
      margin: 0 auto 0;
      padding: 28px 0 22px;
      border-top: 1px solid #eef1f5;
      color: #5c687a;
    }

    .home-fx-footer-grid {
      display: grid;
      grid-template-columns: minmax(250px, 1.4fr) repeat(4, minmax(120px, 0.62fr)) minmax(190px, 0.86fr);
      gap: 28px;
      align-items: start;
    }

    .home-fx-footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #121827;
      font-weight: 950;
    }

    .home-fx-footer-logo {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: var(--brand);
      box-shadow: 0 10px 20px rgba(255, 90, 0, 0.2);
      font-size: 22px;
      line-height: 1;
      font-weight: 950;
    }

    .home-fx-footer-brand span:last-child {
      display: block;
      margin-top: 2px;
      color: #6b7280;
      font-size: 11px;
      line-height: 1.1;
      font-weight: 850;
    }

    .home-fx-footer-intro {
      max-width: 300px;
      margin: 16px 0 0;
      color: #697586;
      font-size: 13px;
      line-height: 1.75;
      font-weight: 780;
    }

    .home-fx-footer h3 {
      margin: 0 0 12px;
      color: #121827;
      font-size: 13px;
      line-height: 1.3;
      font-weight: 950;
    }

    .home-fx-footer a,
    .home-fx-footer-contact span {
      display: block;
      margin-top: 9px;
      color: #667085;
      font-size: 12px;
      line-height: 1.3;
      font-weight: 820;
      text-decoration: none;
    }

    .home-fx-footer a:hover {
      color: var(--brand);
    }

    .home-fx-footer-contact {
      padding: 16px;
      border: 1px solid #e9edf3;
      border-radius: 12px;
      background: #f8fafc;
    }

    .home-fx-social {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .home-fx-social i {
      width: 20px;
      height: 20px;
      display: block;
      border: 1px solid #d8dee8;
      border-radius: 50%;
      background: #fff;
    }

    .home-fx-footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 30px;
      padding-top: 18px;
      border-top: 1px solid #eef1f5;
      color: #7a8699;
      font-size: 12px;
      font-weight: 800;
    }

    body:has(#homePage:not(.hidden)) .footer {
      display: none;
    }

    html:has(#homePage:not(.hidden)),
    body:has(#homePage:not(.hidden)) {
      overflow-x: hidden;
    }

    /* CSS-drawn homepage visual refinements */
    .home-fx-visual {
      transform: translateX(-10px);
    }

    .home-fx-world {
      opacity: 0.46;
    }

    .home-fx-stack {
      filter: drop-shadow(0 28px 42px rgba(255, 90, 0, 0.14));
    }

    .home-fx-stack-mark {
      font-size: 0;
      box-shadow:
        0 18px 34px rgba(255, 90, 0, 0.36),
        inset 0 0 0 10px rgba(255, 255, 255, 0.16);
    }

    .home-fx-stack-mark::before {
      content: "";
      width: 54px;
      height: 42px;
      display: block;
      background:
        linear-gradient(#fff, #fff) 9px 8px / 4px 30px no-repeat,
        linear-gradient(#fff, #fff) 4px 17px / 14px 17px no-repeat,
        linear-gradient(#fff, #fff) 31px 2px / 4px 34px no-repeat,
        linear-gradient(#fff, #fff) 25px 9px / 16px 21px no-repeat,
        linear-gradient(135deg, transparent 43%, rgba(255,255,255,0.72) 45% 51%, transparent 53%) 4px 4px / 46px 34px no-repeat;
      clip-path: none;
      filter: drop-shadow(0 7px 12px rgba(128, 45, 0, 0.18));
    }

    .home-fx-stack-mark::after {
      content: "";
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 17px;
      height: 4px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.78);
    }

    .home-fx-node::after {
      content: "";
      position: absolute;
      inset: -7px;
      border: 1px solid rgba(255, 90, 0, 0.18);
      border-radius: inherit;
      animation: fxIconPulse 2.8s ease-in-out infinite;
    }

    .home-fx-stat-icon {
      border: 1px solid #ffd6bf;
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.94), transparent 36%),
        linear-gradient(145deg, #fffefe, #fff1e8);
      box-shadow:
        0 15px 24px rgba(255, 90, 0, 0.12),
        inset 0 0 0 8px rgba(255, 90, 0, 0.05);
    }

    .home-fx-stat-icon::before,
    .home-fx-stat-icon::after {
      content: "";
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      opacity: 1;
    }

    .home-fx-stat:nth-child(1) .home-fx-stat-icon::before {
      width: 24px;
      height: 28px;
      background: var(--brand);
      clip-path: polygon(50% 0, 86% 13%, 82% 66%, 50% 100%, 18% 66%, 14% 13%);
    }

    .home-fx-stat:nth-child(1) .home-fx-stat-icon::after {
      width: 10px;
      height: 14px;
      border-right: 3px solid #fff;
      border-bottom: 3px solid #fff;
      transform: rotate(42deg) translateY(-1px);
    }

    .home-fx-stat:nth-child(2) .home-fx-stat-icon::before {
      width: 25px;
      height: 31px;
      background: var(--brand);
      clip-path: polygon(48% 0, 78% 0, 59% 38%, 84% 38%, 31% 100%, 43% 56%, 18% 56%);
    }

    .home-fx-stat:nth-child(3) .home-fx-stat-icon::before {
      width: 27px;
      height: 27px;
      border: 3px solid var(--brand);
      border-radius: 50%;
    }

    .home-fx-stat:nth-child(3) .home-fx-stat-icon::after {
      width: 29px;
      height: 29px;
      border-radius: 50%;
      background:
        linear-gradient(var(--brand), var(--brand)) center / 27px 3px no-repeat,
        linear-gradient(90deg, transparent 30%, var(--brand) 31% 38%, transparent 39% 61%, var(--brand) 62% 69%, transparent 70%) center / 27px 27px no-repeat;
      opacity: 0.92;
    }

    .home-fx-stat:nth-child(4) .home-fx-stat-icon::before {
      width: 35px;
      height: 28px;
      background:
        radial-gradient(circle at 50% 22%, var(--brand) 0 5px, transparent 6px),
        radial-gradient(circle at 22% 36%, var(--brand) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 36%, var(--brand) 0 4px, transparent 5px),
        radial-gradient(ellipse at 50% 92%, var(--brand) 0 12px, transparent 13px),
        radial-gradient(ellipse at 22% 92%, var(--brand) 0 9px, transparent 10px),
        radial-gradient(ellipse at 78% 92%, var(--brand) 0 9px, transparent 10px);
    }

    .home-fx-card-icon {
      --fx-icon: var(--brand);
      isolation: isolate;
      background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), transparent 34%),
        linear-gradient(145deg, #fffefd, #fff3eb);
      border-color: color-mix(in srgb, var(--fx-icon) 28%, white);
      box-shadow:
        0 10px 20px rgba(255, 90, 0, 0.08),
        inset 0 0 0 6px color-mix(in srgb, var(--fx-icon) 9%, transparent);
    }

    .home-fx-card-icon::before,
    .home-fx-card-icon::after {
      content: "";
      position: absolute;
      display: block;
      opacity: 1;
    }

    .home-fx-card-icon::before {
      width: 16px;
      height: 16px;
      border: 2px solid var(--fx-icon);
      border-radius: 5px;
      background: transparent;
    }

    .home-fx-card-icon::after {
      width: 10px;
      height: 2px;
      bottom: 9px;
      border-radius: 3px;
      background: var(--fx-icon);
    }

    .home-fx-card-icon.data::before {
      width: 20px;
      height: 18px;
      border-radius: 50% / 34%;
      box-shadow:
        0 5px 0 -2px var(--fx-icon),
        0 10px 0 -2px var(--fx-icon);
      transform: translateY(-3px);
    }

    .home-fx-card-icon.data::after {
      display: none;
    }

    .home-fx-card-icon.flex::before {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 4px rgba(255, 90, 0, 0.10);
    }

    .home-fx-card-icon.flex::after {
      width: 7px;
      height: 7px;
      right: 7px;
      bottom: 7px;
      border-radius: 50%;
      background: var(--fx-icon);
    }

    .home-fx-card-icon.safe::before {
      width: 18px;
      height: 21px;
      border: 0;
      border-radius: 0;
      background: var(--fx-icon);
      clip-path: polygon(50% 0, 88% 14%, 84% 66%, 50% 100%, 16% 66%, 12% 14%);
    }

    .home-fx-card-icon.safe::after {
      width: 6px;
      height: 10px;
      bottom: 12px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-radius: 0;
      background: transparent;
      transform: rotate(42deg);
    }

    .home-fx-card-icon.support::before {
      width: 19px;
      height: 15px;
      border: 2px solid var(--fx-icon);
      border-bottom-color: transparent;
      border-radius: 16px 16px 0 0;
      transform: translateY(1px);
    }

    .home-fx-card-icon.support::after {
      width: 21px;
      height: 9px;
      bottom: 8px;
      border-left: 3px solid var(--fx-icon);
      border-right: 3px solid var(--fx-icon);
      border-bottom: 3px solid var(--fx-icon);
      border-radius: 0 0 10px 10px;
      background: transparent;
    }

    .home-fx-service-card:nth-child(2) .home-fx-card-icon,
    .home-fx-community-card:nth-child(2) .home-fx-card-icon {
      --fx-icon: #2fb7b0;
    }

    .home-fx-service-card:nth-child(3) .home-fx-card-icon,
    .home-fx-community-card:nth-child(3) .home-fx-card-icon {
      --fx-icon: #ff7a2f;
    }

    .home-fx-service-card:nth-child(4) .home-fx-card-icon,
    .home-fx-community-card:nth-child(4) .home-fx-card-icon {
      --fx-icon: #ff6f61;
    }

    .home-fx-service-card:nth-child(5) .home-fx-card-icon,
    .home-fx-community-card:nth-child(5) .home-fx-card-icon {
      --fx-icon: #4f8ff7;
    }

    .home-fx-flow-card:nth-child(1) .home-fx-card-icon { --fx-icon: #2878ff; }
    .home-fx-flow-card:nth-child(2) .home-fx-card-icon { --fx-icon: #42ba74; }
    .home-fx-flow-card:nth-child(3) .home-fx-card-icon { --fx-icon: #23a6d5; }
    .home-fx-flow-card:nth-child(4) .home-fx-card-icon { --fx-icon: #ff8a2f; }
    .home-fx-flow-card:nth-child(5) .home-fx-card-icon { --fx-icon: #27b5a7; }
    .home-fx-flow-card:nth-child(6) .home-fx-card-icon { --fx-icon: #4b7bec; }

    .home-fx-flow-card:not(:last-child)::after {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 90, 0, 0.20);
      border-radius: 50%;
      background: #fffdfb;
      line-height: 1;
      box-shadow: 0 8px 16px rgba(255, 90, 0, 0.08);
    }

    .home-fx-mini-card::after,
    .home-fx-community-card::after,
    .home-fx-flow-card::before,
    .home-fx-scenario-card::before {
      content: "";
      position: absolute;
      inset: auto -16% -32% 10%;
      height: 86px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 90, 0, 0.11), transparent 66%);
      pointer-events: none;
    }

    .home-fx-list-illus::before {
      animation: fxMiniFloat 4.2s ease-in-out infinite;
    }

    .home-fx-chart-illus::before {
      animation: fxMiniFloat 4.6s ease-in-out infinite 0.2s;
    }

    .home-fx-shield-illus::before {
      animation: fxMiniFloat 4.4s ease-in-out infinite 0.35s;
    }

    .home-fx-cta-panel {
      background:
        radial-gradient(circle at 78% 52%, rgba(255, 90, 0, 0.54), transparent 26%),
        radial-gradient(circle at 92% 28%, rgba(255, 138, 61, 0.30), transparent 24%),
        linear-gradient(135deg, #071731 0%, #081934 50%, #2d2230 100%);
    }

    .home-fx-cube-scene {
      justify-items: center;
    }

    .home-fx-cube-scene::before {
      width: 458px;
      height: 164px;
      border-color: rgba(255, 138, 61, 0.58);
      box-shadow: 0 0 26px rgba(255, 90, 0, 0.22);
      animation: fxCubeOrbit 7.6s ease-in-out infinite;
    }

    .home-fx-cube-scene::after {
      content: "";
      position: absolute;
      right: 32px;
      bottom: 34px;
      width: 160px;
      height: 122px;
      border-bottom: 1px solid rgba(255, 138, 61, 0.34);
      background:
        linear-gradient(to top, rgba(255, 138, 61, 0.60), rgba(255, 138, 61, 0.04)) 12px 50px / 18px 72px no-repeat,
        linear-gradient(to top, rgba(255, 138, 61, 0.48), rgba(255, 138, 61, 0.04)) 56px 28px / 18px 94px no-repeat,
        linear-gradient(to top, rgba(255, 138, 61, 0.38), rgba(255, 138, 61, 0.04)) 100px 10px / 18px 112px no-repeat;
      opacity: 0.64;
      transform: skewX(-18deg);
      pointer-events: none;
    }

    .home-fx-cube {
      width: 204px;
      height: 204px;
      transform: rotateX(58deg) rotateZ(43deg);
      filter: drop-shadow(0 36px 46px rgba(255, 90, 0, 0.40));
    }

    .home-fx-cube::before,
    .home-fx-cube::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .home-fx-cube::before {
      inset: -42px;
      border: 1px solid rgba(255, 219, 195, 0.36);
      transform: translateZ(-8px);
    }

    .home-fx-cube::after {
      right: -56px;
      top: 32px;
      width: 12px;
      height: 12px;
      background: #ff8a3d;
      box-shadow:
        -192px 50px 0 #ff8a3d,
        -94px -72px 0 rgba(255, 255, 255, 0.94);
    }

    .home-fx-cube span {
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.20), transparent 26%),
        linear-gradient(145deg, #ff9c54, #ff5a00 66%, #e94600);
      text-shadow: 0 2px 10px rgba(117, 36, 0, 0.35);
      box-shadow:
        0 34px 68px rgba(255, 90, 0, 0.40),
        inset 0 0 0 14px rgba(255, 255, 255, 0.10);
    }

    .home-fx-cube span:first-child {
      transform: translateZ(52px);
    }

    .home-fx-cube span:nth-child(2) {
      width: 104px;
      left: auto;
      right: -104px;
      transform-origin: left center;
      transform: rotateY(90deg) translateX(0);
    }

    .home-fx-cube span:nth-child(3) {
      height: 104px;
      top: auto;
      bottom: -104px;
      transform-origin: center top;
      transform: rotateX(-90deg) translateY(0);
    }

    .home-fx-why-card,
    .home-fx-service-card,
    .home-fx-mini-card,
    .home-fx-community-card,
    .home-fx-flow-card,
    .home-fx-scenario-card {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-content: start;
      align-items: center;
      column-gap: 12px;
      row-gap: 10px;
      text-align: left;
    }

    .home-fx-why-card .home-fx-card-icon,
    .home-fx-service-card .home-fx-card-icon,
    .home-fx-mini-card .home-fx-card-icon,
    .home-fx-community-card .home-fx-card-icon,
    .home-fx-flow-card .home-fx-card-icon,
    .home-fx-scenario-card .home-fx-card-icon {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
      align-self: center;
      justify-self: start;
    }

    .home-fx-why-card h3,
    .home-fx-service-card h3,
    .home-fx-mini-card h3,
    .home-fx-community-card h3,
    .home-fx-flow-card h3,
    .home-fx-scenario-card h3 {
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      margin: 0;
      min-width: 0;
    }

    .home-fx-why-card p,
    .home-fx-service-card p,
    .home-fx-service-card ul,
    .home-fx-service-card .home-fx-more,
    .home-fx-mini-card p,
    .home-fx-mini-card .home-fx-illustration,
    .home-fx-community-card p,
    .home-fx-flow-card p,
    .home-fx-scenario-card p {
      grid-column: 1 / -1;
    }

    .home-fx-service-card p,
    .home-fx-mini-card p,
    .home-fx-community-card p,
    .home-fx-flow-card p,
    .home-fx-scenario-card p {
      margin-top: 0;
    }

    .home-fx-flow-card .home-fx-card-icon,
    .home-fx-scenario-card .home-fx-card-icon {
      margin: 0;
    }

    .home-fx-mini-card .home-fx-illustration {
      min-height: 152px;
      margin-top: 8px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(225, 232, 242, 0.92);
      background:
        radial-gradient(circle at 50% 62%, rgba(255, 90, 0, 0.18), transparent 33%),
        radial-gradient(circle at 76% 28%, rgba(54, 124, 255, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 242, 0.42));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .home-fx-mini-card .home-fx-illustration::before,
    .home-fx-mini-card .home-fx-illustration::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .home-fx-mini-card .home-fx-illustration::after {
      left: 50%;
      bottom: 16px;
      width: 168px;
      height: 42px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(255, 90, 0, 0.18), transparent 58%),
        linear-gradient(90deg, transparent, rgba(255, 138, 61, 0.34), transparent);
      transform: translateX(-50%) perspective(260px) rotateX(64deg);
      filter: blur(0.2px);
      opacity: 0.88;
      z-index: 0;
    }

    .home-fx-list-illus::before {
      left: 50%;
      top: 52%;
      width: 132px;
      height: 94px;
      border: 1px solid rgba(214, 224, 239, 0.98);
      border-radius: 18px;
      background:
        radial-gradient(circle at 82% 72%, #367cff 0 8px, rgba(255, 255, 255, 0.96) 9px 15px, transparent 16px),
        linear-gradient(90deg, #ff7a28 0 9px, transparent 9px) 20px 23px / 80px 7px no-repeat,
        linear-gradient(90deg, rgba(54, 124, 255, 0.20) 0 54px, transparent 54px) 20px 44px / 86px 6px no-repeat,
        linear-gradient(90deg, rgba(54, 124, 255, 0.16) 0 44px, transparent 44px) 20px 63px / 78px 6px no-repeat,
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.88));
      box-shadow:
        0 22px 46px rgba(16, 24, 40, 0.11),
        0 14px 34px rgba(255, 90, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transform: translate(-50%, -50%) perspective(420px) rotateX(54deg) rotateZ(-7deg);
      animation: fxMiniCardLift 5.2s ease-in-out infinite;
      z-index: 2;
    }

    .home-fx-list-illus::after {
      left: 50%;
      top: 50%;
      width: 190px;
      height: 118px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 24% 31%, #ff6a18 0 4px, transparent 5px),
        radial-gradient(circle at 76% 26%, #367cff 0 4px, transparent 5px),
        radial-gradient(circle at 84% 70%, #27b5a7 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(255, 106, 24, 0.38), transparent 36%) 43px 36px / 62px 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(54, 124, 255, 0.32)) 90px 34px / 60px 1px no-repeat,
        linear-gradient(110deg, transparent 48%, rgba(39, 181, 167, 0.34) 49% 51%, transparent 52%) 102px 62px / 54px 32px no-repeat;
      transform: translate(-50%, -50%);
      opacity: 0.92;
      animation: fxMiniNetwork 6.5s ease-in-out infinite;
      z-index: 1;
    }

    .home-fx-chart-illus::before {
      left: 50%;
      top: 50%;
      width: 156px;
      height: 102px;
      border: 1px solid rgba(255, 202, 169, 0.78);
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(255, 90, 0, 0.16) 0 1px, transparent 1px) 0 0 / 31px 100%,
        linear-gradient(rgba(255, 90, 0, 0.10) 0 1px, transparent 1px) 0 0 / 100% 25px,
        linear-gradient(124deg, transparent 46%, rgba(255, 90, 0, 0.96) 47% 53%, transparent 54%) 26px 58px / 38px 22px no-repeat,
        linear-gradient(142deg, transparent 46%, rgba(255, 90, 0, 0.96) 47% 53%, transparent 54%) 60px 42px / 48px 34px no-repeat,
        linear-gradient(126deg, transparent 46%, rgba(255, 90, 0, 0.96) 47% 53%, transparent 54%) 104px 28px / 34px 30px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 244, 0.78));
      box-shadow:
        0 24px 52px rgba(255, 90, 0, 0.13),
        0 18px 38px rgba(16, 24, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      transform: translate(-50%, -50%) perspective(460px) rotateX(58deg) rotateZ(-1deg);
      animation: fxMiniChartLift 5.6s ease-in-out infinite 0.15s;
      z-index: 2;
    }

    .home-fx-chart-illus::after {
      left: 50%;
      top: 51%;
      width: 168px;
      height: 104px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 25% 67%, #ff5a00 0 5px, rgba(255, 255, 255, 0.98) 6px 10px, transparent 11px),
        radial-gradient(circle at 54% 48%, #ff5a00 0 5px, rgba(255, 255, 255, 0.98) 6px 10px, transparent 11px),
        radial-gradient(circle at 80% 30%, #ff5a00 0 5px, rgba(255, 255, 255, 0.98) 6px 10px, transparent 11px),
        linear-gradient(to top, rgba(54, 124, 255, 0.24), rgba(54, 124, 255, 0.02)) 18px 65px / 12px 30px no-repeat,
        linear-gradient(to top, rgba(255, 90, 0, 0.30), rgba(255, 90, 0, 0.02)) 128px 34px / 12px 61px no-repeat;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 12px 18px rgba(255, 90, 0, 0.18));
      animation: fxMiniNetwork 6.2s ease-in-out infinite 0.25s;
      z-index: 3;
    }

    .home-fx-shield-illus::before {
      left: 50%;
      top: 47%;
      width: 98px;
      height: 108px;
      border-radius: 36px 36px 28px 28px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 28%),
        conic-gradient(from 212deg at 50% 48%, #ffb06c, #ff5a00 35%, #e54b00 66%, #ff944d 100%);
      clip-path: polygon(50% 0, 88% 13%, 84% 66%, 50% 100%, 16% 66%, 12% 13%);
      box-shadow:
        0 26px 46px rgba(255, 90, 0, 0.28),
        inset 0 0 0 8px rgba(255, 255, 255, 0.10);
      transform: translate(-50%, -50%) perspective(420px) rotateX(18deg);
      animation: fxMiniShield 5.8s ease-in-out infinite;
      z-index: 3;
    }

    .home-fx-shield-illus::after {
      left: 50%;
      top: 51%;
      width: 188px;
      height: 126px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.78) 0 5px, transparent 6px),
        radial-gradient(circle at 50% 48%, rgba(255, 90, 0, 0.18), transparent 28%),
        linear-gradient(90deg, transparent 45%, rgba(255, 138, 61, 0.42) 46% 54%, transparent 55%),
        linear-gradient(180deg, transparent 47%, rgba(255, 138, 61, 0.26) 48% 52%, transparent 53%);
      border: 1px solid rgba(255, 138, 61, 0.28);
      transform: translate(-50%, -50%) rotate(-12deg);
      animation: fxShieldOrbit 7.4s ease-in-out infinite;
      z-index: 1;
    }

    .home-fx-cta-panel {
      overflow: hidden;
      background:
        radial-gradient(circle at 74% 52%, rgba(255, 90, 0, 0.32), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(255, 138, 61, 0.22), transparent 28%),
        linear-gradient(135deg, #06152d 0%, #071a38 46%, #321e28 100%);
    }

    .home-fx-cube-scene {
      min-height: 278px;
      place-items: center;
      justify-items: center;
      perspective: 960px;
    }

    .home-fx-cube-scene::before {
      width: 430px;
      height: 160px;
      border: 1px solid rgba(255, 138, 61, 0.34);
      background:
        radial-gradient(circle at 18% 54%, rgba(255, 138, 61, 0.72) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 42%, rgba(255, 255, 255, 0.72) 0 3px, transparent 4px),
        radial-gradient(circle at 62% 82%, rgba(255, 90, 0, 0.70) 0 4px, transparent 5px);
      box-shadow:
        0 0 18px rgba(255, 90, 0, 0.14),
        inset 0 0 18px rgba(255, 138, 61, 0.05);
      opacity: 0.66;
      transform: rotate(-16deg) skewX(-5deg);
      animation: fxCoreOrbit 13s ease-in-out infinite;
      z-index: 1;
    }

    .home-fx-cube-scene::after {
      right: 42px;
      bottom: 34px;
      width: 190px;
      height: 112px;
      border-bottom: 1px solid rgba(255, 180, 118, 0.26);
      border-left: 1px solid rgba(255, 180, 118, 0.10);
      border-radius: 0 0 8px 8px;
      background:
        linear-gradient(to top, rgba(255, 138, 61, 0.42), rgba(255, 138, 61, 0.02)) 18px 60px / 14px 52px no-repeat,
        linear-gradient(to top, rgba(255, 138, 61, 0.34), rgba(255, 138, 61, 0.02)) 58px 38px / 14px 74px no-repeat,
        linear-gradient(to top, rgba(255, 138, 61, 0.26), rgba(255, 138, 61, 0.02)) 98px 22px / 14px 90px no-repeat,
        linear-gradient(to top, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02)) 138px 50px / 14px 62px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.08) 0 1px, transparent 1px) 0 0 / 100% 34px;
      opacity: 0.48;
      transform: perspective(420px) rotateX(60deg) rotateZ(-12deg) skewX(-12deg);
      filter: drop-shadow(0 12px 18px rgba(255, 90, 0, 0.10));
      z-index: 0;
    }

    .home-fx-cube {
      width: 214px;
      height: 214px;
      transform: rotateX(60deg) rotateZ(43deg);
      filter:
        drop-shadow(0 32px 42px rgba(255, 90, 0, 0.34))
        drop-shadow(0 0 22px rgba(255, 114, 32, 0.20));
      animation: fxCorePulse 7.5s ease-in-out infinite;
      z-index: 3;
    }

    .home-fx-cube::before {
      inset: -38px;
      border: 1px solid rgba(255, 219, 195, 0.22);
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 90, 0, 0.07), transparent 52%),
        conic-gradient(from 84deg, transparent 0 18%, rgba(255, 138, 61, 0.38) 20% 21.5%, transparent 24% 58%, rgba(255, 255, 255, 0.20) 60% 61%, transparent 64%);
      -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 67%, #000 68% 69.6%, transparent 71%);
      mask-image: radial-gradient(ellipse at center, transparent 0 67%, #000 68% 69.6%, transparent 71%);
      opacity: 0.46;
      transform: translateZ(-24px) rotateZ(-3deg);
      animation: fxCoreHalo 18s linear infinite;
    }

    .home-fx-cube::after {
      left: 50%;
      top: 50%;
      right: auto;
      width: 262px;
      height: 262px;
      border: 1px solid rgba(255, 138, 61, 0.10);
      background:
        radial-gradient(circle at 84% 50%, rgba(255, 138, 61, 0.74) 0 4px, transparent 5px),
        radial-gradient(circle at 18% 68%, rgba(255, 138, 61, 0.72) 0 4px, transparent 5px),
        radial-gradient(circle at 58% 8%, rgba(255, 255, 255, 0.70) 0 3px, transparent 4px);
      opacity: 0.58;
      transform: translate(-50%, -50%) translateZ(-38px) rotateZ(16deg);
      animation: fxCoreHalo 24s linear infinite reverse;
    }

    .home-fx-cube span {
      border-color: rgba(255, 255, 255, 0.34);
      border-radius: 25px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.30), transparent 24%),
        linear-gradient(145deg, #ffab67 0%, #ff6c18 44%, #f04d00 100%);
      box-shadow:
        0 28px 52px rgba(255, 90, 0, 0.34),
        inset 0 0 0 14px rgba(255, 255, 255, 0.10),
        inset 0 -24px 42px rgba(128, 36, 0, 0.16);
      letter-spacing: 0;
    }

    .home-fx-cube span:first-child {
      transform: translateZ(58px);
    }

    .home-fx-cube span:nth-child(2) {
      width: 88px;
      right: -88px;
      border-radius: 18px;
      background: linear-gradient(155deg, #df4500, #8d2700);
      opacity: 0.82;
    }

    .home-fx-cube span:nth-child(3) {
      height: 88px;
      bottom: -88px;
      border-radius: 18px;
      background: linear-gradient(155deg, #ff7a28, #9b2d00);
      opacity: 0.78;
    }

    @keyframes fxMiniCardLift {
      0%, 100% { transform: translate(-50%, -50%) perspective(420px) rotateX(54deg) rotateZ(-7deg) translateY(0); }
      50% { transform: translate(-50%, -50%) perspective(420px) rotateX(54deg) rotateZ(-7deg) translateY(-8px); }
    }

    @keyframes fxMiniChartLift {
      0%, 100% { transform: translate(-50%, -50%) perspective(460px) rotateX(58deg) rotateZ(-1deg) translateY(0); }
      50% { transform: translate(-50%, -50%) perspective(460px) rotateX(58deg) rotateZ(-1deg) translateY(-8px); }
    }

    @keyframes fxMiniNetwork {
      0%, 100% { opacity: 0.72; filter: saturate(1); }
      50% { opacity: 1; filter: saturate(1.16); }
    }

    @keyframes fxMiniShield {
      0%, 100% { transform: translate(-50%, -50%) perspective(420px) rotateX(18deg) translateY(0); }
      50% { transform: translate(-50%, -50%) perspective(420px) rotateX(18deg) translateY(-7px); }
    }

    @keyframes fxShieldOrbit {
      0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 0.74; }
      50% { transform: translate(-50%, -50%) rotate(7deg) scale(1.05); opacity: 0.96; }
    }

    @keyframes fxCorePulse {
      0%, 100% { transform: rotateX(60deg) rotateZ(43deg) translateY(0); }
      50% { transform: rotateX(60deg) rotateZ(43deg) translateY(-4px); }
    }

    @keyframes fxCoreOrbit {
      0%, 100% { transform: rotate(-16deg) skewX(-5deg) scale(1); }
      50% { transform: rotate(-11deg) skewX(-4deg) scale(1.015); }
    }

    @keyframes fxCoreGlow {
      0%, 100% { opacity: 0.76; transform: translate(-50%, -50%) scale(0.98); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    }

    @keyframes fxCoreHalo {
      0% { rotate: 0deg; }
      100% { rotate: 360deg; }
    }

    @keyframes fxSignalFlow {
      0% { background-position: 180% 0; opacity: 0.38; }
      45% { opacity: 0.82; }
      100% { background-position: -80% 0; opacity: 0.38; }
    }

    @keyframes fxRibbonRise {
      0%, 100% { opacity: 0.72; transform: rotateX(62deg) rotateZ(-23deg) translateY(0); }
      50% { opacity: 0.96; transform: rotateX(62deg) rotateZ(-23deg) translateY(-8px); }
    }

    @keyframes fxPortBlink {
      0%, 100% { transform: scale(0.92); opacity: 0.52; }
      50% { transform: scale(1.12); opacity: 1; }
    }

    @keyframes fxArtFloat {
      0%, 100% {
        transform: translate3d(var(--fx-move-x), var(--fx-move-y), 0) rotateX(var(--fx-tilt-y)) rotateY(var(--fx-tilt-x)) scale(var(--fx-scale));
      }
      50% {
        transform: translate3d(var(--fx-move-x), calc(var(--fx-move-y) - 5px), 0) rotateX(calc(var(--fx-tilt-y) + 0.35deg)) rotateY(var(--fx-tilt-x)) scale(var(--fx-scale));
      }
    }

    @keyframes fxStackFloat {
      0%, 100% {
        transform: translate3d(var(--fx-move-x), var(--fx-move-y), 0) rotateX(var(--fx-tilt-y)) rotateY(var(--fx-tilt-x)) scale(var(--fx-scale));
      }
      50% {
        transform: translate3d(var(--fx-move-x), calc(var(--fx-move-y) - 12px), 0) rotateX(calc(var(--fx-tilt-y) + 1deg)) rotateY(var(--fx-tilt-x)) scale(var(--fx-scale));
      }
    }

    @keyframes fxOrbit {
      0% { filter: hue-rotate(0deg); }
      50% { filter: hue-rotate(16deg); }
      100% { filter: hue-rotate(0deg); }
    }

    @keyframes fxCardSheen {
      0%, 58% { transform: translateX(-125%); }
      76%, 100% { transform: translateX(125%); }
    }

    @keyframes fxCubePulse {
      0%, 100% { transform: rotateX(58deg) rotateZ(43deg) translateY(0); }
      50% { transform: rotateX(58deg) rotateZ(43deg) translateY(-8px); }
    }

    @keyframes fxIconPulse {
      0%, 100% { transform: scale(0.96); opacity: 0.35; }
      50% { transform: scale(1.12); opacity: 0.08; }
    }

    @keyframes fxMiniFloat {
      0%, 100% { transform: translate(-50%, -50%) translateY(0); }
      50% { transform: translate(-50%, -50%) translateY(-8px); }
    }

    @keyframes fxCubeOrbit {
      0%, 100% { transform: rotate(-18deg) scale(1); }
      50% { transform: rotate(-8deg) scale(1.04); }
    }

    @media (max-width: 1180px) {
      .home-fx-hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: auto;
      }

      .home-fx-copy {
        max-width: 820px;
        width: 100%;
        min-width: 0;
      }

      .home-fx-visual {
        min-height: 380px;
      }

      .home-fx-stats,
      .home-fx-why-grid,
      .home-fx-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-fx-split,
      .home-fx-cta-panel {
        grid-template-columns: 1fr;
      }

      .home-fx-mini-grid,
      .home-fx-community-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-fx-flow-grid,
      .home-fx-scenario-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .home-fx-footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .home-fx-flow-card:nth-child(3n)::after {
        right: 50%;
        top: auto;
        bottom: -22px;
        transform: translateX(50%) rotate(90deg);
      }

      .home-fx-stat:nth-child(2) {
        border-right: 0;
      }
    }

    @media (max-width: 720px) {
      .home-fx-hero {
        padding: 34px 0 16px;
      }

      .home-fx-hero-inner,
      .home-fx-section,
      .home-fx-platform {
        width: calc(100% - 28px);
      }

      .home-fx-title {
        font-size: 50px;
        line-height: 0.95;
      }

      .home-fx-slogan {
        max-width: 100%;
        font-size: 23px;
        line-height: 1.16;
        overflow-wrap: anywhere;
        word-break: break-all;
        white-space: normal !important;
      }

      .home-fx-slogan span {
        display: block;
      }

      .home-fx-slogan span + span::before {
        content: "";
      }

      .home-fx-lead {
        font-size: 14.5px;
        max-width: calc(100vw - 28px);
        overflow-wrap: anywhere;
        word-break: break-all;
      }

      .home-fx-eyebrow {
        max-width: 100%;
        min-height: auto;
        padding: 8px 12px;
        white-space: normal;
        line-height: 1.35;
      }

      .home-fx-actions .btn {
        flex: 1 1 100%;
      }

      .home-fx-benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
      }

      .home-fx-benefit {
        min-width: 0;
      }

      .home-fx-visual {
        min-height: 320px;
        --fx-scale: 0.82;
      }

      .home-fx-art-shell {
        width: 154vw;
        max-width: none;
        margin-right: 0;
      }

      .home-fx-world {
        width: 104%;
        right: -2%;
      }

      .home-fx-stack {
        width: 300px;
        height: 270px;
      }

      .home-fx-orbit.one {
        width: 350px;
        height: 130px;
      }

      .home-fx-orbit.two {
        width: 330px;
        height: 160px;
      }

      .home-fx-node {
        width: 48px;
        height: 48px;
      }

      .home-fx-stats,
      .home-fx-why-grid,
      .home-fx-service-grid,
      .home-fx-mini-grid,
      .home-fx-community-grid,
      .home-fx-flow-grid,
      .home-fx-scenario-grid,
      .home-fx-chip-row {
        grid-template-columns: 1fr;
      }

      .home-fx-stat,
      .home-fx-stat:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #edf0f4;
      }

      .home-fx-stat:last-child {
        border-bottom: 0;
      }

      .home-fx-section-title {
        display: block;
      }

      .home-fx-section-title::before,
      .home-fx-section-title::after {
        display: none;
      }

      .home-fx-platform {
        padding: 26px 0;
      }

      .home-fx-platform-inner {
        width: calc(100% - 28px);
      }

      .home-fx-band,
      .home-fx-flow-section,
      .home-fx-scenario-section,
      .home-fx-cta-panel,
      .home-fx-risk-note,
      .home-fx-footer {
        width: calc(100% - 28px);
      }

      .home-fx-band,
      .home-fx-flow-section,
      .home-fx-scenario-section {
        padding: 28px 0;
      }

      .home-fx-split {
        gap: 22px;
      }

      .home-fx-mini-card {
        min-height: 230px;
      }

      .home-fx-flow-card:not(:last-child)::after {
        right: 50%;
        top: auto;
        bottom: -22px;
        transform: translateX(50%) rotate(90deg);
      }

      .home-fx-cta-panel {
        min-height: auto;
        padding: 30px 22px;
      }

      .home-fx-cube-scene {
        min-height: 190px;
      }

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

      .home-fx-footer-bottom {
        display: block;
      }

      .home-fx-footer-bottom span:last-child {
        display: block;
        margin-top: 8px;
      }
    }

    /* 产品与服务子页面保持同一套主导航，避免页面切换时隐藏“信号”等主菜单。 */
    body:has(#copyPage:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#clientApiPage:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#copyCommunityPage:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#strategyCustomPage:not(.hidden)) .main-nav > a[data-route-link="signals"],
    body:has(#copyPage:not(.hidden)) .service-nav-only,
    body:has(#clientApiPage:not(.hidden)) .service-nav-only,
    body:has(#copyCommunityPage:not(.hidden)) .service-nav-only,
    body:has(#strategyCustomPage:not(.hidden)) .service-nav-only {
      display: inline-flex !important;
    }

    /* Replace decorative stripe placeholders with chart-like SVG visuals. */
    .svc-chart-line.svc-backtest-chart,
    .svc-chart-line.svc-equity-mini-chart,
    .community-curve.svc-signal-growth-chart,
    .community-phone-chart {
      position: relative;
      overflow: hidden;
      border: 1px solid #e6ebf2;
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.72)),
        radial-gradient(circle at 82% 16%, rgba(37,99,235,.08), transparent 30%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }

    .svc-chart-line.svc-backtest-chart::before,
    .svc-chart-line.svc-equity-mini-chart::before,
    .community-curve.svc-signal-growth-chart::before {
      display: none !important;
      content: none !important;
    }

    .svc-chart-line.svc-backtest-chart {
      height: 150px;
      border-color: rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 70% 18%, rgba(59,130,246,.16), transparent 31%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,10,24,.94));
    }

    .svc-chart-line.svc-equity-mini-chart {
      height: 145px;
      margin-top: 12px;
    }

    .community-curve.svc-signal-growth-chart {
      height: 104px;
      margin-top: 14px;
    }

    .svc-chart-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .svc-grid-line {
      fill: none;
      stroke: rgba(148,163,184,.22);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .svc-chart-svg.dark .svc-grid-line {
      stroke: rgba(226,232,240,.12);
    }

    .svc-line-blue,
    .svc-line-orange,
    .svc-line-green {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 4;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 8px 10px rgba(15,23,42,.12));
    }

    .svc-line-blue { stroke: #2563eb; }
    .svc-line-orange { stroke: #ff7a1a; }
    .svc-line-green { stroke: #10b981; }
    .svc-signal-growth-chart .svc-area-blue { fill: url(#communitySignalArea); }
    .svc-backtest-chart .svc-area-blue { fill: url(#strategyBacktestArea); }
    .svc-equity-mini-chart .svc-area-green { fill: url(#strategyEquityArea); }

    .svc-dot-blue,
    .svc-dot-green {
      stroke: #fff;
      stroke-width: 3;
      vector-effect: non-scaling-stroke;
    }

    .svc-dot-blue { fill: #2563eb; }
    .svc-dot-green { fill: #10b981; }

    .svc-drawdown-bars rect {
      fill: rgba(239,68,68,.28);
      rx: 3;
    }

    .svc-chart-legend,
    .svc-chart-caption {
      position: absolute;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      pointer-events: none;
    }

    .svc-chart-legend {
      top: 10px;
      right: 10px;
      padding: 6px 8px;
      color: rgba(255,255,255,.88);
      background: rgba(15,23,42,.62);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      gap: 8px;
      font-size: 10px;
    }

    .svc-chart-legend span,
    .svc-chart-caption span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .svc-chart-legend span::before,
    .svc-chart-caption span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
    }

    .svc-chart-legend .blue { color: #60a5fa; }
    .svc-chart-legend .orange { color: #ffb067; }

    .svc-chart-caption {
      top: 8px;
      right: 9px;
      padding: 7px 8px;
      color: #2563eb;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(37,99,235,.14);
      box-shadow: 0 10px 22px rgba(15,23,42,.08);
    }

    .svc-chart-caption b {
      color: #079455;
      font-weight: 950;
      white-space: nowrap;
    }

    .community-phone-chart {
      height: 74px;
      margin: 14px 6px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.84), rgba(239,246,255,.88)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 74'%3E%3Cpath d='M0 18H220M0 37H220M0 56H220' stroke='%23dbeafe' stroke-width='1'/%3E%3Cpath d='M6 58 C24 52 34 42 52 44 C72 46 78 30 96 32 C116 34 122 18 144 20 C166 22 176 12 194 14 C206 15 214 9 220 6' fill='none' stroke='%232563eb' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 58 C24 52 34 42 52 44 C72 46 78 30 96 32 C116 34 122 18 144 20 C166 22 176 12 194 14 C206 15 214 9 220 6 L220 74 L6 74 Z' fill='%232563eb' fill-opacity='.12'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }

    /* 首页底部 CTA：去掉旋转圆环/圆点动效，保留静态技术芯片视觉。 */
    /* Home bottom CTA: remove rotating orbit/circle layers and keep a static chip visual. */
    .home-fx-cta-panel .home-fx-cube-scene::before,
    .home-fx-cta-panel .home-fx-cube::before,
    .home-fx-cta-panel .home-fx-cube::after {
      display: none !important;
      content: none !important;
      animation: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    .home-fx-cta-panel .home-fx-cube {
      animation: none !important;
      filter:
        drop-shadow(0 30px 42px rgba(255, 90, 0, 0.28))
        drop-shadow(0 0 20px rgba(255, 114, 32, 0.14));
    }

    .home-fx-cta-panel .home-fx-cube-scene::after {
      opacity: 0.32;
      animation: none !important;
    }

    .home-fx-cta-panel .home-fx-cube-scene.has-art .home-fx-cta-art,
    .home-fx-cta-panel .home-fx-cta-art {
      display: none !important;
    }

    /* Home bottom CTA v2: subtle orbit layer plus faint candlestick market backdrop. */
    .home-fx-cta-panel {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 75% 50%, rgba(255, 90, 0, 0.30), transparent 26%),
        radial-gradient(circle at 92% 18%, rgba(255, 138, 61, 0.18), transparent 24%),
        linear-gradient(135deg, #06152d 0%, #071a38 47%, #321e28 100%) !important;
    }

    .home-fx-cta-panel::before {
      content: "";
      position: absolute;
      inset: 18px 22px 16px auto;
      width: min(720px, 56%);
      opacity: 0.34;
      pointer-events: none;
      z-index: 0;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 260'%3E%3Cg fill='none'%3E%3Cpath d='M0 52H760M0 112H760M0 172H760M0 232H760' stroke='%23ffffff' stroke-opacity='.10'/%3E%3Cpath d='M30 196 C74 166 114 176 154 136 C190 100 225 124 265 92 C304 62 336 82 378 56 C420 32 462 56 506 38 C558 18 610 40 730 16' stroke='%23ff8a3d' stroke-opacity='.52' stroke-width='3'/%3E%3Cpath d='M34 214 C92 196 130 206 178 170 C222 138 256 154 304 126 C348 98 386 116 432 84 C478 52 522 72 568 50 C620 26 662 44 738 26' stroke='%23ffffff' stroke-opacity='.13' stroke-width='2'/%3E%3C/g%3E%3Cg stroke='%23ff8a3d' stroke-width='3' stroke-linecap='round' fill='none' opacity='.56'%3E%3Cpath d='M68 172V118M112 194V146M158 150V92M204 174V118M250 132V76M296 152V102M342 116V58M388 142V88M434 104V54M480 126V78M526 90V40M572 116V62M618 84V38M664 108V62M710 72V30'/%3E%3C/g%3E%3Cg opacity='.50'%3E%3Crect x='58' y='130' width='20' height='32' rx='3' fill='%23ff8a3d'/%3E%3Crect x='102' y='154' width='20' height='30' rx='3' fill='%23ffffff' fill-opacity='.20'/%3E%3Crect x='148' y='104' width='20' height='36' rx='3' fill='%23ff8a3d'/%3E%3Crect x='194' y='126' width='20' height='36' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='240' y='86' width='20' height='34' rx='3' fill='%23ff8a3d'/%3E%3Crect x='286' y='112' width='20' height='30' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='332' y='70' width='20' height='34' rx='3' fill='%23ff8a3d'/%3E%3Crect x='378' y='98' width='20' height='32' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='424' y='64' width='20' height='30' rx='3' fill='%23ff8a3d'/%3E%3Crect x='470' y='88' width='20' height='28' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='516' y='50' width='20' height='30' rx='3' fill='%23ff8a3d'/%3E%3Crect x='562' y='72' width='20' height='34' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='608' y='46' width='20' height='28' rx='3' fill='%23ff8a3d'/%3E%3Crect x='654' y='72' width='20' height='26' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='700' y='40' width='20' height='24' rx='3' fill='%23ff8a3d'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    }

    .home-fx-cta-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(6, 21, 45, 0.82) 0%, rgba(6, 21, 45, 0.45) 42%, transparent 70%),
        radial-gradient(circle at 72% 55%, rgba(255, 90, 0, 0.16), transparent 30%);
    }

    .home-fx-cta-panel > * {
      position: relative;
      z-index: 1;
    }

    .home-fx-cta-panel .home-fx-cube-scene::before {
      content: "" !important;
      display: block !important;
      visibility: visible !important;
      position: absolute;
      width: 390px;
      height: 132px;
      border: 1px solid rgba(255, 138, 61, 0.28);
      border-radius: 999px;
      background:
        radial-gradient(circle at 16% 58%, rgba(255, 138, 61, 0.72) 0 4px, transparent 5px),
        radial-gradient(circle at 86% 42%, rgba(255, 255, 255, 0.48) 0 3px, transparent 4px);
      box-shadow: 0 0 22px rgba(255, 90, 0, 0.12), inset 0 0 20px rgba(255, 138, 61, 0.05);
      opacity: 0.42 !important;
      transform: rotate(-14deg) skewX(-6deg);
      animation: none !important;
      pointer-events: none;
      z-index: 1;
    }

    .home-fx-cta-panel .home-fx-cube::before {
      content: "" !important;
      display: block !important;
      visibility: visible !important;
      position: absolute;
      inset: -30px;
      border: 1px solid rgba(255, 219, 195, 0.18);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, rgba(255, 90, 0, 0.08), transparent 56%);
      opacity: 0.28 !important;
      transform: translateZ(-28px) rotateZ(-8deg);
      animation: none !important;
      pointer-events: none;
    }

    .home-fx-cta-panel .home-fx-cube::after {
      display: none !important;
      content: none !important;
    }

    /* Product service page bottom CTA redesign. */
    .copy-v2-cta.product-bottom-cta,
    .api-v2-cta.product-bottom-cta,
    .svc-cta.product-bottom-cta {
      position: relative;
      isolation: isolate;
      min-height: 286px;
      display: grid !important;
      grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
      grid-template-rows: auto auto;
      align-items: center;
      gap: 18px 44px;
      margin-top: 28px;
      padding: 42px 48px;
      overflow: hidden;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 18px;
      background:
        radial-gradient(circle at 78% 50%, rgba(255, 90, 0, .26), transparent 28%),
        radial-gradient(circle at 96% 10%, rgba(255, 138, 61, .16), transparent 24%),
        linear-gradient(135deg, #06152d 0%, #071a38 46%, #32202a 100%) !important;
      box-shadow: 0 28px 64px rgba(15, 23, 42, .20);
    }

    .copy-v2-cta.product-bottom-cta::before,
    .api-v2-cta.product-bottom-cta::before,
    .svc-cta.product-bottom-cta::before {
      content: "";
      position: absolute;
      inset: 22px 24px 20px auto;
      width: min(700px, 58%);
      opacity: .22;
      pointer-events: none;
      z-index: 0;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 260'%3E%3Cg fill='none'%3E%3Cpath d='M0 52H760M0 112H760M0 172H760M0 232H760' stroke='%23ffffff' stroke-opacity='.10'/%3E%3Cpath d='M30 198 C84 166 118 178 164 132 C204 92 238 126 284 88 C324 56 356 82 398 54 C440 28 486 56 528 38 C580 14 640 44 730 18' stroke='%23ff8a3d' stroke-opacity='.58' stroke-width='3'/%3E%3Cpath d='M34 218 C92 196 138 208 184 170 C226 136 264 154 312 124 C356 96 396 114 440 84 C486 52 528 74 574 50 C628 24 670 46 738 26' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2'/%3E%3C/g%3E%3Cg stroke='%23ff8a3d' stroke-width='3' stroke-linecap='round' fill='none' opacity='.50'%3E%3Cpath d='M68 176V118M116 196V148M164 148V92M212 174V118M260 132V76M308 154V102M356 116V58M404 142V88M452 104V54M500 126V78M548 90V40M596 116V62M644 84V38M692 108V62'/%3E%3C/g%3E%3Cg opacity='.42'%3E%3Crect x='58' y='130' width='20' height='34' rx='3' fill='%23ff8a3d'/%3E%3Crect x='106' y='154' width='20' height='30' rx='3' fill='%23ffffff' fill-opacity='.20'/%3E%3Crect x='154' y='104' width='20' height='36' rx='3' fill='%23ff8a3d'/%3E%3Crect x='202' y='126' width='20' height='36' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='250' y='86' width='20' height='34' rx='3' fill='%23ff8a3d'/%3E%3Crect x='298' y='112' width='20' height='30' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='346' y='70' width='20' height='34' rx='3' fill='%23ff8a3d'/%3E%3Crect x='394' y='98' width='20' height='32' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='442' y='64' width='20' height='30' rx='3' fill='%23ff8a3d'/%3E%3Crect x='490' y='88' width='20' height='28' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='538' y='50' width='20' height='30' rx='3' fill='%23ff8a3d'/%3E%3Crect x='586' y='72' width='20' height='34' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3Crect x='634' y='46' width='20' height='28' rx='3' fill='%23ff8a3d'/%3E%3Crect x='682' y='72' width='20' height='26' rx='3' fill='%23ffffff' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 84%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 18%, #000 84%, transparent);
    }

    .copy-v2-cta.product-bottom-cta::after,
    .api-v2-cta.product-bottom-cta::after,
    .svc-cta.product-bottom-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(6, 21, 45, .86) 0%, rgba(6, 21, 45, .54) 42%, transparent 72%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
      background-size: auto, 42px 42px, 42px 42px;
    }

    .product-bottom-cta > * {
      position: relative;
      z-index: 1;
    }

    .copy-v2-cta.product-bottom-cta > div:not(.product-cta-visual):not(.copy-v2-actions),
    .api-v2-cta.product-bottom-cta > div:not(.product-cta-visual):not(.api-v2-actions) {
      grid-column: 1;
      grid-row: 1;
      align-self: end;
    }

    .copy-v2-cta.product-bottom-cta .copy-v2-actions,
    .api-v2-cta.product-bottom-cta .api-v2-actions {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 !important;
    }

    .product-bottom-cta .product-cta-visual {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .svc-cta.product-bottom-cta > div:first-child {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    .svc-cta.product-bottom-cta .svc-cta-art.product-cta-visual {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .product-bottom-cta h2 {
      max-width: 720px;
      color: #fff !important;
      font-size: clamp(30px, 2.45vw, 44px) !important;
      line-height: 1.18 !important;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .product-bottom-cta p {
      max-width: 720px;
      color: rgba(255, 255, 255, .80) !important;
      font-size: 15px !important;
      line-height: 1.78 !important;
    }

    .product-bottom-cta .btn:not(.primary) {
      color: #fff !important;
      border-color: rgba(255, 255, 255, .34) !important;
      background: rgba(255, 255, 255, .08) !important;
    }

    .product-cta-visual {
      position: relative;
      height: 230px !important;
      min-height: 220px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 48%, rgba(255, 90, 0, .20), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 24px 46px rgba(0, 0, 0, .16);
    }

    .product-cta-visual::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .46;
      background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
      background-size: 34px 34px;
      pointer-events: none;
    }

    .product-cta-visual::after {
      content: "";
      position: absolute;
      inset: 24px;
      border: 1px solid rgba(255, 138, 61, .22);
      border-radius: 999px;
      transform: rotate(-12deg) skewX(-4deg);
      pointer-events: none;
      box-shadow: 0 0 24px rgba(255, 90, 0, .12);
    }

    .product-cta-flow-row {
      position: absolute;
      left: 26px;
      right: 26px;
      top: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .product-cta-flow-row span,
    .product-cta-api-side,
    .product-cta-api-gateway,
    .product-cta-api-servers span,
    .product-cta-endpoints span,
    .product-cta-community-tags span,
    .product-cta-strategy-modules span {
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .09);
      color: rgba(255, 255, 255, .92);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
      backdrop-filter: blur(10px);
    }

    .product-cta-flow-row span {
      min-width: 70px;
      padding: 9px 10px;
      border-radius: 12px;
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .product-cta-flow-row span.hot {
      color: #fff;
      border-color: rgba(255, 138, 61, .56);
      background: linear-gradient(135deg, rgba(255, 90, 0, .78), rgba(255, 138, 61, .34));
    }

    .product-cta-flow-row i {
      flex: 1 1 18px;
      max-width: 28px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 138, 61, .15), rgba(255, 138, 61, .85));
    }

    .product-cta-engine {
      position: relative;
      display: grid;
      place-items: center;
      width: 178px;
      height: 112px;
      border: 1px solid rgba(255, 138, 61, .34);
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 180, 118, .28), transparent 44%),
        linear-gradient(145deg, rgba(255, 90, 0, .32), rgba(255, 255, 255, .06));
      box-shadow: 0 22px 42px rgba(255, 90, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
      transform: rotateX(58deg) rotateZ(-8deg);
    }

    .product-cta-engine b {
      color: #fff;
      font-size: 18px;
      font-weight: 950;
    }

    .product-cta-engine em {
      margin-top: 4px;
      color: rgba(255, 255, 255, .72);
      font-size: 10px;
      font-style: normal;
      font-weight: 850;
    }

    .product-cta-mini-badges {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .product-cta-mini-badges span {
      padding: 8px 12px;
      border: 1px solid rgba(255, 138, 61, .30);
      border-radius: 999px;
      color: #ffd9c4;
      background: rgba(255, 90, 0, .10);
      font-size: 12px;
      font-weight: 900;
    }

    .product-cta-api-flow {
      grid-template-columns: 1fr 1.08fr 1fr;
      gap: 16px;
      padding: 28px;
    }

    .product-cta-api-side,
    .product-cta-api-gateway {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      min-height: 82px;
      padding: 14px;
      border-radius: 16px;
      text-align: center;
      font-weight: 950;
    }

    .product-cta-api-gateway {
      color: #fff;
      border-color: rgba(255, 138, 61, .54);
      background: linear-gradient(135deg, rgba(255, 90, 0, .58), rgba(255, 138, 61, .18));
      box-shadow: 0 18px 42px rgba(255, 90, 0, .18);
    }

    .product-cta-api-servers {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 12px;
    }

    .product-cta-api-servers span {
      display: grid;
      place-items: center;
      min-height: 58px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 950;
    }

    .product-cta-endpoints {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 22px;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .product-cta-endpoints span {
      padding: 7px 10px;
      border-radius: 999px;
      color: #ffd9c4;
      font-size: 11px;
      font-weight: 950;
    }

    .product-cta-dashboard {
      position: absolute;
      left: 34px;
      top: 24px;
      width: 290px;
      min-height: 154px;
      box-sizing: border-box;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      background: rgba(255, 255, 255, .10);
      box-shadow: 0 24px 45px rgba(0, 0, 0, .18);
      backdrop-filter: blur(12px);
    }

    .product-cta-window-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }

    .product-cta-window-bar i {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ff5a00;
      opacity: .82;
    }

    .product-cta-window-bar i:nth-child(2) { background: #ffb86b; }
    .product-cta-window-bar i:nth-child(3) { background: #35c48a; }

    .product-cta-dashboard b,
    .product-cta-equity b {
      color: #fff;
      font-size: 13px;
      font-weight: 950;
    }

    .product-cta-line-chart,
    .product-cta-equity-chart {
      height: 48px;
      margin: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 42 C30 36 42 44 70 28 C92 16 110 26 132 20 C156 12 178 22 206 10 C224 2 236 8 240 4' fill='none' stroke='%23ff8a3d' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 42 C30 36 42 44 70 28 C92 16 110 26 132 20 C156 12 178 22 206 10 C224 2 236 8 240 4 L240 60 L0 60Z' fill='%23ff8a3d' fill-opacity='.12'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }

    .product-cta-rank-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 0;
      color: rgba(255, 255, 255, .78);
      font-size: 12px;
      font-weight: 850;
    }

    .product-cta-rank-row em {
      color: #35c48a;
      font-style: normal;
      font-weight: 950;
    }

    .product-cta-phone {
      position: absolute;
      right: 36px;
      top: 38px;
      width: 112px;
      min-height: 172px;
      box-sizing: border-box;
      padding: 18px 14px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
      box-shadow: 0 24px 44px rgba(0, 0, 0, .22);
    }

    .product-cta-phone b {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 950;
      text-align: center;
    }

    .product-cta-phone span {
      display: block;
      height: 22px;
      margin-top: 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
    }

    .product-cta-community-tags,
    .product-cta-strategy-modules {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      z-index: 3;
    }

    .product-cta-community-tags span,
    .product-cta-strategy-modules span {
      padding: 7px 10px;
      border-radius: 999px;
      color: #ffd9c4;
      font-size: 11px;
      font-weight: 950;
    }

    .product-cta-code {
      position: absolute;
      left: 30px;
      top: 28px;
      width: 270px;
      min-height: 142px;
      box-sizing: border-box;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 18px;
      background: rgba(4, 13, 28, .72);
      box-shadow: 0 22px 44px rgba(0, 0, 0, .24);
    }

    .product-cta-code code {
      display: block;
      margin-top: 8px;
      color: #b7d7ff;
      font-family: Consolas, Monaco, monospace;
      font-size: 12px;
      line-height: 1.4;
    }

    .product-cta-code code:nth-of-type(2) { color: #ffd4b5; }
    .product-cta-code code:nth-of-type(3) { color: #9ff0bf; }

    .product-cta-equity {
      position: absolute;
      right: 34px;
      top: 42px;
      width: 210px;
      box-sizing: border-box;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      background: rgba(255, 255, 255, .10);
      box-shadow: 0 22px 44px rgba(0, 0, 0, .18);
      backdrop-filter: blur(12px);
    }

    .product-cta-equity-chart {
      height: 76px;
      margin-bottom: 0;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 78'%3E%3Cpath d='M0 62H220M0 42H220M0 22H220' stroke='%23ffffff' stroke-opacity='.13'/%3E%3Cpath d='M4 64 C26 58 36 52 56 54 C78 56 84 38 104 40 C126 42 138 20 158 24 C178 28 190 12 216 8' fill='none' stroke='%2335c48a' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M4 64 C26 58 36 52 56 54 C78 56 84 38 104 40 C126 42 138 20 158 24 C178 28 190 12 216 8 L216 78 L4 78Z' fill='%2335c48a' fill-opacity='.14'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }

    .product-cta-community-ui .product-cta-community-tags {
      left: 340px;
      right: 166px;
      bottom: 34px;
      justify-content: flex-start;
    }

    @media (max-width: 1100px) {
      .copy-v2-cta.product-bottom-cta,
      .api-v2-cta.product-bottom-cta,
      .svc-cta.product-bottom-cta {
        grid-template-columns: 1fr;
        padding: 34px 28px;
      }

      .copy-v2-cta.product-bottom-cta > div:not(.product-cta-visual):not(.copy-v2-actions),
      .api-v2-cta.product-bottom-cta > div:not(.product-cta-visual):not(.api-v2-actions),
      .copy-v2-cta.product-bottom-cta .copy-v2-actions,
      .api-v2-cta.product-bottom-cta .api-v2-actions,
      .product-bottom-cta .product-cta-visual,
      .svc-cta.product-bottom-cta > div:first-child,
      .svc-cta.product-bottom-cta .svc-cta-art.product-cta-visual {
        grid-column: 1;
        grid-row: auto;
      }

      .product-cta-visual {
        min-height: 250px;
      }
    }

    @media (max-width: 680px) {
      .copy-v2-cta.product-bottom-cta,
      .api-v2-cta.product-bottom-cta,
      .svc-cta.product-bottom-cta {
        border-radius: 14px;
        padding: 28px 20px;
      }

      .product-cta-flow-row {
        left: 16px;
        right: 16px;
        overflow: hidden;
      }

      .product-cta-flow-row span {
        min-width: 58px;
        padding: 8px 7px;
        font-size: 11px;
      }

      .product-cta-dashboard,
      .product-cta-code {
        left: 18px;
        width: calc(100% - 36px);
      }

      .product-cta-phone,
      .product-cta-equity {
        display: none;
      }
    }

    .contact-page {
      padding: 34px 0 58px;
      background:
        linear-gradient(180deg, #fff 0 315px, #f6f8fb 315px 100%);
    }

    .contact-shell {
      width: min(1280px, calc(100vw - 40px));
      margin: 0 auto;
      display: grid;
      gap: 24px;
    }

    .contact-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
      gap: 28px;
      align-items: stretch;
      padding: 20px 0 8px;
    }

    .contact-kicker {
      color: var(--brand);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .contact-title {
      margin: 12px 0 14px;
      color: var(--ink);
      font-size: 46px;
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: 0;
    }

    .contact-lead {
      max-width: 700px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.8;
      font-weight: 750;
    }

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

    .contact-response-panel,
    .contact-qr-panel,
    .contact-prep-panel,
    .contact-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    }

    .contact-response-panel {
      padding: 22px;
      display: grid;
      align-content: center;
      gap: 18px;
    }

    .contact-response-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .contact-response-row i,
    .contact-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #fff4ed;
      color: var(--brand);
      font-style: normal;
      font-weight: 950;
    }

    .contact-response-row span,
    .contact-card-label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .contact-response-row strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 16px;
      font-weight: 950;
    }

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

    .contact-card {
      min-height: 236px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }

    .contact-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-top: 4px solid rgba(var(--contact-accent, 255, 90, 0), 0.92);
      pointer-events: none;
    }

    .contact-card:nth-child(2) { --contact-accent: 23, 92, 211; }
    .contact-card:nth-child(3) { --contact-accent: 7, 148, 85; }
    .contact-card:nth-child(4) { --contact-accent: 83, 67, 181; }

    .contact-card:nth-child(2) .contact-icon { background: #eef4ff; color: var(--blue); }
    .contact-card:nth-child(3) .contact-icon { background: #ecfdf3; color: var(--green); }
    .contact-card:nth-child(4) .contact-icon { background: #f4f3ff; color: #533db5; }

    .contact-card-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .contact-card-title {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 950;
      line-height: 1.25;
    }

    .contact-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.65;
      font-weight: 750;
    }

    .contact-value {
      min-height: 40px;
      padding: 10px 12px;
      border: 1px solid #edf1f6;
      border-radius: 8px;
      background: #f8fafc;
      color: var(--ink);
      font-weight: 950;
      word-break: break-word;
    }

    .contact-card-actions {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .contact-copy-status {
      min-height: 18px;
      color: var(--green);
      font-size: 12px;
      font-weight: 900;
    }

    .contact-detail-grid {
      display: grid;
      grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
      gap: 20px;
      align-items: stretch;
    }

    .contact-qr-panel,
    .contact-prep-panel {
      padding: 24px;
    }

    .contact-panel-title {
      margin: 0 0 10px;
      color: var(--ink);
      font-size: 22px;
      font-weight: 950;
      letter-spacing: 0;
    }

    .contact-panel-text {
      margin: 0 0 18px;
      color: var(--muted);
      font-weight: 750;
      line-height: 1.7;
    }

    .contact-qr-layout {
      display: grid;
      grid-template-columns: 168px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }

    .contact-qr-placeholder {
      width: 168px;
      aspect-ratio: 1;
      border: 1px solid #dfe7f1;
      border-radius: 8px;
      background:
        linear-gradient(90deg, #111827 12px, transparent 12px 24px, #111827 24px 36px, transparent 36px) 18px 18px / 56px 56px no-repeat,
        linear-gradient(90deg, #111827 12px, transparent 12px 24px, #111827 24px 36px, transparent 36px) calc(100% - 74px) 18px / 56px 56px no-repeat,
        linear-gradient(90deg, #111827 12px, transparent 12px 24px, #111827 24px 36px, transparent 36px) 18px calc(100% - 74px) / 56px 56px no-repeat,
        repeating-linear-gradient(45deg, #101828 0 6px, #fff 6px 12px);
      box-shadow: inset 0 0 0 14px #fff;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 950;
    }

    .contact-qr-placeholder span {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 8px;
      background: var(--brand);
      box-shadow: 0 12px 24px rgba(255, 90, 0, 0.22);
    }

    .contact-service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .contact-service-tags span {
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid #edf1f6;
      border-radius: 8px;
      background: #f8fafc;
      color: #344054;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 900;
    }

    .contact-prep-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .contact-prep-list li {
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid #edf1f6;
      border-radius: 8px;
      background: #f8fafc;
      color: #344054;
      display: flex;
      align-items: center;
      font-weight: 850;
      line-height: 1.45;
    }

    @media (max-width: 1100px) {
      .contact-hero,
      .contact-detail-grid {
        grid-template-columns: 1fr;
      }

      .contact-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .contact-page {
        padding-top: 20px;
        background: #f6f8fb;
      }

      .contact-shell {
        width: calc(100vw - 28px);
        gap: 16px;
      }

      .contact-title {
        font-size: 34px;
      }

      .contact-lead {
        font-size: 15px;
      }

      .contact-method-grid,
      .contact-prep-list,
      .contact-qr-layout {
        grid-template-columns: 1fr;
      }

      .contact-card,
      .contact-response-panel,
      .contact-qr-panel,
      .contact-prep-panel {
        padding: 18px;
      }

      .contact-qr-placeholder {
        width: min(168px, 100%);
      }
    }