:root {
  --navy: #1a2948;
  --navy-deep: #0c1424;
  --navy-void: #070b14;
  --navy-lift: #24355c;
  --star: #ffffff;
  --star-soft: rgba(220, 228, 242, 0.86);
  --star-dim: rgba(220, 228, 242, 0.62);
  --ring: rgba(255, 255, 255, 0.88);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Outfit", Inter, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--navy-void);
}

body {
  position: relative;
  min-height: 100vh;
  color: var(--star);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 70% 50% at 50% 32%, rgba(26, 41, 72, 0.95) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #101a30 0%, var(--navy-void) 72%);
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sky {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.sky-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.045), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.03), transparent 18%);
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}

.stars-far {
  animation: drift 140s linear infinite;
}

.stars-mid {
  animation: drift 90s linear infinite reverse, twinkle 6s ease-in-out infinite;
}

.stars-near {
  animation: twinkle 4.5s ease-in-out infinite;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-80px, -40px, 0);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.masthead,
main,
footer {
  position: relative;
  z-index: 1;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.5rem 1.75rem 0;
}

.masthead-mark {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.masthead-name {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--star-soft);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem 1.25rem;
}

.logo-wrap {
  position: relative;
  margin-bottom: 1.75rem;
}

.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(26, 41, 72, 0.15) 42%, transparent 70%);
  filter: blur(6px);
}

.logo {
  position: relative;
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.12));
}

.eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--star-dim);
}

h1 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 8vw, 5.4rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.tagline {
  margin: 0 0 1.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--star-soft);
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(42rem, 100%);
  margin-bottom: 1.75rem;
}

.banner-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}

.banner-plaque {
  flex: 0 0 auto;
  padding: 5px;
  border: 1px solid var(--ring);
  border-radius: 999px;
}

.banner-plaque-inner {
  display: block;
  padding: 0.55rem 1.45rem;
  border: 1px solid var(--ring);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--star);
}

.lede {
  max-width: 34rem;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 300;
  color: var(--star-soft);
}

.project {
  padding: 2.75rem 1.5rem 1rem;
}

.project-kicker {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--star-dim);
}

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pillar {
  position: relative;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.15rem;
  background: linear-gradient(180deg, rgba(26, 41, 72, 0.55), rgba(12, 20, 36, 0.35));
}

.node {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-bottom: 0.95rem;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 0 16px rgba(255, 255, 255, 0.35);
}

.pillar h3 {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.pillar p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--star-soft);
}

footer {
  padding: 2.5rem 1.5rem 2.25rem;
  text-align: center;
}

footer p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--star-dim);
}

.copyright {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (min-width: 840px) {
  .masthead {
    padding: 1.75rem 2.25rem 0;
  }

  .hero {
    padding-top: 3.25rem;
  }

  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    position: relative;
  }

  .pillars::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.38) 15%,
      rgba(255, 255, 255, 0.38) 85%,
      transparent
    );
  }

  .pillar {
    padding-top: 1.7rem;
  }
}

@media (max-width: 599px) {
  .logo {
    width: 168px;
    height: 168px;
  }

  h1 {
    letter-spacing: 0.12em;
  }

  .banner {
    gap: 0.65rem;
  }

  .banner-plaque-inner {
    letter-spacing: 0.22em;
    padding: 0.5rem 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars-far,
  .stars-mid,
  .stars-near {
    animation: none;
  }
}
/* far */
.stars-far { box-shadow: 1309px 228px 0 0px rgba(255,255,255,0.26), 501px 457px 0 0px rgba(255,255,255,0.29), 1385px 178px 0 0px rgba(255,255,255,0.43), 61px 191px 0 0px rgba(255,255,255,0.32), 1149px 407px 0 0px rgba(255,255,255,0.46), 451px 919px 0 0px rgba(255,255,255,0.43), 1554px 326px 0 0px rgba(255,255,255,0.46), 569px 318px 0 0px rgba(255,255,255,0.31), 209px 189px 0 0px rgba(255,255,255,0.36), 704px 541px 0 0px rgba(255,255,255,0.49), 1098px 255px 0 0px rgba(255,255,255,0.54), 161px 600px 0 0px rgba(255,255,255,0.50), 1182px 393px 0 0px rgba(255,255,255,0.46), 1354px 466px 0 0px rgba(255,255,255,0.48), 476px 206px 0 0px rgba(255,255,255,0.36), 1301px 747px 0 0px rgba(255,255,255,0.30), 429px 546px 0 0px rgba(255,255,255,0.46), 1247px 350px 0 0px rgba(255,255,255,0.41), 334px 946px 0 0px rgba(255,255,255,0.36), 1402px 664px 0 0px rgba(255,255,255,0.50), 469px 65px 0 0px rgba(255,255,255,0.49), 548px 135px 0 0px rgba(255,255,255,0.31), 435px 1022px 0 0px rgba(255,255,255,0.37), 292px 542px 0 0px rgba(255,255,255,0.29), 1529px 877px 0 0px rgba(255,255,255,0.52), 741px 449px 0 0px rgba(255,255,255,0.55), 1043px 1010px 0 0px rgba(255,255,255,0.28), 224px 313px 0 0px rgba(255,255,255,0.44), 1221px 130px 0 0px rgba(255,255,255,0.37), 1083px 514px 0 0px rgba(255,255,255,0.54), 1393px 234px 0 0px rgba(255,255,255,0.45), 1574px 696px 0 0px rgba(255,255,255,0.28), 323px 929px 0 0px rgba(255,255,255,0.25), 1025px 365px 0 0px rgba(255,255,255,0.40), 1280px 611px 0 0px rgba(255,255,255,0.50), 313px 765px 0 0px rgba(255,255,255,0.48), 1226px 663px 0 0px rgba(255,255,255,0.40), 743px 629px 0 0px rgba(255,255,255,0.32), 1161px 161px 0 0px rgba(255,255,255,0.28), 141px 1090px 0 0px rgba(255,255,255,0.48), 1351px 973px 0 0px rgba(255,255,255,0.53), 542px 1080px 0 0px rgba(255,255,255,0.51), 433px 411px 0 0px rgba(255,255,255,0.46), 1375px 764px 0 0px rgba(255,255,255,0.38), 247px 507px 0 0px rgba(255,255,255,0.32), 43px 471px 0 0px rgba(255,255,255,0.43), 145px 120px 0 0px rgba(255,255,255,0.32), 676px 145px 0 0px rgba(255,255,255,0.40), 1370px 994px 0 0px rgba(255,255,255,0.31), 1481px 968px 0 0px rgba(255,255,255,0.32), 833px 389px 0 0px rgba(255,255,255,0.28), 725px 867px 0 0px rgba(255,255,255,0.37), 1379px 201px 0 0px rgba(255,255,255,0.27), 223px 509px 0 0px rgba(255,255,255,0.31), 287px 864px 0 0px rgba(255,255,255,0.31), 511px 154px 0 0px rgba(255,255,255,0.38), 103px 30px 0 0px rgba(255,255,255,0.54), 340px 832px 0 0px rgba(255,255,255,0.40), 821px 120px 0 0px rgba(255,255,255,0.30), 799px 543px 0 0px rgba(255,255,255,0.53), 584px 866px 0 0px rgba(255,255,255,0.46), 317px 388px 0 0px rgba(255,255,255,0.34), 1186px 124px 0 0px rgba(255,255,255,0.47), 102px 976px 0 0px rgba(255,255,255,0.40), 116px 1040px 0 0px rgba(255,255,255,0.27), 140px 139px 0 0px rgba(255,255,255,0.45), 826px 245px 0 0px rgba(255,255,255,0.53), 1185px 81px 0 0px rgba(255,255,255,0.44), 1346px 1070px 0 0px rgba(255,255,255,0.34), 418px 643px 0 0px rgba(255,255,255,0.32), 268px 614px 0 0px rgba(255,255,255,0.39), 19px 938px 0 0px rgba(255,255,255,0.44), 150px 436px 0 0px rgba(255,255,255,0.40), 714px 140px 0 0px rgba(255,255,255,0.51), 583px 323px 0 0px rgba(255,255,255,0.38), 1252px 1083px 0 0px rgba(255,255,255,0.25), 1358px 212px 0 0px rgba(255,255,255,0.53), 541px 236px 0 0px rgba(255,255,255,0.52), 557px 577px 0 0px rgba(255,255,255,0.43), 416px 540px 0 0px rgba(255,255,255,0.40), 104px 189px 0 0px rgba(255,255,255,0.44), 90px 7px 0 0px rgba(255,255,255,0.35), 1304px 536px 0 0px rgba(255,255,255,0.30), 1129px 875px 0 0px rgba(255,255,255,0.42), 154px 305px 0 0px rgba(255,255,255,0.41), 1192px 303px 0 0px rgba(255,255,255,0.38), 631px 746px 0 0px rgba(255,255,255,0.52), 732px 430px 0 0px rgba(255,255,255,0.45), 724px 832px 0 0px rgba(255,255,255,0.54), 484px 332px 0 0px rgba(255,255,255,0.54); }

/* mid */
.stars-mid { box-shadow: 844px 50px 0 1px rgba(255,255,255,0.48), 843px 508px 0 0px rgba(255,255,255,0.52), 783px 79px 0 0px rgba(255,255,255,0.79), 408px 942px 0 0px rgba(255,255,255,0.56), 456px 48px 0 1px rgba(255,255,255,0.70), 672px 570px 0 1px rgba(255,255,255,0.79), 719px 1043px 0 1px rgba(255,255,255,0.58), 56px 236px 0 1px rgba(255,255,255,0.79), 365px 543px 0 1px rgba(255,255,255,0.42), 707px 642px 0 0px rgba(255,255,255,0.60), 788px 389px 0 1px rgba(255,255,255,0.51), 3px 1064px 0 0px rgba(255,255,255,0.82), 745px 883px 0 1px rgba(255,255,255,0.43), 1276px 642px 0 0px rgba(255,255,255,0.70), 1474px 615px 0 1px rgba(255,255,255,0.63), 668px 824px 0 0px rgba(255,255,255,0.71), 392px 861px 0 1px rgba(255,255,255,0.70), 1387px 356px 0 1px rgba(255,255,255,0.68), 831px 0px 0 0px rgba(255,255,255,0.54), 880px 659px 0 1px rgba(255,255,255,0.61), 1383px 437px 0 0px rgba(255,255,255,0.63), 1349px 173px 0 1px rgba(255,255,255,0.53), 191px 481px 0 0px rgba(255,255,255,0.70), 407px 301px 0 0px rgba(255,255,255,0.41), 973px 149px 0 0px rgba(255,255,255,0.60), 1471px 786px 0 0px rgba(255,255,255,0.62), 302px 11px 0 0px rgba(255,255,255,0.80), 1594px 870px 0 1px rgba(255,255,255,0.50), 102px 510px 0 0px rgba(255,255,255,0.81), 934px 273px 0 1px rgba(255,255,255,0.76), 1546px 906px 0 1px rgba(255,255,255,0.68), 1122px 913px 0 1px rgba(255,255,255,0.80), 921px 530px 0 1px rgba(255,255,255,0.74), 1568px 1067px 0 0px rgba(255,255,255,0.62), 562px 900px 0 1px rgba(255,255,255,0.43), 480px 556px 0 0px rgba(255,255,255,0.55), 283px 308px 0 0px rgba(255,255,255,0.50), 1446px 438px 0 1px rgba(255,255,255,0.43), 677px 954px 0 0px rgba(255,255,255,0.59), 860px 797px 0 0px rgba(255,255,255,0.81), 1567px 779px 0 1px rgba(255,255,255,0.61), 611px 798px 0 1px rgba(255,255,255,0.78), 1102px 451px 0 1px rgba(255,255,255,0.62), 892px 994px 0 1px rgba(255,255,255,0.41), 1369px 828px 0 1px rgba(255,255,255,0.73), 261px 1093px 0 1px rgba(255,255,255,0.41), 1212px 55px 0 1px rgba(255,255,255,0.44), 277px 945px 0 1px rgba(255,255,255,0.48), 776px 670px 0 1px rgba(255,255,255,0.50), 691px 776px 0 1px rgba(255,255,255,0.53); }

/* near */
.stars-near { box-shadow: 516px 167px 0 1px rgba(255,255,255,0.84), 716px 459px 0 1px rgba(255,255,255,0.90), 1544px 63px 0 1px rgba(255,255,255,0.98), 41px 312px 0 1px rgba(255,255,255,0.77), 1371px 234px 0 1px rgba(255,255,255,0.87), 952px 524px 0 1px rgba(255,255,255,0.93), 1240px 234px 0 1px rgba(255,255,255,0.93), 637px 221px 0 1px rgba(255,255,255,0.87), 1179px 768px 0 1px rgba(255,255,255,0.82), 155px 497px 0 1px rgba(255,255,255,0.73), 1401px 247px 0 1px rgba(255,255,255,0.94), 711px 1091px 0 1px rgba(255,255,255,0.83), 141px 1036px 0 1px rgba(255,255,255,0.89), 860px 1003px 0 1px rgba(255,255,255,0.73), 1301px 941px 0 1px rgba(255,255,255,0.91), 360px 1068px 0 1px rgba(255,255,255,0.99), 1261px 990px 0 1px rgba(255,255,255,0.84), 660px 502px 0 1px rgba(255,255,255,0.95); }