:root{
  --bg:#090706;
  --surface:#15100d;
  --surface-2:#201713;
  --text:#fff7ec;
  --muted:#b9a99b;
  --border:rgba(255,232,201,.14);
  --brand:#b86f36;
  --brand-2:#f0a65b;
  --accent:#56d0a6;
  --grad:linear-gradient(135deg,#b86f36 0%,#f0a65b 46%,#56d0a6 100%);
  --font-sans:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Georgia","Times New Roman",serif;
  --coffee-shadow:0 34px 90px rgba(0,0,0,.55);
  --copper-glow:0 18px 70px color-mix(in srgb,var(--brand) 34%,transparent);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  background:
    radial-gradient(circle at 78% 14%, rgba(184,111,54,.24), transparent 34rem),
    radial-gradient(circle at 14% 8%, rgba(86,208,166,.15), transparent 28rem),
    radial-gradient(circle at 70% 82%, rgba(240,166,91,.12), transparent 31rem),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'