/* NicHallSoftware website (and Neon Reactor pages): plain static pages in the app's own colours */
:root { --bg: #08071E; --panel: #11142A; --text: #E8FCFF; --muted: #9599AE; --cyan: #00E5FF; --magenta: #FF2A6D; --yellow: #FFE600; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0%, #0E3A55 0%, #0D1236 40%, var(--bg) 80%) fixed; color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--cyan); }
.top-nav { border-bottom: 1px solid rgba(0, 229, 255, .25); }
.top-nav .inner { max-width: 820px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 22px; align-items: center; }
.top-nav .home { margin-right: auto; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: 2px; }
.top-nav .home span { color: var(--cyan); }
.top-nav a { text-decoration: none; font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; font-size: 15px; }
main { max-width: 820px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 34px; letter-spacing: 1px; margin: 10px 0 4px; }
h2 { font-size: 21px; margin-top: 34px; color: var(--cyan); }
.updated, .muted { color: var(--muted); }
.hero { text-align: center; padding-top: 40px; }
.hero img { width: 180px; height: 180px; border-radius: 40px; box-shadow: 0 0 60px rgba(0, 229, 255, .35); }
.tag { font-family: ui-monospace, Consolas, monospace; color: var(--cyan); letter-spacing: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 30px; text-align: left; }
.card { background: var(--panel); border: 1px solid rgba(0, 229, 255, .45); padding: 16px 18px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.apps { display: grid; gap: 14px; margin-top: 30px; }
.app { display: flex; gap: 18px; align-items: center; background: var(--panel); border: 1px solid rgba(0, 229, 255, .45);
  padding: 16px 18px; color: var(--text); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.app:hover { border-color: var(--cyan); background: #161a36; }
.app img { width: 72px; height: 72px; border-radius: 16px; flex: none; }
.app h3 { margin: 0 0 4px; font-size: 19px; }
.app p { margin: 0; color: var(--muted); font-size: 15px; }
footer { text-align: center; color: var(--muted); font-size: 14px; padding: 30px 20px; }