.blog-page{
  background:#fff;
  color:#1f1f1f;
}

.blog-wrap{
  width:min(1320px, 92vw);
  margin:0 auto;
}

/* =========================
   Blog Hero
========================= */
.blog-hero{
  position:relative;
  overflow:hidden;
  min-height:320px;
  display:flex;
  align-items:center;
  background:linear-gradient(135deg, #eaf7ff 0%, #d8f0ff 28%, #c8ebff 55%, #eef9ff 100%);
}

.blog-hero__inner{
  position:relative;
  z-index:2;
  width:min(1320px, 92vw);
  margin:0 auto;
  padding:88px 0 84px;
}

.blog-hero__breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  font-size:15px;
  color:rgba(20, 42, 58, 0.68);
}

.blog-hero__breadcrumb a{
  color:rgba(20, 42, 58, 0.78);
  text-decoration:none;
  transition:color .25s ease;
}

.blog-hero__breadcrumb a:hover{
  color:#008BD5;
}

.blog-hero__title{
  margin:0;
  font-size:clamp(44px, 6vw, 72px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-0.03em;
  color:#0c1f2e;
}

.blog-hero__desc{
  max-width:760px;
  margin:22px 0 0;
  font-size:clamp(17px, 2vw, 21px);
  line-height:1.9;
  color:rgba(12, 31, 46, 0.72);
}

/* 背景层 */
.blog-hero__bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.blog-hero__orb{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:.5;
  animation:blogFloat 10s ease-in-out infinite;
}

.blog-hero__orb--1{
  width:520px;
  height:520px;
  right:-120px;
  top:-140px;
  background:radial-gradient(circle, rgba(0,139,213,.28) 0%, rgba(0,139,213,.08) 45%, rgba(0,139,213,0) 72%);
}

.blog-hero__orb--2{
  width:360px;
  height:360px;
  left:12%;
  bottom:-160px;
  background:radial-gradient(circle, rgba(0,139,213,.18) 0%, rgba(0,139,213,.06) 48%, rgba(0,139,213,0) 72%);
  animation-delay:1.6s;
}

.blog-hero__grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,139,213,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,139,213,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right, rgba(0,0,0,.95), rgba(0,0,0,.15));
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.95), rgba(0,0,0,.15));
  opacity:.4;
}

.blog-hero__line{
  position:absolute;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(0,139,213,.58), transparent);
  filter:blur(.3px);
  animation:blogSweep 7s linear infinite;
}

.blog-hero__line--1{
  top:34%;
  left:-18%;
  width:42%;
}

.blog-hero__line--2{
  bottom:28%;
  right:-12%;
  width:34%;
  animation-delay:2.4s;
}

.blog-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 100%);
  backdrop-filter:blur(2px);
  z-index:1;
  pointer-events:none;
}

/* =========================
   Featured
========================= */
.blog-featured{
  padding:56px 0 24px;
}

.blog-sec-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}

.blog-sec-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#008BD5;
  flex:0 0 auto;
}

.blog-sec-title{
  margin:0;
  font-size:28px;
  line-height:1.2;
}

.blog-featured__grid{
  display:grid;
  grid-template-columns:1.45fr .85fr;
  gap:28px;
}

.blog-featured__main,
.blog-side-card,
.blog-item{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:20px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.blog-featured__main:hover,
.blog-side-card:hover,
.blog-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.blog-card__thumb,
.blog-side-card__thumb,
.blog-item__thumb{
  display:block;
  overflow:hidden;
}

.blog-card__thumb img,
.blog-side-card__thumb img,
.blog-item__thumb img{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}

.blog-card__body,
.blog-side-card__body,
.blog-item__body{
  padding:22px 22px 24px;
}

.blog-card__meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:#6b7280;
  margin-bottom:12px;
}

.blog-card__title,
.blog-side-card__title,
.blog-item__title{
  margin:0;
  font-size:24px;
  line-height:1.45;
  font-weight: 500;
}

.blog-side-card__title{
  font-size:18px;
}

.blog-card__title a,
.blog-side-card__title a,
.blog-item__title a{
  color:#111827;
  text-decoration:none;
}

.blog-card__desc,
.blog-item__desc{
  margin:14px 0 0;
  color:#4b5563;
  font-size:15px;
  line-height:1.8;
}

.blog-card__more,
.blog-item__more{
  display:inline-block;
  margin-top:16px;
  color:#008BD5;
  text-decoration:none;
  font-weight:500;
}

/* =========================
   Side
========================= */
.blog-featured__side{
  display:grid;
  gap:24px;
}

/* =========================
   Filter
========================= */
.blog-filter{
  padding:18px 0 18px;
}

.blog-filter__list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.blog-filter__btn{
  height:42px;
  padding:0 20px;
  border:1px solid #dbe3ec;
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  transition:.25s ease;
}

.blog-filter__btn:hover{
  border-color:#008BD5;
  color:#008BD5;
}

.blog-filter__btn.is-active{
  background:#008BD5;
  color:#fff;
  border-color:#008BD5;
}

/* =========================
   Blog List
========================= */
.blog-list{
  padding:14px 0 72px;
}

.blog-list__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}

.blog-item__title{
  font-size:20px;
}

.blog-list__more{
  display:flex;
  justify-content:center;
  margin-top:36px;
}

.blog-loadmore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  height:48px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid #d7dee8;
  color:#111827;
  text-decoration:none;
  transition:.25s ease;
}

.blog-loadmore:hover{
  border-color:#008BD5;
  color:#008BD5;
}

/* =========================
   Animations
========================= */
@keyframes blogFloat{
  0%, 100%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(0,18px,0) scale(1.04);
  }
}

@keyframes blogSweep{
  0%{
    transform:translateX(0);
    opacity:0;
  }
  15%{
    opacity:.8;
  }
  50%{
    opacity:.55;
  }
  85%{
    opacity:.8;
  }
  100%{
    transform:translateX(140px);
    opacity:0;
  }
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  .blog-featured__grid{
    grid-template-columns:1fr;
  }

  .blog-list__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px){
  .blog-hero{
    min-height:300px;
  }

  .blog-hero__inner{
    width:min(92vw, 720px);
    padding:68px 0 64px;
  }

  .blog-hero__desc{
    max-width:100%;
    line-height:1.75;
  }

  .blog-hero__orb--1{
    width:360px;
    height:360px;
    right:-120px;
    top:-110px;
  }

  .blog-hero__orb--2{
    width:260px;
    height:260px;
    left:-40px;
    bottom:-120px;
  }
}

@media (max-width: 768px){
  .blog-sec-title{
    font-size:24px;
  }

  .blog-list__grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .blog-card__body,
  .blog-side-card__body,
  .blog-item__body{
    padding:18px;
  }

  .blog-card__title,
  .blog-item__title{
    font-size:18px;
  }
}

@media (max-width: 640px){
  .blog-hero{
    min-height:260px;
  }

  .blog-hero__inner{
    padding:56px 0 52px;
  }

  .blog-hero__breadcrumb{
    margin-bottom:16px;
    font-size:14px;
  }

  .blog-hero__title{
    font-size:clamp(34px, 10vw, 48px);
  }

  .blog-hero__desc{
    margin-top:16px;
    font-size:15px;
    line-height:1.8;
  }

  .blog-hero__grid{
    background-size:30px 30px;
  }

  .blog-hero__line--1,
  .blog-hero__line--2{
    width:48%;
  }
}

.blog-item{
  transition: opacity .25s ease, transform .25s ease;
}