:root {
  /* Monochrome classy palette */
  --bg: #070707;           /* very dark background */
  --surface: #0d0d0d;      /* slightly lighter surface */
  --muted: #9a9a9a;        /* muted gray for secondary text */
  --text: #f5f5f5;         /* primary text */
  --accent: #bdbdbd;       /* light gray accent */
  --accent-foreground: #0b0b0b; /* text color on accent */
  --radius: 10px;
  --container: 1000px;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #020202 60%);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container { max-width: var(--container); margin: 0 auto; padding: 1.5rem; }

.site-header { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(255,255,255,0.03); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text); }
.logo { width:40px; height:40px; display:block; }
.brand-text { font-weight:600; letter-spacing:.2px; }
.site-nav a { color:var(--muted); text-decoration:none; margin:0 .6rem; }
.site-nav a:hover { color:var(--text); }
.cta { background: var(--accent); color: var(--accent-foreground); padding:.45rem .8rem; border-radius:8px; text-decoration:none; font-weight:600; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }

.hero { padding:4rem 0; text-align:center; }
.site-title { font-size:2.4rem; margin:.2rem 0; }
.site-sub { color:var(--muted); margin-bottom:1rem; }
.btn { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); padding:.6rem 1rem; border-radius:8px; text-decoration:none; }

.intro { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; margin-top:2rem; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0)); border:1px solid rgba(255,255,255,0.02); padding:1.25rem; border-radius: var(--radius); }
.card h2 { margin-top:0; }

.site-main { padding: 2rem 0; }
.site-footer { border-top:1px solid rgba(255,255,255,0.02); padding:1.25rem 0; color:var(--muted); }

@media (max-width:700px){
  .header-inner { flex-direction:column; align-items:flex-start; }
  .site-nav { order:3; }
}

/* Small utility */
a { color: var(--accent); }