/* MDI visual direction v0.3 — scientific intelligence, not generic SaaS. */

:root {
  --navy: #071a33;
  --blue: #155dcc;
  --blue-2: #2f78e8;
  --teal: #16a5ad;
  --ink: #10243d;
  --muted: #66798e;
  --line: #dbe5ef;
  --soft: #f5f8fc;
  --violet: #8b63e8;
  --violet-soft: #f3edff;
  --cyan: #19aab4;
  --cyan-soft: #eafafb;
  --orange: #f28a45;
  --orange-soft: #fff1e8;
  --shadow-soft: 0 14px 40px rgba(18, 47, 86, .07);
  --shadow-card: 0 10px 28px rgba(18, 47, 86, .06);
}

html { background: #fff; }
body {
  background:
    radial-gradient(circle at 78% 2%, rgba(91, 154, 238, .05), transparent 22rem),
    #fff;
}

:focus-visible {
  outline: 3px solid rgba(47, 120, 232, .26);
  outline-offset: 3px;
}

/* Header */
.site-header {
  background: rgba(255,255,255,.985);
  border-bottom-color: #e4ebf2;
  box-shadow: 0 1px 0 rgba(17, 51, 86, .025);
}
.site-header__inner { height: 72px; }
.brand { min-width: 235px; gap: 11px; }
.brand__mark {
  width: 39px;
  height: 39px;
  background:
    radial-gradient(circle at 30% 25%, #3b87f3 0 2px, transparent 3px),
    radial-gradient(circle at 70% 35%, #1da8b4 0 2px, transparent 3px),
    radial-gradient(circle at 48% 73%, #735ce8 0 2px, transparent 3px),
    linear-gradient(145deg,#0a3b7f,#135ccc);
  border-radius: 11px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(21, 93, 204, .17);
}
.brand__text strong { font-size: 13px; letter-spacing: -.01em; }
.brand__text small { color: var(--blue); font-weight: 750; }
.desktop-nav { gap: 8px; }
.desktop-nav a {
  padding: 26px 7px 22px;
  font-size: 12px;
  font-weight: 700;
  color: #314963;
  border-bottom-width: 2px;
}
.desktop-nav a:hover { color: var(--blue); }
.desktop-nav a.active { color: var(--blue); }
.curation-chip {
  font-size: 10px;
  font-weight: 750;
  padding: 5px 9px;
  background: #fff;
}
.curation-chip--live {
  color: #17694e;
  border-color: #cae7d8;
  background: #f4fbf7;
}
.curation-chip--snapshot {
  color: #875c12;
  border-color: #efdcb5;
  background: #fff9eb;
}

/* Hero — selected design direction */
.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.99) 0 48%, rgba(248,252,255,.91) 66%, rgba(239,248,255,.97) 100%);
  border-bottom-color: #e1eaf2;
}
.hero::before {
  content: '';
  position: absolute;
  width: 620px;
  height: 390px;
  right: -25px;
  top: -32px;
  opacity: .95;
  background:
    radial-gradient(circle at 17% 38%, rgba(26,118,232,.78) 0 3px, transparent 4px),
    radial-gradient(circle at 27% 50%, rgba(77,159,244,.72) 0 4px, transparent 5px),
    radial-gradient(circle at 37% 33%, rgba(79,107,231,.64) 0 6px, transparent 7px),
    radial-gradient(circle at 47% 61%, rgba(24,170,180,.66) 0 5px, transparent 6px),
    radial-gradient(circle at 59% 40%, rgba(41,126,231,.7) 0 9px, transparent 10px),
    radial-gradient(circle at 73% 57%, rgba(119,96,232,.55) 0 5px, transparent 6px),
    radial-gradient(circle at 85% 29%, rgba(24,153,219,.6) 0 3px, transparent 4px),
    radial-gradient(ellipse at 58% 47%, rgba(43,125,231,.17), transparent 45%),
    radial-gradient(ellipse at 72% 68%, rgba(26,171,181,.13), transparent 42%);
  filter: saturate(1.08);
  pointer-events: none;
}
.hero::after {
  content:'';
  position:absolute;
  right:-105px;
  top:28px;
  width:520px;
  height:330px;
  border: 2px solid rgba(47,120,232,.15);
  border-radius: 48% 52% 43% 57%;
  transform: rotate(-18deg);
  box-shadow:
    inset 0 0 0 18px rgba(255,255,255,.25),
    0 0 70px rgba(72,151,235,.09);
  pointer-events:none;
}
.hero-grid {
  min-height: 410px;
  padding: 53px 0 46px;
  grid-template-columns: 1.16fr .84fr;
  gap: 36px;
  position: relative;
  z-index: 1;
}
.hero-grid > div:first-child { max-width: 690px; }
.hero .eyebrow {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .13em;
  margin-bottom: 12px;
}
.hero h1 {
  max-width: 650px;
  margin: 0 0 16px;
  color: #081f45;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(44px,5vw,66px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.hero .lede {
  max-width: 650px;
  color: #4f6680;
  font-size: 16px;
  line-height: 1.6;
}
.search {
  max-width: 690px;
  margin-top: 24px;
  border: 1px solid #cbd9e8;
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(27,67,110,.08);
}
.search input { padding: 15px 11px; font-size: 13px; }
.search button {
  padding: 14px 24px;
  background: linear-gradient(135deg,#0b3d88,#1768dc);
  border-left: 1px solid rgba(255,255,255,.15);
}
.hero .chips { margin-top: 13px; }
.hero .chip {
  background: rgba(255,255,255,.78);
  border-color: #dbe7f1;
  color: #4d6480;
  font-size: 10px;
  padding: 4px 9px;
}
.hero-art {
  height: 294px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.hero-art::before {
  content:'';
  position:absolute;
  inset: 16% 3% 8% 4%;
  background:
    radial-gradient(circle at 22% 45%, rgba(101,94,229,.24) 0 7px, transparent 8px),
    radial-gradient(circle at 44% 35%, rgba(31,153,221,.25) 0 9px, transparent 10px),
    radial-gradient(circle at 65% 57%, rgba(36,175,181,.2) 0 6px, transparent 7px),
    radial-gradient(circle at 80% 30%, rgba(46,111,228,.25) 0 8px, transparent 9px);
  filter: blur(.2px);
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 22px 4px 14px 8px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(28,111,214,.1) 40% 40.6%, transparent 41%),
    radial-gradient(circle at 50% 50%, transparent 0 47%, rgba(27,164,177,.08) 48% 48.6%, transparent 49%);
}
.dna {
  color: #2d78d9;
  opacity: .35;
  transform: rotate(-17deg) scale(1.18);
  filter: drop-shadow(0 8px 20px rgba(43,119,220,.12));
}
.float-card {
  border: 1px solid rgba(209,224,238,.9);
  background: rgba(255,255,255,.87);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(24,65,105,.07);
}
.float-card small { color: var(--blue); font-weight: 700; }
.float-card strong { color: #163354; }

/* Stat strip */
.stats {
  margin-top: -19px;
  border: 1px solid #dfe8f1;
  border-radius: 15px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.stats > div { padding: 17px 22px; }
.stats strong { font-size: 23px; color: #102f62; }
.stats span { font-size: 11px; color: #6a7c8e; }

/* Sections */
.section { padding: 54px 0; }
.section-head { margin-bottom: 20px; }
.section-head h2 {
  color: #0a2348;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -.025em;
  font-size: 28px;
}
.section-head p { font-size: 12px; }
.text-link { color: #145fc9; font-size: 12px; }

/* Featured test cards — three distinct scientific identities */
.cards { gap: 15px; }
.test-card {
  position: relative;
  overflow: hidden;
  min-height: 312px;
  padding: 20px;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(22,53,88,.035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.test-card::before {
  content:'';
  position:absolute;
  right:-24px;
  top:-30px;
  width:165px;
  height:165px;
  border-radius:50%;
  opacity:.9;
  pointer-events:none;
}
.test-card:nth-child(3n+1) {
  border-color: #e1d8f6;
  background: linear-gradient(155deg,#fff 0 72%,#fbf8ff 100%);
}
.test-card:nth-child(3n+1)::before {
  background:
    radial-gradient(circle at 36% 42%, rgba(139,99,232,.68) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 27%, rgba(177,126,246,.58) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 61%, rgba(117,92,225,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 43% 50%, rgba(139,99,232,.18), transparent 52%);
}
.test-card:nth-child(3n+2) {
  border-color: #d8ecee;
  background: linear-gradient(155deg,#fff 0 72%,#f5fcfc 100%);
}
.test-card:nth-child(3n+2)::before {
  background:
    radial-gradient(circle at 36% 42%, rgba(21,167,176,.65) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 29%, rgba(81,202,207,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 63%, rgba(15,145,157,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 43% 50%, rgba(21,167,176,.16), transparent 52%);
}
.test-card:nth-child(3n+3) {
  border-color: #f0dfd4;
  background: linear-gradient(155deg,#fff 0 72%,#fff9f5 100%);
}
.test-card:nth-child(3n+3)::before {
  background:
    radial-gradient(circle at 36% 42%, rgba(242,138,69,.68) 0 4px, transparent 5px),
    radial-gradient(circle at 58% 30%, rgba(250,178,112,.57) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 62%, rgba(232,113,48,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 43% 50%, rgba(242,138,69,.17), transparent 52%);
}
.test-card:hover {
  transform: translateY(-3px);
  border-color: #cbd9e6;
  box-shadow: 0 18px 38px rgba(18,47,86,.09);
}
.card-top { position: relative; z-index: 1; padding-right: 55px; }
.card-top small { color: #687b8d; font-size: 10px; font-weight: 700; }
.card-top h3 {
  color:#0b244b;
  font-family: Georgia,'Times New Roman',serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.test-card > p {
  position:relative;
  z-index:1;
  min-height: 58px;
  color:#536a82;
  font-size:12px;
  max-width: 88%;
}
.test-card .badge { font-size: 9px; }
.facts {
  position:relative;
  z-index:1;
  gap: 10px;
  margin-top: 12px;
}
.facts dt { font-size: 9px; }
.facts dd { font-size: 11px; color:#1d3858; }
.card-status {
  position:relative;
  z-index:1;
  background:rgba(247,250,253,.9);
  border:1px solid #e7edf3;
  color:#526a81;
}
.test-card footer { position:relative; z-index:1; }
.test-card .text-link,
.source-list a,
.timeline a,
.access a {
  text-underline-offset: 3px;
}
.test-card .text-link:hover,
.source-list a:hover,
.timeline a:hover,
.access a:hover { text-decoration: underline; }

/* Comparison section */
.soft {
  background:
    linear-gradient(180deg,#f8fbfe 0%,#f4f8fc 100%);
  border-color:#e5edf4;
}
.soft .section {
  position:relative;
}
.soft .section::before {
  content:'COMPARE';
  display:block;
  width:max-content;
  margin-bottom:7px;
  font-size:9px;
  font-weight:850;
  letter-spacing:.13em;
  color:#1660c8;
}
.table-wrap {
  border-color:#dce6ef;
  box-shadow: 0 6px 24px rgba(21,52,86,.035);
}
thead th {
  background:#fbfdff;
  color:#5e7288;
  font-size:9px;
}
tbody td, tbody th { color:#2d455e; }
table strong { color:#102f62; }
.notice {
  border-left:0;
  border:1px solid #cfdff1;
  border-radius:12px;
  background:
    radial-gradient(circle at 95% 50%,rgba(64,137,229,.09),transparent 130px),
    #f8fbff;
  color:#3b5875;
  padding:14px 16px;
}

/* Evidence / methodology band */
.principles {
  border:1px solid #bcd3f1;
  border-radius:16px;
  padding:18px;
  gap:0;
  background:
    radial-gradient(circle at 5% 35%,rgba(47,120,232,.09),transparent 140px),
    linear-gradient(90deg,#f9fcff,#fff);
  box-shadow: 0 9px 28px rgba(35,85,142,.04);
}
.principles article {
  border:0;
  border-right:1px solid #e2eaf2;
  border-radius:0;
  background:transparent;
  padding:15px 22px;
}
.principles article:last-child { border-right:0; }
.principles svg { color:var(--blue); }
.principles h3 { color:#0d2b58; font-size:14px; }
.principles p { font-size:11px; line-height:1.55; }

/* Catalog and detail pages inherit the same visual language */
.page-head { padding-top: 48px; }
.page-head h1,
.record-title h1 {
  font-family: Georgia,'Times New Roman',serif;
  color:#09234a;
  font-weight:500;
  letter-spacing:-.04em;
}
.page-head h1 { font-size: 46px; }
.filters input,.filters select {
  border-color:#d6e1eb;
  background:#fff;
  box-shadow:0 3px 12px rgba(21,51,83,.025);
}
.filters button {
  background:linear-gradient(135deg,#0b3d88,#1768dc);
}
.record-hero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 22%,rgba(47,120,232,.13),transparent 260px),
    radial-gradient(circle at 75% 70%,rgba(26,169,180,.08),transparent 240px),
    linear-gradient(135deg,#fbfdff,#f1f7fc);
}
.record-hero::after {
  content:'';
  position:absolute;
  width:320px;height:320px;
  right:-70px;top:-110px;
  border:1px solid rgba(31,105,201,.12);
  border-radius:50%;
  box-shadow:inset 0 0 0 28px rgba(255,255,255,.25);
}
.record-title aside {
  border-color:#d8e4ee;
  box-shadow:0 8px 24px rgba(22,53,88,.05);
}
.record-main .panel {
  border-color:#dce6ef;
  box-shadow:0 8px 28px rgba(7,26,51,.04);
}
.record-main .panel h2 {
  color:#0b2a56;
  font-family: Georgia,'Times New Roman',serif;
  font-weight:500;
}
.key-grid > div { background:#f6f9fc; border:1px solid #e6edf3; }
.record-nav a { transition: color .15s ease, background .15s ease; }
.record-nav a:hover { background:#f5f9fd; }
.timeline article { border-left-color:#70a7e8; background:#f7faff; }
.source-list article,.simple-list article { border-color:#e0e8f0; }

/* Footer */
.site-footer {
  margin-top:65px;
  background:#f8fbfe;
  color:#5b7086;
  border-top:1px solid #dfe8f1;
}
.site-footer .brand { color:#102846; }
.site-footer .brand__mark {
  background:linear-gradient(145deg,#0a3b7f,#155dcc);
  color:#fff;
}
.footer-grid { padding:40px 0 34px; }
.footer-grid p { color:#718297; }
.footer-grid strong { color:#183454; }
.footer-bottom {
  border-top:1px solid #e1e9f1;
  color:#7c8c9d;
}

@media (max-width:980px) {
  .hero::before { right:-180px; opacity:.55; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .hero-art { display:none; }
  .principles { grid-template-columns:1fr 1fr; }
  .principles article:nth-child(2) { border-right:0; }
  .principles article { border-bottom:1px solid #e2eaf2; }
  .principles article:nth-last-child(-n+2) { border-bottom:0; }
}

@media (max-width:640px) {
  .hero-grid { padding:38px 0 34px; }
  .hero h1 { font-size:43px; }
  .hero::before { width:360px; right:-245px; top:0; }
  .search { display:flex; }
  .search button { grid-column:auto; padding-inline:16px; }
  .stats { margin-top:10px; }
  .test-card { min-height:0; }
  .test-card > p { max-width:100%; }
  .principles { grid-template-columns:1fr; }
  .principles article { border-right:0; border-bottom:1px solid #e2eaf2 !important; }
  .principles article:last-child { border-bottom:0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    transition:none !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}