/* AC Matrix site — the app's own palette, one stylesheet, no dependencies. */
:root {
  --bg: #0b0b12;
  --panel: #15161f;
  --line: #262838;
  --fg: #eceef5;
  --muted: #9aa2b6;
  --accent: #2B4FD9;
  --accent2: #7A2BD9;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #8fb2ff; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

header.site {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(43,79,217,.30), rgba(122,43,217,.22) 60%, transparent);
}
header.site .wrap { display: flex; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 18px; }
header.site img { width: 42px; height: 42px; border-radius: 10px; }
header.site strong { font-size: 17px; letter-spacing: -.01em; }
nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--fg); }

.hero { padding: 62px 0 44px; text-align: center; }
.hero img.icon { width: 92px; height: 92px; border-radius: 21px; margin-bottom: 22px; }
h1 { font-size: 40px; line-height: 1.12; margin: 0 0 14px; letter-spacing: -.02em; }
.tagline { font-size: 19px; color: var(--muted); margin: 0 auto; max-width: 30em; }

h2 { font-size: 21px; margin: 44px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 26px 0 6px; }
p, li { color: #cfd4e2; }
.muted { color: var(--muted); }
small { color: var(--muted); }

.shots { display: flex; gap: 14px; overflow-x: auto; padding: 26px 0 8px; }
.shots img { width: 210px; border-radius: 14px; border: 1px solid var(--line); flex: none; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin: 18px 0;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.mail {
  display: inline-block; margin-top: 6px; padding: 11px 20px; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #fff; text-decoration: none; font-weight: 600;
}
dl dt { font-weight: 600; margin-top: 16px; }
dl dd { margin: 4px 0 0; color: #cfd4e2; }

footer.site { border-top: 1px solid var(--line); margin-top: 60px; padding: 26px 0 50px; font-size: 14px; }
footer.site .wrap { display: flex; gap: 18px; flex-wrap: wrap; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--fg); }
footer.site .spacer { flex: 1; }