@import url('/css/brand.css');

:root {
  --midnight: #0B1120;
  --purple: #7B61FF;
  --cyan: #1BFFFF;
  --ink: #1E293B;
  --cloud: #F8FAFC;
  --slate: #94A3B8;
  --slate-700: #334155;
  --grad: linear-gradient(120deg, #2E3192 0%, #7B61FF 55%, #1BFFFF 100%);
  --maxw: 1100px;
  --article-max: 720px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cloud);
  line-height: 1.75;
}
h1, h2, h3, .brand { font-family: 'Outfit', system-ui, sans-serif; }
a { color: var(--purple); font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 80px; }
/* Header/nav: see /css/site-nav.css + /js/site-nav.js */
.hero-blog {
  background: linear-gradient(160deg, #0B1120 0%, #1E1B4B 55%, #2E3192 100%);
  color: #fff; padding: 56px 24px 48px; text-align: center;
}
.hero-blog h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 10px; }
.hero-blog p { color: #cbd5e1; max-width: 560px; margin: 0 auto; font-size: 16px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px;
  border: 1px solid rgba(46,49,146,.1);
  box-shadow: 0 12px 40px -24px rgba(46,49,146,.25);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(123,97,255,.35);
}
.blog-card .tag {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--purple); background: rgba(123,97,255,.1);
  padding: 5px 10px; border-radius: 999px; align-self: flex-start;
  margin-bottom: 12px;
}
.blog-card h2 { font-size: 20px; font-weight: 700; color: var(--midnight); margin-bottom: 10px; line-height: 1.3; }
.blog-card p { font-size: 14px; color: var(--slate-700); flex: 1; margin-bottom: 16px; }
.blog-card .meta { font-size: 12px; color: var(--slate); margin-bottom: 12px; }
.blog-card .read-more {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--purple);
}
.article-wrap { max-width: var(--article-max); margin: 0 auto; padding: 40px 24px 80px; }
.article-wrap h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; color: var(--midnight); margin-bottom: 12px; line-height: 1.2; }
.article-wrap .meta { font-size: 14px; color: var(--slate); margin-bottom: 28px; }
.article-wrap h2 { font-size: 22px; margin: 28px 0 12px; color: var(--midnight); }
.article-wrap p, .article-wrap li { font-size: 16px; color: var(--slate-700); margin-bottom: 14px; }
.article-wrap ul { padding-left: 22px; }
.legal-foot {
  text-align: center; padding: 32px 24px; font-size: 13px; color: var(--slate);
  border-top: 1px solid #e2e8f0; background: #fff;
}
.legal-foot a { color: var(--slate-700); margin: 0 6px; }
.blog-loading { text-align: center; color: var(--slate); padding: 40px; grid-column: 1 / -1; }
.blog-error { text-align: center; color: #b91c1c; padding: 24px; grid-column: 1 / -1; }