.topNews {
  --news-navy: #061a38;
  --news-blue: #0b4f9d;
  --news-gold: #e0ae3c;
  position: relative;
  padding: clamp(74px, 8vw, 126px) 0;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 86% 0%, rgba(22, 116, 209, .28), transparent 34%), linear-gradient(145deg, #020b1a 0%, var(--news-navy) 52%, #082957 100%);
}

.topNews::before {
  position: absolute;
  top: 50%;
  left: 32%;
  width: 78vw;
  height: 78vw;
  border: 1px solid rgba(65, 147, 230, .09);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

.topNews::after {
  position: absolute;
  top: 0;
  right: 4%;
  color: rgba(255, 255, 255, .025);
  content: "2026";
  font-family: "acumin-pro-condensed", sans-serif;
  font-size: clamp(180px, 27vw, 430px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.055em;
  pointer-events: none;
}

.topNews__frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  width: min(1380px, calc(100% - 64px));
  margin: 0 auto;
  border-top: 1px solid rgba(35, 126, 219, .72);
  border-bottom: 1px solid rgba(35, 126, 219, .72);
}

.topNews__rail {
  position: relative;
  min-height: 560px;
  padding: 44px 36px 38px 0;
  border-right: 1px solid rgba(35, 126, 219, .72);
}

.topNews__heading { margin-top: 0; }
.topNews__heading p { color: #7fb9f1; font-family: "acumin-pro-condensed", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: .18em; }
.topNews__heading h2 { margin-top: 14px; font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1.4; letter-spacing: .08em; }
.topNews__intro { max-width: 190px; margin-top: 26px; color: rgba(225, 235, 247, .62); font-size: 12px; line-height: 1.9; }

.topNews__content { min-width: 0; padding: 0 0 0 clamp(28px, 4vw, 64px); }
.topNews__index { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 4px; border-bottom: 1px solid rgba(35, 126, 219, .36); color: rgba(170, 205, 239, .5); font-family: "acumin-pro-condensed", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.topNews__list { display: grid; gap: 12px; padding: 12px 0; }

.topNewsCard {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 116px;
  min-height: 218px;
  overflow: hidden;
  border: 1px solid rgba(126, 181, 235, .2);
  color: #fff;
  background: rgba(255, 255, 255, .055);
  isolation: isolate;
  transition: border-color .25s, background-color .25s, transform .25s;
}

.topNewsCard::before {
  position: absolute;
  z-index: -1;
  right: -95px;
  bottom: -150px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(224, 174, 60, .15);
  border-radius: 50%;
  content: "";
  transition: transform .4s, border-color .4s;
}

.topNewsCard::after { position: absolute; z-index: -1; top: 0; right: 0; width: 0; height: 100%; background: linear-gradient(120deg, transparent, rgba(18, 103, 190, .2)); content: ""; transition: width .35s ease; }
.topNewsCard:hover { border-color: rgba(224, 174, 60, .62); background: rgba(255, 255, 255, .08); transform: translateX(5px); }
.topNewsCard:hover::before { border-color: rgba(224, 174, 60, .4); transform: scale(1.08); }
.topNewsCard:hover::after { width: 48%; }

.topNewsCard__number { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 30px; border-right: 1px solid rgba(126, 181, 235, .18); color: rgba(255, 255, 255, .58); font-family: "acumin-pro-condensed", sans-serif; }
.topNewsCard__number span { font-size: 10px; letter-spacing: .15em; }
.topNewsCard__number strong { color: #fff; font-size: 30px; font-weight: 500; line-height: 1; }
.topNewsCard__body { min-width: 0; padding: 28px clamp(24px, 3vw, 46px) 30px; }
.topNewsCard__meta { display: flex; align-items: center; gap: 13px; }
.topNewsCard__meta time { color: var(--news-gold); font-family: "acumin-pro-condensed", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.topNewsCard__meta small { margin-left: auto; color: rgba(183, 211, 239, .38); font-family: "acumin-pro-condensed", sans-serif; font-size: 10px; letter-spacing: .14em; }
.topNewsCard h3 { margin-top: 22px; font-size: clamp(19px, 2.1vw, 28px); font-weight: 700; line-height: 1.55; letter-spacing: .035em; }
.topNewsCard__body > p { max-width: 740px; margin-top: 15px; color: rgba(219, 231, 243, .58); font-size: 12px; line-height: 1.85; }

.topNewsCard__action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; border-left: 1px solid rgba(126, 181, 235, .18); }
.topNewsCard__action span { color: rgba(184, 213, 241, .5); font-family: "acumin-pro-condensed", sans-serif; font-size: 9px; letter-spacing: .16em; writing-mode: vertical-rl; }
.topNewsCard__action i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(224, 174, 60, .5); border-radius: 50%; color: var(--news-gold); font-size: 17px; font-style: normal; transition: color .25s, background-color .25s, transform .25s; }
.topNewsCard:hover .topNewsCard__action i { color: var(--news-navy); background: var(--news-gold); transform: rotate(45deg); }

.topNews__more { align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px 0 18px; border: 1px solid rgba(224, 174, 60, .48); border-radius: 999px; color: #fff; font-family: "acumin-pro-condensed", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.topNews__more i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--news-navy); background: var(--news-gold); font-style: normal; }
.topNews__more--desktop { position: absolute; right: 28px; bottom: 32px; left: 0; display: flex; }
.topNews__more--mobile { display: none; }

@media (max-width: 900px) {
  .topNews__frame { grid-template-columns: 190px minmax(0, 1fr); }
  .topNews__rail { padding-right: 24px; }
  .topNewsCard { grid-template-columns: 72px minmax(0, 1fr) 76px; }
  .topNewsCard__body { padding-right: 24px; padding-left: 24px; }
}

@media (max-width: 767px) {
  .topNews { padding: 62px 0 76px; }
  .topNews::before { top: 120px; left: 15%; width: 150vw; height: 150vw; transform: none; }
  .topNews::after { top: 18px; right: -14px; font-size: 132px; }
  .topNews__frame { display: block; width: min(100% - 32px, 560px); }
  .topNews__rail { display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 0; padding: 30px 0 27px; border-right: 0; border-bottom: 1px solid rgba(35, 126, 219, .36); }
  .topNews__intro { display: none; }
  .topNews__heading { margin-top: 0; }
  .topNews__heading p { font-size: 10px; }
  .topNews__heading p br, .topNews__heading h2 br { display: none; }
  .topNews__heading h2 { margin-top: 9px; font-size: 28px; }
  .topNews__content { padding-left: 0; }
  .topNews__index { height: 43px; font-size: 8px; }
  .topNews__list { gap: 9px; padding: 9px 0; }
  .topNewsCard { grid-template-columns: 52px minmax(0, 1fr); min-height: 0; }
  .topNewsCard:hover { transform: none; }
  .topNewsCard__number { padding-top: 23px; }
  .topNewsCard__number strong { font-size: 23px; }
  .topNewsCard__body { padding: 21px 48px 23px 17px; }
  .topNewsCard__meta { flex-wrap: wrap; gap: 8px; }
  .topNewsCard__meta time { font-size: 11px; }
  .topNewsCard__meta small { display: none; }
  .topNewsCard h3 { margin-top: 14px; font-size: 15px; line-height: 1.7; }
  .topNewsCard__body > p { margin-top: 10px; font-size: 10px; line-height: 1.75; }
  .topNewsCard__action { position: absolute; right: 13px; bottom: 13px; border-left: 0; }
  .topNewsCard__action span { display: none; }
  .topNewsCard__action i { width: 31px; height: 31px; font-size: 13px; }
  .topNews__more--desktop { display: none; }
  .topNews__more--mobile { display: flex; width: min(260px, 100%); margin: 20px auto 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .topNewsCard, .topNewsCard::before, .topNewsCard::after, .topNewsCard__action i { transition: none; }
}

/* Light and airy color variation */
.topNews {
  color: #123d70;
  background:
    radial-gradient(circle at 92% 5%, rgba(70, 179, 224, .22), transparent 31%),
    radial-gradient(circle at 12% 92%, rgba(224, 174, 60, .1), transparent 25%),
    linear-gradient(145deg, #fafdff 0%, #edf8fd 48%, #ddecf7 100%);
}

.topNews::before {
  border-color: rgba(11, 79, 157, .08);
}

.topNews::after {
  color: rgba(11, 79, 157, .035);
}

.topNews__frame {
  border-color: rgba(11, 79, 157, .32);
}

.topNews__rail {
  border-color: rgba(11, 79, 157, .32);
}

.topNews__heading p {
  color: #3485bd;
}

.topNews__heading h2 {
  color: #0b438d;
}

.topNews__intro {
  color: rgba(18, 61, 112, .66);
}

.topNews__index {
  border-color: rgba(11, 79, 157, .18);
  color: rgba(11, 67, 141, .46);
}

.topNewsCard {
  border-color: rgba(11, 79, 157, .15);
  color: #123d70;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 16px 38px rgba(40, 98, 145, .08);
  backdrop-filter: blur(10px);
}

.topNewsCard::before {
  border-color: rgba(224, 174, 60, .23);
}

.topNewsCard::after {
  background: linear-gradient(120deg, transparent, rgba(90, 185, 224, .13));
}

.topNewsCard:hover {
  border-color: rgba(224, 174, 60, .72);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 20px 46px rgba(40, 98, 145, .14);
}

.topNewsCard:hover::before {
  border-color: rgba(224, 174, 60, .52);
}

.topNewsCard__number {
  border-color: rgba(11, 79, 157, .13);
  color: rgba(11, 67, 141, .5);
}

.topNewsCard__number strong {
  color: #0b438d;
}

.topNewsCard__meta time {
  color: #b78009;
}

.topNewsCard__meta small {
  color: rgba(11, 67, 141, .38);
}

.topNewsCard h3 {
  color: #0a376f;
}

.topNewsCard__body > p {
  color: rgba(18, 61, 112, .64);
}

.topNewsCard__action {
  border-color: rgba(11, 79, 157, .13);
}

.topNewsCard__action span {
  color: rgba(11, 67, 141, .43);
}

.topNewsCard__action i {
  color: #0b579e;
  border-color: rgba(11, 79, 157, .34);
  background: rgba(255, 255, 255, .72);
}

.topNewsCard:hover .topNewsCard__action i {
  color: #fff;
  background: #0b579e;
}

.topNews__more {
  border-color: rgba(11, 79, 157, .3);
  color: #0b438d;
  background: rgba(255, 255, 255, .78);
}

.topNews__more i {
  color: #fff;
  background: #0b579e;
}

@media (max-width: 767px) {
  .topNews__rail {
    border-bottom-color: rgba(11, 79, 157, .2);
  }
}