.blog-page {
       --blog-purple: #8b7cf6;
       --blog-purple-soft: #f1efff;
       --blog-blue: #7cb7f8;
       --blog-blue-soft: #eef7ff;
       --blog-coral: #ff9b8d;
       --blog-coral-soft: #fff2ef;
       --blog-yellow: #f6d77a;
       --blog-yellow-soft: #fff9e8;
       position: relative;
       overflow: hidden;
       background: #fff;
     }

     /* ---------------------------------------------------------
   DECORATIVE BACKGROUND
   --------------------------------------------------------- */

     .blog-page::before {
       content: "";
       position: absolute;
       width: 550px;
       height: 550px;
       top: -250px;
       right: -180px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(139, 124, 246, .13) 0%, rgba(139, 124, 246, .05) 45%, transparent 70%);
       pointer-events: none;
     }

     .blog-page::after {
       content: "";
       position: absolute;
       width: 420px;
       height: 420px;
       top: 700px;
       left: -230px;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(124, 183, 248, .10) 0%, transparent 70%);
       pointer-events: none;
     }

     .col-lg-5 {
       width: 41.66666667%;
     }

     /* =========================================================
   BLOG INTRO
   ========================================================= */

     .blog-intro {
       position: relative;
       z-index: 2;
       padding: 8rem 0 5rem;
       text-align: center;
     }

     .blog-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: .55rem;
       padding: .45rem .85rem;
       margin-bottom: 1.25rem;
       border-radius: 999px;
       background: var(--blog-purple-soft);
       color: #6255c9;
       font-size: .72rem;
       font-weight: 700;
       letter-spacing: .08em;
       text-transform: uppercase;
     }

     .blog-eyebrow-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--blog-purple);
     }

     .blog-intro h1 {
       max-width: 850px;
       margin: 0 auto;
       font-size: clamp(3rem, 6vw, 5.6rem);
       line-height: .98;
       letter-spacing: -.055em;
       font-weight: 700;
       color: #15151a;
     }

     .blog-intro h1 span {
       color: var(--blog-purple);
     }

     .blog-intro p {
       max-width: 650px;
       margin: 1.5rem auto 0;
       color: #707078;
       font-size: 1.08rem;
       line-height: 1.7;
     }


     /* =========================================================
   FEATURED ARTICLE
   ========================================================= */

     .blog-featured {
       position: relative;
       z-index: 2;
       margin-bottom: 6rem;
     }

     .featured-card {
       position: relative;
       overflow: hidden;
       display: grid;
       grid-template-columns: 1fr 1fr;
       min-height: 470px;
       border-radius: 30px;
       background: linear-gradient(135deg, #f5f2ff 0%, #f9f8ff 52%, #eef7ff 100%);
       box-shadow: 0 25px 70px rgba(50, 45, 100, .08);
       transition: transform .4s ease, box-shadow .4s ease;
     }

     .featured-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 35px 85px rgba(50, 45, 100, .13);
     }

     .featured-copy {
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 4rem;
     }

     .featured-label {
       display: inline-flex;
       align-items: center;
       gap: .5rem;
       width: fit-content;
       margin-bottom: 1.25rem;
       padding: .45rem .8rem;
       border-radius: 999px;
       background: rgba(255, 255, 255, .8);
       color: #6255c9;
       font-size: .72rem;
       font-weight: 700;
       letter-spacing: .07em;
       text-transform: uppercase;
     }

     .featured-label::before {
       content: "";
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #8b7cf6;
     }

     .featured-copy h2 {
       margin: 0;
       max-width: 650px;
       font-size: clamp(2.3rem, 4vw, 4.1rem);
       line-height: 1.02;
       letter-spacing: -.045em;
       color: #15151a;
     }

     .featured-copy h2 a {
       color: inherit;
       text-decoration: none;
     }

     .featured-copy h2 a:hover {
       color: #6d60d9;
     }

     .featured-description {
       max-width: 540px;
       margin: 1.5rem 0 2rem;
       color: #707078;
       font-size: 1rem;
       line-height: 1.7;
     }

     .featured-meta {
       display: flex;
       align-items: center;
       gap: .7rem;
     }

     .featured-meta strong {
       color: #24242a;
       font-size: .9rem;
     }

     .featured-date {
       color: #85858d;
       font-size: .82rem;
     }

     .featured-image {
       position: relative;
       min-height: 470px;
       overflow: hidden;
       background-size: cover;
       background-position: center;
     }

     .featured-image::after {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(139, 124, 246, .08), rgba(124, 183, 248, .08));
       transition: opacity .4s ease;
     }

     .featured-card:hover .featured-image::after {
       opacity: .3;
     }


     /* =========================================================
   POSTS HEADER
   ========================================================= */

     .blog-posts-header {
       position: relative;
       z-index: 2;
       display: flex;
       align-items: flex-end;
       justify-content: space-between;
       margin-bottom: 2.5rem;
     }

     .blog-posts-header h2 {
       margin: 0;
       color: #15151a;
       font-size: clamp(2rem, 4vw, 3rem);
       letter-spacing: -.04em;
     }

     .blog-posts-header p {
       max-width: 400px;
       margin: 0;
       color: #85858d;
       font-size: .95rem;
       line-height: 1.6;
     }


     /* =========================================================
   POSTS GRID
   ========================================================= */

     .blog-grid {
       position: relative;
       z-index: 2;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 3.5rem 2rem;
       padding-bottom: 7rem;
     }

     .blog-post {
       position: relative;
     }

     .blog-post-image {
       position: relative;
       height: 250px;
       overflow: hidden;
       margin-bottom: 1.25rem;
       border-radius: 22px;
       background-color: #f4f4f6;
     }

     .blog-post-image a {
       display: block;
       width: 100%;
       height: 100%;
     }

     .blog-post-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .6s cubic-bezier(.2, .7, .2, 1);
     }

     .blog-post:hover .blog-post-image img {
       transform: scale(1.045);
     }


     /* ---------------------------------------------------------
   POST BADGE
   --------------------------------------------------------- */

     .blog-post-badge {
       display: inline-flex;
       align-items: center;
       gap: .45rem;
       margin-bottom: .8rem;
       padding: .38rem .7rem;
       border-radius: 999px;
       font-size: .67rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .07em;
       background: #f7f7f8;
     }

     .blog-post-badge span {
       width: 6px;
       height: 6px;
       border-radius: 50%;
     }


     /* ---------------------------------------------------------
   POST TITLE
   --------------------------------------------------------- */

     .blog-post h3 {
       margin: 0;
       font-size: 1.55rem;
       line-height: 1.18;
       letter-spacing: -.025em;
     }

     .blog-post h3 a {
       color: #18181d;
       text-decoration: none;
       transition: color .25s ease;
     }

     .blog-post h3 a:hover {
       color: #6d60d9;
     }

     .blog-post-excerpt {
       margin: .8rem 0 1.25rem;
       color: #77777f;
       font-size: .92rem;
       line-height: 1.65;
     }


     /* ---------------------------------------------------------
   POST META
   --------------------------------------------------------- */

     .blog-post-meta {
       display: flex;
       align-items: center;
       gap: .65rem;
     }

     .blog-post-meta img {
       width: 34px;
       height: 34px;
       border-radius: 50%;
     }

     .blog-post-meta-content {
       display: flex;
       flex-direction: column;
     }

     .blog-post-meta strong {
       color: #29292f;
       font-size: .78rem;
     }

     .blog-post-meta small {
       color: #9999a0;
       font-size: .72rem;
     }


     /* =========================================================
   EMPTY STATE
   ========================================================= */

     .blog-empty {
       padding: 6rem 1rem;
       text-align: center;
       color: #77777f;
     }


     /* =========================================================
   RESPONSIVE
   ========================================================= */

     @media (max-width: 991px) {
       .blog-intro {
         padding-top: 6rem;
       }

       .featured-card {
         grid-template-columns: 1fr;
       }

       .featured-copy {
         padding: 3rem;
       }

       .featured-image {
         min-height: 350px;
         order: -1;
       }

       .blog-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 3rem 1.5rem;
       }

     }

     @media (max-width: 767px) {
       .blog-intro {
         padding: 5rem 0 3.5rem;
       }

       .blog-intro h1 {
         font-size: 3.1rem;
       }

       .blog-intro p {
         font-size: .98rem;
       }

       .blog-featured {
         margin-bottom: 4.5rem;
       }

       .featured-card {
         border-radius: 24px;
       }

       .featured-copy {
         padding: 2rem 1.5rem 2.5rem;
       }

       .featured-copy h2 {
         font-size: 2.3rem;
       }

       .featured-image {
         min-height: 250px;
       }

       .blog-posts-header {
         display: block;
       }

       .blog-posts-header p {
         margin-top: .7rem;
       }

       .blog-grid {
         grid-template-columns: 1fr;
         gap: 3rem;
         padding-bottom: 5rem;
       }

       .blog-post-image {
         height: 240px;
         border-radius: 20px;
       }

     }

     @media (max-width: 480px) {
       .blog-intro h1 {
         font-size: 2.65rem;
       }

       .featured-copy h2 {
         font-size: 2rem;
       }

       .featured-image {
         min-height: 220px;
       }

     }