:root{
  --bg: #f6f6f5;
  --card: #ffffff;
  --accent-color: #36620d; /* Stoakraxler updated green */
  --accent: linear-gradient(90deg,var(--accent-color),#6bb24b);
  --text: #162029;
  --muted: #6b7680;
}
*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg); color:var(--text);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.page{width:100%; max-width:420px}
.card{
  background:var(--card); border-radius:14px; padding:24px; box-shadow:0 6px 18px rgba(16,24,32,0.08);
  text-align:center; border:1px solid rgba(22,32,41,0.04);
}
.avatar{width:96px;height:96px;padding: 10px;margin:0 auto;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent;box-shadow:0 6px 18px rgba(54,98,13,0.08);border: 3px solid var(--accent-color)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.name{margin:14px 0 0;font-size:20px}
.bio{margin:0 0 36px;color:var(--muted);font-size:14px}
.links{display:flex;flex-direction:column;gap:12px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(22,32,41,0.06);cursor:pointer;font-weight:700;color:var(--text);background:rgba(8,10,12,0.02);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(16,24,32,0.06)}
.btn .emoji{font-size:18px}
.btn .icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.btn .icon svg{width:20px;height:20px;display:block}
.btn.primary{background:var(--accent);color:#fff;background-clip:padding-box}
.btn.small{padding:8px 12px;border-radius:10px;font-weight:600}
@media(min-width:640px){.card{padding:36px}}

/* simple link styles when rendered as <a> */
a.btn{text-decoration:none;display:inline-flex}

/* Brand colors for social icons (SVGs use fill="currentColor") */
/* Use fill on svg and child elements; !important to override inline fills in external SVG files */
a.btn[data-icon="phone"] .icon svg,
a.btn[data-icon="phone"] .icon svg *{fill:var(--accent-color) !important; color:var(--accent-color)}
a.btn[data-icon="mail"] .icon svg,
a.btn[data-icon="mail"] .icon svg *{fill:var(--accent-color) !important; color:var(--accent-color)}
a.btn[data-icon="facebook"] .icon svg,
a.btn[data-icon="facebook"] .icon svg *{fill:#1877F2 !important; color:#1877F2}
a.btn[data-icon="youtube"] .icon svg,
a.btn[data-icon="youtube"] .icon svg *{fill:#FF0000 !important; color:#FF0000}
a.btn[data-icon="instagram"] .icon svg,
a.btn[data-icon="instagram"] .icon svg *{fill:#E1306C !important; color:#E1306C}
a.btn[data-icon="tiktok"] .icon svg,
a.btn[data-icon="tiktok"] .icon svg *{fill:#69C9D0 !important; color:#69C9D0}
a.btn[data-icon="globe"] .icon svg,
a.btn[data-icon="globe"] .icon svg *{fill:var(--accent-color) !important; color:var(--accent-color)}