/* Custom utilities beyond Tailwind for subtle effects */
:root{
  --brand:#0ea5e9; /* sky-500 */
  --brand-dark:#0284c7; /* sky-600 */
}
html{scroll-behavior:smooth}
/* Gradient text utility */
.gradient-text{
  background: linear-gradient(90deg, #38bdf8 0%, #22d3ee 35%, #a78bfa 70%, #f472b6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* Glass card */
.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
/* Simple fade-in animation */
@keyframes fadeUp {0%{opacity:0; transform:translateY(12px)}100%{opacity:1; transform:translateY(0)}}
.fade-up{animation: fadeUp .6s ease both}

/* ECharts container helper */
.chart-box{height:420px}

/* Prose tweaks */
.prose strong{color:#e2e8f0}
.prose a{color:var(--brand)}
.prose a:hover{text-decoration:underline}

/* Header active link */
.nav-active{color:var(--brand);}

/* Dark gradient hero */
.hero-bg{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.15), transparent 60%),
              radial-gradient(800px 400px at 90% -20%, rgba(167,139,250,.15), transparent 60%),
              linear-gradient(180deg, #0b1220 0%, #0b1220 50%, #0f172a 100%);
}

/* Section dividers */
.section{position:relative}
.section::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.2),transparent)}

/* Responsive tweaks */
@media (min-width: 1024px){
  .hero-title{font-size:4.5rem;line-height:1.05}
}