.blog-hero {
  position: relative;
  overflow: hidden;

  padding: 110px 0 70px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(37, 99, 235, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(56, 189, 248, 0.07),
      transparent 28%
    ),
    #ffffff;
}

.blog-hero::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -260px;
  bottom: -330px;

  border-radius: 50%;

  border: 1px solid rgba(37, 99, 235, 0.08);

  pointer-events: none;
}

.blog-hero-content {
  max-width: 820px;

  position: relative;

  z-index: 1;
}

.blog-hero .eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 20px;

  padding: 7px 12px;

  border: 1px solid #bfdbfe;

  border-radius: 999px;

  background: #eff6ff;

  color: #2563eb;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.blog-hero h1 {
  max-width: 800px;

  margin: 0;

  color: #0f172a;

  font-size: clamp(44px, 6vw, 72px);

  line-height: 1.02;

  letter-spacing: -0.045em;
}

.blog-hero h1 span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #0ea5e9
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.blog-hero p {
  max-width: 720px;

  margin: 26px 0 0;

  color: #64748b;

  font-size: 18px;

  line-height: 1.8;
}

.blog-hero-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 38px;
}

.blog-hero-meta span {
  padding: 8px 13px;

  border: 1px solid #e2e8f0;

  border-radius: 999px;

  color: #475569;

  background: #f8fafc;

  font-size: 13px;

  font-weight: 600;
}



.blog-section {
  padding: 95px 0 105px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fafc 100%
    );
}

.blog-section-heading {
  margin-bottom: 44px;
}

.blog-kicker {
  margin-bottom: 10px;

  color: #2563eb;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.13em;
}

.blog-section-heading h2,
.upcoming-header h2 {
  margin-bottom: 12px;

  color: #0f172a;
}

.blog-section-heading p {
  max-width: 650px;

  color: #64748b;
}



.blog-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}



.blog-card {
  position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid #e2e8f0;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 8px 30px rgba(15, 23, 42, 0.07);

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.blog-card:hover {
  transform: translateY(-6px);

  border-color: #bfdbfe;

  box-shadow:
    0 20px 45px rgba(37, 99, 235, 0.13);
}


.blog-card-visual {
  position: relative;

  height: 120px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}

.blog-card-visual::before,
.blog-card-visual::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.14);
}

.blog-card-visual::before {
  width: 260px;
  height: 260px;
}

.blog-card-visual::after {
  width: 160px;
  height: 160px;
}


.visual-blue {
  background:
    radial-gradient(
      circle at center,
      rgba(96, 165, 250, 0.35),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #2563eb,
      #172554
    );
}

.visual-purple {
  background:
    radial-gradient(
      circle at center,
      rgba(196, 181, 253, 0.35),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #6d28d9,
      #1e1b4b
    );
}

.visual-cyan {
  background:
    radial-gradient(
      circle at center,
      rgba(103, 232, 249, 0.35),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #0891b2,
      #164e63
    );
}

.visual-green {
  background:
    radial-gradient(
      circle at center,
      rgba(134, 239, 172, 0.32),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #047857,
      #064e3b
    );
}

.visual-orange {
  background:
    radial-gradient(
      circle at center,
      rgba(253, 186, 116, 0.35),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #ea580c,
      #7c2d12
    );
}

.visual-pink {
  background:
    radial-gradient(
      circle at center,
      rgba(249, 168, 212, 0.35),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #db2777,
      #831843
    );
}



.visual-number {
  position: absolute;

  top: 18px;
  left: 20px;

  z-index: 2;

  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.12em;
}



.visual-icon {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 72px;
  height: 72px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 20px;

  background: rgba(15, 23, 42, 0.30);

  backdrop-filter: blur(10px);

  color: #ffffff;

  font-size: 30px;

  font-weight: 700;

  box-shadow:
    0 15px 40px rgba(2, 6, 23, 0.25);
}


.blog-card-content {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding: 27px 29px 30px;

  background: #ffffff;
}

.blog-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 15px;
}

.blog-category {
  color: #2563eb;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.12em;
}

.blog-date {
  color: #94a3b8;

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;
}

.blog-card h3 {
  margin: 0;

  color: #0f172a;

  font-size: 22px;

  line-height: 1.3;

  letter-spacing: -0.025em;
}

.blog-card p {
  margin: 16px 0 24px;

  color: #64748b;

  font-size: 14px;

  line-height: 1.75;
}

.blog-read-more {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-top: auto;

  color: #2563eb;

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;

  transition:
    gap 180ms ease,
    color 180ms ease;
}

.blog-read-more span {
  font-size: 17px;
}

.blog-read-more:hover {
  gap: 13px;

  color: #1d4ed8;
}




.upcoming-section {
  padding: 90px 0 105px;

  border-top: 1px solid #e2e8f0;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(37, 99, 235, 0.07),
      transparent 35%
    ),
    #f8fafc;
}

.upcoming-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 38px;
}

.upcoming-header p {
  margin-bottom: 0;

  color: #64748b;
}

.upcoming-badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 9px 13px;

  border: 1px solid #bfdbfe;

  border-radius: 999px;

  background: #eff6ff;

  color: #2563eb;

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;
}

.upcoming-badge span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #3b82f6;

  box-shadow:
    0 0 12px rgba(59, 130, 246, 0.55);
}



.upcoming-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;
}


.upcoming-card {
  display: grid;

  grid-template-columns: auto 1fr;

  gap: 20px;

  padding: 27px;

  border: 1px solid #e2e8f0;

  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 6px 25px rgba(15, 23, 42, 0.05);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.upcoming-card:hover {
  transform: translateY(-4px);

  border-color: #bfdbfe;

  box-shadow:
    0 14px 35px rgba(37, 99, 235, 0.10);
}

.upcoming-number {
  color: #93c5fd;

  font-size: 22px;

  font-weight: 800;
}

.upcoming-card h3 {
  margin: 9px 0 10px;

  color: #0f172a;

  font-size: 17px;

  line-height: 1.4;
}

.upcoming-card p {
  margin: 0 0 17px;

  color: #64748b;

  font-size: 13px;

  line-height: 1.7;
}

.coming-label {
  display: inline-flex;

  align-items: center;

  color: #94a3b8;

  font-size: 11px;

  font-weight: 700;
}

.coming-label::before {
  content: "";

  width: 6px;
  height: 6px;

  margin-right: 7px;

  border-radius: 50%;

  background: #93c5fd;
}



.blog-cta {
  padding-top: 20px;

  padding-bottom: 90px;
}


.nav-links a.active {
  color: #f8fafc;
}



@media (max-width: 900px) {

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .upcoming-grid {
    grid-template-columns: 1fr;
  }

  .upcoming-header {
    align-items: flex-start;

    flex-direction: column;
  }
}



@media (max-width: 640px) {

  .blog-hero {
    padding: 80px 0 55px;
  }

  .blog-hero h1 {
    font-size: 43px;
  }

  .blog-hero p {
    font-size: 16px;
  }

  .blog-section,
  .upcoming-section {
    padding: 70px 0 75px;
  }

  .blog-card-content {
    padding: 23px;
  }

  .blog-card h3 {
    font-size: 20px;
  }

  .blog-card-visual {
    height: 145px;
  }

  .blog-card-top {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }

  .upcoming-card {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .upcoming-number {
    font-size: 18px;
  }
}