:root {
  --bg: #0b0c10;
  --panel: #121318;
  --text: #e8e8ea;
  --muted: #b9bcc5;
  --brand: #82d1ff;
  --accent: #7CFFCB;
  --border: #2a2d37;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, #0b0c10 0%, #111319 100%);
  color: var(--text);
  line-height: 1.6;
}
img { 
  max-width: 100%; height: auto; display: block; 
}
a { 
  color: var(--brand); text-decoration: none; 
}
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; display: inline-block; padding: .5rem .75rem; background: #000; }

.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); background: rgba(10,11,16,.6); border-bottom: 1px solid var(--border); }
.site-header .brand { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-weight: 700; letter-spacing: .2px; }

.menu { list-style: none; margin: 0; padding: 0 1rem 1rem; display: none; }
.menu.open { display: block; }
.menu li { margin: .25rem 0; }
.menu a { display: block; padding: .5rem .75rem; border-radius: .5rem; }
.menu a.active, .menu a:hover { background: rgba(130, 209, 255, .15); }

.nav-toggle { margin-left: 1rem; padding: .5rem .75rem; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: .5rem; }

@media (min-width: 800px) {
  nav { display: flex; align-items: center; justify-content: space-between; }
  .nav-toggle { display: none; }
  .menu { display: flex; padding: 0 1rem 0 0; gap: .25rem; }
  .menu li { margin: 0; }
}

.hero { padding: 4rem 1rem; text-align: center; max-width: 70rem; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); margin: 0 0 .5rem; }
.btn { display: inline-block; margin-top: .75rem; padding: .75rem 1rem; background: linear-gradient(90deg, var(--brand), var(--accent)); color: #081018; font-weight: 700; border: 0; border-radius: .75rem; }
.btn:hover { filter: brightness(1.05); }

.cards-grid { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1rem; max-width: 70rem; margin: 2rem auto; padding: 0 1rem; }
.card { background: radial-gradient(1200px 400px at 0% 0%, rgba(130,209,255,.12), transparent 40%), var(--panel); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.card h2 { margin: .75rem 1rem 0; }
.card p { margin: .25rem 1rem 1rem; color: var(--muted); }
.card .text-link { margin: 0 1rem 1rem; display: inline-block; }

@media (min-width: 640px) { .cards-grid { --cols: 2; } }
@media (min-width: 1024px) { .cards-grid { --cols: 3; } }

.page-header { max-width: 70rem; margin: 1rem auto; padding: 0 1rem; }

.columns { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 70rem; margin: 1rem auto; padding: 0 1rem; }
@media (min-width: 900px) { .columns { grid-template-columns: 1fr 1fr; } }

.checklist { display: grid; grid-template-columns: 1fr; gap: .25rem; padding-left: 1rem; }

.data-table { width: min(70rem, 100%); margin: 1rem auto; border-collapse: collapse; }
.data-table caption { text-align: left; font-weight: 700; margin-bottom: .5rem; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: .5rem .6rem; }
.data-table thead th { background: rgba(130,209,255,.1); }

.form { max-width: 40rem; margin: 1rem auto 2.5rem; padding: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; }
.form-field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.form input, .form select, .form textarea { background: #0f1117; color: var(--text); border: 1px solid var(--border); padding: .6rem .7rem; border-radius: .5rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

.site-footer { border-top: 1px solid var(--border); margin-top: 2rem; padding: 1.25rem; text-align: center; color: var(--muted); }

.site-header .brand img { 
    width: 30px; 
    height: 30px; 
}