:root{
  --bg:#2E3E31;        /* leather desk */
  --surface:#364b3c;   /* slightly lighter card */
  --ink:#F7EBDF;       /* parchment ink */
  --muted:#D5CBB3;     /* soft text */
  --accent:#D5A873;    /* warm brass */
  --accent-ink:#2B200F;/* contrast on accent */
  --ring:rgba(213,168,115,.5);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:radial-gradient(1200px 800px at 20% -10%,#3b5244 0%, var(--bg) 55%), var(--bg);
}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:24px}

/* Header / Nav */
header{display:flex;gap:18px;align-items:center;justify-content:space-between;margin:8px 0 22px}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#e9c89d);
  box-shadow:var(--shadow);display:grid;place-items:center;color:var(--accent-ink);font-weight:800;letter-spacing:.5px
}
.brand h1{font-size:20px;margin:0}
.brand p{margin:0;color:var(--muted);font-size:13px}

.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(247,235,223,.14);
  border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.03);color:var(--ink)
}
.nav a.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(213,168,115,.25)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:999px;
  padding:10px 16px;font-weight:600;cursor:pointer;transition:transform .06s ease,box-shadow .2s ease,border-color .2s ease
}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:rgba(247,235,223,.18);color:var(--ink);background:rgba(255,255,255,.03)}

/* Cards / Layout */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(4px)
}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;margin:28px 0}
.hero h2{font-size:34px;line-height:1.15;margin:0 0 12px}
.hero p.lede{font-size:18px;color:var(--muted);margin:0 0 16px}
.note{font-size:13px;color:var(--muted)}
.promise{margin-top:10px;border-left:4px solid var(--accent);padding-left:14px}
.promise strong{color:var(--accent)}

.section{margin-top:18px}
.section h2{margin:0 0 8px}
.section p{margin:0 0 10px;color:var(--muted)}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.app{display:flex;flex-direction:column;gap:12px}
.tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.app h3{margin:0;font-size:18px}
.app p{margin:0;color:var(--muted)}
.launch{display:inline-flex;align-items:center;gap:8px;margin-top:8px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);font-size:13px;color:var(--muted)
}
.chip b{color:var(--ink);font-weight:600}

/* Footer */
footer{margin:30px 0 12px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.heart{display:inline-block;transform:translateY(1px)}