:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: #111d30;
  --panel-raised: #15243a;
  --line: #263951;
  --text: #f3f7fb;
  --muted: #a8b7c9;
  --accent: #6ef0ca;
  --blue: #8dc4ff;
  --violet: #b4a0ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: 20px max(24px, calc((100% - 1120px) / 2)) 54px;
  background-color: #0b1524;
  background-image:
    linear-gradient(90deg, rgba(7, 15, 27, .98) 0%, rgba(7, 15, 27, .90) 42%, rgba(7, 15, 27, .43) 100%),
    linear-gradient(0deg, #0b1524 0%, transparent 28%),
    url("assets/api-network-hero.png");
  background-size: cover;
  background-position: center;
}
.hero::before, .hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 28rem;
  height: 28rem;
  border: 1px solid #6ef0ca24;
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-drift 24s ease-in-out infinite alternate;
}
.hero::before { top: 5rem; right: -9rem; box-shadow: 0 0 0 36px #6ef0ca09, 0 0 0 72px #6ef0ca06; }
.hero::after { top: 9rem; right: 1rem; width: 18rem; height: 18rem; animation-delay: -8s; }
nav { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff2b; padding:10px 0 18px; }
.brand { font-size:1.35rem; font-weight:800; color:white; letter-spacing:-.04em; }
.brand span { color:var(--accent); }
.nav-links { display:flex; gap:28px; }
.nav-links a { color:#e2edf8; font-size:.94rem; transition:color .2s ease; }
.nav-links a:hover { color:var(--accent); text-decoration:none; }
.hero-content { max-width:780px; padding:72px 0 0; animation: rise-in .8s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { font-size:.76rem; letter-spacing:.16em; font-weight:800; color:var(--accent); margin:0 0 12px; }
.hero h1 { max-width:760px; font-size:clamp(2.8rem,6vw,5.1rem); line-height:1.03; letter-spacing:-.06em; margin:0 0 20px; text-wrap:balance; }
.hero h1 span { color:var(--accent); text-shadow:0 0 34px #6ef0ca35; }
.intro { font-size:1.12rem; max-width:660px; color:#d0dae6; }
.button { display:inline-flex; gap:12px; align-items:center; margin-top:14px; padding:12px 18px; border:1px solid #aaffea66; border-radius:10px; background:linear-gradient(135deg,#7af2d1,#51dcb9); color:#06251d; font-weight:850; box-shadow:0 10px 35px #54e1b523; transition:transform .2s ease, box-shadow .2s ease; }
.button:hover { text-decoration:none; transform:translateY(-3px); box-shadow:0 14px 42px #54e1b547; }
.hero-topics { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.hero-topics button { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #d5edff27; border-radius:999px; background:#0b1729b8; color:#e1ecf7; font:inherit; font-size:.84rem; line-height:1.2; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.hero-topics button:hover { transform:translateY(-2px); background:#183044e8; border-color:#6ef0ca8a; }
.hero-topics button span { font-size:1rem; }
.stats { display:flex; gap:42px; margin-top:34px; }
.stats div { display:grid; }
.stats strong { font-size:1.2rem; }
.stats span { font-size:.85rem; color:#b8c7d8; }
main { max-width:1168px; margin:auto; padding:0 24px; }
.section { padding:82px 0; }
.section h2 { font-size:clamp(2rem,4vw,3rem); line-height:1.15; letter-spacing:-.04em; margin:0 0 12px; text-wrap:balance; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.section-heading p:not(.eyebrow) { color:var(--muted); margin:0; }
.directory-count { flex:none; margin-bottom:7px; padding:8px 12px; border:1px solid #6ef0ca39; border-radius:999px; background:#12273a; color:#c4d5e7; font-size:.84rem; }
.directory-count span { color:var(--accent); }
.directory-count strong { color:white; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:14px; margin:32px 0 12px; }
.filters label { font-size:.85rem; font-weight:700; color:#c7d4e2; }
.filters input, .filters select { display:block; width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#101c2e; color:var(--text); font:inherit; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.filters input:focus, .filters select:focus { outline:none; border-color:var(--accent); background:#13233a; box-shadow:0 0 0 3px #6ef0ca1e; }
.result-count { display:inline-flex; margin:14px 0; padding:5px 10px; border:1px solid #273951; border-radius:999px; background:#0e1929; color:#c6d5e5; font-size:.85rem; }
.api-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.show-more { display:flex; width:max-content; margin:24px auto 0; }
.show-more[hidden] { display:none; }
.api-card { position:relative; overflow:hidden; min-height:235px; padding:19px; border:1px solid #2a3a51; border-radius:15px; background:linear-gradient(145deg,#142238 0%,#101a2b 78%); animation: rise-in .45s both; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.api-card::before { position:absolute; top:0; left:18px; right:18px; height:2px; content:""; border-radius:0 0 99px 99px; background:linear-gradient(90deg,var(--accent),var(--blue),var(--violet)); opacity:.48; transition:opacity .2s ease; }
.api-card:hover { transform:translateY(-5px); border-color:#6ef0ca70; box-shadow:0 18px 42px #0005; }
.api-card:hover::before { opacity:1; }
.card-top { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.category-icon { display:grid; width:36px; height:36px; place-items:center; border:1px solid #90bfff30; border-radius:11px; background:linear-gradient(145deg,#203c57,#1a2942); font-size:1.05rem; box-shadow:inset 0 1px #ffffff0c; }
.tag { display:inline-block; color:#a9d8ff; font-size:.76rem; font-weight:750; letter-spacing:.025em; }
.api-card h3 { margin:0 0 5px; font-size:1.08rem; line-height:1.35; }
.api-card p { color:#bdc9d8; font-size:.9rem; margin:8px 0 12px; }
.api-card .key-tag { display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:#91a2b7; font-size:.76rem; }
.key-status { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; background:#1e293b; color:#d3deea; font-weight:700; }
.key-status::before { width:6px; height:6px; content:""; border-radius:50%; background:#a8b7c9; }
.key-status-no { background:#10372f; color:#9ef3d4; }
.key-status-no::before { background:#6ef0ca; }
.key-status-yes { background:#342b48; color:#d3c4ff; }
.key-status-yes::before { background:#b4a0ff; }
.key-status-optional { background:#343523; color:#e6df9d; }
.key-status-optional::before { background:#ded075; }
.card-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; padding-top:12px; border-top:1px solid #ffffff12; font-size:.82rem; }
.card-links a { color:#9ccfff; }
.card-links a:hover { color:#d9efff; }
.caveat, .source-note { color:var(--muted); font-size:.9rem; margin-top:24px; }
.how-section, .datasets-section { border-top:1px solid var(--line); }
.datasets-section { position:relative; overflow:hidden; margin:0 0 68px; padding:54px 40px; border:1px solid #407c8061; border-radius:20px; background:radial-gradient(ellipse at 88% 18%,#54e1b51d,transparent 38%),linear-gradient(120deg,#11243a,#101e2e 68%,#123333); }
.datasets-section::after { position:absolute; right:7%; top:18%; content:"🗂️"; font-size:clamp(4rem,9vw,7rem); opacity:.75; filter:drop-shadow(0 12px 25px #0005); transform:rotate(8deg); }
.datasets-section h2, .datasets-section p { position:relative; z-index:1; max-width:760px; }
.datasets-section > p:not(.eyebrow) { color:#bdc9d8; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:32px 0; }
.steps article { background:linear-gradient(145deg,#142238,#101a2b); border:1px solid #2a3a51; border-radius:15px; padding:21px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.steps article:hover { transform:translateY(-4px); border-color:#6ef0ca70; box-shadow:0 12px 30px #0003; }
.steps article>span { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#15352f; color:var(--accent); font-weight:850; }
.steps h3 { margin:12px 0 4px; }
.steps p { color:var(--muted); margin:0; }
pre { overflow:auto; padding:20px; border:1px solid #2a3a51; border-radius:14px; background:#070d17; color:#c6f4e7; box-shadow:0 12px 34px #0002; }
footer { border-top:1px solid var(--line); padding:34px max(24px,calc((100% - 1168px)/2)); color:var(--muted); font-size:.9rem; background:#070d17; }
footer p { margin:6px 0; }
@keyframes rise-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes orbit-drift { from { transform:translate3d(0,-10px,0) rotate(-8deg); } to { transform:translate3d(-22px,18px,0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width:800px) {
  .hero { background-position:57% center; }
  .api-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filters { grid-template-columns:1fr 1fr; }
  .search-label { grid-column:1/-1; }
  .section-heading { align-items:flex-start; flex-direction:column; }
}
@media (max-width:540px) {
  .nav-links { gap:8px 11px; flex-wrap:wrap; justify-content:flex-end; font-size:.8rem; }
  .nav-links a { font-size:.82rem; }
  .hero { min-height:auto; padding-bottom:38px; background-image:linear-gradient(90deg,rgba(7,15,27,.94),rgba(7,15,27,.74)),linear-gradient(0deg,#0b1524 0%,transparent 42%),url("assets/api-network-hero.png"); background-position:55% center; }
  .hero-content { padding-top:52px; }
  .hero-topics { gap:7px; }
  .hero-topics button { padding:7px 9px; font-size:.79rem; }
  .stats { gap:20px; }
  .api-grid, .steps, .filters { grid-template-columns:1fr; }
  .section { padding:60px 0; }
  .datasets-section { padding:36px 24px; }
  .datasets-section::after { top:auto; right:7%; bottom:6%; font-size:4rem; opacity:.4; }
  .hero::before { right:-16rem; }
}