/* Base */
body {
  min-height: 100vh;
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow-x: hidden;
  background: #162f40;
  position: relative;
}

/* Layered animated background */
.hex-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hex-bg::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: #162f40;
  opacity: 0.9;
  z-index: 1;
  animation: none;
}

@keyframes bgGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hex-grid {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 2;
  background-image:
    url('data:image/svg+xml;utf8,<svg width="80" height="92" viewBox="0 0 80 92" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="40,2 78,23 78,69 40,90 2,69 2,23" stroke="%2391bed6" stroke-width="2" fill="none" opacity="0.12"/><polygon points="40,17 64,31 64,61 40,75 16,61 16,31" stroke="%2391bed6" stroke-width="1" fill="none" opacity="0.13"/></svg>');
  background-size: 80px 92px;
  animation: none;
  opacity: 0.18;
}

@keyframes hexMove {
  0% { background-position: 0 0; }
  100% { background-position: 160px 184px; }
}

/* Content */
.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

h1 {
  margin-top: 52px;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f4f8fa;
  text-shadow: none;
  background: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: currentColor;
  background-clip: text;
}

p.subtitle {
  margin-top: 0;
  font-size: 1.12rem;
  color: #cad6de;
  text-align: center;
  max-width: 480px;
  margin-bottom: 38px;
  text-shadow: 0 1px 10px #2221;
}

/* Researcher grid */
.researcher-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  width: 90vw;
  max-width: 730px;
  margin-bottom: 64px;
}

.researcher-card {
  background: #223d4e;
  border-radius: 16px;
  box-shadow: 0 2px 16px 0 #0b1b2622;
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.19rem;
  font-weight: 600;
  color: #f4f8fa;
  letter-spacing: 0.5px;
  border: 2px solid transparent;
  position: relative;
  transition: border 0.17s, box-shadow 0.17s, background 0.17s, color 0.15s, transform 0.17s, opacity 0.17s;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInCard .78s cubic-bezier(.4,.7,.4,1) forwards;
}

.researcher-card:nth-child(2) { animation-delay: .10s; }
.researcher-card:nth-child(3) { animation-delay: .20s; }
.researcher-card:nth-child(4) { animation-delay: .30s; }
.researcher-card:nth-child(5) { animation-delay: .40s; }

@keyframes fadeInCard {
  to { opacity: 1; transform: translateY(0); }
}

.researcher-card:hover,
.researcher-card:focus {
  border: 2px solid #aacde0;
  color: #fff;
  background: #304f61;
  box-shadow: 0 4px 32px 0 #00000020;
}

/* Disclosure box */
.disclosure-section {
  background: #223d4e;
  border-radius: 20px;
  box-shadow: 0 2px 20px 0 #0b1b2629;
  margin: 0 auto 40px auto;
  max-width: 600px;
  width: 96vw;
  padding: 38px 28px 32px 28px;
  color: #cad6de;
  font-size: 1.09rem;
  text-align: left;
  line-height: 1.6;
  z-index: 11;
}

.disclosure-section h2 {
  margin-top: 0;
  font-size: 1.34rem;
  font-weight: 700;
  color: #aacde0;
  letter-spacing: .2px;
  margin-bottom: 12px;
}

.disclosure-section ul {
  padding-left: 1.3em;
  margin: 16px 0;
}

.disclosure-section li {
  margin-bottom: 8px;
}

.audit-note {
  background: rgba(145, 190, 214, 0.08);
  border-left: 3px solid #aacde0;
  margin: 18px 0;
  padding: 12px 14px;
}

.contact-link {
  color: #aacde0;
  text-decoration: underline;
  word-break: break-all;
  font-weight: 500;
  transition: color 0.13s;
}

.contact-link:hover {
  color: #fff;
  text-shadow: 0 0 4px #00000000;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  h1 { font-size: 1.18rem; margin-top: 32px; }
  .researcher-list { gap: 12px; }
  .researcher-card { padding: 18px 0; font-size: 1.01rem; }
  p.subtitle { font-size: .97rem; margin-bottom: 18px; }
  .disclosure-section { padding: 20px 7px; font-size: .97rem; }
  .disclosure-section h2 { font-size: 1.02rem; }
}