.blog-index,.single-blog-post{padding-bottom:clamp(72px,8vw,120px)}
.blog-hero,.single-blog-hero{
  position:relative;overflow:hidden;
  padding:clamp(132px,18vh,190px) 0 clamp(44px,6vh,76px)}
.blog-hero::before,.single-blog-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 12% 0%,rgba(43,63,255,.18),transparent),
    radial-gradient(ellipse 45% 30% at 82% 18%,rgba(0,19,169,.14),transparent)}
.single-blog-hero-bg{position:absolute;inset:0;z-index:0}
.single-blog-hero-bg img{width:100%;height:100%;object-fit:cover}
.single-blog-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(3,3,10,.28) 0%,rgba(3,3,10,.9) 100%)}
.blog-hero-inner,.single-blog-hero-inner{position:relative;z-index:1;max-width:860px}
.page-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.blog-title,.single-blog-title{
  font-size:clamp(3rem,7vw,6.8rem);line-height:.9;letter-spacing:-.07em;
  font-weight:800}
.blog-intro,.single-blog-intro{
  margin-top:18px;max-width:700px;color:var(--soft);
  font-size:clamp(1rem,1.55vw,1.08rem);line-height:1.72}
.blog-meta-line,.single-blog-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;color:rgba(255,255,255,.66);font-size:.85rem;
  text-transform:uppercase;letter-spacing:.08em}
.single-blog-meta{margin-bottom:18px}
.blog-count,.single-blog-cats a{color:#fff}
.blog-loop{padding:clamp(30px,4vw,48px) 0}
.blog-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,28px)}
.blog-card{
  border:1px solid var(--border);border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  box-shadow:0 24px 60px rgba(0,0,0,.18);transition:transform .25s, border-color .25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--border-h)}
.blog-card-media{
  display:block;aspect-ratio:16/10;background:#070913;position:relative;overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em;
  color:#fff;background:
    radial-gradient(circle at top left,rgba(43,63,255,.4),transparent 50%),
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.blog-card-body{padding:24px}
.blog-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.56)}
.blog-card-cats a{color:rgba(255,255,255,.82)}
.blog-card-title{font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.06;letter-spacing:-.04em}
.blog-card-title a{color:#fff}
.blog-card-excerpt{margin-top:14px;color:var(--soft);line-height:1.75}
.blog-card-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  color:#fff;font-weight:600}
.blog-pagination{margin-top:clamp(28px,4vw,44px)}
.blog-pagination-list{
  display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.blog-pagination-item a,
.blog-pagination-item span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.02)}
.blog-pagination-item .current{
  border-color:transparent;background:linear-gradient(135deg,var(--blue-l),var(--blue));
  color:#fff;box-shadow:0 10px 24px rgba(43,63,255,.28)}
.blog-empty{
  padding:clamp(32px,4vw,48px);border-radius:28px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  text-align:center}
.blog-empty p{margin-top:12px;color:var(--soft)}
.single-blog-body{padding:clamp(30px,4vw,48px) 0}
.single-blog-article{
  max-width:980px;margin:0 auto;padding:clamp(26px,3.6vw,42px);
  border:1px solid var(--border);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  box-shadow:0 24px 60px rgba(0,0,0,.22);backdrop-filter:blur(16px)}
.single-blog-content{color:var(--soft);font-size:1.02rem;line-height:1.85}
.single-blog-content > * + *{margin-top:1.15em}
.single-blog-content h1,
.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4,
.single-blog-content h5,
.single-blog-content h6{
  color:#fff;line-height:1.1;letter-spacing:-.03em;margin-top:1.5em}
.single-blog-content h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.single-blog-content h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.single-blog-content a{color:#fff;text-decoration:underline;text-decoration-color:rgba(43,63,255,.55);text-underline-offset:4px}
.single-blog-content ul,
.single-blog-content ol{padding-left:1.2rem}
.single-blog-content blockquote{
  padding-left:20px;border-left:2px solid rgba(43,63,255,.8);
  color:#fff;font-size:clamp(1.1rem,2vw,1.35rem)}
.single-blog-content img{
  border-radius:22px;border:1px solid var(--border);overflow:hidden}
.single-blog-content table{
  width:100%;border-collapse:collapse;border-spacing:0;
  border:1px solid var(--border);border-radius:18px;overflow:hidden}
.single-blog-content th,
.single-blog-content td{
  padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}
.single-blog-content hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
.single-blog-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--border)}
.single-blog-tags{display:flex;gap:10px;flex-wrap:wrap}
.single-blog-tags a{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);font-size:.84rem}
.single-blog-back{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--blue-l),var(--blue));
  color:#fff;font-weight:700;box-shadow:0 12px 28px rgba(43,63,255,.28)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .blog-card-body,.single-blog-article{padding:22px}
  .single-blog-content{font-size:.98rem;line-height:1.75}
}