:root {
  --clr-accent:         #ff2d6f;
  --clr-accent-dark:    #e0145a;
  --clr-accent-light:   #ff6b9a;
  --clr-accent-glow:    rgba(255,45,111,.35);
  --clr-accent-faint:   rgba(255,45,111,.08);
  --clr-teal:           #19e6c1;

  --clr-bg:             #070b24;
  --clr-bg-alt:         #0b1033;
  --clr-bg-dark:        #04061a;
  --clr-bg-dark2:       #0a0f30;

  --clr-text:           #f1f4ff;
  --clr-text-muted:     #9aa6d1;
  --clr-text-inv:       #f1f4ff;
  --clr-text-inv-muted: rgba(241,244,255,.72);

  --clr-border:         rgba(140,160,255,.16);
  --clr-border-dark:    rgba(140,160,255,.16);

  --clr-tag-1:          #19e6c1;
  --clr-tag-2:          #6c8cff;
  --clr-tag-3:          #19e6c1;
  --clr-tag-4:          #b07cff;
  --clr-tag-5:          #ff2d6f;

  --clr-shadow:         0 1px 2px rgba(0,0,0,.4);
  --clr-shadow-md:      0 10px 30px rgba(0,0,0,.45);
  --clr-shadow-accent:  0 8px 28px rgba(255,45,111,.35);
}

html, body { background: var(--clr-bg); color: var(--clr-text); }
body { background-image: radial-gradient(1200px 500px at 85% -5%, rgba(255,45,111,.14), transparent 60%), radial-gradient(900px 500px at -5% 10%, rgba(25,230,193,.09), transparent 60%); background-attachment: scroll; }

.tag-1, .tag-3 { color: #04212a; }

.site-header {
  background: rgba(7,11,36,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: none;
}
.header-logo { color: #fff; letter-spacing: .06em; font-weight: 800; }
.header-logo img { filter: brightness(0) invert(1); }
.nav-link { color: var(--clr-text-inv-muted); }
.nav-link:hover { color: #fff; }

.hero-a {
  background: transparent;
  min-height: 0;
  padding: 56px 0 72px;
  align-items: center;
  overflow: visible;
}
.hero-a-bg {
  inset: 56px max(20px, calc((100% - 1160px) / 2 + 20px)) 72px auto;
  width: min(56%, 640px);
  border-radius: 28px;
  background-image: url('/blog/img/hkjc-open-handicap-race-difference-analysis.jpg');
  background-position: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  transform: none;
}
.hero-a:hover .hero-a-bg { transform: none; }
.hero-a-overlay {
  inset: 56px max(20px, calc((100% - 1160px) / 2 + 20px)) 72px auto;
  width: min(56%, 640px);
  border-radius: 28px;
  background: linear-gradient(90deg, rgba(7,11,36,.55) 0%, rgba(7,11,36,0) 45%), linear-gradient(0deg, rgba(7,11,36,.5) 0%, rgba(7,11,36,0) 40%);
}
.hero-a-content {
  padding: 40px 36px;
  margin: 0 auto;
  max-width: 1160px;
  z-index: 2;
}
.hero-a-content > * { position: relative; }
.hero-a-content::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: min(54%, 600px);
  background: rgba(14,20,60,.72);
  border: 1px solid rgba(140,160,255,.2);
  border-radius: 26px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  z-index: -1;
}
.hero-a-content > .tag, .hero-a-content > .hero-a-title, .hero-a-content > .hero-a-excerpt, .hero-a-content > .hero-a-meta {
  max-width: min(calc(54% - 56px), 540px);
  margin-left: 24px;
}
.hero-a-title { font-size: clamp(30px, 3.6vw, 48px); font-style: italic; letter-spacing: -.01em; line-height: 1.16; text-shadow: none; }
.hero-a-excerpt { font-size: 15px; color: var(--clr-text-inv-muted); margin-bottom: var(--space-5); }

.trending-bar {
  background: transparent;
  border: 0;
  padding: 0 0 var(--space-6);
}
.trending-label { color: var(--clr-teal); font-weight: 800; letter-spacing: .12em; }
.trending-tag {
  background: rgba(140,160,255,.08);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-inv-muted);
  border-radius: 999px;
}
.trending-tag:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; }

.section { background: transparent; padding-top: 64px; padding-bottom: 64px; }
.section.bg-alt { background: linear-gradient(180deg, rgba(11,16,51,.0) 0%, rgba(11,16,51,.75) 18%, rgba(11,16,51,.75) 82%, rgba(11,16,51,0) 100%); }
.featured-section { background: transparent; }
.section-title { color: #fff; font-style: italic; font-weight: 900; letter-spacing: -.01em; }
.section-title .accent { color: var(--clr-accent); }
.section-divider::after { background: linear-gradient(90deg, var(--clr-accent), transparent); height: 2px; }

.card, .bp-card, .sidebar-widget, .faq-item {
  background: linear-gradient(160deg, rgba(22,30,84,.72), rgba(12,17,52,.72));
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  box-shadow: var(--clr-shadow-md);
  color: var(--clr-text);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover, .bp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,45,111,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,45,111,.25), 0 0 32px rgba(255,45,111,.18);
}
.card-title, .article-row-title, .bp-cat { color: #fff; }
.card-title:hover, .article-row-title:hover { color: var(--clr-teal); }
.card-excerpt, .bp-desc, .article-row-date, .card-footer { color: var(--clr-text-muted); }
.card-img { filter: saturate(1.05) brightness(.92); }
.bp-read-more { color: var(--clr-teal); }

.article-row { border-color: var(--clr-border); }
.article-row-img { border-radius: 12px; }

.sidebar-widget-title { color: var(--clr-teal); letter-spacing: .12em; }
.tag-outline { background: transparent; color: var(--clr-text-inv-muted); border: 1px solid var(--clr-border); border-radius: 999px; }
.author-name { color: #fff; }

.faq-section { background: transparent; }
.faq-item { padding: 20px 24px; margin-bottom: 14px; }
.faq-q { color: #fff; font-weight: 800; }
.faq-a { color: var(--clr-text-muted); line-height: 1.8; }

.site-footer {
  background: linear-gradient(180deg, #0b1033 0%, #04061a 100%);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}
.footer-logo, .footer-col-title { color: #fff; }
.footer-col-title { color: var(--clr-teal); letter-spacing: .12em; }
.footer-link { color: var(--clr-text-muted); }
.footer-link:hover { color: #fff; }
.footer-bottom { border-color: var(--clr-border); color: var(--clr-text-muted); }

@media (max-width: 899px) {
  .hero-a { padding: 24px 0 40px; }
  .hero-a-bg, .hero-a-overlay {
    position: relative;
    inset: auto;
    display: block;
    width: calc(100% - 40px);
    height: 220px;
    margin: 0 auto;
    border-radius: 20px;
  }
  .hero-a-overlay { position: absolute; left: 20px; right: 20px; top: 24px; width: auto; height: 220px; margin: 0; }
  .hero-a { flex-direction: column; align-items: stretch; position: relative; }
  .hero-a-content { padding: 20px; }
  .hero-a-content::before { left: 20px; right: 20px; width: auto; }
  .hero-a-content > .tag, .hero-a-content > .hero-a-title, .hero-a-content > .hero-a-excerpt, .hero-a-content > .hero-a-meta { max-width: none; margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 600px) {
  .header-logo img { display: none; }
  .header-logo { font-size: 16px; flex-shrink: 0; }
  .header-nav { min-width: 0; }
}