.blog-hero{position:relative;isolation:isolate;min-height:590px;display:grid;place-items:center;overflow:hidden;padding:150px 20px 105px;background:var(--page);text-align:center}
.blog-hero::before{content:"";position:absolute;inset:-32%;z-index:0;pointer-events:none;background:radial-gradient(circle at 20% 28%,rgba(25,86,222,.35) 0%,transparent 34%),radial-gradient(circle at 78% 42%,rgba(20,78,196,.44) 0%,transparent 38%),radial-gradient(circle at 54% 78%,rgba(13,47,116,.3) 0%,transparent 42%);filter:blur(42px);will-change:transform;animation:gradient-flow 16s ease-in-out infinite alternate}
.blog-hero-content{position:relative;z-index:2;width:min(100%,900px)}
.blog-hero h1{max-width:880px;margin:0 auto 22px;font-size:54px;font-weight:500;letter-spacing:-2px;line-height:64px}
.blog-hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:18px;line-height:24px}

.blog-section{padding:104px 20px 120px;background:var(--page)}
.blog-shell{width:min(100%,var(--max));margin:auto}
.blog-section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:48px}
.blog-section-heading h2{max-width:620px;margin:0;font-size:clamp(34px,4vw,50px);font-weight:500;letter-spacing:-.04em;line-height:1.08}
.blog-section-heading p{max-width:470px;margin:0;color:var(--muted);font-size:16px;line-height:1.6}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:rgba(11,16,25,.96);box-shadow:0 18px 54px rgba(0,0,0,.14);transition:border-color 240ms ease,transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease}
.blog-card:hover{border-color:rgba(148,163,184,.38);transform:translateY(-7px);box-shadow:0 26px 70px rgba(0,0,0,.25)}
.blog-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#101827}
.blog-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,7,11,.42));pointer-events:none}
.blog-card img{width:100%;height:100%;object-fit:cover;transition:transform 650ms cubic-bezier(.22,1,.36,1),filter 300ms ease}
.blog-card:hover img{transform:scale(1.055);filter:saturate(1.08)}
.blog-card-body{display:flex;min-height:270px;flex-direction:column;padding:22px}
.blog-tag{display:inline-flex;align-self:flex-start;min-height:27px;align-items:center;padding:0 9px;border:1px solid rgba(148,163,184,.2);border-radius:5px;background:#101827;color:#94a3b8;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.blog-card h3{margin:18px 0 11px;color:var(--text);font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.3}
.blog-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.blog-read-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:22px;color:#8eb7ff;font-size:14px;font-weight:600}
.blog-read-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms ease}
.blog-read-more:hover svg,.blog-read-more:focus-visible svg{transform:translateX(4px)}
.blog-read-more:focus-visible{outline:2px solid rgba(96,165,250,.85);outline-offset:4px;border-radius:3px}

.blog-cta{padding-top:0}

@media(max-width:960px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-section-heading{align-items:start;flex-direction:column}
}

@media(min-width:821px) and (max-width:1200px){
  .blog-hero h1{font-size:42px}
}

@media(max-width:640px){
  .blog-hero{min-height:520px;padding:126px 20px 82px}
  .blog-hero h1{font-size:34px;line-height:48px}
  .blog-hero p{font-size:16px}
  .blog-section{padding:82px 18px 88px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card-body{min-height:220px}
}

@media(prefers-reduced-motion:reduce){
  .blog-card,.blog-card img,.blog-read-more svg{transition:none!important}
}