:root {
  --bg: #121410;
  --bg-card: #1a1c17;
  --bg-card-hover: #1f211c;
  --border: #2a2c26;
  --text: #e4e4dc;
  --text-muted: #96988e;
  --text-dim: #6a6c64;
  --accent: #84cc16;
  --accent-glow: rgba(132,204,22,0.15);
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.nav {
  position:fixed; top:0; left:0; right:0;
  background: var(--bg); border-bottom:1px solid var(--border);
  z-index:100; padding:0 24px;
}
.nav-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:56px;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font-weight:600; font-size:16px;
}
.nav-logo img { height:28px; width:auto; }
.nav-back { color:var(--text-muted); text-decoration:none; font-size:14px; }
.nav-back:hover { color:var(--text); }

.hero {
  padding:120px 24px 80px; text-align:center;
  max-width:720px; margin:0 auto;
}
.badge {
  display:inline-block; background:var(--accent-glow);
  color:var(--accent); border:1px solid rgba(132,204,22,0.25);
  border-radius:999px; padding:4px 14px;
  font-size:13px; font-weight:500; letter-spacing:0.02em; margin-bottom:24px;
}
.hero h1 {
  font-family:'IBM Plex Serif', serif;
  font-size:clamp(36px,6vw,56px); font-weight:700;
  line-height:1.12; margin-bottom:20px; letter-spacing:-0.02em;
}
.hero p {
  font-size:18px; color:var(--text-muted);
  max-width:520px; margin:0 auto 32px; line-height:1.6;
}
.hero .cta {
  display:inline-block; background:var(--text); color:var(--bg);
  padding:14px 32px; border-radius:999px;
  font-weight:600; font-size:15px; text-decoration:none;
  transition:background .2s, transform .15s;
}
.hero .cta:hover { background:var(--accent); transform:translateY(-1px); }

.features {
  max-width:1000px; margin:0 auto; padding:40px 24px 80px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px;
}
.feature-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px;
  transition:background .2s, border-color .2s;
}
.feature-card:hover { background:var(--bg-card-hover); border-color:var(--text-dim); }
.feature-card .icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:16px; background:var(--accent-glow);
}
.feature-card h3 {
  font-family:'IBM Plex Serif', serif;
  font-size:18px; font-weight:600; margin-bottom:8px;
}
.feature-card p { font-size:14px; color:var(--text-muted); line-height:1.55; }

.contact {
  max-width:600px; margin:0 auto; padding:0 24px 100px; text-align:center;
}
.contact h2 {
  font-family:'IBM Plex Serif', serif;
  font-size:28px; font-weight:700; margin-bottom:12px;
}
.contact p { color:var(--text-muted); font-size:15px; margin-bottom:24px; }
.contact-links {
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
  color:var(--text-muted); font-size:15px;
}
.contact-links a { color:var(--accent); text-decoration:none; font-weight:500; }
.contact-links a:hover { text-decoration:underline; }

.footer {
  text-align:center; padding:32px 24px;
  border-top:1px solid var(--border); color:var(--text-dim); font-size:13px;
}
.footer a { color:var(--text-muted); text-decoration:none; }
.footer a:hover { color:var(--text); }

@media (max-width:640px) {
  .hero { padding:100px 20px 60px; }
  .hero h1 { font-size:32px; }
  .hero p { font-size:16px; }
  .features { grid-template-columns:1fr; padding:20px 20px 60px; }
  .contact { padding:0 20px 80px; }
}