/* ======================
   BASE / LAYOUT
   ====================== */
html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Arial, sans-serif;
  color: #0b0b0b;
}
.site-wrapper { width: 450px; margin: 0 auto; background: #fff; }
.container { width: 100%; margin: 0 auto; }

/* ======================
   HEADER
   ====================== */
.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 0;
  margin-top: 10px;
}
.header-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: auto auto;
  width: 450px;
  margin: 0 auto;
}
.header-logo {
  display: flex;
  align-items: center;
  grid-row: 1 / span 2;
}
.logo-img { height: 70px; width: auto; }
.header-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-top: 20px;
}
.header-nav a { text-decoration: none; color: #0b0b0b; font-size: 0.7rem; }
.header-nav .cta {
  background: #ffd400;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
}
.header-stats {
  grid-column: 2;
  grid-row: 2;
  background: #003399;
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  padding: 0 0.4rem;
  position: relative;
  left: -110px;
  top: 4px;
  width: calc(100% + 110px);
  box-sizing: border-box;
}
.flags-img { height: 14px; width: auto; }

/* ======================
   SUBTITLE STRIP
   ====================== */
.site-subtitle {
  background: #fff;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 0.4rem 0;
  margin-top: -0.1rem;
}
.site-subtitle strong { font-weight: 700; }

/* ======================
   HERO (split)
   ====================== */
.hero-split.full {
  background: #f9f9f9;
  padding: 0.6rem 0 0.4rem;
}
.hero-body {
  display: flex;
  gap: 0.6rem;
}
.hero-left { flex: 1.5; }
.hero-right { flex: 1; }

.hero-left-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  padding: 0;
}
.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.feature-image {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.feature-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
.feature-kicker {
  display: inline-block;
  font-size: 0.75rem;
  background: #0047B2;
  color: #fff;
  padding: 0.05rem 0.35rem;
  margin-bottom: 0.25rem;
}
.feature-title {
  margin: 0 0 0.2rem 0;
  font-size: 0.95rem;
  line-height: 1.2;
}
.feature-read {
  font-size: 0.7rem;
  font-weight: 700;
  color: #FFD400;
  text-decoration: none;
}
.feature-read:hover { text-decoration: underline; }

.news-list { list-style: none; padding: 0; margin: 0; }
.news-item {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.22rem;
    max-height: 50px;
    overflow: hidden;
}
.date { font-size: 0.5rem; color: #555; }
.news-item strong { font-size: 0.55rem; line-height: 1.1; }

/* ======================
   SCROLLING TICKER
   ====================== */
#ticker-bar {
  background: #222;
  border: 0;
  line-height: 1;
  font-size: 0.7rem; /* you set this; kept */
  margin: 0;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}
#ticker-bar .track {
  display: inline-block;
  padding: 0.45rem 0; /* top/bottom only */
  will-change: transform;
  animation: ticker-loop 24s linear infinite;
}
#ticker-bar .chunk { display: inline-block; }
#ticker-bar .sep   { display: inline-block; color: #999; margin: 0 10px; }
#ticker-bar .sym   { color: #fff; font-weight: 700; margin-right: 6px; }
#ticker-bar .up    { color: #10b981; font-weight: 700; }
#ticker-bar .down  { color: #ef4444; font-weight: 700; }
#ticker-bar .flat  { color: #9ca3af; font-weight: 700; }
#ticker-bar .tag   { color: #e5e7eb; }
#ticker-bar:hover .track { animation-play-state: paused; }
@keyframes ticker-loop { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { #ticker-bar .track { animation: none; } }

/* ======================
   MARKETPLACE
   ====================== */
.marketplace-row {
  background: #FFD400;
  padding: 0.6rem;
}
.marketplace-row h2 {
  margin-top: 0;
  background: #0047B2;
  color: #fff;
  display: inline-block;
  font-size: 1rem;
  padding: 0.1rem 0.4rem;
  margin-left: -0.6rem;
}
.listing-row { display: flex; gap: 0.3rem; }
.listing-card {
  width: 80px;
  background: #fefefe;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.3rem 0.2rem;
  text-align: center;
}
.listing-card:hover { border-color: #999; }
.market-thumb { display: inline-block; margin: 0 auto; }
.listing-text { font-size: 0.55rem; line-height: 1.1; margin-top: 4px; }

/* ======================
   THREE COLUMNS
   ====================== */
.three-columns {
  background: #FFD400;
  padding: 0.5rem;
  display: flex;
  gap: 4px;
}
.column { flex: 1 1 0; }
.column h2 {
  background: #0047B2;
  color: #fff;
  padding: 0.1rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.1;
}
.company-list { list-style: none; padding: 0; margin: 0; }
.company-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.6rem;
  padding: 0.4rem;
}
.company-card:hover { border-color: #999; }
.company-thumb-wrapper { width: 50px; height: 50px; flex: none; }

/* ======================
   FOOTER
   ====================== */
.site-footer {
  background: #ffd400;
  color: #555;
  font-size: 0.6rem;
  padding: 0.2rem;
  text-align: center;
}
.footer-text { font-weight: 400; margin-bottom: 0.25rem; }
.footer-links { margin-top: 0.3rem; }
.footer-links a {
  color: #555;
  font-size: 0.55rem;
  margin: 0;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.footer-text a {
  color: #555;
  font-weight: 500;
  text-decoration: none;
}
.footer-text a:hover { color: #000; text-decoration: underline; }
.footer-links a + a::before { content: " • "; color: #555; }

/* ======================
   SPRITE POSITIONS
   ====================== */
.thumb {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background-image: url('images/sprite-thumbs.png');
  background-repeat: no-repeat;
  background-size: 250px 250px;
}
.news-thumb, .market-thumb, .company-thumb {
  width: 50px; height: 50px; margin: 0; padding: 0; border: none; flex-shrink: 0;
}
/* News */
.news-item:nth-child(1) .news-thumb { background-position:   0px   0px; }
.news-item:nth-child(2) .news-thumb { background-position: -50px   0px; }
.news-item:nth-child(3) .news-thumb { background-position:-100px   0px; }
.news-item:nth-child(4) .news-thumb { background-position:-150px   0px; }
/* Marketplace */
.listing-card:nth-child(1) .market-thumb { background-position:   0px -50px; }
.listing-card:nth-child(2) .market-thumb { background-position: -50px -50px; }
.listing-card:nth-child(3) .market-thumb { background-position:-100px -50px; }
.listing-card:nth-child(4) .market-thumb { background-position:-150px -50px; }
.listing-card:nth-child(5) .market-thumb { background-position:-200px -50px; }
/* Companies */
.column:nth-child(1) .company-card:nth-child(1) .company-thumb { background-position:   0px -100px; }
.column:nth-child(1) .company-card:nth-child(2) .company-thumb { background-position: -50px -100px; }
.column:nth-child(2) .company-card:nth-child(1) .company-thumb { background-position:   0px -150px; }
.column:nth-child(2) .company-card:nth-child(2) .company-thumb { background-position: -50px -150px; }
.column:nth-child(3) .company-card:nth-child(1) .company-thumb { background-position:   0px -200px; }
.column:nth-child(3) .company-card:nth-child(2) .company-thumb { background-position: -50px -200px; }