:root {
  --fg:#1b1b1b; --muted:#3c3b39;
  --paper1:#e8ddc7; --paper2:#d5c2a4;
  --panel:#e8ddc7dd; --green:#204f3a; --cta:#3b7255;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Inter',sans-serif;
  background:var(--paper1); color:var(--fg);
}
.viewport{
  position:relative;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--paper1),var(--paper2));
  min-height:100vh;overflow:hidden;
}
.illu{position:absolute;inset:0;opacity:0.18;mix-blend-mode:multiply;}
.icon{
  position:absolute;width:48px;height:48px;opacity:0.25;
  fill:none;stroke:#7b6d55;stroke-width:1.6;
}
.icon.badge{left:32px;top:32px;}
.icon.compass{right:32px;top:32px;}
.panel{
  position:relative;text-align:center;width:min(720px,92%);
  padding:64px 32px;border-radius:24px;
  background:var(--panel);border:1px solid rgba(128,99,68,0.25);
  backdrop-filter:blur(2px);
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
h1{margin:0 0 10px;font-size:clamp(36px,6vw,64px);
   letter-spacing:.05em;font-weight:800;color:var(--green);}
p{margin:6px 0 18px;color:var(--muted);font-size:clamp(14px,2.2vw,18px);}
.cta{
  display:inline-block;padding:12px 20px;border-radius:999px;
  text-decoration:none;font-weight:700;color:#fff;
  background:var(--cta);border:none;
  transition:transform .06s ease,filter .2s ease;
}
.cta:hover{filter:brightness(1.1);}
.cta:active{transform:translateY(1px);}
footer{margin-top:16px;font-size:12px;color:#555;}
.umlaut{position:relative;display:inline-block;}
.umlaut::before,.umlaut::after{content:"";position:absolute;width:.18em;height:.18em;border-radius:50%;background:currentColor;top:-.28em;}
.umlaut::before{left:.05em}.umlaut::after{left:.33em}