@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#F6F1E9; --ink:#1B1917; --muted:#6B6459; --line:#E3DBCE;
  --clay:#C8562F; --clay-dark:#A8451F; --card:#FCFAF6; --code-bg:#211E1B; --code-ink:#EDE7DC;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
serif,.serif{font-family:'Fraunces',Georgia,serif}
a{color:inherit}

nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:20px;letter-spacing:-.01em}
.logo b{color:var(--clay)}
.nav-tag{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 12px}

.hero{padding:56px 0 40px;max-width:760px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);margin-bottom:20px}
h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(38px,6vw,62px);line-height:1.04;letter-spacing:-.02em;margin-bottom:22px}
h1 em{font-style:italic;color:var(--clay)}
.lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:600px}

.cta{display:flex;gap:10px;margin:34px 0 14px;flex-wrap:wrap}
.cta input{flex:1;min-width:230px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);font-size:15px;font-family:inherit;color:var(--ink);outline:none}
.cta input:focus{border-color:var(--clay)}
.cta button{padding:14px 26px;border:0;border-radius:12px;background:var(--clay);color:#fff;font-size:15px;
  font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s;white-space:nowrap}
.cta button:hover{background:var(--clay-dark)}
.cta button:disabled{opacity:.6;cursor:default}
.note{font-size:13px;color:var(--muted)}
.ok{color:#2C7A4B;font-weight:500}

.code{background:var(--code-bg);color:var(--code-ink);border-radius:16px;padding:22px 24px;margin:44px 0;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:1.7;overflow-x:auto;
  box-shadow:0 20px 50px -20px rgba(40,30,20,.4)}
.code .c{color:#8B8478}.code .k{color:#E0996B}.code .s{color:#9DC08B}.code .p{color:#C8562F}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:20px 0 60px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.feat h3{font-family:'Fraunces',serif;font-weight:500;font-size:19px;margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--muted)}
.feat .ic{font-size:22px;margin-bottom:12px;display:block}

.usecases{margin:10px 0 60px}
.usecases h2{font-family:'Fraunces',serif;font-weight:500;font-size:30px;margin-bottom:24px;letter-spacing:-.01em}
.uc{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.uc b{font-weight:600}.uc span{color:var(--muted);font-size:14.5px}
.uc .n{font-family:'Fraunces',serif;color:var(--clay);font-size:20px;min-width:36px}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:var(--clay);text-decoration:none}
.switch{font-size:12px;color:var(--muted)}
.switch a{color:var(--clay);text-decoration:none}