:root {
  --article-bg: #020000;
  --article-text: #fff;
  --article-muted: #8b888d;
  --article-copy: #c3c0c5;
  --article-gradient: linear-gradient(90deg, #8b69b5, #c09edb 52%, #f2cfff);
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--article-bg); }
body {
  min-width: 320px;
  margin: 0;
  background: var(--article-bg);
  color: var(--article-text);
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.article-stage { 
  padding-top: 100px;
  padding-bottom: 100px;
}
.article {
  width: min(744px, calc(100% - 48px));
  margin: 0 auto;
}
.article-heading { height: 240px; }
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #d4d1d5;
  font-size: 14px;
  line-height: 20px;
  transition: color .18s ease, transform .18s ease;
}
.article-back::before { content: "←"; font-size: 20px; }
.article-back:hover { color: #fff; transform: translateX(-3px); }
.article-title {
  max-width: 720px;
  margin: 66px 0 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.5px;
}
.article-date {
  margin: 26px 0 0;
  color: #777777;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.article-cover {
  display: block;
  width: 100%;
  height: 452px;
  border-radius: 0;
  object-fit: cover;
}
.article-lead {
  margin: 42px 0 0;
  color: #c8c5ca;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.15px;
}
.article-copy {
  margin-top: 50px;
  color: var(--article-copy);
  font-size: 16px;
  line-height: 1.55;
}
.article-copy p { margin: 0 0 27px; }
.article-copy h2 {
  margin: 0 0 4px;
  color: #d2cfd4;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}
.article-copy .bullet { position: relative; padding-left: 24px; }
.article-copy .bullet::before {
  position: absolute;
  top: .36em;
  left: 0;
  width: 14px;
  height: 14px;
  background: #c6c3c7;
  content: "";
}

.article-cta {
  position: relative;
  display: flex;
  width: min(1280px, calc(100% - 48px));
  height: 320px;
  margin: 0 auto 94px;
  overflow: hidden;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
background: radial-gradient(circle at 82% 26%, rgba(148, 93, 196, .72), transparent 34%), radial-gradient(circle at 14% 110%, rgba(236, 199, 157, .55), transparent 31%), linear-gradient(125deg, #080508, #2c1738 70%, #100a17);

  text-align: center;
}

.article-cta__inner { position: relative; z-index: 1; width: min(760px, calc(100% - 56px)); }
.article-cta h2 { margin: 0; font-size: 36px; font-weight: 500; line-height: 45px; letter-spacing: -.36px; }
.article-cta__actions { display: flex; margin-top: 38px; justify-content: center; gap: 12px; }
.article-cta__button {
  display: inline-flex;
  height: 46px;  padding: 0 24px;
 
  border-radius: 3px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
}
.article-cta__button--primary { border-color: transparent; background: var(--article-gradient); color: #000; }

@media (max-width: 900px) {
  .article-stage { min-height: 0; padding: 70px 0 150px; }
  .article-heading { height: auto; padding-bottom: 54px; }
  .article-title { margin-top: 50px; font-size: 34px; }
  .article-cover { height: auto; aspect-ratio: 744 / 452; }
  .article-cta { height: 360px; }
}

@media (max-width: 600px) {
  .article-stage { padding: 54px 0 90px; }
  .article { width: calc(100% - 40px); }
  .article-heading { padding-bottom: 42px; }
  .article-title { margin-top: 42px; font-size: 30px; line-height: 1.2; }
  .article-date { margin-top: 20px; }
  .article-lead { margin-top: 30px; font-size: 20px; }
  .article-copy { margin-top: 38px; font-size: 15px; line-height: 1.62; }
  .article-copy p { margin-bottom: 24px; }
  .article-cta { width: calc(100% - 40px); height: 340px; margin-bottom: 70px; }
  .article-cta h2 { font-size: 30px; line-height: 38px; }
  .article-cta__actions { flex-direction: column; }
  .article-cta__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
.btn0{ border: 1px solid #ffffff;}
.btn0:hover{ background: #ffffff; color: #000;}