@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');

:root{
  --white:#ffffff;
  --graphite:#0f1115;
  --muted:#6b7280;
  --border:#e5e7eb;
  --panel:#fafafa;
  --radius:3px;

  --fs-12:12px;
  --fs-14:14px;
  --fs-18:18px;
  --fs-24:24px;
  --fs-32:32px;
  --fs-48:48px;

  --space:80px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system;
  background:var(--white);
  color:var(--graphite);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}

.container{max-width:1200px;margin:auto;padding:0 32px}

.header{
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:white;z-index:50
}

.headerInner{
  height:72px;display:flex;justify-content:space-between;align-items:center
}

.nav a{margin-left:24px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--graphite)}

.brand{font-size:18px;font-weight:400}

.hero{padding:120px 0}
.h1{font-size:48px;font-weight:200;margin-bottom:20px}
.h2{font-size:32px;font-weight:300;margin-bottom:20px}
.p{font-size:18px;color:var(--muted);max-width:700px}

.section{padding:100px 0;border-top:1px solid var(--border)}
.card{border:1px solid var(--border);border-radius:3px;background:var(--panel);padding:32px;margin-bottom:20px}

.footer{border-top:1px solid var(--border);padding:60px 0;font-size:12px;color:var(--muted)}