/* ecseti.org */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

:root {
  --bg: #050508;
  --bg2: #080a0e;
  --border: rgba(90,106,122,0.15);
  --accent: #8fa8bf;
  --text: #c8cdd4;
  --dim: #5a6a7a;
  --heading: #d0d8e0;
  --sans: 'Inter',-apple-system,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--heading); }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center;
  padding:14px 28px;
  background:rgba(5,5,8,0.85);
  backdrop-filter:blur(8px);
}
nav .logo {
  font-size:12px; font-weight:400; letter-spacing:3px;
  color:var(--accent); margin-right:auto; text-transform:uppercase;
  text-decoration:none;
}
nav .links { display:flex; gap:22px; }
nav .links a {
  font-size:11px; color:var(--dim); letter-spacing:0.5px;
  transition:color .3s;
}
nav .links a:hover { color:var(--accent); }

/* SECTION */
section { max-width:900px; margin:0 auto; padding:24px 24px; }
section h2 {
  font-size:14px; font-weight:400; color:var(--accent);
  letter-spacing:2px; margin-bottom:24px; padding-bottom:8px;
  border-bottom:1px solid var(--border); text-transform:uppercase;
}
section h3 { font-size:14px; font-weight:400; color:var(--heading); margin:24px 0 8px; }
section p { margin-bottom:16px; font-size:14px; font-weight:300; color:var(--dim); }

/* CARDS */
.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin:24px 0;
}
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; padding:24px;
}
.card h3 {
  font-size:12px; font-weight:400; color:var(--accent);
  letter-spacing:1px; text-transform:uppercase; margin:0 0 12px;
}
.card p { font-size:13px; color:var(--dim); margin:0; }

/* CODE */
pre {
  font-size:12px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; padding:16px; overflow-x:auto; margin:16px 0;
}
code {
  font-size:12px;
  background:rgba(143,168,191,0.08); padding:2px 6px; border-radius:3px;
}
pre code { background:none; padding:0; }

/* DATA TABLE */
.data-table {
  width:100%; border-collapse:collapse; font-size:12px;
  margin:16px 0;
}
.data-table th, .data-table td {
  padding:8px 12px; border:1px solid var(--border); text-align:left;
}
.data-table th { background:var(--bg2); color:var(--accent); font-size:10px; letter-spacing:0.5px; text-transform:uppercase; }
.data-table td { color:var(--text); }
.data-table tr:hover td { background:rgba(143,168,191,0.04); }

.badge {
  display:inline-block; padding:2px 8px; border-radius:3px;
  font-size:10px; font-weight:400; letter-spacing:0.5px;
}
.badge.eti { background:rgba(143,168,191,0.15); color:var(--accent); }
.badge.rfi { background:rgba(154,90,90,0.15); color:#9a6a6a; }
.badge.noise { background:rgba(90,106,122,0.1); color:var(--dim); }

/* FOOTER */
footer {
  text-align:center; padding:32px;
  font-size:10px; color:#2a3444;
  background:var(--bg);
}

/* Content offset for fixed nav */
.page-content { padding-top:52px; }

/* RESPONSIVE */
@media(max-width:700px) {
  nav { padding:8px 16px; }
  nav .links { gap:14px; }
  section { padding:24px 16px; }
}