:root{
  --bg:#0a0a0a;
  --panel:#141414;
  --panel-2:#1b1712;
  --gold:#C9A24B;
  --gold-soft:#e3c37e;
  --line:rgba(201,162,75,.28);
  --txt:#f5f1e9;
  --muted:#a79f8f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(100% 50% at 50% 120%, rgba(201,162,75,.07), transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
.wrap{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:44px 20px calc(40px + env(safe-area-inset-bottom));
}

/* HERO */
.hero{text-align:center;margin-bottom:30px}
.avatar{
  width:132px;height:132px;margin:0 auto 18px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(145deg,var(--gold-soft),var(--gold) 55%,#7d6427);
  box-shadow:0 0 0 6px rgba(201,162,75,.08),0 14px 40px rgba(0,0,0,.6);
}
.avatar img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
  border:3px solid var(--bg);
}
.name{
  font-size:23px;font-weight:700;letter-spacing:.2px;
  margin-bottom:10px;
}
.bio{
  font-size:14.5px;color:#e8e2d6;max-width:340px;
  margin:0 auto 12px;
}
.tags{
  font-size:12px;color:var(--gold-soft);letter-spacing:.6px;
  text-transform:uppercase;font-weight:600;
}

/* LINKS */
.links{display:flex;flex-direction:column;gap:14px}

.card{
  position:relative;display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--txt);
  background:linear-gradient(180deg,var(--panel),#0f0f0f);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:18px 18px;
  overflow:hidden;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.card:active{transform:scale(.985)}
@media(hover:hover){
  .card:hover{
    transform:translateY(-2px);
    border-color:var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(201,162,75,.12);
  }
}

.card-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.card-title{font-size:16px;font-weight:700;letter-spacing:.2px}
.card-sub{font-size:12.5px;color:var(--muted);line-height:1.3}
.card-arrow{
  font-size:24px;color:var(--gold);opacity:.7;
  line-height:1;transition:transform .2s ease,opacity .2s ease;
  flex-shrink:0;
}
@media(hover:hover){ .card:hover .card-arrow{transform:translateX(3px);opacity:1} }

/* FEATURED cards with background emblem + gold glow */
.card.feat{
  background:linear-gradient(180deg,var(--panel-2),#0d0b08);
  border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 0 30px rgba(201,162,75,.05);
}
.card.feat .card-title{color:#fff}
.card.feat::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(201,162,75,.16),transparent 45%);
  pointer-events:none;
}
.card-bg{
  position:absolute;right:-18px;top:50%;transform:translateY(-50%);
  width:118px;height:118px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  opacity:.16;filter:saturate(1.05);
  pointer-events:none;
}
.card.feat .card-txt{position:relative;z-index:1}
.card.feat .card-arrow{position:relative;z-index:1;color:var(--gold-soft);opacity:1}
@media(hover:hover){
  .card.feat:hover{
    box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 26px rgba(201,162,75,.22),inset 0 0 30px rgba(201,162,75,.08);
  }
  .card.feat:hover .card-bg{opacity:.24}
}

/* SECONDARY discreet card */
.card.sub{
  background:transparent;
  border:1px dashed rgba(201,162,75,.32);
  box-shadow:none;
  padding:15px 18px;
}
.card.sub .card-title{font-size:15px;font-weight:600;color:#e8e2d6}
.card.sub .card-arrow{font-size:20px;opacity:.55}

/* MINI social cards */
.card.mini{padding:15px 18px}
.card.mini .card-title{font-size:15px}
.card-icon{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:rgba(201,162,75,.1);color:var(--gold-soft);
  border:1px solid rgba(201,162,75,.2);
}

.foot{
  text-align:center;margin-top:30px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(201,162,75,.5);font-weight:600;
}