/* Blog 11 — blog hero styled like the About hero, blog index only */
.blog-hero-section{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
  padding:120px 0 95px;
  background:
    radial-gradient(circle at 78% 28%,rgba(0,194,255,.10),transparent 34%),
    linear-gradient(135deg,#000 0%,#030b12 55%,#000 100%)!important;
}

.blog-hero-section::after{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  left:-260px;
  bottom:-380px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(74,219,255,.18),rgba(11,118,255,.06) 38%,transparent 70%);
  filter:blur(8px);
}

.blog-hero-section .shell{
  position:relative;
  z-index:1;
}

.blog-hero-section .blog-hero{
  max-width:900px;
  margin:0;
  text-align:right;
}

.blog-hero-section .blog-hero .kicker{
  display:inline-block;
  margin-bottom:16px;
  color:#2aa8ff;
  font-weight:800;
  letter-spacing:.08em;
}

.blog-hero-section .blog-hero h1{
  margin:0 0 24px;
  max-width:920px;
  color:#f4fbff;
  font-size:clamp(3.5rem,6vw,6.2rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.blog-hero-section .blog-hero p{
  margin:0;
  max-width:860px;
  color:#b4c9d7;
  font-size:1.16rem;
  line-height:1.9;
}

/* The article cards section keeps the existing Blog 10 look, only without duplicate hero spacing. */
.blog-page{
  padding-top:92px!important;
}

@media(max-width:900px){
  .blog-hero-section{
    min-height:560px;
    padding:105px 0 75px;
  }
  .blog-hero-section .blog-hero h1{
    font-size:clamp(3rem,12vw,4.6rem);
  }
  .blog-hero-section .blog-hero p{
    font-size:1.04rem;
  }
}

@media(max-width:620px){
  .blog-hero-section{
    min-height:520px;
    padding:90px 0 65px;
  }
  .blog-page{
    padding-top:68px!important;
  }
}