@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Prompt:wght@600;700&display=swap');
:root {
  --ink: #1e2f28; --muted: #5a7066; --paper: #eef5f0; --line: rgba(30,47,40,0.12);
  --font: 'Anuphan', sans-serif; --heading: 'Prompt', 'Anuphan', sans-serif; --mono: 'IBM Plex Mono', 'Anuphan', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); min-height: 100vh; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .55rem 1.25rem; background: var(--ink); color: #fff; font-size: .82rem; }
.demo-bar strong { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #7ec4a0; font-weight: 500; }
.demo-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-bar a { padding: .35rem .75rem; border: 1px solid rgba(255,255,255,.25); font-size: .78rem; font-weight: 500; }
.demo-bar a.is-primary { background: #2f7a5b; border-color: #2f7a5b; }
.wrap { width: min(100% - 2.5rem, 980px); margin: 0 auto; padding: 3.5rem 0 4rem; }
.head { margin-bottom: 2.5rem; max-width: 36rem; }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #2f7a5b; margin-bottom: .65rem; }
.head h1 { font-family: var(--heading); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin-bottom: .65rem; }
.head p { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.card { background: #fff; border: 1.5px solid var(--ink); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; min-height: 260px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 4px 4px 0 var(--ink); }
.card--a .tag { background: #d5ebe0; color: #246349; }
.card--a .cta { color: #246349; }
.card--b { border-color: #1a2740; }
.card--b:hover { box-shadow: 4px 4px 0 #1a2740; }
.card--b .tag { background: #ffe0db; color: #c94738; }
.card--b .cta { color: #c94738; }
.card--c { background: #141816; color: #ebe6dc; border-color: #141816; }
.card--c:hover { box-shadow: 4px 4px 0 #b8a07a; }
.card--c .tag { background: #b8a07a; color: #141816; }
.card--c p { color: rgba(235,230,220,.7); }
.card--c .cta { color: #cfc0a0; }
.tag { align-self: flex-start; font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .55rem; font-weight: 500; }
.card h2 { font-family: var(--heading); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.card p { font-size: .95rem; color: var(--muted); flex: 1; }
.cta { font-weight: 600; font-size: .92rem; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; } }