/* News demo — extracted from index.html for reuse on /real-time-market-news/.
   Note: the original inline block included a `*, *::before, *::after { margin:0; padding:0 }`
   reset; that has been removed here so this stylesheet is safe to load alongside SEO pages. */
.demo-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px;
  font-family: "Sofia Sans Semi Condensed", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: transparent;
  box-sizing: border-box;
}
@keyframes demo-rise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes demo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.demo-card          { opacity: 0; }
.demo-card.is-visible { animation: demo-rise .75s cubic-bezier(.22,1,.36,1) both; }
.demo-card.is-visible .demo-head      { animation: demo-rise .65s cubic-bezier(.22,1,.36,1) .12s both; }
.demo-card.is-visible .gt-news-subtitle { animation: demo-rise .65s cubic-bezier(.22,1,.36,1) .22s both; }
.demo-card.is-visible .demo-terminal  { animation: demo-rise .7s  cubic-bezier(.22,1,.36,1) .34s both; }
.demo-head, .gt-news-subtitle, .demo-terminal { opacity: 0; }
.demo-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background: radial-gradient(140% 120% at 10% 0%, #141414 0%, #0b0b0b 60%, #070707 100%);
  border-radius: 18px;
  padding: 26px 26px 30px;
  border: 1px solid rgba(51, 226, 154, .18);
  box-shadow:
    inset 0 0 0 1px rgba(51, 226, 154, .06),
    0 0 60px rgba(51, 226, 154, .07),
    0 0 120px rgba(51, 226, 154, .03),
    0 16px 48px rgba(0, 0, 0, .55);
  box-sizing: border-box;
}
.demo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 226, 154, .5), transparent);
  border-radius: 1px;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.demo-dot {
  position: relative;
  width: 14px;
  height: 14px;
  background: #33E29A;
  border-radius: 4px;
  flex-shrink: 0;
}
.demo-dot::before,
.demo-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #33E29A;
  animation: demo-dot-ring 2s ease-out infinite;
}
.demo-dot::after { animation-delay: .7s; }
@keyframes demo-dot-ring {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.6); opacity: 0; }
}
.gt-news-title {
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  font-family: "Sofia Sans Semi Condensed", system-ui, sans-serif;
  color: #eaeaea;
  margin: 0;
}
.demo-card .gt-news-title {
  font-family: "Sofia Sans Semi Condensed", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
}
.demo-card .gt-news-subtitle {
  font-size: 15px;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}
.demo-badge {
  display: inline-block;
  color: #e89a3c;
  background: #2b1d11;
  border: 1px solid #593815;
  border-radius: 6px;
  padding: 2px 8px;
  font-family: "Oxygen Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .25px;
  line-height: 1.3;
  vertical-align: middle;
}
.gt-news-subtitle {
  color: #9ca3af;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 300;
  line-height: 1.45;
  margin-bottom: 18px;
}
.demo-terminal {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #000;
  height: 500px;
  display: flex;
  flex-direction: column;
  font-family: "Oxygen Mono", monospace;
  font-size: 12px;
  color: #eaeaea;
  position: relative;
}
.n-titlebar {
  height: 36px;
  background: #1a1a1a;
  border-bottom: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  flex-shrink: 0;
  user-select: none;
}
.n-title-text  { color: #eaeaea; font-size: 13px; font-weight: 400; letter-spacing: .2px; }
.n-title-link  { color: #6f6f6f; font-size: 12px; display: flex; align-items: center; cursor: pointer; }
.n-title-link svg { width: 13px; height: 13px; }
.n-title-security { color: #eaeaea; font-size: 13px; cursor: pointer; }
.n-title-icons { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.n-toolbar {
  height: 30px;
  background: #1a1a1a;
  border-bottom: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 3px;
  flex-shrink: 0;
}
.n-ctrl {
  display: inline-flex;
  align-items: center;
  height: 22px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 2px;
  color: #cccccc;
  font-family: "Oxygen Mono", monospace;
  font-size: 11px;
  padding: 0 7px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  appearance: none;
  outline: none;
}
.n-ctrl:hover { background: #282828; border-color: #444; }
.n-ctrl::placeholder { color: #555; }
input.n-ctrl  { width: 155px; cursor: text; border-color: #2a2a2a; color: #888; }
select.n-ctrl {
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23666' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.n-toolbar-spacer { flex: 1; }
.n-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #000;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}
.n-wrap::-webkit-scrollbar { width: 5px; }
.n-wrap::-webkit-scrollbar-track { background: transparent; }
.n-wrap::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
.n-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.n-table thead th {
  font-weight: 400; font-size: 12px; color: #eaeaea;
  background: #1d1d1d; border-bottom: 1px solid #2e2e2e;
  padding: 4px 6px; position: sticky; top: 0; z-index: 10;
  text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; user-select: none;
}
.n-table thead th.n-th-headline { text-align: left; padding-left: 8px; }
.n-table tbody td {
  padding: 3px 6px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; border-bottom: 1px solid #111;
}
.n-table tbody tr:nth-child(odd)  td { background: #000; }
.n-table tbody tr:nth-child(even) td { background: #191919; }
.n-table tbody tr { cursor: pointer; }
.n-table tbody tr:hover td { background: #252525 !important; }
.n-table tbody tr.n-top td { background: #e2e2e2 !important; color: #111 !important; }
.n-table tbody tr.n-top:hover td { background: #d4d4d4 !important; color: #111 !important; }
.n-col-headline { width: auto; }
.n-col-date   { width: 72px; min-width: 72px; }
.n-col-time   { width: 78px; min-width: 78px; }
.n-col-ticker { width: 66px; min-width: 66px; }
.n-col-source { width: 160px; min-width: 120px; }
.n-table td.n-td-headline { color: #cccccc; font-size: 12px; text-align: left; }
.n-table td.n-td-date     { color: #999; font-size: 11px; text-align: center; }
.n-table td.n-td-time     { color: #999; font-size: 11px; text-align: center; }
.n-table td.n-td-ticker   { color: #eaeaea; font-size: 11px; text-align: center; }
.n-table td.n-td-source   { color: #999; font-size: 11px; text-align: left; }
@keyframes n-row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.n-table tr.n-new td { animation: n-row-in .22s ease-out both; }
.n-statusbar {
  height: 26px;
  background: #1a1a1a;
  border-top: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.n-status-right { margin-left: auto; color: #666; font-size: 11px; padding: 0 12px; }
.n-status-right span { color: #999; }
.n-art {
  position: absolute;
  inset: 0;
  background: #121212;
  z-index: 50;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
}
.n-art.is-open { display: flex; animation: n-art-in .18s ease-out both; }
@keyframes n-art-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.n-art-nav {
  height: 35px; background: #121212; border-bottom: 1px solid #2e2e2e;
  display: flex; align-items: center; padding: 0 10px; gap: 10px; flex-shrink: 0;
}
.n-art-back {
  appearance: none; background: transparent; border: none;
  color: #cccccc; font-family: "Oxygen Mono", monospace; font-size: 11px;
  cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px;
}
.n-art-back:hover { color: #eaeaea; }
.n-art-nav-title { color: #666; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.n-art-scroll {
  flex: 1; overflow-y: auto; padding: 22px 32px 36px;
  max-width: 900px; width: 100%; margin: 0 auto;
}
.n-art-h       { font-size: 20px; font-weight: 400; color: #eaeaea; margin-bottom: 14px; line-height: 1.4; }
.n-art-chips   { margin-bottom: 10px; }
.n-art-chip    { display: inline-block; color: #dadada; background: #191919; border: 1px solid #333; border-radius: 6px; font-size: 11px; padding: 1px 8px; margin-right: 5px; }
.n-art-meta    { color: #666; font-size: 11px; margin-bottom: 14px; display: flex; flex-wrap: wrap; }
.n-art-meta span { margin-right: 14px; padding-right: 14px; border-right: 1px solid #333; }
.n-art-meta span:last-child { border-right: none; }
.n-art-desc    { color: #777; font-size: 13px; line-height: 1.6; margin-bottom: 16px; font-style: italic; }
.n-art-hr      { border: none; border-top: 1px solid #2e2e2e; margin: 14px 0 20px; }
.n-art-body    { color: #cccccc; font-size: 13px; line-height: 1.75; }
.n-art-body p  { margin-bottom: 14px; }
.n-art-blur-wrap { position: relative; }
.n-art-blur-wrap .n-art-desc,
.n-art-blur-wrap .n-art-hr,
.n-art-blur-wrap .n-art-body { filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; }
.n-art-cta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(to bottom, transparent 0%, rgba(18,18,18,.6) 30%, rgba(18,18,18,.92) 60%);
  z-index: 10;
}
.n-art-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a7a4a; color: #fff; border: 1px solid #25a063; border-radius: 4px;
  font-family: "Oxygen Mono", monospace; font-size: 12px; padding: 9px 22px;
  cursor: pointer; letter-spacing: .3px;
  transition: background .15s, border-color .15s, transform .1s;
  box-shadow: 0 0 18px rgba(37,160,99,.25), 0 2px 8px rgba(0,0,0,.4);
}
.n-art-cta-btn:hover { background: #1f9058; border-color: #2dba74; transform: translateY(-1px); box-shadow: 0 0 26px rgba(37,160,99,.4), 0 4px 12px rgba(0,0,0,.5); }
.n-art-cta-btn:active { transform: translateY(0); }
.n-art-cta-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.n-modal-backdrop {
  position: absolute; inset: 0; border-radius: 10px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  z-index: 100; display: none; align-items: center; justify-content: center;
}
.n-modal-backdrop.is-open { display: flex; }
.n-modal {
  background: #161616; border: 1px solid #2e2e2e; border-radius: 8px;
  padding: 28px 32px; max-width: 360px; width: 90%; text-align: center;
  animation: n-modal-in .2s ease-out both;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
@keyframes n-modal-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.n-modal-title { font-size: 14px; color: #eaeaea; margin-bottom: 6px; letter-spacing: .2px; font-family: "Oxygen Mono", monospace; }
.n-modal-sub   { font-size: 11px; color: #555; margin-bottom: 22px; line-height: 1.6; font-family: "Oxygen Mono", monospace; }
.n-modal-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a7a4a; color: #fff; border: 1px solid #25a063; border-radius: 4px;
  font-family: "Oxygen Mono", monospace; font-size: 12px; padding: 10px 22px;
  cursor: pointer; letter-spacing: .3px;
  transition: background .15s, border-color .15s, transform .1s;
  box-shadow: 0 0 20px rgba(37,160,99,.3), 0 2px 8px rgba(0,0,0,.4);
}
.n-modal-btn:hover { background: #1f9058; border-color: #2dba74; transform: translateY(-1px); box-shadow: 0 0 30px rgba(37,160,99,.45), 0 4px 12px rgba(0,0,0,.5); }
.n-modal-btn:active { transform: translateY(0); }
.demo-above {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 20px;
}
.demo-above .demo-head { margin-bottom: 6px; opacity: 1; }
.demo-above .gt-news-subtitle { opacity: 1; }
@media (max-width: 600px) {
  .demo-wrap { padding: 24px 10px; }
  .demo-card { padding: 16px 14px 20px; border-radius: 12px; }
  .demo-terminal { height: 420px; }
  .n-toolbar { overflow-x: auto; overflow-y: hidden; padding: 0 6px; }
  .n-toolbar::-webkit-scrollbar { display: none; }
  .n-toolbar { scrollbar-width: none; }
  input.n-ctrl, select.n-ctrl { display: none; }
  .n-table { table-layout: auto; }
  .n-col-date, .n-col-time, .n-col-ticker, .n-col-source { width: auto; min-width: 0; }
  .n-table th:nth-child(2), .n-table td:nth-child(2),
  .n-table th:nth-child(5), .n-table td:nth-child(5) { display: none; }
  .n-wrap { overflow-x: hidden; }
  .n-col-time   { width: 60px; }
  .n-col-ticker { width: 50px; }
  .n-art-scroll { padding: 16px 16px 28px; }
  .n-art-h { font-size: 16px; }
  .demo-card { opacity: 1 !important; }
  .demo-head, .gt-news-subtitle, .demo-terminal { opacity: 1 !important; }
}

/* "Largest News Database" footer block under the demo */
.news-demo-foot {
  width: 100%;
  max-width: 1100px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.2fr;
  gap: 32px;
  align-items: center;
}
.news-demo-foot-text { text-align: left; }
.news-demo-foot h3 {
  font-family: "Sofia Sans Semi Condensed", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: #eaeaea;
  margin: 0 0 14px;
}
.news-demo-foot p {
  color: #cfcfcf;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.news-demo-foot a.news-demo-cta {
  display: inline-block;
  color: #33E29A;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 26px;
  border: 1px solid rgba(51,226,154,0.6);
  border-radius: 999px;
  background: transparent;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.news-demo-foot a.news-demo-cta:hover {
  background: rgba(51,226,154,0.08);
  border-color: rgba(51,226,154,0.9);
}
.news-demo-foot-img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .news-demo-foot {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .news-demo-foot-text { text-align: center; }
}